layui學習--tab選項卡
阿新 • • 發佈：2018-11-02
var element; var $; layui.use(['element','jquery'],function(){ element = layui.element, $ = layui.jquery; //監聽左側選單點選 element.on('nav(left-menu)', function(elem){ alert(elem.context.attributes+"sss"); addTab(elem[0].innerText,elem[0].attributes[1].nodeValue,elem[0].id); }); //監聽tab選項卡切換 element.on('tab(tab-switch)', function(data){ var id = data.elem.context.attributes[0].nodeValue; layui.each($(".layui-nav-child"), function () { $(this).find("dd").removeClass("layui-this"); }); $("#"+id).attr("class","layui-this"); }); }); /** * 新增tab選項卡，如果已經存在則開啟已經存在的，不存在則新增 * @param tabTitle 選項卡標題名稱 * @param tabUrl 選項卡連結的頁面URL * @param tabId 選項卡id */ function addTab(tabTitle,tabUrl,tabId){ if ($(".layui-tab-title li[lay-id=" + tabId + "]").length > 0) { element.tabChange('tab-switch', tabId); }else{ element.tabAdd('tab-switch', { title: tabTitle ,content: 'js程式碼<iframe src='+tabUrl+' width="100%" style="min-height: 500px;" frameborder="0" scrolling="auto" onload="setIframeHeight(this)"></iframe>' // 選項卡內容，支援傳入html ,id: tabId //選項卡標題的lay-id屬性值 }); element.tabChange('tab-switch', tabId); //切換到新增的tab上 } } /** * ifrme自適應頁面高度，需要設定min-height * @param iframe */ function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; } } };
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>學習LayUI</title> <link rel="stylesheet" href="css/layui.css"> <script src="layui.js"></script> <script src="js/hh.js"></script> <!--讓IE8/9支援媒體查詢，從而相容柵格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style rel="stylesheet" type="text/css"> .layui-tab-title li:first-child > i { display: none; } </style> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header "> <div class="layui-logo"> <i class="layui-icon" style="font-size: 26px; color: #1E9FFF;"></i> XX綜合管理系統 </div> <!-- 頭部區域（可配合layui已有的水平導航） --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"> <a href="">控制檯</a> </li> <li class="layui-nav-item"><a href="">商品管理</a></li> <li class="layui-nav-item"><a href="">使用者</a></li> <li class="layui-nav-item"> <a href="javascript:;">其它系統</a> <dl class="layui-nav-child"> <dd><a href="">郵件管理</a></dd> <dd><a href="">訊息管理</a></dd> <dd><a href="">授權管理</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="">控制檯<span class="layui-badge">9</span></a> </li> <li class="layui-nav-item"> <a href="">個人中心<span class="layui-badge">3</span></a> </li> <li class="layui-nav-item"> <a href="http://www.shuyangyang.com.cn">關於系統</a> </li> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 束洋洋 </a> <dl class="layui-nav-child"> <dd><a href="">基本資料</a></dd> <dd><a href="">安全設定</a></dd> <dd><a href="">退出</a></dd> </dl> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左側導航區域（可配合layui已有的垂直導航） --> <ul class="layui-nav layui-nav-tree" lay-filter="left-menu"> <li class="layui-nav-item "> <a class="" href="javascript:;"><i class="layui-icon" style="margin-right: 5px"></i>系統管理</a> <dl class="layui-nav-child"> <dd id="S001" name="form.html"><a href="javascript:;">使用者管理</a></dd> <dd id="S002" name="http://www.baidu.com"><a href="javascript:;">角色管理</a></dd> <dd id="S003" name=""><a href="javascript:;">部門管理</a></dd> <dd id="S004" name="http://www.shuyangyang.com.cn"><a href="javascript:;">作者網站</a></dd> </dl> </li> <li class="layui-nav-item "> <a href="javascript:;">解決方案</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">列表一</a></dd> <dd><a href="javascript:;">列表二</a></dd> <dd><a href="">超連結</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">雲市場</a></li> <li class="layui-nav-item"><a href="">釋出商品</a></li> </ul> </div> </div> <div class="layui-body" style="bottom: 0px;"> <div style="padding-left: 15px"> <!-- 內容主體區域 --> <div class="layui-tab" lay-allowClose="true" lay-filter="tab-switch"> <ul class="layui-tab-title" lay-allowClose="true"> <li class="layui-this " >首頁</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> 內容 </div> </div> </div> </div> </div> </div> </div> <script> </script> </body> </html>
頁面效果：
