199 lines
5.8 KiB
HTML
199 lines
5.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>弹层封装</title>
|
|||
|
|
<link href="../../assets/css/pearone.css" rel="stylesheet" />
|
|||
|
|
<link href="../../component/layui/css/layui.css" rel="stylesheet"/>
|
|||
|
|
<link href="../../component/font-awesome/css/font-awesome.css" rel="stylesheet"/>
|
|||
|
|
<script src="../../component/layui/layui.js"></script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
body{
|
|||
|
|
margin: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-tab-circular {
|
|||
|
|
padding: 0px;
|
|||
|
|
margin: 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-tab-circular .layui-tab-title {
|
|||
|
|
height: 40px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
border: 0px;
|
|||
|
|
background-color: whitesmoke!important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-tab-circular .layui-tab-title li {
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 32px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-tab-circular .layui-tab-title li span {
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-tab-circular .layui-tab-title li:hover {
|
|||
|
|
color: dodgerblue;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 选中状态 */
|
|||
|
|
.layui-tab-circular .layui-this {
|
|||
|
|
color: dodgerblue!important;
|
|||
|
|
border: none !important;
|
|||
|
|
box-shadow: 0px 0px 5px gray;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 选中后 */
|
|||
|
|
.layui-tab-circular .layui-this:after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-tab-title li .layui-tab-close {
|
|||
|
|
|
|||
|
|
border-radius: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-tab-title li .layui-tab-close:hover {
|
|||
|
|
|
|||
|
|
border-radius: 50px;
|
|||
|
|
background-color: lightgray;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body class="layui-bg-gray">
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-header">
|
|||
|
|
默认风格选项卡
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
|
|||
|
|
<div class="layui-tab">
|
|||
|
|
<ul class="layui-tab-title">
|
|||
|
|
<li class="layui-this">网站设置</li>
|
|||
|
|
<li>用户管理</li>
|
|||
|
|
<li>权限分配</li>
|
|||
|
|
<li>商品管理</li>
|
|||
|
|
<li>订单管理</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="layui-tab-content">
|
|||
|
|
<div class="layui-tab-item layui-show">
|
|||
|
|
1. 高度默认自适应，也可以随意固宽。
|
|||
|
|
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
|||
|
|
</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-card">
|
|||
|
|
<div class="layui-card-header">
|
|||
|
|
顶部选中样式
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
|
|||
|
|
<div class="layui-tab layui-tab-topline">
|
|||
|
|
<ul class="layui-tab-title">
|
|||
|
|
<li class="layui-this">网站设置</li>
|
|||
|
|
<li>用户管理</li>
|
|||
|
|
<li>权限分配</li>
|
|||
|
|
<li>商品管理</li>
|
|||
|
|
<li>订单管理</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="layui-tab-content">
|
|||
|
|
<div class="layui-tab-item layui-show">
|
|||
|
|
1. 高度默认自适应，也可以随意固宽。
|
|||
|
|
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
|||
|
|
</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-card">
|
|||
|
|
<div class="layui-card-header">
|
|||
|
|
顶部选中样式
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
|
|||
|
|
<div class="layui-tab layui-tab-button">
|
|||
|
|
<ul class="layui-tab-title">
|
|||
|
|
<li class="layui-this"><span class="layui-icon layui-icon-circle-dot"></span>网站设置</li>
|
|||
|
|
<li><span class="layui-icon layui-icon-circle-dot"></span>用户管理</li>
|
|||
|
|
<li><span class="layui-icon layui-icon-circle-dot"></span>权限分配</li>
|
|||
|
|
<li><span class="layui-icon layui-icon-circle-dot"></span>商品管理</li>
|
|||
|
|
<li><span class="layui-icon layui-icon-circle-dot"></span>订单管理</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="layui-tab-content">
|
|||
|
|
<div class="layui-tab-item layui-show">
|
|||
|
|
1. 高度默认自适应，也可以随意固宽。
|
|||
|
|
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
|||
|
|
</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-card">
|
|||
|
|
<div class="layui-card-header">
|
|||
|
|
圆形选项卡
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
|
|||
|
|
<div class="layui-tab layui-tab-circular">
|
|||
|
|
<ul class="layui-tab-title">
|
|||
|
|
<li class="layui-this"><span class=""></span>网站设置</li>
|
|||
|
|
<li><span class=""></span>用户管理</li>
|
|||
|
|
<li><span class=""></span>权限分配</li>
|
|||
|
|
<li><span class=""></span>商品管理</li>
|
|||
|
|
<li><span class=""></span>订单管理</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="layui-tab-content">
|
|||
|
|
<div class="layui-tab-item layui-show">
|
|||
|
|
1. 高度默认自适应，也可以随意固宽。
|
|||
|
|
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
layui.use('element', function(){
|
|||
|
|
var $ = layui.jquery
|
|||
|
|
,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|