Simple usage of jQuery treeview, jquerytreeview

Simple usage of jQuery treeview, jquerytreeview

The treeview plug-in is used for recent projects, and you just need to sort out the relevant information.

　 1. Document Tree example

The simplest example is the implementation of the document tree. Shows the effect.

　　

Contains several files. For details, please download it from the official website. Remember that jquery. js references must be before jquery. treeview. js.

The Code is as follows:

1 
The Code shows that to show the effect of the document tree, you must add the filetree class to the first ul class. The Display Effect of folders and files is achieved by adding a <span> </span>. The folder uses the folder class and the file class. The implementation of the document tree is implemented by nesting the list. Adding the closed class to the li folder can keep the folder closed. By default, all the document trees are open.
The above code alone cannot achieve the effect of the document tree. To achieve the effect, you also need to add js Code. Pay attention to the id = file attribute in the first ul, which is useful at this time. The js Code is as follows:
1  $(document).ready(function(){2       $("#file").treeview();3 4   });
This is the implementation of a simple document tree.
2. navigation tree example
Shows the effect:
　　
The html code is as follows:
1 <ul id = "navigation"> 2 <li> <a href = "#"> </a> menu 1 3 <ul> 4 <li> <a href =" # "> menu 1.0 </a> 5 <ul> 6 <li> <a href =" # "> menu 1.0.0 </a> </li> 7 </ul> 8 </li> 9 <li> <a href = "#"> menu 1.1 </a> </li> 10 <li> <a href = "#"> menu 1.2 </a> 11 <ul> 12 <li> <a href = "#"> menu 1.2.0 </a> 13 <ul> 14 <li> <a href =" # "> menu 1.2.0.0 </a> </li> 15 <li> <a href =" # "> menu 1.2.0.1 </a> </li> 16 <li> <a href = "#"> menu 1.2.0.2 </a> </li> 17 </ul> 18 </li> 19 <li> <a href = "#"> menu 1.2.1 </a> 20 <ul> 21 <li> <a href = "#"> menu 1.2.1.0 </a> </li> 22 </ul> 23 </li> 24 <li> <a href = "#"> menu 1.2.2 </a> 25 <ul> 26 <li> <a href = "#"> menu 1.2.2.0 </> </li> 27 <li> <a href = "#"> menu 1.2.2.1 </a> </li> 28 <li> <a href = "#"> menu 1.2.2.2 </a> </li> 29 </ul> 30 </li> 31 </ul> 32 </li> 33 </ul> 34 </li> 35 </ul>View Code
Here, the list is mainly nested. Note that the navigation class attribute is added to the first ul.
In the same way, you must use js to implement the navigation tree function:
1 $ ("# navigation"). treeview ({2 persist: "location", 3 collapsed: true, 4 unique: true5 });View Code
Explanation: Setting collapsed to true means that the navigation tree is collapsed, which is equivalent to the previous closed attribute.