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/JavaScript" src = "jquery. js"> </SCRIPT>
Here is the introduction of the Treeview plug-in
<SCRIPT type = "text/JavaScript" 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/JavaScript">
$ (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 the class specifies closed, 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>
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
