Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use layui-tree to beautify the left menu. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Layui-tree beautifies the left menu

Html

Css

/ * left navigation * / .layui-tree-skin-sidebar li I {color: rgba; display: none;} .layui-tree-skin-sidebar li a cite {color: rgba} .layui-tree-skin-sidebar li .layui-tree-spread {display: block; position: absolute; right: 30px;} .layui-tree-skin-sidebar li {line-height: 45px; position relative: } .layui-tree-skin-sidebar li ul {margin-left: 0; background: rgba;} .layui-tree-skin-sidebar li ul a {padding-left: 20px;} .layui-tree-skin-sidebar li a {height: 45px; border-left: 5px solid transparent; box-sizing: border-box; width: 100%;} .layui-tree-skin-sidebar li a:hover {background: # 4E5465; color: # fff Border-left: 5px solid # 00988;} .layui-tree-skin-sidebar li a.active {background: # 00988;}

Js

Layui.use (['element','layer','jquery','tree'], function () {var element = layui.element; var layer = layui.layer; var $= layui.jquery Var menuData = [/ / Node {name: 'frequently used folders', id:'1', children: [{name: 'all unread', id: '11' Url: 'http://www.layui.com/'}, {name:' top mail', id: '12'}, {name:' tagged mail' Id: '13'}}, {name:' my mailbox', id:'2', children: [{name:'QQ Mail' Id: '21', spread: true, children: [{name:' inbox', id: '211' Children: [{name: 'all unread', id: '2111'}, {name:' top email' Id: '2112'}, {name: 'tagged mail', id: '2113'}} {name: 'sent mail', id: '212'}, {name: 'spam' Id: '213'}}, {name:' Ali Cloud Mail', id: '22' Children: [{name: 'inbox', id: '221'}, {name: 'sent mail' Id: '222'}, {name: 'spam' Id: '223'}]}] layui.tree ({elem:'# sidemenubar' / / pass in element selector, skin: 'sidebar' / / Custom tree style class name Nodes:menuData / / Node data, click: function (node,item) {/ / node is the current clicked node data, and item is the a tag object clicked. / / the navigation button selects the current $('# sidemenubar a'). RemoveClass ('active') $(item) .addClass ('active'); $(item) .siblings (' .layui-tree-spread') .click (); / / add a new tab activeTab.init (node.name,node.url,node.id);}}) Var activeTab = {tabTit:', / / tab titile title tabUrl:'', / / tab content nested iframe's src tabId:'', / / tab tag's lay-id tabCon: function () {var result Ajax ({type: 'get', url: this.tabUrl, dataType:' html', success: function (data) {result = data;}}) return result }, addTab: function () {/ / add tab entry element.tabAdd ('demo', {title: this.tabTit, content:' / / support incoming html, id: this.tabId})} ChangeTab: function () {/ / check the tab item element.tabChange ('demo', this.tabId) }, ishasTab: function () {/ / determine whether the tab entry contains var _ this = this; var dataId,isflag; var arrays = $('.layui-tab-title li'); $.each (arrays,function (idx,ele) {dataId = $(ele) .attr (' lay-id')) If (dataId = _ this.tabId) {isflag = true return false} else {isflag = false}}) return isflag}, init: function (tabtit,taburl,tabid) {var _ this = this _ this.tabUrl = taburl; _ this.tabId = tabid; _ this.tabTit = tabtit; if (taburl) {if (! _ this.ishasTab ()) {_ this.addTab ();} _ this.changeTab () } else {return false}); logical thinking of adding tab entry

Click on the left navigation to get its data (url,id. )

If there is a url, determine whether its id is the same as the lay-id of the tab item. If it is the same, switch to select it. If it is not the same, add it.

Problems encountered

Layui-tree Click a node to return only the current node data, not the HTML object of the current node

Solution

Change the tree.js source code

E.children ("a") .on ("click", function (e) {layui.stope (e), i.click (o) this}) i.click (o) changed to i.click (o) about "how to use layui-tree to beautify the left menu" this article ends here Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.