I've been having some leisure time recently and made a JavaScript NodeTree myself. There are actually quite a few similar things on the Internet, and they have more functions than this one. I made this purely to practice my skills.
The icon can be customized (16X16), and the menu items are completely defined in JSON type for easy modification.
Interface:
Usage :
1. Copy the NodeTree-JSON.js and CSS folders to the project and reference them .
2. Reference the JQuery framework.
3. Modify the NodeTreeMenu menu item in NodeTree-JSON.js. The following is a brief description.
var NodeTreeMenu = [
//id: node ID, pId: parent node ID, 0 if there is no parent node, name: display name, img: display icon, open: only the parent node has this attribute, whether the child node is expanded by default, file: only the child node has this attribute, click The page opened after
{ id: 1, pId: 0, name: "Parent Node One", img: "CSS/Images/001.png", open: true },
{ id: 101, pId : 1, name: "Subnode One", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/" }//Note that the last line of data must not be added at the end comma! Otherwise, an error will be reported under IE!
]
4. Add the following code where you want to display the NodeTree:
5. Add the following code to the page :
Or (choose one of the two):
< script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame");
}
In NodeTree("mainFrame"), mainFrame is the name of the target frame. For example, the navigation bar is in the frame on the left, and the name of the frame displayed on the right is = "mainFrame".
If you really don’t understand, take a look at the code of demo.htm and you will understand.
The source code is attached, if you are interested, you can take a look~
http://dl.vmall.com/c0b7wda1ps
Please click and recommend if you like it, your support is my biggest motivation!