此篇文章是基于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;}