layui选项卡演示
- .1 引入layui
- 2. 选项卡演示实列
- 3.js分离的代码
- 4运行结果
在前端开发中，选项卡常用于展示多个内容模块，提供用户友好的界面交互方式。layui作为一款简洁易用的前端框架，提供了丰富的组件库，其中包括了强大且易用的选项卡组件。
本文将介绍layui选项卡的基本用法以及常用功能，并通过实例演示具体步骤。
.1 引入layui
首先，我们需要在HTML文件中引入layui的相关文件。可以从layui的官方网站下载最新版本的layui，并将其解压到项目目录中。然后，在HTML文件的标签内添加以下代码：
html
<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>
2. 选项卡演示实列
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file = "common/header.jsp" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
</ul>
<!-- 个人头像及账号操作 -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="login.jsp">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">网站设置</li>
<li lay-id="22">用户管理</li>
<li lay-id="33">权限分配</li>
<li lay-id="44">商品管理</li>
<li lay-id="55">订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="static/index.js" >
</script>
</body>
</html>
3.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?methodName=menus",
dataType:'json',
success:function(data){
console.log(data);
var htmlStr ='';
$.each(data,function(i,n){
htmlStr+='<li class="layui-nav-item layui-nav-itemed">';
htmlStr+='<a class="" href="javascript:;">'+n.text+'</a>';
if (n.hasChildren) {
var children=n.children;
htmlStr+=' <dl class="layui-nav-child">';
$.each(children,function(idx,node){
htmlStr+=' <dd><a href="javascript:;" onclick="openTab(\''+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-id="'+id+'"]')
console.log($node);
if ($node.length==0) {
element.tabAdd('demo', {
title: title
,content: content
,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
})
}
}
4运行结果
