mirror of https://github.com/layui/layui
贤心
4 years ago
parent
726cdd9ba5
commit
aeebdc4223
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>导航 - 常用元素 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding:20px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<ul class="layui-nav">
|
||||
<li class="layui-nav-item"><a href="">最新活动</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">产品</a>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="">大数据<span class="layui-badge-dot"></span></a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">方案</a>
|
||||
<dl class="layui-nav-child layui-nav-child-c">
|
||||
<dd><a href="">移动模块</a></dd>
|
||||
<dd class="layui-this"><a href="">后台模版</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=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img"></a>
|
||||
<dl class="layui-nav-child layui-nav-child-r">
|
||||
<dd><a href="">Your organizations</a></dd>
|
||||
<dd><a href="">Settings</a></dd>
|
||||
<hr>
|
||||
<dd><a href="">Sign out</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<ul class="layui-nav layui-bg-cyan">
|
||||
<li class="layui-nav-item layui-this"><a href="">最新活动</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">产品</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 class="layui-this"><a href="">后台模版</a></dd>
|
||||
<dd><a href="">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="">社区</a></li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<ul class="layui-nav layui-bg-green">
|
||||
<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="">选项1</a></dd>
|
||||
<dd><a href="">选项2</a></dd>
|
||||
<dd><a href="">选项3</a></dd>
|
||||
</dl>
|
||||
</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 class="layui-this"><a href="">后台模版</a></dd>
|
||||
<dd><a href="">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="">社区</a></li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
|
||||
<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="">选项1</a></dd>
|
||||
<dd><a href="">选项2</a></dd>
|
||||
<dd><a href="">选项3</a></dd>
|
||||
</dl>
|
||||
</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 class="layui-this"><a href="">后台模版</a></dd>
|
||||
<dd><a href="">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="">社区</a></li>
|
||||
</ul>
|
||||
|
||||
<br><br>
|
||||
|
||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||
<li class="layui-nav-item">
|
||||
<a class="" href="javascript:;">产品</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<dd>
|
||||
<a href="javascript:;">后台模版</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">组件一</a></dd>
|
||||
<dd>
|
||||
<a href="javascript:;">组件二</a>
|
||||
</dd>
|
||||
<dd><a href="javascript:;">组件三</a></dd>
|
||||
</dl>
|
||||
</dd>
|
||||
<dd><a href="javascript:;">电商平台</a></dd>
|
||||
<dd><a href="">跳转菜单</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>
|
||||
|
||||
<br><br>
|
||||
|
||||
<ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a class="" href="javascript:;">产品</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<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="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>
|
||||
|
||||
|
||||
<br><br>
|
||||
|
||||
<span class="layui-breadcrumb">
|
||||
<a href="">首页</a>
|
||||
<a href="">国际新闻</a>
|
||||
<a href="">亚太地区</a>
|
||||
<a><cite>正文</cite></a>
|
||||
</span>
|
||||
|
||||
<br><br>
|
||||
|
||||
<span class="layui-breadcrumb" lay-separator="|">
|
||||
<a href="">娱乐</a>
|
||||
<a href="">八卦</a>
|
||||
<a href="">体育</a>
|
||||
<a href="">搞笑</a>
|
||||
<a href="">视频</a>
|
||||
<a href="">游戏</a>
|
||||
<a href="">综艺</a>
|
||||
</span>
|
||||
|
||||
<br><br><br><br><br><br>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use(['element', 'form'], function(){
|
||||
var element = layui.element;
|
||||
|
||||
element.on('nav(test)', function(elem){
|
||||
console.log(elem)
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>选项卡 - 常用元素 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding:20px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this" lay-id="1">标题1</li>
|
||||
<li lay-id="2">标题2</li>
|
||||
<li lay-id="3">标题3</li>
|
||||
<li lay-id="4">标题4</li>
|
||||
<li lay-id="5">标题5</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>
|
||||
|
||||
<button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
|
||||
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
|
||||
<button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>
|
||||
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">标题1</li>
|
||||
<li>标题2</li>
|
||||
<li>标题3</li>
|
||||
<li>标题4</li>
|
||||
<li>标题5</li>
|
||||
<li>标题6</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<div class="layui-tab layui-tab-card">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">标题一</li>
|
||||
<li>标题2</li>
|
||||
<li>标题3</li>
|
||||
<li>标题4</li>
|
||||
<li>标题5</li>
|
||||
<li>标题6</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<div class="layui-form">
|
||||
<select>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
</select>
|
||||
</div>
|
||||
</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 class="layui-tab-item">6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab" lay-filter="test" lay-allowClose="true">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">标题1</li>
|
||||
<li>标题2</li>
|
||||
<li>标题3</li>
|
||||
<li>标题4</li>
|
||||
<li>标题5</li>
|
||||
<li>标题6</li>
|
||||
<li>标题7</li>
|
||||
<li>标题8</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use(['element', 'form'], function(){
|
||||
var element = layui.element;
|
||||
|
||||
element.on('tab(test)', function(data){
|
||||
console.log(this, data);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue