基于layui操作tab
2017-11-24 17:16
302 查看
前言
基于layui的tab操作,此文仅作参考,学习之用
首先下载layui后台框架
打开后台代码文件
在内容部分插入以下代码
3.编写js代码
引用js:layui.all.js 或者 layui.js,这两种只是写法的区别,功能都一样,具体写法参考官方文档即可
4.增加触发事件
当然在此之前不能忘记需要载入相应对象
5.触发代码完成后,关联触发条件,我的是左侧导航点击触发,因为重复触发,不能一直打开新的,所以写了一些判断
6.为了效果更好一点,我在tab标签上增加了右键功能
下面是右键的html代码
7.右键菜单有了,就需要给右键添加功能
8.完成后,我们还需要计算iframe的高度,因为自动高度,会导致iframe挤到一起
基于layui的tab操作,此文仅作参考,学习之用
首先下载layui后台框架
打开后台代码文件
在内容部分插入以下代码
<div class="layui-tab" lay-filter="demo" lay-allowclose="true"> <ul class="layui-tab-title"></ul> <div class="layui-tab-content"></div> </div>
3.编写js代码
引用js:layui.all.js 或者 layui.js,这两种只是写法的区别,功能都一样,具体写法参考官方文档即可
4.增加触发事件
var active = { tabAdd: function (url, id) { //新增一个Tab项 element.tabAdd('demo', { title: '新选项' + (Math.random() * 1000 | 0) //用于演示 , content: '<iframe data-frameid="'+id+'" frameborder="0" name="content" scrolling="no" width="100%" src="' + url + '"></iframe>' , id: id //实际使用一般是规定好的id,这里以时间戳模拟下 }) CustomRightClick(id);//绑定右键菜单 FrameWH();//计算框架高度 } , tabChange: function (id) { //切换到指定Tab项 element.tabChange('demo', id); //切换到:用户管理 $("iframe[data-frameid='"+id+"']").attr("src",$("iframe[data-frameid='"+id+"']").attr("src"))//切换后刷新框架 } , tabDelete: function (id) { element.tabDelete("demo", id);//删除 } , tabDeleteAll: function (ids) {//删除所有 $.each(ids, function (i,item) { element.tabDelete("demo", item); }) } };
当然在此之前不能忘记需要载入相应对象
var $ = jQuery = layui.jquery; var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块 var layer = layui.layer;
5.触发代码完成后,关联触发条件,我的是左侧导航点击触发,因为重复触发,不能一直打开新的,所以写了一些判断
//结合菜单展示内容 $(".layui-side-scroll a").click(function () { var dataid = $(this); if ($(".layui-tab-title li[lay-id]").length <= 0) { active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id")); } else { var isData = false; $.each($(".layui-tab-title li[lay-id]"), function () { if ($(this).attr("lay-id") == dataid.attr("data-id")) { isData = true; } }) if (isData == false) { active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id")); } } active.tabChange(dataid.attr("data-id")); })
6.为了效果更好一点,我在tab标签上增加了右键功能
//绑定右键菜单 function CustomRightClick(id) { //取消右键 $('.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); 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; }); }
下面是右键的html代码
<ul class="rightmenu"> <li data-type="closethis">关闭当前</li> <li data-type="closeall">关闭所有</li> </ul>
7.右键菜单有了,就需要给右键添加功能
$(".rightmenu li").click(function () { if ($(this).attr("data-type") == "closethis") { 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"); }) active.tabDeleteAll(ids); } $('.rightmenu').hide(); })
8.完成后,我们还需要计算iframe的高度,因为自动高度,会导致iframe挤到一起
function FrameWH() { var h = $(window).height() -41- 10 - 60 -10-44 -10; $("iframe").css("height",h+"px"); } $(window).resize(function () { FrameWH(); })
相关文章推荐
- 基于React-Native及Redux的Immutable.js引入
- 基于Java的Spark WordCount编程实现
- 基于Docker实现PaaS平台
- 基于IntelliJ IDEA开发Spark的Maven项目——Scala语言
- Web服务搜索与执行引擎(四)——基于(三)的系统架构设计
- 基于PIX525的NAT配置
- MySQL 主从配置和基于Spring 的读写分离
- 基于全志H3移植AP6212(wifi+BT4.2)
- Lazy Load - jQuery plugin for lazy loading images(基于jQuery的图片延迟加载插件)
- 基于服务器邮件与本地副本的邮件的优缺点
- 基于XSocket框架的socket编程技巧(设置连接的超时时间和最大空闲时间)
- Python实现基于协程的异步爬虫(一)
- canvas绘图基础及基于粒子系统的雪花飘落
- Nubia Z5S 基于官方H207/4.4内核的Mokee4.4.4 RC3.2 (2014.7.31修复呼吸灯(能亮依然不能呼吸))
- 基于iBeacon技术的智慧商场解决方案
- 基于C语言的通用数据结构和算法库
- 基于深层神经网络的命名实体识别技术
- 基于java技术的搜索引擎的实现
- Apache+Jboss集群基于反向代理的负载均衡(转载)
- 基于Qt的FreeType字体轮廓解析