使用方法
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeT">
Home > Web Front-end > JS Tutorial > body text

JavaScript NodeTree navigation bar (menu item JSON type/self-made)_javascript skills

WBOY
Release: 2016-05-16 17:42:29
Original
1399 people have browsed it

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:
JavaScript NodeTree navigation bar (menu item JSON type/self-made)_javascript skills
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.

Copy code The code is as follows:

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:
Copy the code The code is as follows:




5. Add the following code to the page :
Copy code The code is as follows:

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!
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!