"JS design mode" Using combination mode to realize tree navigation--Analysis of code structure (i.)

Tree navigation:

Description of the combined mode:

Combining objects into a tree structure to represent a "partial-whole" hierarchy, combining patterns makes the user consistent with the use of individual objects and composite objects.

We use the leaf to represent the whole in composite. The combination pattern is a certain regularity, in the implementation of tree navigation, composite need to contain more than one leaf, can also contain more than one leaf and a composite, why said to contain more than one, If the composite does not contain any child children then it is the leaf,leaf that represents the last layer of the nodule.

Tree-shaped navigation code snippet:

[data-panel= tree]. Tree-folder, [data-panel= "Tree"]. tree-only, [data-panel= "Tree"]. Tree-child {padding-left:20px ;} [data-panel= tree]. Tree-root, [data-panel= "Tree"]. Tree-folder, [data-panel= "Tree"]. Tree-only, [data-panel=] Tree ]. tree-child {position:relative;}    [data-panel= "Tree"]. folder {Display:block;    position:relative;    PADDING:4PX 6px;    Color: #333;    Cursor:pointer; Overflow:hidden;}    [data-panel= "Tree"] B {float:left;    margin-top:4px;    Background-position:0 -35px;    width:20px; height:16px;} [data-panel= "Tree"] I, [data-panel= "tree"] B {background-image:url (".    /image/tree/tree_icon.png "); Background-repeat:no-repeat;} [data-panel= "Tree"]. tree-only > I {background-position:0 -151px;}    [data-panel= "Tree"] I {position:absolute;    top:50%;    left:0;    height:28px;    width:16px; Margin-top: -14px;}    [data-panel= "Tree"]. Tree-folder > I {background-position:0 -61px; Cursor:pointer;} [Data-panel=]Tree "]. Tree-child:not (: last-child) {Background-image:url ("..    /image/tree/tree_line.png ");    background-position:0 0; Background-repeat:repeat-y;} [data-panel= "Tree"]. Tree-folder.last > I {background-position:0 -91px;} [data-panel= "Tree"]. Tree-only.last > I {background-position:0 -181px;} [data-panel= "Tree"]. Folder.empty {color: #999;} [data-panel= "Tree"]. tree-root > Toolbar, [data-panel= "Tree"]. Tree-folder >. toolbar, [data-panel= "Tree"].    Tree-only > Toolbar {position:absolute;    top:0;    right:0; Display:none;} [data-panel= "Tree"]. Tree-root >. toolbar > A, [data-panel= "Tree"]. Tree-folder >. toolbar > A, [data-panel=] t    Ree "]. tree-only >. toolbar > a {display:inline-block;    PADDING:4PX 6px; Color: #00a0e9;} [data-panel= "Tree"]. Tree-root:hover >. folder, [data-panel= "Tree"]. Tree-folder:hover >. folder, [data-panel=] Tree "]. Tree-only:hover >. folder {background-color: #fafafa;} [data-panel= "TRee "]. Tree-root:hover > Toolbar, [data-panel=" Tree "]. Tree-folder:hover >. toolbar, [data-panel=" Tree "]. Tree-only:hover >. toolbar {Display:block}

<div id= "Groupview" class= "Groupview panel-body" data-panel= "tree" > <div class= "Tree-folder Last" ><b ></b><a class= "folder" href= "/favorite/index/0" id= "0" > All [0]</a></div> <div class= " Tree-child "> <div class=" tree-only "><i></i><a class=" folder "href="/favorite/index/0 "id=" 0 > ungrouped [1]</a></div> <div class= "Tree-folder" ><i></i><b></b><a class= "folder" href= "/FAVORITE/INDEX/6" id= "6" > Customer [1]</a></div> <div class= "Tree-child" > <d IV class= "Tree-only" ><i></i><a class= "folder" href= "/FAVORITE/INDEX/8" id= "8" > Western Customers [1]</a ></div> <div class= "Tree-only last" ><i></i><a class= "folder Empty" href= "/favorite/ind EX/9 "id=" 9 "> OOCL customer [0]</a></div> </div> <div class=" Tree-only "><i></i><a cl ass= "folder" href= "/FAVORITE/INDEX/13" id= ">" Modify Group name [2]</a></div> <div class= "Tree-folder" ><i></i><b></b><a class= "folder" href= " /FAVORITE/INDEX/16 "id=" > Computer [0]</a></div> <div class= "Tree-child" > <div class= "tree-onl Y "><i></i><a class=" folder Empty "href="/favorite/index/17 "id=" > Hardware engineer [0]</a></ div> <div class= "Tree-only last" ><i></i><a class= "folder Empty" href= "/FAVORITE/INDEX/18" id= > Software engineer [0]</a></div> </div> <div class= "Tree-only last" ><i></i><a Clas s= "folder Empty" href= "/favorite/index/40" id= "Max" > Latest add [0]</a></div> </div></div>

Tree_icon.png Image address: http://img.blog.csdn.net/20160424123943829

Tree_line.png Image address: http://img.blog.csdn.net/20160424123959314

Parsing HTML code Results

We find some rules from the HTML code to look at a few boxes:

First element of the first red inside the label div.tree-child, the red box outside the red box is the closest element to the Div.tree-folder.
Judging by this red box, it is not difficult to analyze the pink box and the code inside the black box is similar to the red box.

We're just seeing if there are any other laws,
Perhaps you have already seen one, some div's class attribute value is Tree-only and some is tree-only last, what is their difference?
By the look, the ring is indicated by the last selector.



With the HTML code you can see that there are four last selectors on the image, and we only see three of them through this image. To find out why, look.


What was supposed to be seen through the code is this picture, because I don't want the first node element to show the image of the node in front of it, so we programmed it out.

Let's look at the next picture, the code in the red box is <b></b>, and let's look at the first element in the other div.tree-folder element. How is <i></i>? The second element is <b></b>, and the reason is simple,<i></i> the node picture is displayed. Cause I don't want to show the first node picture, so we didn't add it to the DOM element.

Then we will find the next rule: We look at the HTML code and found that there is a div with empty, and some do not take empty,empty is empty meaning, there is no data. Is it reflected in the effect? Take a look at

Did you get it? , the code in this red box is an element with an empty selector. Empty is the style used to control whether there is data. These are controlled by JS.

"JS design mode" Using combination mode to realize tree navigation--JS code Structure Thinking analysis (II.)

"JS design mode" Using combination mode to realize tree navigation--Analysis of code structure (i.)