mirror of
https://gitee.com/layui/layui.git
synced 2025-04-05 17:38:02 +08:00
docs: 新增 tabs 标签组件文档
This commit is contained in:
贤心
parent
fcf7a91bb4
commit
6e410d3718
@ -1,5 +1,3 @@
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '综合用法'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
AAA
|
||||
|
||||
<!-- import layui -->
|
||||
@ -7,25 +5,6 @@ AAA
|
||||
layui.use(function(){
|
||||
var MOD_NAME = layui.MOD_NAME;
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-NAME" class="ws-anchor ws-bold">示例标题</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
AAA
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var MOD_NAME = layui.MOD_NAME;
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
51
docs/tabs/detail/demo.md
Normal file
51
docs/tabs/detail/demo.md
Normal file
@ -0,0 +1,51 @@
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '动态操作'}, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/tabs/examples/demo.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-method" class="ws-anchor ws-bold">方法渲染</h3>
|
||||
|
||||
即通过方法设置 tabs 标签，而非默认的自动渲染页面中的 `class="layui-tabs"` 的容器模板。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/tabs/examples/method.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-card" class="ws-anchor ws-bold">卡片风格</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/tabs/examples/card.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-hash" class="ws-anchor ws-bold">HASH 状态匹配</h3>
|
||||
|
||||
切换 tabs 标签项后，地址栏同步 `hash` 值，当页面刷新时，tabs 仍保持对应的切换状态。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/tabs/examples/hash.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-nest" class="ws-anchor ws-bold">标签嵌套</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/tabs/examples/nest.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-custom" class="ws-anchor ws-bold">给任意元素添加 Tab 功能</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/tabs/examples/custom.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
98
docs/tabs/detail/options.md
Normal file
98
docs/tabs/detail/options.md
Normal file
@ -0,0 +1,98 @@
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="100">
|
||||
<col width="100">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性名</th>
|
||||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>elem</td>
|
||||
<td>
|
||||
|
||||
绑定元素选择器或 DOM 对象
|
||||
|
||||
</td>
|
||||
<td>string/DOM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>header</td>
|
||||
<td>
|
||||
|
||||
选项卡的标题列表，可以是一个包含标题文本的数组，也可以是一个包含标题对象的数组。标题对象支持以下属性：
|
||||
- `title` 标题文本
|
||||
- `id` 标题唯一索引
|
||||
- `disabled` 是否禁用
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>body</td>
|
||||
<td>
|
||||
|
||||
选项卡的内容列表，可以是一个包含内容文本的数组，也可以是一个包含内容对象的数组。内容对象支持以下属性：
|
||||
- `content` 内容文本
|
||||
- `id` 内容唯一索引
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>index</td>
|
||||
<td>
|
||||
|
||||
初始选中的选项卡索引
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`0`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>closable</td>
|
||||
<td>
|
||||
|
||||
是否允许选项卡被关闭
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerMode</td>
|
||||
<td>
|
||||
|
||||
选项卡标题栏的展现模式。可选值：
|
||||
- `default` 默认模式
|
||||
- `brief` 简约模式
|
||||
- `card` 卡片模式
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`default`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
54
docs/tabs/examples/card.md
Normal file
54
docs/tabs/examples/card.md
Normal file
@ -0,0 +1,54 @@
|
||||
<h4>普通卡片：</h4>
|
||||
|
||||
<div class="layui-tabs layui-tabs-card" lay-options="{index: 1}">
|
||||
<ul class="layui-tabs-header">
|
||||
<li>标题1</li>
|
||||
<li>标题2</li>
|
||||
<li><a href="" target="_blank" class="layui-font-blue">跳转项</a></li>
|
||||
<li class="layui-disabled" lay-unselect>禁选项</li>
|
||||
<li>标题5</li>
|
||||
<li>标题6</li>
|
||||
</ul>
|
||||
<div class="layui-tabs-body">
|
||||
<div class="layui-tabs-item">内容-1</div>
|
||||
<div class="layui-tabs-item">内容-2</div>
|
||||
<div class="layui-tabs-item">内容-3</div>
|
||||
<div class="layui-tabs-item">内容-4</div>
|
||||
<div class="layui-tabs-item">内容-5</div>
|
||||
<div class="layui-tabs-item">内容-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>边框卡片：</h4>
|
||||
|
||||
<div class="layui-tabs layui-tabs-card layui-panel layui-inline">
|
||||
<ul class="layui-tabs-header layui-bg-tint">
|
||||
<li class="layui-this">标题1</li>
|
||||
<li>标题2</li>
|
||||
<li>标题3</li>
|
||||
<li>标题4</li>
|
||||
<li>标题5</li>
|
||||
<li>标题6</li>
|
||||
</ul>
|
||||
<div class="layui-tabs-body">
|
||||
<div class="layui-tabs-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-tabs-item">2</div>
|
||||
<div class="layui-tabs-item">3</div>
|
||||
<div class="layui-tabs-item">4</div>
|
||||
<div class="layui-tabs-item">5</div>
|
||||
<div class="layui-tabs-item">6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
33
docs/tabs/examples/custom.md
Normal file
33
docs/tabs/examples/custom.md
Normal file
@ -0,0 +1,33 @@
|
||||
<div id="demoTabs3">
|
||||
<style>
|
||||
#demoTabsHeader .layui-btn.layui-this{border-color: #eee; color: #000; background: none;}
|
||||
#demoTabsBody .test-item{display: none;}
|
||||
</style>
|
||||
<div class="layui-btn-container" id="demoTabsHeader">
|
||||
<button class="layui-btn layui-this">标题 1</button>
|
||||
<button class="layui-btn">标题 2</button>
|
||||
<button class="layui-btn">标题 3</button>
|
||||
</div>
|
||||
<div class="layui-panel layui-padding-3" id="demoTabsBody">
|
||||
<div class="test-item layui-show">内容 111</div>
|
||||
<div class="test-item">内容 222</div>
|
||||
<div class="test-item">内容 333</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var tabs = layui.tabs;
|
||||
|
||||
// 给任意元素绑定 Tab 功能
|
||||
tabs.render({
|
||||
elem: '#demoTabs3',
|
||||
header: ['#demoTabsHeader', '>button'],
|
||||
body: ['#demoTabsBody', '>.test-item'],
|
||||
change: function(obj) {
|
||||
console.log(obj);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
51
docs/tabs/examples/demo.md
Normal file
51
docs/tabs/examples/demo.md
Normal file
@ -0,0 +1,51 @@
|
||||
<div class="layui-tabs layui-hide-v" id="demoTabs1" lay-options="{closable: true, headerMode:'scroll'}">
|
||||
<ul class="layui-tabs-header">
|
||||
<li lay-id="aaa" lay-unclosed="true" class="layui-this">Tab1</li>
|
||||
<li lay-id="bbb">Tab2</li>
|
||||
<li lay-id="ccc">Tab3</li>
|
||||
<li lay-id="ddd">Tab4</li>
|
||||
<li lay-id="eee">Tab5</li>
|
||||
<li lay-id="fff">Tab6</li>
|
||||
</ul>
|
||||
<div class="layui-tabs-body">
|
||||
<div class="layui-tabs-item layui-show">Tab Content-1</div>
|
||||
<div class="layui-tabs-item">Tab Content-2</div>
|
||||
<div class="layui-tabs-item">Tab Content-3</div>
|
||||
<div class="layui-tabs-item">Tab Content-4</div>
|
||||
<div class="layui-tabs-item">Tab Content-5</div>
|
||||
<div class="layui-tabs-item">Tab Content-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn" onclick="layui.tabs.change('demoTabs1', 'ccc')">切换到：Tab3</button>
|
||||
<button class="layui-btn" onclick="layui.tabs.change('demoTabs1', 1)">切换到：第 2 项</button>
|
||||
<button class="layui-btn" onclick="layui.tabs.close('demoTabs1', 'ddd')">关闭：Tab4</button>
|
||||
<button class="layui-btn" onclick="layui.tabs.close('demoTabs1', 1)">关闭：第 2 项</button>
|
||||
<button class="layui-btn" lay-on="add">添加 Tab</button>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var tabs = layui.tabs;
|
||||
var util = layui.util;
|
||||
|
||||
// 事件
|
||||
util.on({
|
||||
add: function(){
|
||||
var n = Math.random()*1000 | 0; // 演示标记
|
||||
//添加标签
|
||||
tabs.add('demoTabs1', {
|
||||
title: 'New Tab '+ n, // 此处加 n 仅为演示区分，实际应用不需要
|
||||
content: 'New Tab Content '+ n,
|
||||
id: 'new-'+ n,
|
||||
aaa: 'attr-'+ n, // 自定义属性，其中 aaa 可任意命名
|
||||
// mode: 'curr',
|
||||
done: function(params) {
|
||||
console.log(params);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
23
docs/tabs/examples/hash.md
Normal file
23
docs/tabs/examples/hash.md
Normal file
@ -0,0 +1,23 @@
|
||||
<div class="layui-tabs layui-hide-v" id="demoTabs-hash">
|
||||
<ul class="layui-tabs-header">
|
||||
<li lay-id="A1" class="layui-this"><a href="#A1">标题题题题题题1</a></li>
|
||||
<li lay-id="A2"><a href="#A2">标题题题2</a></li>
|
||||
<li lay-id="A3"><a href="#A3">标题3</a></li>
|
||||
<li lay-id="A4"><a href="#A4">标题题题题题题题4</a></li>
|
||||
<li lay-id="A5"><a href="#A5">标题5</a></li>
|
||||
<li lay-id="A6"><a href="#A6">标题6</a></li>
|
||||
<li lay-id="A7"><a href="#A7">标题7</a></li>
|
||||
<li lay-id="A8"><a href="#A8">标题题题题题题题8</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var tabs = layui.tabs;
|
||||
|
||||
// HASH 初始定位
|
||||
var hash = layui.hash();
|
||||
tabs.change('demoTabs-hash', hash.href);
|
||||
});
|
||||
</script>
|
||||
26
docs/tabs/examples/method.md
Normal file
26
docs/tabs/examples/method.md
Normal file
@ -0,0 +1,26 @@
|
||||
<div id="demoTabs2"></div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var tabs = layui.tabs;
|
||||
|
||||
// 方法渲染
|
||||
tabs.render({
|
||||
elem: '#demoTabs2',
|
||||
header: [
|
||||
{ title: 'Tab1' },
|
||||
{ title: 'Tab2' },
|
||||
{ title: 'Tab3' }
|
||||
],
|
||||
body: [
|
||||
{ content: 'Tab content 1' },
|
||||
{ content: 'Tab content 2' },
|
||||
{ content: 'Tab content 3' }
|
||||
],
|
||||
// index: 1, // 初始选中项
|
||||
// className: 'layui-tabs-card',
|
||||
// closable: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
40
docs/tabs/examples/nest.md
Normal file
40
docs/tabs/examples/nest.md
Normal file
@ -0,0 +1,40 @@
|
||||
<div class="layui-tabs layui-tabs-card" lay-options="{headerMode:'normal'}">
|
||||
<ul class="layui-tabs-header">
|
||||
<li class="layui-this">标题1</li>
|
||||
<li>标题2</li>
|
||||
<li>标题3</li>
|
||||
</ul>
|
||||
<div class="layui-tabs-body" style="padding: 16px;">
|
||||
<div class="layui-tabs-item layui-show">
|
||||
<div class="layui-tabs" lay-options="{headerMode:'normal'}">
|
||||
<ul class="layui-tabs-header">
|
||||
<li class="layui-this">标题 1-1</li>
|
||||
<li>标题 1-2</li>
|
||||
</ul>
|
||||
<div class="layui-tabs-body">
|
||||
<div class="layui-tabs-item layui-show">1-1</div>
|
||||
<div class="layui-tabs-item">1-2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-tabs-item">
|
||||
<div class="layui-tabs" lay-options="{headerMode:'normal'}">
|
||||
<ul class="layui-tabs-header">
|
||||
<li class="layui-this">标题 2-1</li>
|
||||
<li>标题 2-2</li>
|
||||
<li>标题 2-3</li>
|
||||
</ul>
|
||||
<div class="layui-tabs-body">
|
||||
<div class="layui-tabs-item layui-show">2-1</div>
|
||||
<div class="layui-tabs-item">2-2</div>
|
||||
<div class="layui-tabs-item">2-3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-tabs-item">3</div>
|
||||
<div class="layui-tabs-item">4</div>
|
||||
<div class="layui-tabs-item">5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
127
docs/tabs/index.md
Normal file
127
docs/tabs/index.md
Normal file
@ -0,0 +1,127 @@
|
||||
---
|
||||
title: 标签页组件 tabs
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 标签页组件 <sup>2.10+</sup>
|
||||
|
||||
> `tabs` 是 2.10 版本新增的加强型组件，用于替代原 `element` 模块中的 `tab` 组件。tabs 广泛应用于 Web 页面。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("/tabs/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
该组件继承 `component` 提供的[基础接口](../component/#inherit)，并在此基础上为组件专门扩展了以下接口：
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var tabs = layui.tabs | 获得 `tabs` 模块。|
|
||||
| [tabs.render(options)](#render) | tabs 组件渲染，核心方法。|
|
||||
| [tabs.add(id, options)](#add) | 新增一个标签项。|
|
||||
| [tabs.close(id, index)](#close) | 关闭指定的标签项。|
|
||||
| [tabs.closeMore(id, type, index)](#closeMore) | 批量关闭标签项。|
|
||||
| [tabs.change(id, index)](#change) | 切换到指定的标签项。|
|
||||
| [tabs.data(id)](#data) | 获取当前标签页信息。|
|
||||
| [tabs.headerItem(id, index)](#headerItem) | 获取指定的标签头部项。|
|
||||
| [tabs.bodyItem(id, index)](#bodyItem) | 获取指定的标签内容项。|
|
||||
| [tabs.setView(id)](#setView) | 重新调整标签视图结构。|
|
||||
|
||||
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
|
||||
|
||||
`tabs.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
tabs 组件会在元素加载完毕后，默认自动对 `class="layui-tabs"` 目标元素完成一次渲染，如果无法找到默认的目标元素，可使用该方法完成标签的初始化渲染。
|
||||
|
||||
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
|
||||
|
||||
<div>
|
||||
{{- d.include("/tabs/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
<h3 id="add" lay-toc="{level: 2}">新增标签</h3>
|
||||
|
||||
`tabs.add(id, options);`
|
||||
|
||||
- 参数 `id` : tabs 容器的唯一 id 标识
|
||||
- 参数 `options` : 标签配置项
|
||||
```js
|
||||
{
|
||||
title: '标题', // 标签标题
|
||||
content: '内容', // 标签内容
|
||||
id: 'xxx', // 标签的 lay-id 属性值
|
||||
mode: 'append', // 插入模式。可选值: append/prepend/curr
|
||||
unclosed: true, // 是否禁止关闭。默认 false
|
||||
done: function(obj){} // 标签添加完毕的回调
|
||||
}
|
||||
```
|
||||
|
||||
<h3 id="close" lay-toc="{level: 2}">关闭标签</h3>
|
||||
|
||||
`tabs.close(id, index);`
|
||||
|
||||
- 参数 `id` : tabs 容器的唯一 id 标识
|
||||
- 参数 `index` : 标签项的索引或 lay-id 属性值
|
||||
|
||||
<h3 id="closeMore" lay-toc="{level: 2}">批量关闭标签</h3>
|
||||
|
||||
`tabs.closeMore(id, type, index);`
|
||||
|
||||
- 参数 `id` : tabs 容器的唯一 id 标识
|
||||
- 参数 `type` : 关闭类型。可选值：
|
||||
- `'all'` : 关闭所有标签
|
||||
- `'other'` : 关闭其他标签
|
||||
- `'left'` : 关闭左侧标签
|
||||
- `'right'` : 关闭右侧标签
|
||||
- 参数 `index` : 标签项的索引或 lay-id 属性值，用于定位基准点
|
||||
|
||||
<h3 id="change" lay-toc="{level: 2}">切换标签</h3>
|
||||
|
||||
`tabs.change(id, index);`
|
||||
|
||||
- 参数 `id` : tabs 容器的唯一 id 标识
|
||||
- 参数 `index` : 标签项的索引或 lay-id 属性值
|
||||
|
||||
<h3 id="data" lay-toc="{level: 2}">获取标签信息</h3>
|
||||
|
||||
`tabs.data(id);`
|
||||
|
||||
- 参数 `id` : tabs 容器的唯一 id 标识
|
||||
- 返回值：包含当前标签页信息的对象
|
||||
```js
|
||||
{
|
||||
index: 0, // 当前标签项的索引
|
||||
prevIndex: -1, // 上一个标签项的索引
|
||||
headerElem: {}, // 当前标签头部元素
|
||||
bodyElem: {} // 当前标签内容元素
|
||||
}
|
||||
```
|
||||
|
||||
<h3 id="headerItem" lay-toc="{level: 2}">获取标签头部项</h3>
|
||||
|
||||
`tabs.headerItem(id, index);`
|
||||
|
||||
- 参数 `id` : tabs 容器的唯一 id 标识
|
||||
- 参数 `index` : 标签项的索引或 lay-id 属性值
|
||||
- 返回值：标签头部项的 DOM 元素
|
||||
|
||||
<h3 id="bodyItem" lay-toc="{level: 2}">获取标签内容项</h3>
|
||||
|
||||
`tabs.bodyItem(id, index);`
|
||||
|
||||
- 参数 `id` : tabs 容器的唯一 id 标识
|
||||
- 参数 `index` : 标签项的索引或 lay-id 属性值
|
||||
- 返回值：标签内容项的 DOM 元素
|
||||
|
||||
<h3 id="setView" lay-toc="{level: 2}">重新调整视图</h3>
|
||||
|
||||
`tabs.setView(id);`
|
||||
|
||||
- 参数 `id` : tabs 容器的唯一 id 标识
|
||||
- 描述：用于重新调整标签视图结构，如在容器尺寸变化时调用
|
||||
|
||||
@ -1328,7 +1328,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-tabs-header{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; transition: all .16s; -webkit-transition: all .16s;}
|
||||
.layui-tabs-header:after,
|
||||
.layui-tabs-scroll:after{content: ""; position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; border-bottom: 1px solid #eee;}
|
||||
.layui-tabs-header li{position: relative; display: inline-block; vertical-align: middle; line-height: 40px; padding: 0 16px; text-align: center; cursor: pointer; font-size: 14px; transition: all .16s; -webkit-transition: all .16s;}
|
||||
.layui-tabs-header li{position: relative; display: inline-block; vertical-align: middle; line-height: 40px; margin: 0 !important; padding: 0 16px; text-align: center; cursor: pointer; font-size: 14px; transition: all .16s; -webkit-transition: all .16s;}
|
||||
.layui-tabs-header li:first-child{margin-left: 0;}
|
||||
.layui-tabs-header li a{display: block; padding: 0 16px; margin: 0 -16px;}
|
||||
.layui-tabs-header .layui-this{color: #16baaa;}
|
||||
|
||||
@ -3,12 +3,13 @@
|
||||
* Code 预览组件
|
||||
*/
|
||||
|
||||
layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$;
|
||||
var util = layui.util;
|
||||
var element = layui.element;
|
||||
var tabs = layui.tabs;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var hint = layui.hint();
|
||||
@ -403,6 +404,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
render: function(){
|
||||
form.render(thisItemBody.find('.layui-form'));
|
||||
element.render();
|
||||
tabs.render();
|
||||
}
|
||||
});
|
||||
},3);
|
||||
|
||||
@ -564,14 +564,24 @@ layui.define('component', function(exports) {
|
||||
|
||||
// 扩展组件接口
|
||||
$.extend(component, {
|
||||
// 增加标签
|
||||
/**
|
||||
* 增加标签
|
||||
* @param {string} id - 标签 ID
|
||||
* @param {object} obj - 标签配置信息
|
||||
* @returns
|
||||
*/
|
||||
add: function(id, obj) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
that.add(obj);
|
||||
},
|
||||
|
||||
// 关闭单个标签
|
||||
/**
|
||||
* 关闭标签
|
||||
* @param {string} id - 标签 ID
|
||||
* @param {number} index - 标签下标
|
||||
* @returns
|
||||
*/
|
||||
close: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
@ -579,39 +589,68 @@ layui.define('component', function(exports) {
|
||||
that.close(that.findHeaderItem(index));
|
||||
},
|
||||
|
||||
// 关闭多个标签。若传 index，则按 index 所在标签为事件执行关闭操作
|
||||
/**
|
||||
* 关闭多个标签
|
||||
* @param {string} id - 标签 ID
|
||||
* @param {string} type - 关闭类型，可选值：left、right、other、all
|
||||
* @param {number} index - 标签下标。若传入，则按 index 所在标签为事件执行关闭操作
|
||||
* @returns
|
||||
*/
|
||||
closeMore: function(id, type, index) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
that.closeMore(type, index);
|
||||
},
|
||||
|
||||
// 切换标签
|
||||
/**
|
||||
* 切换标签
|
||||
* @param {string} id - 标签 ID
|
||||
* @param {number} index - 标签下标
|
||||
* @returns
|
||||
*/
|
||||
change: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
if(!that) return this;
|
||||
that.change(that.findHeaderItem(index));
|
||||
},
|
||||
|
||||
// 获取标签信息
|
||||
/**
|
||||
* 获取标签信息
|
||||
* @param {string} id - 标签 ID
|
||||
* @returns
|
||||
*/
|
||||
data: function(id) {
|
||||
var that = component.getThis(id);
|
||||
return that ? that.data() : {};
|
||||
},
|
||||
|
||||
// 获取标签指定头部项
|
||||
/**
|
||||
* 获取标签指定头部项
|
||||
* @param {string} id - 标签 ID
|
||||
* @param {number} index - 标签下标
|
||||
* @returns
|
||||
*/
|
||||
headerItem: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
return that ? that.findHeaderItem(index) : this;
|
||||
},
|
||||
|
||||
// 获取标签指定头部项
|
||||
/**
|
||||
* 获取标签指定内容项
|
||||
* @param {string} id - 标签 ID
|
||||
* @param {number} index - 标签下标
|
||||
* @returns
|
||||
*/
|
||||
bodyItem: function(id, index) {
|
||||
var that = component.getThis(id);
|
||||
return that ? that.findBodyItem(index) : this;
|
||||
},
|
||||
|
||||
// 调整视图结构
|
||||
/**
|
||||
* 调整视图结构
|
||||
* @param {string} id - 标签 ID
|
||||
* @returns
|
||||
*/
|
||||
setView: function(id) {
|
||||
var that = component.getThis(id);
|
||||
if (!that) return this;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user