1.
2.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 7 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 8 <title>jQuery treeView</title> 9 10 <link rel="stylesheet" href="css/jquery.treeview.css" /> 11 <link rel="stylesheet" href="css/red-treeview.css" /> 12 <link rel="stylesheet" href="css/screen.css" /> 13 <script src="js/jquery.js" type="text/javascript"></script> 14 <script src="js/jquery.cookie.js" type="text/javascript"></script> 15 <script src="js/jquery.treeview.js" type="text/javascript"></script> 16 <script type="text/javascript"> 17 $(document).ready(function(){ 18 19 // first example 20 $("#navigation").treeview({ 21 // 记忆折叠的方式。location：页面刷新不保留折叠状态；cookie：页面刷新保留折叠状态。 22 persist: "location", 23 // 初始化时的折叠状态。true，初始化为收缩节点状态；false，为全部节点展开。 24 collapsed: true, 25 // 展开同级节点的唯一性。true，当展开一个节点时，同级的其他节点会自动关闭；false，当展开一个节点时，同级的其他节点保持原形。 26 unique: false 27 }); 28 29 // second example 30 $("#browser").treeview(); 31 $("#add").click(function() { 32 var branches = $("<li><span class='folder'>New Sublist</span><ul>" + 33 "<li><span class='file'>Item1</span></li>" + 34 "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser"); 35 $("#browser").treeview({ 36 // 向已有的树中追加节点，selector 为需要追加的节点集合，该集合中的节点须与已有树的节点结构保持一致。 37 add: branches 38 }); 39 branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21"); 40 $("#browser").treeview({ 41 add: branches 42 }); 43 }); 44 45 // third example 46 $("#red").treeview({ 47 // 设置展开子节点时的显示速度，有 slow、normal、fast 或者指定速度值，与 jQuery 的 hide（show）中的 speed 参数相似。 48 animated: "fast", 49 collapsed: true, 50 unique: true, 51 // 当一个节点的收放状态改变时，调用自定义函数Callback。 52 toggle: function() { 53 window.console && console.log("%o was toggled", this); 54 } 55 }); 56 57 // fourth example 58 $("#black, #gray").treeview({ 59 // 指定一个容器,控制整个tree的展开,收缩 或者收放 所有的节点。 60 control: "#treecontrol", 61 persist: "cookie" 62 }); 63 64 }); 65 </script> 66 <style type="text/css"> 67 #black.treeview li { background: url(images/black/tv-item.gif) 0 0 no-repeat; } 68 #black.treeview .collapsable { background-image: url(images/black/tv-collapsable.gif); } 69 #black.treeview .expandable { background-image: url(images/black/tv-expandable.gif); } 70 #black.treeview .last { background-image: url(images/black/tv-item-last.gif); } 71 #black.treeview .lastCollapsable { background-image: url(images/black/tv-collapsable-last.gif); } 72 #black.treeview .lastExpandable { background-image: url(images/black/tv-expandable-last.gif); } 73 74 #gray.treeview li { background: url(images/gray/tv-item.gif) 0 0 no-repeat; } 75 #gray.treeview .collapsable { background-image: url(images/gray/tv-collapsable.gif); } 76 #gray.treeview .expandable { background-image: url(images/gray/tv-expandable.gif); } 77 #gray.treeview .last { background-image: url(images/gray/tv-item-last.gif); } 78 #gray.treeview .lastCollapsable { background-image: url(images/gray/tv-collapsable-last.gif); } 79 #gray.treeview .lastExpandable { background-image: url(images/gray/tv-expandable-last.gif); } 80 81 </style> 82 </head> 83 <body> 84 85 86 <div id="main"> 87 88 <h4>Sample 0 -只打开一个</h4> 89 90 <ul id="navigation"> 91 <li><a href="?1">Item 1</a> 92 <ul> 93 <li><a href="?1.0">Item 1.0</a> 94 <ul> 95 <li><a href="?1.0.0">Item 1.0.0</a></li> 96 </ul> 97 </li> 98 <li><a href="?1.1">Item 1.1</a></li> 99 <li><a href="?1.2">Item 1.2</a> 100 <ul> 101 <li><a href="?1.2.0">Item 1.2.0</a> 102 <ul> 103 <li><a href="?1.2.0.0">Item 1.2.0.0</a></li> 104 <li><a href="?1.2.0.1">Item 1.2.0.1</a></li> 105 <li><a href="?1.2.0.2">Item 1.2.0.2</a></li> 106 </ul> 107 </li> 108 <li><a href="?1.2.1">Item 1.2.1</a> 109 <ul> 110 <li><a href="?1.2.1.0">Item 1.2.1.0</a></li> 111 </ul> 112 </li> 113 <li><a href="?1.2.2">Item 1.2.2</a> 114 <ul> 115 <li><a href="?1.2.2.0">Item 1.2.2.0</a></li> 116 <li><a href="?1.2.2.1">Item 1.2.2.1</a></li> 117 <li><a href="?1.2.2.2">Item 1.2.2.2</a></li> 118 </ul> 119 </li> 120 </ul> 121 </li> 122 </ul> 123 </li> 124 <li><a href="?2">Item 2</a> 125 <ul> 126 <li><span>Item 2.0</span> 127 <ul> 128 <li><a href="?2.0.0">Item 2.0.0</a> 129 <ul> 130 <li><a href="?2.0.0.0">Item 2.0.0.0</a></li> 131 <li><a href="?2.0.0.1">Item 2.0.0.1</a></li> 132 </ul> 133 </li> 134 </ul> 135 </li> 136 <li><a href="?2.1">Item 2.1</a> 137 <ul> 138 <li><a href="?2.1.0">Item 2.1.0</a> 139 <ul> 140 <li><a href="?2.1.0.0">Item 2.1.0.0</a></li> 141 </ul> 142 </li> 143 <li><a href="?2.1.1">Item 2.1.1</a> 144 <ul> 145 <li><a href="?2.1.1.0">Item 2.1.1.0</a></li> 146 <li><a href="?2.1.1.1">Item 2.1.1.1</a></li> 147 <li><a href="?2.1.1.2">Item 2.1.1.2</a></li> 148 </ul> 149 </li> 150 <li><a href="?2.1.2">Item 2.1.2</a> 151 <ul> 152 <li><a href="?2.1.2.0">Item 2.1.2.0</a></li> 153 <li><a href="?2.1.2.1">Item 2.1.2.1</a></li> 154 <li><a href="?2.1.2.2">Item 2.1.2.2</a></li> 155 </ul> 156 </li> 157 </ul> 158 </li> 159 </ul> 160 </li> 161 <li><a href="?3">Item 3</a> 162 <ul> 163 <li class="open"><a href="?3.0">Item 3.0</a> 164 <ul> 165 <li><a href="?3.0.0">Item 3.0.0</a></li> 166 <li><a href="?3.0.1">Item 3.0.1</a> 167 <ul> 168 <li><a href="?3.0.1.0">Item 3.0.1.0</a></li> 169 <li><a href="?3.0.1.1">Item 3.0.1.1</a></li> 170 </ul> 171 </li> 172 <li><a href="?3.0.2">Item 3.0.2</a> 173 <ul> 174 <li><a href="?3.0.2.0">Item 3.0.2.0</a></li> 175 <li><a href="?3.0.2.1">Item 3.0.2.1</a></li> 176 <li><a href="?3.0.2.2">Item 3.0.2.2</a></li> 177 </ul> 178 </li> 179 </ul> 180 </li> 181 </ul> 182 </li> 183 </ul> 184 185 186 <h4>Sample 1 - default</h4> 187 <ul id="browser" class="filetree"> 188 <li><span class="folder">Folder 1</span> 189 <ul> 190 <li><span class="file">Item 1.1</span></li> 191 </ul> 192 </li> 193 <li><span class="folder">Folder 2</span> 194 <ul> 195 <li><span class="folder">Subfolder 2.1</span> 196 <ul id="folder21"> 197 <li><span class="file">File 2.1.1</span></li> 198 <li><span class="file">File 2.1.2</span></li> 199 </ul> 200 </li> 201 <li><span class="file">File 2.2</span></li> 202 </ul> 203 </li> 204 <li class="closed"><span class="folder">Folder 3 (closed at start)</span> 205 <ul> 206 <li><span class="file">File 3.1</span></li> 207 </ul> 208 </li> 209 <li><span class="file">File 4</span></li> 210 </ul> 211 212 <button id="add">Add!</button> 213 214 <h4>Sample 2 - fast animations, all branches collapsed at first, red image set</h4> 215 <ul id="red"> 216 <li><span>Item 1</span> 217 <ul> 218 <li><span>Item 1.0</span> 219 <ul> 220 <li><span>Item 1.0.0</span></li> 221 </ul> 222 </li> 223 <li><span>Item 1.1</span></li> 224 <li><span>Item 1.2</span> 225 <ul> 226 <li><span>Item 1.2.0</span> 227 <ul> 228 <li><span>Item 1.2.0.0</span></li> 229 <li><span>Item 1.2.0.1</span></li> 230 <li><span>Item 1.2.0.2</span></li> 231 </ul> 232 </li> 233 <li><span>Item 1.2.1</span> 234 <ul> 235 <li><span>Item 1.2.1.0</span></li> 236 </ul> 237 </li> 238 <li><span>Item 1.2.2</span> 239 <ul> 240 <li><span>Item 1.2.2.0</span></li> 241 <li><span>Item 1.2.2.1</span></li> 242 <li><span>Item 1.2.2.2</span></li> 243 </ul> 244 </li> 245 </ul> 246 </li> 247 </ul> 248 </li> 249 <li><span>Item 2</span> 250 <ul> 251 <li><span>Item 2.0</span> 252 <ul> 253 <li><span>Item 2.0.0</span> 254 <ul> 255 <li><span>Item 2.0.0.0</span></li> 256 <li><span>Item 2.0.0.1</span></li> 257 </ul> 258 </li> 259 </ul> 260 </li> 261 <li><span>Item 2.1</span> 262 <ul> 263 <li><span>Item 2.1.0</span> 264 <ul> 265 <li><span>Item 2.1.0.0</span></li> 266 </ul> 267 </li> 268 <li><span>Item 2.1.1</span> 269 <ul> 270 <li><span>Item 2.1.1.0</span></li> 271 <li><span>Item 2.1.1.1</span></li> 272 <li><span>Item 2.1.1.2</span></li> 273 </ul> 274 </li> 275 <li><span>Item 2.1.2</span> 276 <ul> 277 <li><span>Item 2.1.2.0</span></li> 278 <li><span>Item 2.1.2.1</span></li> 279 <li><span>Item 2.1.2.2</span></li> 280 </ul> 281 </li> 282 </ul> 283 </li> 284 </ul> 285 </li> 286 <li class="open"><span>Item 3</span> 287 <ul> 288 <li class="open"><span>Item 3.0</span> 289 <ul> 290 <li><span>Item 3.0.0</span></li> 291 <li><span>Item 3.0.1</span> 292 <ul> 293 <li><span>Item 3.0.1.0</span></li> 294 <li><span>Item 3.0.1.1</span></li> 295 </ul> 296 297 </li> 298 <li><span>Item 3.0.2</span> 299 <ul> 300 <li><span>Item 3.0.2.0</span></li> 301 <li><span>Item 3.0.2.1</span></li> 302 <li><span>Item 3.0.2.2</span></li> 303 </ul> 304 </li> 305 </ul> 306 </li> 307 </ul> 308 </li> 309 </ul> 310 311 <h4>Sample 3 - two trees with one tree control, black and gray image set, with cookie-based state-saving</h4> 312 <div id="treecontrol"> 313 <a href="#">Expand All</a> 314 <a href="#">Collapse All</a> 315 <a href="#">Toggle All</a> 316 </div> 317 <ul id="black"> 318 <li>Item 1</li> 319 <li> 320 <span>Item 2</span> 321 <ul> 322 <li> 323 <span>Item 2.1</span> 324 <ul> 325 <li>Item 2.1.1</li> 326 <li>Item 2.1.2</li> 327 </ul> 328 </li> 329 <li>Item 2.2</li> 330 <li class="closed"> 331 <span>Item 2.3 (closed at start)</span> 332 <ul> 333 <li>Item 2.3.1</li> 334 <li>Item 2.3.2</li> 335 </ul> 336 </li> 337 </ul> 338 </li> 339 </ul> 340 <ul id="gray"> 341 <li>Item 1</li> 342 <li> 343 <span>Item 2</span> 344 <ul> 345 <li class="closed"> 346 <span>Item 2.1 (closed at start)</span> 347 <ul> 348 <li>Item 2.1.1</li> 349 <li>Item 2.1.2</li> 350 </ul> 351 </li> 352 <li>Item 2.2.1</li> 353 <li>Item 2.2.2</li> 354 <li>Item 2.2.3</li> 355 <li>Item 2.2.4</li> 356 <li>Item 2.2.5</li> 357 <li>Item 2.2.6</li> 358 <li>Item 2.2.7</li> 359 <li>Item 2.2.8</li> 360 <li> 361 <span>Item 2.3</span> 362 <ul> 363 <li>Item 2.3.1</li> 364 <li>Item 2.3.2</li> 365 <li>Item 2.3.3</li> 366 <li>Item 2.3.4</li> 367 <li>Item 2.3.5</li> 368 <li>Item 2.3.6</li> 369 <li>Item 2.3.7</li> 370 <li>Item 2.3.8</li> 371 <li>Item 2.3.9</li> 372 </ul> 373 </li> 374 <li> 375 <span>Item 2.4</span> 376 <ul> 377 <li>Item 2.4.1</li> 378 <li>Item 2.4.2</li> 379 <li>Item 2.4.3</li> 380 <li>Item 2.4.4</li> 381 <li>Item 2.4.5</li> 382 <li>Item 2.4.6</li> 383 <li>Item 2.4.7</li> 384 <li>Item 2.4.8</li> 385 <li>Item 2.4.9</li> 386 </ul> 387 </li> 388 </ul> 389 </li> 390 <li>Item 3</li> 391 </ul> 392 393 </div> 394 395 </body></html>
浙公网安备 33010602011771号