此篇文章是基于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;}
相关推荐
dwz修改菜单图标,请按照说明进行修改
动态管理菜单,可以根据权限进行增删改查菜单和角色
通过自定义标签,简化dwz table分页
请多多关注 博文链接:https://q137681467.iteye.com/blog/2008087
DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题) 修复使用xheditor插件IE下兼容问题:IE下打开一个含有编辑器的页面,然后关闭,再打开不能录入问题 修复多文件上传插件uploadify 的html扩展方式,java读取不...
DWZ框架DWZ框架DWZ框架DWZ框架
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级 DWZ框架支持用html扩展的方式来代替...
DWZ
学习DWZ的建议 •通读DWZ文档,很多新手提的问题文档中都写了 •看demo每个组件演示效果和代码(留意组件html结构) •建议安装firebug,用firebug看html结构、CSS和调试JS都非常方便。见附录一 firebug介绍 •对于...
dwz thinkphp3.0 角色管理
dwz框架 asp.net mvc3;dwz框架 asp.net mvc3;dwz框架 asp.net mvc3
DWZ视频+文档
dwz时间控件
dwz 下拉框左右选择 dwz 下拉框左右选择 dwz 下拉框左右选择
DWZ合集 dwz-user-guide dwz_jui-master
dwz_jui 1.6.1版本;dwz_jui 最新版本;dwz_jui 1.6.1版本;dwz_jui 最新版本;
DWZ中文开发手册
dwz官方例子 开发环境: 1) 数据库:mysql 请修改 src/hibernate_mysql.cfg.xml这个文件的数据库连接 创建数据库dwz4j 导入测试数据:db/dwz4j.sql mysql -u root -p dwz4j < dwz4j.sql 2) JDK 1.6 3) 项目文件UTF-...
首先非常感谢DWZ官方整合了DWZ+ThinkPHP,方便我们PHPer的开发,DWZ的后台框架非常好用。 其次,本人在 DWZ官方 整合的基础上做了些修改,而且经测试完全可用,现在本人在此基础上开发项目。 修改的内容如下: 1、...
dwz前端框架手册