mirror of https://github.com/layui/layui
100 lines
3.3 KiB
Markdown
100 lines
3.3 KiB
Markdown
<pre class="layui-code" lay-options="{preview: true, text: {preview: '动态操作'}, codeStyle: 'height: 535px', layout: ['preview', 'code'], tools: ['full']}">
|
||
<textarea>
|
||
<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this" lay-id="11">标签1</li>
|
||
<li lay-id="22">标签2</li>
|
||
<li lay-id="33">标签3</li>
|
||
<li lay-id="44">标签4</li>
|
||
<li lay-id="55">标签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>
|
||
|
||
<div class="layui-btn-container">
|
||
<button class="layui-btn" lay-on="tabAdd">新增 tab 项</button>
|
||
<button class="layui-btn" lay-on="tabDelete">删除「标签4」</button>
|
||
<button class="layui-btn" lay-on="tabChange">切换到「标签3」</button>
|
||
</div>
|
||
|
||
<!-- import layui -->
|
||
<script>
|
||
layui.use(function(){
|
||
var element = layui.element;
|
||
var util = layui.util;
|
||
|
||
// 普通事件
|
||
util.on('lay-on', {
|
||
tabAdd: function(){
|
||
// 新增一个 tab 项
|
||
var label = (Math.random()*1000|0); // 标记 - 用于演示
|
||
element.tabAdd('test-handle', {
|
||
title: '新选项'+ label,
|
||
content: '内容-'+ label,
|
||
id: new Date().getTime(), // 实际使用一般是规定好的id，这里以毫秒数模拟
|
||
change: true // 是否添加完毕后即自动切换
|
||
})
|
||
},
|
||
tabDelete: function(othis){
|
||
// 删除指定 tab 项
|
||
element.tabDelete('test-handle', '44'); // 删除：“商品管理”
|
||
othis.addClass('layui-btn-disabled');
|
||
},
|
||
tabChange: function(){
|
||
// 切换到指定 tab 项
|
||
element.tabChange('test-handle', '33'); // 切换到：标签3
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</textarea>
|
||
</pre>
|
||
|
||
<h3 id="hash-match" class="ws-anchor ws-bold">hash 状态匹配</h3>
|
||
|
||
切换 tab 标签项后，地址栏同步 `hash` 值，当页面刷新时，tab 仍保持对应的切换状态。
|
||
|
||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 535px', tools: ['full']}">
|
||
<textarea>
|
||
<div class="layui-tab" lay-filter="test-hash">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this" lay-id="11">标签1</li>
|
||
<li lay-id="22">标签2</li>
|
||
<li lay-id="33">标签3</li>
|
||
<li lay-id="44">标签4</li>
|
||
<li lay-id="55">标签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>
|
||
|
||
<!-- import layui -->
|
||
<script>
|
||
layui.use(function(){
|
||
var element = layui.element;
|
||
|
||
// hash 地址定位
|
||
var hashName = 'tabid'; // hash 名称
|
||
var layid = location.hash.replace(new RegExp('^#'+ hashName + '='), ''); // 获取 lay-id 值
|
||
|
||
// 初始切换
|
||
element.tabChange('test-hash', layid);
|
||
// 切换事件
|
||
element.on('tab(test-hash)', function(obj){
|
||
location.hash = hashName +'='+ this.getAttribute('lay-id');
|
||
});
|
||
});
|
||
</script>
|
||
</textarea>
|
||
</pre> |