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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
js日期联动示例
May 02 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
如何实现vue的tree组件
Dec 03 Vue.js
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 fsockopen写的HTTP下载的类
2007/02/22 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
javascript操作数组详解
2014/12/17 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
python+Django+apache的配置方法详解
2016/06/01 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
自荐信如何“自荐”
2013/10/24 职场文书
学生感冒英文请假条
2014/02/04 职场文书
户外活动策划方案
2014/03/12 职场文书
保险内勤岗位职责
2014/04/05 职场文书
2014年团工作总结
2014/11/27 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
导游词之镇江焦山
2019/11/21 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Python数组变形的几种实现方法
2022/05/30 Python
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL