本地电脑做服务器建网站,欢迎进入18入口1,wordpress缓存头像,企业网站模板中文 产品列表layui选项卡演示 .1 引入layui2. 选项卡演示实列3.js分离的代码4运行结果 在前端开发中#xff0c;选项卡常用于展示多个内容模块#xff0c;提供用户友好的界面交互方式。layui作为一款简洁易用的前端框架#xff0c;提供了丰富的组件库#xff0c;其中包括了强大且易用的… layui选项卡演示 .1 引入layui2. 选项卡演示实列3.js分离的代码4运行结果 在前端开发中选项卡常用于展示多个内容模块提供用户友好的界面交互方式。layui作为一款简洁易用的前端框架提供了丰富的组件库其中包括了强大且易用的选项卡组件。 本文将介绍layui选项卡的基本用法以及常用功能并通过实例演示具体步骤。 .1 引入layui
首先我们需要在HTML文件中引入layui的相关文件。可以从layui的官方网站下载最新版本的layui并将其解压到项目目录中。然后在HTML文件的标签内添加以下代码
html
link relstylesheet hrefpath/to/layui/css/layui.css
script srcpath/to/layui/layui.js/script2. 选项卡演示实列
% page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%% include file common/header.jsp %
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleInsert title here/title
/head
body
div classlayui-layout layui-layout-admindiv classlayui-headerdiv classlayui-logo layui-hide-xs layui-bg-blacklayout demo/div!-- 头部区域可配合layui 已有的水平导航 --ul classlayui-nav layui-layout-left/ul!-- 个人头像及账号操作 --ul classlayui-nav layui-layout-rightli classlayui-nav-item layui-hide layui-show-md-inline-blocka hrefjavascript:;img src//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg classlayui-nav-imgtester/adl classlayui-nav-childdda hrefYour Profile/a/dddda hrefSettings/a/dddda hreflogin.jspSign out/a/dd/dl/lili classlayui-nav-item lay-header-eventmenuRight lay-unselecta hrefjavascript:;i classlayui-icon layui-icon-more-vertical/i/a/li/ul/divdiv classlayui-side layui-bg-blackdiv classlayui-side-scroll!-- 左侧导航区域可配合layui已有的垂直导航 --ul idmenu classlayui-nav layui-nav-tree lay-filtermenu/ul/div/divdiv classlayui-body!-- 内容主体区域 --div stylepadding: 15px;div classlayui-tab lay-filterdemo lay-allowclosetrueul classlayui-tab-titleli classlayui-this lay-id11网站设置/lili lay-id22用户管理/lili lay-id33权限分配/lili lay-id44商品管理/lili lay-id55订单管理/li/uldiv classlayui-tab-contentdiv classlayui-tab-item layui-show内容1/divdiv classlayui-tab-item内容2/divdiv classlayui-tab-item内容3/divdiv classlayui-tab-item内容4/divdiv classlayui-tab-item内容5/div/div
/div /div/divdiv classlayui-footer!-- 底部固定区域 --底部固定区域/div
/div
script srcstatic/index.js /script
/body/html3.js分离的代码
var element,layer,util,$;layui.use([element, layer, util], function(){element layui.element,layer layui.layer,util layui.util,$ layui.$$.ajax({url:{pageContext.request.contextPath}/permisson.action?methodNamemenus,dataType:json,success:function(data){console.log(data); var htmlStr ;$.each(data,function(i,n){htmlStrli classlayui-nav-item layui-nav-itemed;htmlStra class hrefjavascript:;n.text/a;if (n.hasChildren) {var childrenn.children;htmlStr dl classlayui-nav-child;$.each(children,function(idx,node){htmlStr dda hrefjavascript:; onclickopenTab(\node.text\,\node.attributes.self.url\,\node.id \)node.text/a/dd;console.log(node.text); });htmlStr /dl;}htmlStr/li; console.log(n.text); });$(#menu).html(htmlStr);element.render(menu);}});});
/*** */
function openTab(title,content,id) {var $node$(li[lay-idid])console.log($node);if ($node.length0) {element.tabAdd(demo, {title: title,content: content,id: id //实际使用一般是规定好的id这里以时间戳模拟下})}}4运行结果
