layui自定义ajax左侧三级菜单


Posted in Javascript onJuly 26, 2019

本文实例为大家分享了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();
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 小贴士一星期合集
Apr 07 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
详解vue表单——小白速看
Apr 08 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
layui递归实现动态左侧菜单
Jul 26 #Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 #Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 #Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 #Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 #Javascript
微信小程序设置滚动条过程详解
Jul 25 #Javascript
vuejs移动端实现div拖拽移动
Jul 25 #Javascript
You might like
php include类文件超时问题处理
2015/02/06 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
在Python下尝试多线程编程
2015/04/28 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
Python中return函数返回值实例用法
2020/11/19 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
单位工作证明书格式
2014/10/04 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
交通安全主题班会
2015/08/12 职场文书
升学宴家长答谢词
2015/09/29 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
html实现随机点名器的示例代码
2021/04/02 Javascript