Django+Layui学习二:Tabs
Posted 绪哥哥
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django+Layui学习二:Tabs相关的知识,希望对你有一定的参考价值。
前言
上一篇我们制作了简单的后台布局,并且动态加载了侧边栏的节点以及子节点,本篇来做一下tabs。
首先我们来看下tab创建的简单流程:
按照流程图我们可以开始编写html以及js代码:
1 <div class="layui-body"> 2 <!-- 内容主体区域 --> 3 <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true"> 4 <ul class="layui-tab-title"></ul> 5 <div class="layui-tab-content"></div> 6 </div> 7 </div>
1 <script> 2 //javascript代码区域 3 layui.use(\'element\', function () { 4 var element = layui.element, 5 $ = layui.jquery; 6 7 var active = { 8 tabAdd: function (url, id) { 9 //新增一个Tab项 10 element.tabAdd(\'demo\', { 11 title: \'新选项\' + id//用于演示 12 , 13 content: \'<iframe data-frameid="\' + id + \'" frameborder="0" name="content" scrolling="no" width="100%" src="\' + url + \'"></iframe>\' 14 , 15 id: id //实际使用一般是规定好的id,这里以时间戳模拟下 16 }) 17 {#CustomRightClick(id);//绑定右键菜单#} 18 {#FrameWH();//计算框架高度#} 19 } 20 , tabChange: function (id) { 21 //切换到指定Tab项 22 element.tabChange(\'demo\', id); //切换到:用户管理 23 $("iframe[data-frameid=\'" + id + "\']").attr("src", $("iframe[data-frameid=\'" + id + "\']").attr("src"))//切换后刷新框架 24 } 25 , tabDelete: function (id) { 26 element.tabDelete("demo", id);//删除 27 } 28 , tabDeleteAll: function (ids) {//删除所有 29 $.each(ids, function (i, item) { 30 element.tabDelete("demo", item); 31 }) 32 } 33 }; 34 35 //结合菜单展示内容 36 $(".layui-side-scroll a").click(function () { 37 var dataid = $(this); 38 if(dataid.attr(\'data-id\')){ 39 if ($(".layui-tab-title li[lay-id]").length <= 0) { 40 active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id")); 41 } else { 42 var isData = false; 43 $.each($(".layui-tab-title li[lay-id]"), function () { 44 if ($(this).attr("lay-id") == dataid.attr("data-id")) { 45 isData = true; 46 } 47 }) 48 if (isData == false) { 49 active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id")); 50 } 51 } 52 active.tabChange(dataid.attr("data-id")); 53 } 54 55 }); 56 </script>
以上是关于Django+Layui学习二:Tabs的主要内容,如果未能解决你的问题,请参考以下文章