Original: http://www.9499.net? GO = TC, Araray original
Keywords: web control directory tree menu tree menu? Strip program JavaScript programming
Abstract: This article introduces the design and application of Ailai Javascript directory tree control procedures. For more information, please click here, please download the control program and tutorial, please click here.
Ale Directory Tree Control Program
I used ASP to design the program that generated the directory tree, which is the directory tree of the Open Host system, completed in January 2003, and visited Www.9499.net before this. I have an impression. Today, this directory tree control program method is used in the directory tree control program method. It can be said that it is more difficult, more flexible, which is the most powerful directory tree program. With regard to the functional characteristics of this directory tree, the following points are worth mentioning:
1. Introducing the picture control with the catalog tree control, greatly improves flexibility. This is mainly referred to in the TreeView control of VB6.
Second, the incident handling mechanism is introduced in the control program, enhances the function, and greatly improves the flexibility of use.
Third, providing a large number of object interfaces and methods.
Fourth, there are a variety of methods to add directory tree nodes. There are add methods, addlink methods, and original PathParse methods (used to resolve path lists, and quickly construct the directory tree in the simplest code).
5. The directory tree style is not limited, and the user can design a directory tree that is different, flexible and more variable.
6. Provide a variety of ready-made directory tree templates, users don't have to pay attention to design directory tree patterns, just choose the favorite template, add a tree node, how quickly!
7. The control program can be extended as needed, and the CHECKBOX node extension is available (Alai_Tree_Check.js) is a good example.
I. Overview:
A be lacquered tree control program completely uses object-oriented method design, and the entire program is encapsulated inside, and the directory tree program provides a picture list imageList control (Alai_ImageList ()). Building a directory tree using the Aby Tree Control Program generally follows the following three steps:
First, establish an imagelist instance object and add the picture required to build a directory tree to the control;
Second, create a directory tree control instance, transmit the above imagelist instance object as the first parameter;
Third, call the various objects, methods, add nodes of the directory tree control, and define event handler, etc.
Of course, we have more convenient methods, which is to build a directory tree with existing directory tree template programs, and talk about the template program. I will first understand the three core objects of the directory tree control before establishing the directory tree:
(1) Directory tree control instance object (TREE), as follows:
??? var tree = new alai_tree ()
??? This creates a tree object.
(2) Root object: Tree.Root, you can see that it is a member of Tree, which is no appearance, used to build a node of the first level of the directory tree, the parent object of the first level node ( PARENT.
(3) Node (Node) object, corresponding to a node on the directory tree, as follows:
Var node = tree.add (...) // Add node, parameters will not be discussed
The method of adding a node above, generating a new node object: Node
These three objects each have a lot of members objects (attributes, methods, and events), please check the "Directory Tree Control Object Reference". Next, let's take a look at the process of constructing the system:?
II. Sample program:
Var images = new alai_imagelist () // Establish an ImageList instance object
Images.path = "Images /" // Picture Path
Images.add ("file.gif", "default") // Add a picture, the second parameter is the key value (key)
Images.add ("folder") // Add pictures, file suffix ".gif" Province, key value defaults file name: "Folder"
Images.add ("HTML", "LINK")? // Add html.gif, key value is LINK
Var tree1 = new alai_tree (images, 16, divtree1) // Note that Divtree1 is where the directory tree is placed.
// There is such code on the webpage:
The generated directory tree is inserted there.
Var root = tree.root
Var n1 = root.add ("Node 1", "Default", "JS", "Alert ('Node 1')")
// Equivalent code: var n1 = tree1.add (root, "limited", "node one", "n1", "", "js", "alert ('node one')")
/ * The following code demonstrates how many additional nodes * /
VAR N2 = root.add ("Node 2", "Folder")
VAR N23 = N2.Add ("2-3") // Add N2 child node
VAR N22 = Tree1.add (N23, "Prev", "2-2", "N22") // Before adding nodes N22 to N23
VAR N20 = Tree1.Add (N2, "First", "2-0", "N20", "File",) // Due to the "first" parameter, this node is the first child node of N2
VAR N3 = Tree1.Add (root, "limited", "node three", "folder")
VAR N31 = N3.Addlink ("http://www.9499.net") // Add N2 child node
VAR N32 = Tree1.Add (N3, "Last", "WW.9499.NET", "N32", "Page", "URL", "http://www.9499.net") // Add N2 Child node
Var colnode = tree.pathpival ("/ Node 4 / 4-1; / Node 4 / 4-2; / Node 4 / 4-3; / Node 5 /")
VAR N4 = root.addlink ("http://www.9499.net", "Welcome to 9499.net")
Iii. How to add nodes:
In the example above, we have contacted five ways to add directory tree nodes, first look at their syntax prototype:
1.Tree.Add (Tonode, Relation, Text, Key, Ico, Execategory, Exearg) 2.Root.add (Text, ICO, Execategory, Exearg)
3.Root.Addlink (URL, Text, Target, ICO)
4.Node.Add (Text, ICO, Execategory, Exearg)
5.Node.Addlink (URL, Text, Target, ICO)
6.Tree.PathParse (Path, PathseParetor, ListSeparator)
Method 1 The function is most comprehensive, covering methods 2-5, but part of the parameters are rarely used, so more or methods 2-5. The ADD method of the root object always adds the first level of nodes, and the Node Node object's add method is used to add the child node of the node. The AddLink method makes it easy for us to add a node with the URL link. The PATHPARSE method can explain a path list to generate a corresponding tree structure. Description of each parameter, please see the reference for the directory tree control object.
?
IV. Node relationship:
??? A be laid-tree control program has a clear logical expression for the tree structure, which is manifested in the following relationships of the tree node object:
Node.first - The first child node of the node, if there is no child node, NULL
Node.last - Node's last child node, if there is no child node, NULL
Node.next - Node next neighboring child node, if node is the last node on this layer, NULL
Node.PREV - Node's adjacent child node, if node is the first node on this layer, NULL
Node.Parent - parent node of the node
Node.chidren - child node (it is a collection array, the first element is a node object)
For root object root:
ROOT.First is the first node of the first-level node, root.last is the last node of the first level node, and root.chidren is a collection of first-level nodes, and the first level node is equal to ROOT.
?
V. Members of the Node Object:
The node object Node contains some member objects (attributes), in order to facilitate explanation and understanding, with a diagram to zoom in and launched. as follows:
The object indicated by the number is:
Node.exicon
2.Node.icon
3.Node.label
4.Node.Lineicon [0]
5.Node.Body
6.Node.Container
Vi. Access Node Object:
1. From the example above, we have seen the Add method to return to the newly added node object, give it a variable, and you can access it later.
2. All added nodes are saved in the Tree.Nodes collection array, such as for the first addition of the node:
VAR N0 = Tree1.Add (root, "limited", "node", "node0")
In addition to N0 points to this node, Tree.Nodes [0] also points to this node, and we also specify a key value: "node0", so tree.nodes ["node0"] also points to the node, so N0, Tree .nodes [0] and Tree.Nodes ["Node0"] are all the same object.
3. Methods to perform directory tree nodes: You can start from root.first to be traversed according to node relationships according to node relationships, which is not going on here. If you don't care about the logical structure of the tree, it is:
For (var i = 1; i For (var i = 0; i It is also possible, but pay attention to if there is a node, the node will be accessed twice! 4. Other methods for obtaining node objects: ?? (1) method of tree object: getnodebypath, getnodebytier, getselectnode, getactivenode ??? (1) method of node object: getSibling, Node Relationship (Next, First, Last, Prev, Parent, Children) VII. Operation of nodes: 1. Delete the node: node.remove () or tree.removenode (node) 2. Expand and contraction of child nodes: ??? Expand: Node.expand (True), shrink: node.expand (false), automatic: node.expand () ??? Expand a branch (expand sub-node grandson node): Node.expand (True, True) ??? Expand all nodes: Tree.expandall (TRUE), shrink all nodes: Tree.expandall (False) ??? Expand to the second layer: Tree.expandtotier (2) ? IX. ImageList control and directory tree control: ImageList is used to provide a variety of pictures (icons) that build directory trees to the directory tree control, how do these images are used in directory tree controls? In the method of adding a node, the ICO parameter is used to set the node icon, as the N1 node ICO is "default" in the above example, which is the key value specified when the node is added, in addition to the key value, we can use the index value, because "" DEFAULT "is the first added icon its index value is 0, and it is also possible to use 0 instead of" default ". It can be seen that the directory tree control is to reference the image in the ImageList control by key value (string) or index value (positive integer). We also notice that some nodes are added to the ICO parameter, but the node still has icon displayed, which is another topic to talk about - the reference key value. The reference key value refers to the element of these key values in the ImageList control. There are special purposes in the directory tree control, and the reference key value has the following: 1. Default - Default icon, using the default icon in the ICO parameter default node, the legend: 2, Expand and Collapse - Control the child node expansion and shrinkage, Common map: 3, expand_top, expand_end, collapse_top, collapse_end, providing a different picture when using the first set of images above legend: 4, Leaf and Twig - Icons used to indicate leaf nodes and last sideways, the legend: 5, LINE and Blank - for painting a directory tree support. Legend: (Blank is a blank picture) 6, LINK - especially for the AddLink method, the ICO parameter is used by default, the legend: According to this convention, if you want to display a picture of the Control Node Expand / shrink, you should add a picture of the EXPAND and Collapse key value to iMaglist. Similar to the picture to show the link and the BLANK key value. If you provide the Default icon and add the node, there is no specified ICO parameter, the Default icon is sent to the field. This is a non-powerful agreement, you can even add any pictures to Imagelight, so that you build a tree without a picture. It is because this agreed relationship makes the Ara Licattal tree program have super flexibility, you can use a variety of combinations, select a variety of icons to build a variety of directory trees! ? Xi. Event processing: I. Event processing mechanism: Tree object events: onclick, ondblclick, onmousemove, onmouseover, onmouseout, onmouseup, onmousedown, onkeypress, onkeydown, onkeyup, oncollapse, onexpand, afteradd, onblur, onfocus, onselect Events of Node Objects include: Onclick, Onceout, Onmousemove, ONMOUSEDOWN, ONMOUS, ONKEYPRESS, ONKEYDOWN, ONKEYPRESS, ONEXPAND, ONFOCUS, ONSELECT The event of the tree object is used to respond to the corresponding events of all nodes, and the node object is processed for individual nodes. There is a very important feature: the first parameter of the event handler of the tree object is a node object that triggers the event, and there is no parameters of the event of the node object. We noticed that the event names are almost the same (Tree.AFTERADD event exception), which is performed on the OnClick event: When the mouse click the node, the Node.Onclick event handler will execute if the handler returns the value TRUE, then execute the Tree.onClick event, and vice verses if the Node.Onclick handler return value is false (or no return value), the Tree.Onclcik event will not be executed. Other events are classified, this is the event handling mechanism, a bit of events like the DOM (document object model) (bubble). Adding two parameters for the Node Add method: Execategory and ExEargv are used to set the actions to be performed, for example: N1 = Tree.Root.Add ("Test", "", "JS", "Alert ('Hello')") N2 = Tree.Root.Add ("9499.net", "", "URL", "http://www.9499.net") If you click N1, "Hello" will pop up, click N2 to open the URL www.9499.net. If the default, the default action is to perform the Expand method expand or shrink the subtitle (if any). Click the action of the node to actually call the node.execute () method, and the action performed by the surface execute () method has dependent on the EXECATEGORY and EXEARGV parameters. The connection between node.execute () and onclick event is this: If the Tree.Onclick event handler returns value true, the node.execute () method will then be called, if the return value is false or no return value, Node.execute () The method will not be executed, which is another aspect of the event processing mechanism. Second, the event handler: Event handler is generally used to control the behavior of nodes. Example: If we want the node to have an effect similar to hyperlink, that is, when the mouse is shifted, the text is blue, add the line, but for the node N11, it does not want it, and can be implemented with the following event handler: // When the mouse is moved, Tree.οnmοuseοver = function (srcnode) {????? srcnode.label.style.color = "blue" ???? srcnode.label.textDecoration = "underline" ???? srcnode.label. Cursor = "hand"} // When the mouse is removed, Tree.οnmοuseοut = function (srcNode) {??? srcnode.label.style.color = "black" ??? srcnode.label.textDecoration = "none"} // Special processes for nodes 11 n11.οnmοuseοver = n11.οswuseοter = function () {return false} In addition, click the node, the default action is to let the node get the focus to select the highlight display. If you don't want the node to be selected, you can block this behavior, as follows: Tree.οnselect = function (srcnode) {return false} XII. Using Template: A bee Tree Catalog Tree Control Program has the ability to design a diversified tree menu. In order to more convenient users, we package some designed menus into template programs so that users can combat, save troubles. The template program has selected the picture of us, and the basic event handler is designed. Users only need to write the code to add the node, it can be described as fast and efficient, how is it! In the example, the following common template programs are currently available, (more cool in the future!): alai_tree_win2k.js - win2000 explorer style template alai_tree_winxp.js - winxp explorer style template alai_tree_help.js - chm help style template alai_tree_pretty.js - a Henliang directory tree template alai_tree_qq.js - QQ panel template alai_tree_cool.js - Cool panel template (really cool) Now let's take a Win2K template as an example, indicating the use of template programs: First, load the control program and template program to the web page, code:
