The project in work is a system with a front-end based on the JQuery Easyui, where the main menu on the left uses the tree component in Easyui, not too familiar, but not too good to use. For example, the tree in Easyui needs to click the small triangle before the fork node to be able to expand or close the node. In addition, it must require the browser in compatibility mode for normal use (the Easyui used in this project is 1.2. Version 2, the new Tree does not have the problem), it is inconvenient. Want to modify and do not have to, so there is a simple tree menu to write the idea, while off-hours, the time to write a simple JS file, based on the jQuery1.6 version of the Simpletree. Simpletree is convenient to use, it realizes the most basic function of the tree menu, including 1 JS files, 1 CSS files and 5 icon files. When you use it, simply copy the relevant file into your project and reference it on the appropriate page, for example:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
<HTMLxmlns= "http://www.w3.org/1999/xhtml">
<Head>
<Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>
<title>Simpletree</title>
<Linkrel= "stylesheet"type= "Text/css"href= "Js/tree_themes/simpletree.css"/>
<Scripttype= "Text/javascript"src= "Js/jquery-1.6.min.js"></Script>
<Scripttype= "Text/javascript"src= "Js/simpletree.js"></Script>
<Scripttype= "Text/javascript">
$(function(){
$ (". St_tree"). Simpletree ({
Click:function(a) {
if(!$ (a). attr ("Haschild"))
Alert ($ (a). attr ("ref"));
}
});
});
</Script>
</Head>
<Body>
<Divclass= "St_tree">
<ul>
<Li><ahref="#"ref= "HYJM">Welcome interface</a></Li>
<Li><ahref="#"ref= "XTGL">System Management</a></Li>
<ulShow= "true">
<Li><ahref="#"ref= "Yhgl">User Management</a></Li>
<Li><ahref="#"ref= "Rzck">Log view</a></Li>
</ul>
<Li><ahref="#"ref= "Ckgl">Warehouse Management</a></Li>
<ul>
<Li><ahref="#"ref= "KCGL">Inventory Management</a></Li>
<Li><ahref="#"ref= "Shgl">Goods Receipt Management</a></Li>
<Li><ahref="#"ref= "Fhgl">Delivery Management</a></Li>
<ul>
<Li><ahref="#"ref= "Yhgl">User Management</a></Li>
<Li><ahref="#"ref= "Rzck">Log view</a></Li>
</ul>
</ul>
</ul>
</Div>
</Body>
</HTML>
The above code executes the result in IE8
Do it in Chrome.
Sample program Download: Simpletree1.0.zip
11.27 Update 1.1 version: Simpletree1.1.zip
11.27 Update 1.2 version: Simpletree1.2.zip
12.04 Update 1.3 version: Http://files.cnblogs.com/zhhh/SimpleTree1.3.zip
A simple tree-shaped menu based on jquery
