layui自定义ajax左侧三级菜单

HTML代码： 需引入layui.css代码

<!-- 左侧的菜单 -->

<div class="layui-side layui-bg-black" id="admin-side"><div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side">             </div>
</div>

<!-- 右侧tab选项卡和内容 -->
<div class="layui-body" style="bottom: 0;border-left: solid 2px #1AA094;" id="admin-body"><div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab" lay-allowclose="true"><ul class="layui-tab-title">  <!-- tab选项卡标题 --><li class="layui-this"><i class="fa fa-dashboard" aria-hidden="true"></i><cite>控制面板</cite></li></ul><div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;">  <!-- tab选项卡内容 --><div class="layui-tab-item layui-show"><iframe src="main.html"></iframe></div></div></div>
</div>

js代码：需引入 layui.all.js

var $ = layui.jquery,element = layui.element(),form = layui.form();
var html = '';
//获取菜单
$.ajax({url:"../manage/permissionList?type=1",type:"post",dataType:"json",data:{},success:function(data){var navs=data.result;$.each(navs,function(i,item){html += '<dl>';html += '<dt><a href="javascript:;" data-url="'+item.url+'" nav-id="'+item.id+'"><i class="'+item.icon+'"></i><cite>'+item.title+'</cite></a></dt>';//如果有第二级菜单if(item.children !== undefined && item.children.length > 0){$.each(item.children,function(j,item2){html += '<dd>';html += '<a href="javascript:;" data-url="'+item2.url+'" nav-id="'+item2.id+'"><i class="'+item2.icon+'"></i><cite>'+item2.title+'</cite></a>';//如果有三级菜单if(item2.children !== undefined && item2.children.length > 0){html += '<ul>';$.each(item2.children,function(k,item3){html += '<li>'+'<a href="javascript:;" data-url="'+item3.url+'" nav-id="'+item3.id+'">'+'<i class="'+item3.icon+'"></i>'+'<cite>'+item3.title+'</cite>'+'</a>'+'</li>';});html += '</ul>';}html += '</dd>';});}html += '</dl>';});//渲染html$('#admin-navbar-side').html(html);  }
});//触发事件
var active = {tabAdd: function(obj){//新增一个Tab项element.tabAdd('admin-tab', {title: $(this).html()//用于演示,content: '<iframe src="'+$(this).attr('data-url')+'"></iframe>'});element.tabChange("admin-tab", $('.layui-tab-title li').length - 1);  },tabDelete: function(index) {  //删除指定Tab项  element.tabDelete('admin-tab', index); //删除（注意序号是从0开始计算）  },tabChange: function(lay_id){//切换到指定Tab项element.tabChange('admin-tab', lay_id); //切换到：用户管理}
};
//添加tab
$(document).on('click','a',function(){if(!$(this)[0].hasAttribute('data-url') || $(this).attr('data-url')==='')return;var title = $.trim($(this).text());  var tabs = $(".layui-tab-title").children();  for(var i = 0; i < tabs.length; i++) {if($(tabs).eq(i).children('cite').text() == title) {element.tabChange('admin-tab', i);  return;}  }active["tabAdd"].call(this);resize();active.tabChange($(".layui-tab-title").children().length - 1);
});//iframe自适应
function resize(){var $content = $('.admin-nav-card .layui-tab-content');$content.height($(this).height() - 147);$content.find('iframe').each(function() {$(this).height($content.height());});
}
$(window).on('resize', function() {var $content = $('.admin-nav-card .layui-tab-content');$content.height($(this).height() - 147);$content.find('iframe').each(function() {$(this).height($content.height());});
}).resize();//toggle左侧菜单
$('.admin-side-toggle').on('click', function() {var sideWidth = $('#admin-side').width();if(sideWidth === 200) {$('#admin-body').animate({left: '0'}); //admin-footer$('#admin-footer').animate({left: '0'});$('#admin-side').animate({width: '0'});} else {$('#admin-body').animate({left: '200px'});$('#admin-footer').animate({left: '200px'});$('#admin-side').animate({width: '200px'});}
});
$(document).on('click','dt',function(){$(this).parent().find('dd').toggle();
});
$(document).on('click','dd a',function(){$(this).next('ul').toggle();
});

layui自定义ajax左侧三级菜单相关推荐

layui左侧三级菜单2.0
之前在layui 1.0的时候写过一个三级菜单,那时候用三级菜单还要自己扩展,与后台交互也显得麻烦,现在新版本的layui自动就可以实现三级菜单了,很多朋友在问,我就帮大家整理了一下样式大家可以改改, ...
js左侧三级菜单导航代码
效果演示: 实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
三级菜单 ajax 已经测试成功
<html> <head> <meta http-equiv="Content-Type" content="text/html; ...
Axure 制作左侧导航栏实现三级菜单效果
先放入菜单的相关元件,可以使用矩形,设置相应样式. 选中所有三级菜单,点击鼠标右键,选择转换为动态面板和设为隐藏,同时将面板命名为''ThreePanel''. 选中二级菜单和刚才设置的ThreePa ...
Html+Css+jQuery左侧导航菜单三级联动
Html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
layui自定义模块实现下拉框，读取数据字典数据
项目中页面很多下拉框,都是调用数据字典表数据,例如性别:男,女,:删除状态:已删除,正常. 如果每个地方都用ajax调用,过于麻烦,代码越多,维护工作就越麻烦.故使用layui自定义模块实现统一操作. ...
easyui左侧导航菜单右侧载入百度地图项目框架
代码下载 http://pan.baidu.com/s/1cDht7K 一个左侧是导航菜单,右侧是百度地图的应用: 一左侧菜单使用jquery easyui框架:网上下的资源:运行后如下: 二修 ...
三级菜单页面布局_三级菜单的最快导航布局
三级菜单页面布局重点 (Top highlight) When users navigate an interface, there's a need for speed. The faster i ...
java ajax 联动菜单_java结合jQuery.ajax实现左右菜单联动刷新列表内容
http://域名/一级菜单ID-二级菜单ID/用这样的URL请求页面,出现如图所示内容: 该页面包含四部分,顶部目录+左侧菜单+右侧菜单+右下侧数据列表: 左侧菜单包含一级菜单和二级菜单,点击某个一 ...

layui自定义ajax左侧三级菜单

layui自定义ajax左侧三级菜单相关推荐

最新文章

热门文章