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


Posted in Javascript onSeptember 10, 2019

首先说一下左侧菜单栏

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

这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在导入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的:

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

发现,绑定属性的菜单并没有下拉选项,这个问题在我导入layer.all.js之后解决了,而且发现如果是在页面的最上方导入的话也没有下拉选项,只有在html代码下面导入,才可以显示 ,不知道是什么原因。

下面说重点,动态操作tab项

页面截图:

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

tab项右键菜单:

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

这里右键菜单的样式并没有做太多的美化。

html代码:(页面中关于引入js和css文件的部分被我省略了,还有要注意jQuery的引入顺序)

<div class="layui-tab layui-tab-card site-demo-button" style="position: relative;">
   <ul class="layui-nav layui-nav-tree layui-nav-side">
    <li class="layui-nav-item layui-nav-itemed">
     <a href="javascript:;" rel="external nofollow" rel="external nofollow" >默认展开</a>
     <dl class="layui-nav-child">
      <dd>
       <a data-url="a" data-id="11" data-title="选项a" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="site-demo-active" data-type="tabAdd">选项a</a>
      </dd>
      <dd>
       <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="b" data-title="选项b" data-id="22" class="site-demo-active" data-type="tabAdd">选项b</a>
      </dd>
      <dd>
       <a href="">跳转</a>
      </dd>
     </dl>
    </li>
    <li class="layui-nav-item">
     <a href="javascript:;" rel="external nofollow" rel="external nofollow" >解决方案</a>
     <dl class="layui-nav-child">
      <dd>
       <a href="">移动模块</a>
      </dd>
      <dd>
       <a href="">后台模版</a>
      </dd>
      <dd>
       <a href="">电商平台</a>
      </dd>
     </dl>
    </li>
    <li class="layui-nav-item">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="c" data-title="选项c" data-id="33" class="site-demo-active" data-type="tabAdd">产品c</a>
    </li>
    <li class="layui-nav-item">
     <a href="">大数据</a>
    </li>
   </ul>

   <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
    <ul class="layui-tab-title">
    </ul>
    <ul class="rightmenu" style="display: none;position: absolute;">
     <li data-type="closethis">关闭当前</li>
     <li data-type="closeall">关闭所有</li>
    </ul>
    <div class="layui-tab-content">
    </div>
   </div>

  </div>

js代码:

layui.use('element', function() {
   var $ = layui.jquery;
   var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块

   //触发事件
   var active = {
    //在这里给active绑定几项事件,后面可通过active调用这些事件
    tabAdd: function(url,id,name) {
     //新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值
     //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
     element.tabAdd('demo', {
      title: name,
      content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'.html" style="width:100%;height:99%;"></iframe>',
      id: id //规定好的id
     })
      CustomRightClick(id); //给tab绑定右击事件
      FrameWH(); //计算ifram层的大小
    },
    tabChange: function(id) {
     //切换到指定Tab项
     element.tabChange('demo', id); //根据传入的id传入到指定的tab项
    }, 
    tabDelete: function (id) {
    element.tabDelete("demo", id);//删除
    }
    , tabDeleteAll: function (ids) {//删除所有
     $.each(ids, function (i,item) {
      element.tabDelete("demo", item); //ids是一个数组,里面存放了多个id,调用tabDelete方法分别删除
     })
    }
   };


   //当点击有site-demo-active属性的标签时,即左侧菜单栏中内容 ,触发点击事件
   $('.site-demo-active').on('click', function() {
    var dataid = $(this);

    //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
    if ($(".layui-tab-title li[lay-id]").length <= 0) {
     //如果比零小,则直接打开新的tab项
     active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
    } else {
     //否则判断该tab项是否以及存在

     var isData = false; //初始化一个标志,为false说明未打开该tab项 为true则说明已有
     $.each($(".layui-tab-title li[lay-id]"), function () {
      //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
      if ($(this).attr("lay-id") == dataid.attr("data-id")) {
       isData = true;
      }
     })
     if (isData == false) {
      //标志为false 新增一个tab项
      active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
     }
    }
    //最后不管是否新增tab,最后都转到要打开的选项页面上
    active.tabChange(dataid.attr("data-id"));
   });

   function CustomRightClick(id) {
    //取消右键 rightmenu属性开始是隐藏的 ,当右击的时候显示,左击的时候隐藏
    $('.layui-tab-title li').on('contextmenu', function () { return false; })
    $('.layui-tab-title,.layui-tab-title li').click(function () {
     $('.rightmenu').hide();
    });
    //桌面点击右击 
    $('.layui-tab-title li').on('contextmenu', function (e) {
     var popupmenu = $(".rightmenu");
     popupmenu.find("li").attr("data-id",id); //在右键菜单中的标签绑定id属性

     //判断右侧菜单的位置 
     l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
     t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
     popupmenu.css({ left: l, top: t }).show(); //进行绝对定位
     //alert("右键菜单")
     return false;
    });
   }

   $(".rightmenu li").click(function () {

    //右键菜单中的选项被点击之后,判断type的类型,决定关闭所有还是关闭当前。
    if ($(this).attr("data-type") == "closethis") {
     //如果关闭当前,即根据显示右键菜单时所绑定的id,执行tabDelete
     active.tabDelete($(this).attr("data-id"))
    } else if ($(this).attr("data-type") == "closeall") {
     var tabtitle = $(".layui-tab-title li");
     var ids = new Array();
     $.each(tabtitle, function (i) {
      ids[i] = $(this).attr("lay-id");
     })
     //如果关闭所有 ,即将所有的lay-id放进数组,执行tabDeleteAll
     active.tabDeleteAll(ids);
    }

    $('.rightmenu').hide(); //最后再隐藏右键菜单
   })
   function FrameWH() {
    var h = $(window).height() -41- 10 - 60 -10-44 -10;
    $("iframe").css("height",h+"px");
   }

   $(window).resize(function () {
    FrameWH();
   })
  });

tab项是放在<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;"> 这个div中的,其中有一个重要的属性lay-filter,在js中调用的tabAdd,tabDelete等多种方法都携带了这个参数,我对此的理解是相当于一个判断拦截功能,将tab项放在lay-filter=‘demo'的div中。可以借助该参数,完成指定元素的局部更新。

其中还有关于element的操作,var element = layui.element

element模块的实例

返回的element变量为该实例的对象,携带一些用于元素操作的基础方法,我们就是用这些方法进行tab项的新增和删除还有切换。

这是element 中的tabAdd方法,其中的content可以是一个iframe页面,在此例中,我就是传递了一个简单的页面,这就实现了不同页面间的一些切换。

element.tabAdd('demo', {
 title: '选项卡的标题'
 ,content: '选项卡的内容' //支持传入html
 ,id: '选项卡标题的lay-id属性值'
});

以上这篇使用layui实现的左侧菜单栏以及动态操作tab项方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
使用vant的地域控件追加全部选项
Nov 03 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 #Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 #Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 #Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 #Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 #Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 #Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
You might like
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
php实现分页显示
2015/11/03 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
Sea.JS知识总结
2016/05/05 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
Vue中props的详解
2019/05/16 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python的pygame安装教程详解
2020/02/10 Python
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
体育馆的标语
2014/06/24 职场文书
社区清明节活动总结
2014/07/04 职场文书
实习协议书范本
2014/09/25 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
初中家长评语大全
2014/12/26 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python