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

最新推荐文章于 2019-09-20 09:55:45 发布

最新推荐文章于 2019-09-20 09:55:45 发布 · 740 阅读

文章标签：

#json #ui #数据库

DWZ 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在DWZ框架中整合zTree插件，并实现点击树形菜单时动态添加图标到导航标签的功能。主要涉及后台JSON数据配置、前端JS代码修改及CSS样式设置。

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