Introduction to a jquery-based tree plug-in (Orangetree) usage _jquery

Orangetree
Download Address: Orangetree

First of all, let's take a look at the demo!
First of all, I declare that my art skills are poor! This style everyone will be just a moment! I named this infinite-level tree plug-in orange tree, which is mainly divided into 3 levels of nodes:

The Head menu is the first level menu on the tree.
Parent menu, which is also the menu of nodes below
A child menu, a menu with no nodes below
Each node can control its style with CSS, please see the following table in detail:

Orangetree
. Orangetree	Control
. First_node	Default style for Head menu
. first_node_hover	Head menu The style of the mouse move
. First_node_click	The style of the mouse click after the Head menu
. First_node_subitem	Child menu Style under the Head menu
. Item	Parent Menu
. Item_node	Parent menu Default Style
. Item_node_hover	Parent menu The style of the mouse move
. Item_node_click	Parent Menu Mouse-click Style
. Item_img_bg	Parent menu Icon Style
. Subitem	Child Menu
. Subitem span	Child menu Default Style
. subitem_node_hover	Child Menu The style of the mouse move
. Subitem_node_click	Child Menu The mouse-click style
. SUBITEM_IMG_BG	Child menu Icon Style
Note: The comment is (*) style recommended do not modify

JavaScript parameter Description:

Orangetree
Width	Control width
Height	Control height
Indent	Level indent
View	Initial display mode, expanded: All open, collapsed: all closed, Firstnode: Specifies the first few levels of the head (Firstnode specified)
Firstnode	View for Firstnode This property specifies the first levels of the head to display
Single	Specify display mode, can only fight a level directory

The specific usage is as follows:
Add a reference first

Copy Code code as follows:

<link href= "Styles/orangetree.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<script src= "Scripts/orangetree.js" type= "Text/javascript" ></script>

Html

Copy Code code as follows:

<div class= "Orangetree" >
<ul>
<li>......</li>
......
</ul>
</div>

Javascript

Copy Code code as follows:

$ (document). Ready (function () {
$ (". Orangetree "). Orangetree ({
Width: 300px),
Height: "500px",
Indent:20,
View: "Collapsed",
Firstnode:1, single:false
});
});