Bootstrap Frame Establish an instance code of a tree menu (Tree)

The Tree here refers to the tree menu. This article tells how to create a tree menu under the bootstrap framework.

Premise: Adding BootStrap and JQ reference

        

  
    Langfang Teachers College
    • School education
      • Electrical Engineering Technology
    • Electronic class
      • Song Xiao
        • Electronics Second Class Physics
          • [1
          • CSS CODE
          • Add a style to the tree menu, which conforms to the style of the Bootstrap framework)
        • .tree {min-height: 20px; padding: 19px; margin-bottom: 20px; Background-color: #fbfbfb; border: 1px solid # 999; -webkit-border-radius: 4px; -moz -Border-Radius: 4px; Border-Radius: 4px; -Webkit-Box-Shadow: INSET 0 1PX 1PX RGBA (0, 0, 0, 0.05); -Moz-Box-Shadow: INSET 0 1PX 1PX RGBA (0, 0, 0, 0.05); Box-Shadow: INSET 0 1PX 1PX RGBA (0, 0, 0, 0.05)}. Tree Li {List-Style-Type: None; Margin: 0; Padding: 10px 5px 0 5px; position : AFTER} .tree li :: after {content: '; left: -20px; position: absolute; right: auto} .tree li :: before {border-left: 1px solid # 999 Bottom: 50px; Height: 100%; Top: 0; width: 1px} .tree li :: after {border-top: 1px solid # 999; Height: 20px;Top: 25px; width: 25px} .tree li span {-moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid # 999; border-radius: 5px; display: inline-block; Padding: 3px 8px; Text-Decoration: none} .tree li.parent_li> span {cursor: pointer} .tree> ul> li :: before, .tree> ul> li :: after {border: 0} .tree li : Last-Child :: Before {Height: 30px} .tree li.parent_li> span: hover, .tree li.parent_li> span: hover + ul li span {background: #eee; border: 1px solid # 94a0b4; color: # 000} JS CODE
      • // Adding an unfolded operation of the node, close operation $ ( Function () {$ ('. Tree Li: HAS (UL)'). Addclass ('Parent_li'). Find ('> span'). Attr ('Title', 'Collapse this branch'); $ ('. Tree li.parent_li> span '). on (' Click ', Function (E) {var children = $ (this) .parent (' li.parent_li '). Find ('> UL>Li '); if (Children.IS (": visible")) {Children.hide (' Fast '); $ (this) .attr (' Title ',' Expand this branch '). Find ('> i ' ) .addclass ('icon-plus-Sign'). RemoveClass ('icon-minus-sign');} else {children.show ('fast'); $ (this) .attr ('Title', 'Collapse this Branch '). Find ('> i '). AddClass (' icon-minus-sign '). RemoveClass (' icon-plus-sign ');} E.Stoppropagation ();});});
    • A tree that conforms to the Bootstrap style is completed, and the advantages are self-contained: Whole, beautiful.
    This is a demo, so the value in the tree is written in html, but in the actual project, the tree menu is generally generated, and bootstrap does not provide us with a similar TreeView's controls, only need to bind data, you can dynamically generate a tree, so the logic of spanning trees requires us to use JS code to write. This process is a bit cumbersome, recursive + nested. .
Of course, there are many packages in some packages, Dtree, TreeElist widget, ztree, jQuery, etc., which is a bit of the appearance and the bootstrap framework.
There is such a folded method, which is to take the length of the rendering, applying the style of Bootstrap to these packaged tree plugins to meet the needs.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment