`
忘忧鸟
  • 浏览: 144969 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Dwz点击左侧菜单动态添加Tab标签图标

    博客分类:
  • DWZ
 
阅读更多

      此篇文章是基于ztree实现,若是dwz与ztree未整合,请先按照《DWZ和zTree整合(实现版)》文章整合。

需求描述:

        点击左侧树形菜单(target=navTab)时,在左侧Tab动态添加图标;树形菜单可以根据需要事先设置好,或者通过数据库读取。

先上效果图:



 

  实现思路:

         后台生成Json对象时,添加一个json属性,此属性就是前段图标class样式,命名可以随意取,此demo为tabIconCss属性;在加载树[zTree树]时,赋予tabIconCss属性;然后修改调用dwz.navTab.js中的openTab方法,添加class=#tabIconCss#属性。还要修改dwz.ui.js文件中的$("a[target=navTab]", $p).each(……);代码段;目的就是传递树节点Dom的tabIconCss属性。还需要在jquery.ztree.core-3.5.js添加tabIConCss属性,此步骤可以参考《dwz与ztree整合》篇实现。

dwz.ui.js代码如下:

var tabIconCss = $this.attr("tabIconCss") || "tabIconCss";
/**2nd dev add tabIconCss attribute end**/
var external = eval($this.attr("external") || "false");
var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
DWZ.debug(url);
if (!url.isFinishedTm()) {
	alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg"));
	return false;
}
//navTab.openTab(tabid, url,{title:title, fresh:fresh, external:external});
navTab.openTab(tabid, url,{title:title, fresh:fresh, external:external,tabIconCss:tabIconCss});

 dwz.navTab.js代码段:

/****2nd dev add tabIconCss start*************/
var tabFrag = '<li tabid="#tabid#"><a href="javascript:" title="#title#" class="#tabid#"><span><span class="#tabIconCss#">#title#</span></span></a><a href="javascript:;" class="close">close</a></li>';
this._tabBox.append(tabFrag.replaceAll("#tabid#", tabid).replaceAll("#title#", op.title).replaceAll("#tabIconCss#",op.tabIconCss));
/****2nd dev add tabIconCss end*************/

 Json代码段:

[{  id : 0,  
	pId : -1,  
	name : "搜索",  
	url : "demo/w_alert.html",  
	target : "navTab",  
	rel : "sl",
	tabIconCss:"home2_icon",
	//open:true,  
	children:[{  
		id : 1,  
		pId : 0,  
		name : "百度",  
		url : "demo/w_panel.html",  
		target : "navTab",  
		rel : "bd",
		tabIconCss:"home2_icon", 
		//open:true,
		children:[{  
			id : 1,  
			pId : 0,  
			name : "文库",  
			url : "demo/w_tabs.html",  
			target : "navTab",  
			rel : "wk",
			tabIconCss:"home2_icon"  
		}, {  
			id : 2,  
			pId : 0,  
			name : "地图",  
			url : "demo/w_dialog.html",  
			target : "navTab",  
			rel : "dt"  
		} ]  
	}, {  
		id : 2,  
		pId : 0,  
		name : "Google",  
		url : "http://www.google.com.cn",  
		target : "navTab",  
		rel : "gg"  
	} ]},{
		id : -2,  
		pId : -1,  
		name : "门户",  
		url : "http://www.sina.com.cn",  
		target : "navTab",  
		rel : "xl"  
	},{
		id : -3,  
		pId : -1,  
		name : "异步加载Tree",  
		url : "asyncTreeDemo.jsp",  
		target : "navTab",  
		rel : "ybjz"  
	}]; 

 css代码段:

.tabsPage .tabsPageHeader li .home2_icon,
.tabsPage .tabsPageHeader li.main .home2_icon { background:url(../default/images/home3.png) no-repeat; width:auto; padding:0 0 0 15px; background-position:0 3px;}

 

 

 

 

 

  • 大小: 43 KB
0
0
分享到:
评论

相关推荐

    dwz修改菜单图标

    通过以上步骤,我们可以成功地在DWZ框架中替换或添加自定义的菜单图标,从而提升网站或应用的视觉效果和用户体验。需要注意的是,修改框架默认设置时,应考虑到后续升级和维护,避免因个性化定制而带来的额外工作量...

    简单的dwz动态管理菜单

    通过JavaScript根据获取到的后台数据动态生成DOM元素,并添加相应的点击事件处理,实现菜单的点击跳转或展开收缩。 7. **安全性考虑**:在实现动态菜单时,需要防止SQL注入和跨站脚本攻击(XSS)。同时,对于敏感的...

    dwz图标拓展,减少审美疲劳

    "源码"标签表明“dwz图标拓展”可能包含了可自定义和扩展的源代码,这意味着开发者不仅可以直接使用提供的图标,还可以根据需要进行修改或添加新的图标。这种灵活性对于那些希望根据品牌规范或特定需求定制图标集的...

    通过自定义标签,简化dwz table分页

    本文将详细探讨如何通过自定义标签实现DWZ表格的分页功能,以提高开发效率和代码可维护性。 首先,我们需要理解DWZ分页的基本原理。DWZ内置的分页组件基于jQuery,提供了一套完整的分页模板和API接口。默认情况下,...

    DWZ后台框架源码!!!!

    菜单导航系统是DWZ框架中的另一大亮点,它允许开发者轻松创建多级菜单,菜单项可以根据权限动态生成,适应复杂的权限控制需求。 在压缩包“dwz-demo”中,通常包含了DWZ框架的示例代码和文档,通过学习和研究这些...

    DWZ使用帮助文档

    - **Tab组件扩展**: 为页面添加可交互的标签页。 - **Accordion组件**: 实现折叠面板效果。 - **容器高度自适应**: 使元素根据内容自动调整高度。 - **CSSTable**: 提供了一种简单的方法来创建和管理表格样式。 - **...

    DWZ帮助文档 PDF版

    3. 组件扩展:DWZ提供了Tab组件、Accordion组件、Table组件等多种UI组件的扩展,帮助开发者实现复杂的界面布局和交互。 4. CSS样式支持:DWZ框架具有内置的CSS样式集,开发者可以根据项目需求进行自定义。 5. 输入...

    简单实用国产jQuery UI框架 - DWZ富客户端框架DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题)

    DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题) 修复使用xheditor插件IE下兼容问题:IE下打开一个含有编辑器的页面,然后关闭,再打开不能录入问题 修复多文件上传插件uploadify 的html扩展方式,java读取不...

    dwz-demo-1.1.6RC1.zip_DEMO_dwz php_dwz-demo_dwz-ria_php dwz

    dwz框架支持RIA,意味着它可以创建具有高度互动性和动态性的网页应用,提升用户体验。 4. **dwz-demo**:这个部分是实际的项目文件,包含了使用dwz框架开发的各种示例页面和代码,帮助开发者了解如何在实际项目中...

    dwz 学习文档

    6. **Tab组件扩展**: 自定义Tab界面,支持动态添加和删除选项卡。 7. **Accordion组件**: 实现可折叠面板效果,适合展示多层次的信息结构。 8. **容器高度自适应**: 容器的高度可根据内容自动调整。 9. **CSS Table*...

    DWZ+富客户端框架使用手册_IT168文库.pdf

    - **Ajax链接扩展:**允许在页面中创建动态链接,点击后触发Ajax请求,而非传统的页面跳转。 - **navTab中链接ajaxpost扩展:**专门用于更新导航标签中的内容,通过Ajax方式刷新指定区域的数据。 - **dialog...

    dwzteam_dwz_jui_maste

    在DWZ UI框架中,开发者可以找到一系列的组件和工具,用于快速搭建页面布局、表单、按钮、提示框、对话框、菜单、导航等元素。这些组件遵循一致的设计风格,使得整个应用界面具有统一的视觉体验。此外,DWZ UI还提供...

    jqgird dwz 框架扩展

    通过DWZ的事件机制,可以在jqGrid的某些操作(如点击行、点击按钮)时触发相应的行为,实现复杂的功能。 总结,jqGrid与DWZ框架的整合能为Web应用带来高效的数据管理和用户友好的界面。通过理解两者的基本用法和...

    dwz学习实例

    例如,添加新数据时,我们可以使用DWZ的AjaxForm组件,通过异步提交表单,然后在回调函数中处理返回的结果,如显示成功提示或错误信息。删除操作类似,通常会有一个确认对话框,点击确认后发送Ajax请求,服务器返回...

    DWZ中文开发手册

    ### DWZ富客户端框架:深度解析与应用指南 #### 概述 DWZ富客户端框架,作为一款由国人自主研发的RIA(Rich Internet Application)框架,其核心构建在jQuery基础上,旨在提供一种简单实用、易于扩展且能快速进行...

    dwz框架 asp.net mvc3

    例如,使用DWZ的表格组件,可以通过Ajax调用MVC3的Controller中的Action获取数据,然后动态填充到表格中,提供快速的数据浏览和操作。 此外,DWZ的表单验证功能可以与ASP.NET MVC3的模型验证机制协同工作,保证...

    dwz框架官网实例

    DWZ提供了一系列的前端组件,如表格、表单、对话框、提示信息、菜单、按钮等,这些组件不仅美观,而且具有良好的可定制性和可扩展性,能够满足各种界面设计需求。 3. **Ajax交互** DWZ内置了Ajax处理机制,使得...

    thinkphp3_dwz

    标题“thinkphp3_dwz”指的是一个基于ThinkPHP 3.0框架与DWZ UI集成的项目,主要用于实现角色管理功能。在Web开发中,ThinkPHP是一个流行的PHP框架,而DWZ(Dynamic Web Zone)是一个前端jQuery UI框架,提供了一...

    dwz与thinkphp结合项目

    同时,DWZ会根据用户的登录状态和权限信息动态生成菜单,确保用户只能访问其有权操作的功能。 用户超时机制是保证系统安全的重要一环。在ThinkPHP中,我们可以设置session过期时间和检查机制。当用户长时间未操作,...

Global site tag (gtag.js) - Google Analytics