Dwz點擊左側菜單動態添加Tab標籤圖標

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