Jquery is not described in detail here. It gives me the feeling that it encapsulates javas.The role function library. There are many useful things in it. If you are not familiar with jquery, read the following two articles:
1 jquery Chinese Getting Started Guide, translation plus example, jquery's starting point tutorial
Http://hi.baidu.com/wolftotem1984/blog/item/4335a618aa097ab44aedbcc5.html
2 jquery learning, course resource Summary
Http://hi.baidu.com/wolftotem1984/blog/item/40de9211768c1f7eca80c4a9.html
The first article is my transfer, and the second is a summary of jquery's learning resources, hoping to help you get started.
Now, let's get down to the truth. Treeview is a plug-in of jquery. It is very easy to use. The following is the official website of this plug-in.
Http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
Here is the demo
Http://jquery.bassistance.de/treeview/treeviewDemo.html
See the effect, a bit like Windows Resource Manager. To achieve this effect, it is very convenient to use jquery's Treeview plug-in, the following steps can be achieved.
Step 1: Download The jquery and Treeview plug-ins.
Jquery: http://jquery.bassistance.de/dist/jquery.js
Treeview: http://jquery.bassistance.de/treeview/jquery.treeview.zip (Note: After decompression, the demo is not properly displayed, because jquery. JS is missing. Download the package and put it in the corresponding directory)
Step 2: Create an HTML file
Because we need to use a few image resources, we can create them in the directory after extracting jquery.treeview.zip.
For example, create a treeview.html file. Use your favorite editor to write the following code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Treeview </title>
Here is the introduction of the jquery. js file. I have mentioned above that the original compressed package does not exist. Just download it and copy it in.
<SCRIPT type = "text/javasPipeline "src =" jquery. js "> </SCRIPT>
Here is the introduction of the Treeview plug-in
<SCRIPT type = "text/javasPipeline "src =" jquery. Treeview. js "> </SCRIPT>
The following is the jquery syntax format. If you do not understand it, you can refer to the introductory documents I have provided.
<SCRIPT type = "text/javasOther ">
$ (Function (){
$ ("Ul"). Treeview ();
});
</SCRIPT>
The following are some CSS styles, which are mandatory. You can change its appearance based on your preferences.
<Style type = "text/CSS">
. Treeview,. Treeview ul {
Padding: 0;
Margin: 0;
List-style: none;
}
. Treeview Li {
Margin: 0;
Padding: 4px 0 3px 20px;
}
. Treeview Li {Background: URL (images/tv-item.gif) 0 0 no-Repeat ;}
. Treeview. collapsable {background-image: URL (images/tv-collapsable.gif );}
. Treeview. expandable {background-image: URL (images/tv-expandable.gif );}
. Treeview. Last {background-image: URL (images/tv-item-last.gif );}
. Treeview. lastcollapsable {background-image: URL (images/tv-collapsable-last.gif );}
. Treeview. lastexpandable {background-image: URL (images/tv-expandable-last.gif );}
</Style>
</Head>
<Body>
You can modify the following code as required, as long as the structure follows the list structure in the HTML language.
<Ul> <li> Item 1 <ul> <li> item 1.1 </LI> </ul> </LI> <li class = "closed"> Item 2 (if class specifies closed, so it is disabled by default) <ul> <li> item 2.1 <ul> <li> item 2.1.1 </LI> <li> item 2.1.2 </LI> </ul> </LI> <li> item 2.2 </LI> </ul> </LI> <li> Item 3 </LI> </ul>
</Body>
</Html>
OK.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
