diydom.html
8.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - addHoverDom / removeHoverDom / addDiyDom</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.excheck-3.0.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.exedit-3.0.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var IDMark_Switch = "_switch",
IDMark_Icon = "_ico",
IDMark_Span = "_span",
IDMark_Input = "_input",
IDMark_Check = "_check",
IDMark_Edit = "_edit",
IDMark_Remove = "_remove",
IDMark_Ul = "_ul",
IDMark_A = "_a";
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
addDiyDom: addDiyDom
}
};
var zNodes =[
{id:1, name:"hover浜嬩欢鏄剧ず鎺т欢", open:true,
childs:[
{id:11, name:"鎸夐挳1"},
{id:12, name:"鎸夐挳2"},
{id:13, name:"涓嬫媺妗?},
{id:141, name:"鏂囨湰1"},
{id:142, name:"鏂囨湰2"},
{id:15, name:"瓒呴摼鎺?}
]},
{id:2, name:"濮嬬粓鏄剧ず鎺т欢", open:true,
childs:[
{id:21, name:"鎸夐挳1"},
{id:22, name:"鎸夐挳2"},
{id:23, name:"涓嬫媺妗?},
{id:24, name:"鏂囨湰"},
{id:25, name:"瓒呴摼鎺?}
]}
];
function addHoverDom(treeId, treeNode) {
if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
var aObj = $("#" + treeNode.tId + IDMark_A);
if (treeNode.id == 11) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span><button type='button' class='icon03' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";
aObj.append(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 12) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<button type='button' class='icon04' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 13) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span><select class='selDemo ' id='diyBtn_" +treeNode.id+ "'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>";
aObj.append(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("change", function(){alert("diy Select value="+btn.attr("value")+" for " + treeNode.name);});
} else if (treeNode.id == 141) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span class='test' id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
aObj.append(editStr);
} else if (treeNode.id == 142) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
aObj.after(editStr);
} else if (treeNode.id == 15) {
if ($("#diyBtn1_"+treeNode.id).length>0) return;
if ($("#diyBtn2_"+treeNode.id).length>0) return;
var editStr = "<a id='diyBtn1_" +treeNode.id+ "' onclick='alert(1);return false;' style='margin:0 0 0 5px;'>閾炬帴1</a>" +
"<a id='diyBtn2_" +treeNode.id+ "' onclick='alert(2);return false;' style='margin:0 0 0 5px;'>閾炬帴2</a>";
aObj.append(editStr);
}
}
function removeHoverDom(treeId, treeNode) {
if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;
if (treeNode.id == 15) {
$("#diyBtn1_"+treeNode.id).unbind().remove();
$("#diyBtn2_"+treeNode.id).unbind().remove();
} else {
$("#diyBtn_"+treeNode.id).unbind().remove();
$("#diyBtn_space_" +treeNode.id).unbind().remove();
}
}
function addDiyDom(treeId, treeNode) {
if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
var aObj = $("#" + treeNode.tId + IDMark_A);
if (treeNode.id == 21) {
var editStr = "<button type='button' class='icon01' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";
aObj.append(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 22) {
var editStr = "<button type='button' class='icon02' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 23) {
var editStr = "<select class='selDemo' id='diyBtn_" +treeNode.id+ "'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("change", function(){alert("diy Select value="+btn.attr("value")+" for " + treeNode.name);});
} else if (treeNode.id == 24) {
var editStr = "<span id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
aObj.after(editStr);
} else if (treeNode.id == 25) {
var editStr = "<a id='diyBtn1_" +treeNode.id+ "' onclick='alert(1);return false;'>閾炬帴1</a>" +
"<a id='diyBtn2_" +treeNode.id+ "' onclick='alert(2);return false;'>閾炬帴2</a>";
aObj.after(editStr);
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li button.icon01{margin-right:2px; background: url(../../css/ztreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon02{margin-right:2px; background: url(../../css/ztreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon03{margin-right:2px; background: url(../../css/ztreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon04{margin-right:2px; background: url(../../css/ztreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon05{margin-right:2px; background: url(../../css/ztreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon06{margin-right:2px; background: url(../../css/ztreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>
</HEAD>
<BODY>
<h1>娣诲姞鑷畾涔夋帶浠?/h1>
<h6>[ 鏂囦欢璺緞锛歞emo/super/diydom.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1銆佸疄鐜版柟娉曡鏄?/h2>
<ul class="list">
<li>鍒╃敤 setting.view.addHoverDom / removeHoverDom / addDiyDom 杩欏嚑涓弬鏁扮殑閰嶇疆鍙互寰堝鏄撶殑瀹炵幇鑷畾涔夋帶浠剁殑鍔熻兘</li>
<li class="highlight_red">娣诲姞鑷畾涔夋帶浠讹紝璇峰姟蹇呮帉鎻?zTree 鑺傜偣瀵硅薄鐨勫懡鍚嶈鍒欙紝浠ヤ繚璇佹甯告坊鍔?Dom 鎺т欢</li>
<li class="highlight_red">濡傛灉娣诲姞鏍囧噯鐨?select / checkbox / radio 绛夛紝璇锋敞鎰忛€傚綋璋冩暣 zTree 鐨勫竷灞€ css锛屼繚璇?zTree 鑳芥甯告樉绀?/li>
</ul>
</li>
<li class="title"><h2>2銆乻etting 閰嶇疆淇℃伅璇存槑</h2>
<ul class="list">
<li>浣跨敤 setting.view.addHoverDom / removeHoverDom / addDiyDom 灞炴€э紝璇︾粏璇峰弬瑙?API 鏂囨。涓殑鐩稿叧鍐呭</li>
</ul>
</li>
<li class="title"><h2>3銆乼reeNode 鑺傜偣鏁版嵁璇存槑</h2>
<ul class="list">
<li>瀵?鑺傜偣鏁版嵁 娌℃湁鐗规畩瑕佹眰锛岀敤鎴峰彲浠ユ牴鎹嚜宸辩殑闇€姹傛坊鍔犺嚜瀹氫箟灞炴€?/li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>