layui自定义ajax左侧三级菜单

本文实例为大家分享了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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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();
});

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

(0)

相关推荐

  • layui递归实现动态左侧菜单

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 我知道两种方式实现: 一.先加载所有的主菜单,之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过,那么动态添加了菜单,这里显示不出来,不判断的话,每次点击都会请求一次,这样请求的次数就太多了,服务器不太好的话可能会成为高并发的一个原因) 二.就是以下的了,使用递归一次性全部加载出来(缺点,耗费服务器内存) 如果动态添加一个菜单,你当前页面不手动刷新菜单不会显示,这个问题可以考虑用websock

  • layui自定义ajax左侧三级菜单

    本文实例为大家分享了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-f

  • js左侧三级菜单导航实例代码

    效果演示:  实例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lan

  • layui自定义插件citySelect实现省市区三级联动选择

    本文实例为大家分享了layui实现省市区三级联动选择的具体代码,供大家参考,具体内容如下 省市区三级菜单联动插件 /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 */ layui.define(['layer','form','element','laytpl'], function(exports){ var $ = layui.$; var form = layui.form; var la

  • layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子

    用layui表单自定义验证,ajax查询后台验证,form.verify和ajax组合时,尝试更改了几次方案,遇到的问题: 1.有时点击两次submit才会提示验证结果: 2.有时后台返回结果没问题,但不提示验证结果,查了查网上资料后,发现是在ajax最后return时出的问题,ajax改为同步,最后把验证提示信息return,而不能在success或error中return. form.verify({ account: function(value, item){ //value:表单的值.

  • vue实现后台管理权限系统及顶栏三级菜单显示功能

    •效果演示地址 项目demo展示 重要功能总结 权限功能的实现 权限路由思路: 根据用户登录的roles信息与路由中配置的roles信息进行比较过滤,生成可以访问的路由表,并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表,从而实现左侧和顶栏菜单的展示. 实现步骤: 1.在router/index.js中,给相应的菜单设置默认的roles信息: 如下:给"权限设置"菜单设置的权限为:meta:{roles: ['admin

  • Ajax商品分类三级联动的简单实现(案例)

    思路分析: 效果:当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品. 实现: 1.当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值 2.当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值 3.当选择二级商品时加载pid=当前id的商品,并创建option将商品追加到三级菜单中,并设置value值 页面效果: $(functi

  • ajax实现三级联动的基本方法

    本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下 1.首先在一个页面上布置一个div 方便日后引用方法 <body> <div id="sanji">//div的id为"sanji" </div> 2.sanji js处理页面 $(document).ready(function(){ //向div里面放三个下拉菜单 var str = "<select id='sheng'>&l

  • Bootstrap打造一个左侧折叠菜单的系统模板(一)

    1. 前言 最近需要做一个后台管理系统,我打算使用bootstrap弄一个好看的后台模板.网上的好多模板我觉的css和js有点重. 于是就打算完全依靠bootstrap搭建一个属于自己的模板. 首先从左侧的折叠菜单开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin-left: 1px; } #main-nav.nav-tabs.nav-stacked > li > a {

  • 使用layui实现的左侧菜单栏以及动态操作tab项方法

    首先说一下左侧菜单栏 这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在导入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的: 发现,绑定属性的菜单并没有下拉选项,这个问题在我导入layer.all.js之后解决了,而且发现如果是在页面的最上方导入的话也没有下拉选项,只有在html代码下面导入,才可以显示 ,不知道是什么原因. 下面说重点,动态操作tab项 页面截图: tab项右键菜单: 这里右键菜单的样式并没有做太多的美化. html代码:(

  • layui自定义工具栏的方法

    给大家分享的功能是layui自定义工具栏 功能效果:开启数据表格头部工具栏区域 关键参数:toolbar 参数类型:String/DOM/Boolean 参数说明: toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器 toolbar: '<div>xxx</div>' //直接传入工具栏模板字符 toolbar: true //仅开启工具栏,不显示左侧模板 toolbar: 'default' //让工具栏左侧显示默认的内置模板 在这里我用的是第一种to

随机推荐