本篇文章给大家介绍一下使用 layui-tree 美化左侧菜单, 点击生成 tab 选项的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
layui-tree 美化左侧菜单
- html
- <div class="layui-side layui-bg-black">
- <div class="layui-side-scroll">
- <div id="sidemenubar" lay-filter="test"></div>
- </div>
- </div>
- CSS
- /* 左侧导航 */
- .layui-tree-skin-sidebar li i{
- color: rgba(255,255,255,.7);
- display: none;
- }
- .layui-tree-skin-sidebar li a cite{
- color: rgba(255,255,255,.7)
- }
- .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(0,0,0,.3);
- }
- .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 #009688;
- }
- .layui-tree-skin-sidebar li a.active{
- background: #009688;
- }
- JS
- <!--layui.js 文件必须放到 HTML 内容的最后 -->
- <script src="layui/layui.js"></script>
- layui.use(['element','layer','jquery','tree'], function(){
- var element = layui.element;
- var layer = layui.layer;
- var $ = layui.jQuery;
- var menuData = [ // 节点
- {
- name: '常用文件夹'
- ,id: '1'
- ,children: [
- {
- name: '所有未读'
- ,id: '11'
- ,url: 'http://www.layui.com/'
- }, {
- name: '置顶邮件'
- ,id: '12'
- }, {
- name: '标签邮件'
- ,id: '13'
- }
- ]
- }, {
- name: '我的邮箱'
- ,id: '2'
- ,children: [
- {
- name: 'QQ 邮箱'
- ,id: '21'
- ,spread: true
- ,children: [
- {
- name: '收件箱'
- ,id: '211'
- ,children: [
- {
- name: '所有未读'
- ,id: '2111'
- }, {
- name: '置顶邮件'
- ,id: '2112'
- }, {
- name: '标签邮件'
- ,id: '2113'
- }
- ]
- }, {
- name: '已发出的邮件'
- ,id: '212'
- }, {
- name: '垃圾邮件'
- ,id: '213'
- }
- ]
- }, {
- name: '阿里云邮'
- ,id: '22'
- ,children: [
- {
- name: '收件箱'
- ,id: '221'
- }, {
- name: '已发出的邮件'
- ,id: '222'
- }, {
- name: '垃圾邮件'
- ,id: '223'
- }
- ]
- }
- ]
- }
- ]
- layui.tree({
- elem: '#sidemenubar' // 传入元素选择器
- ,skin: 'sidebar' // 自定义 tree 样式的类名
- ,nodes:menuData // 节点数据
- ,click: function(node,item){
- //node 即为当前点击的节点数据, item 就是被点击的 a 标签对象了
- // 导航按钮选中当前
- $('#sidemenubar a').removeClass('active');
- $(item).addClass('active');
- $(item).siblings('.layui-tree-spread').click();
- // 添加新 tab
- activeTab.init(node.name,node.url,node.id);
- }
- });
- var activeTab = {
- tabTit : '', //tab titile 标题
- tabUrl : '', //tab 内容嵌套 iframe 的 src
- tabId : '', //tab 标签的 lay-id
- tabCon : function(){
- var result;
- $.Ajax({
- type: 'get',
- url: this.tabUrl,
- dataType: 'html',
- success: function(data){
- result = data;
- }
- })
- return result;
- },
- addTab : function(){ // 新增 tab 项
- element.tabAdd('demo', {
- title: this.tabTit
- ,content: '<iframe src ='+this.tabUrl +'></iframe>' // 支持传入 HTML
- ,id: this.tabId
- })
- },
- changeTab: function(){ // 选中 tab 项
- element.tabChange('demo', this.tabId);
- },
- ishasTab : function(){ // 判断 tab 项中是否包含
- 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
- }
- }
- }
- });
新增 tab 项逻辑思路
点击左侧导航, 获取它的数据 (url,id...)
如果有 url, 则判断其 id 是否与 tab 项的 lay-id 相同, 相同则切换选中, 不相同则新增
遇到的问题
layui-tree 单击节点只返回当前的节点数据, 不返回当前节点的 HTML 对象
解决方案
更改 tree.JS 源码
- e.children("a").on("click",
- function(e) {
- layui.stope(e),
- i.click(o,this)
- })
i.click(o) 改为 i.click(o,this)
使用
更多 web 前端课程 https://www.html.cn/ 的相关知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/layui/17959.html