# Tab选项卡
选项卡功能在项目开发中使用频率比较高的一个控件,对不同的内容以某个纬度进行分类,这时使用tab选项卡
就是一个很好的选择,最常见的使用场景就是系统设置,诸如网站名称
、网站简称
、SEO信息
、百度统计
等等一系列信息,再比如支付宝支付账号
、微信支付账号
、公众号信息
、云存储信息
等基础账号信息的维护,都需要做不同的内容进行分类,同时又可以方便的对信息进行维护工作;
下面我们以网站配置为例给大家详细介绍组件的使用方法,根据场景的不同组件的数据源获取可以分为指定数据源
、读取配置
、读取SQL语句
等几种常见的方式:
# 指定数据源
组件:
<widget:tabSelect name="tabId|name|id" data="1=系统配置,2=阿里短信,3=阿里OSS,4=七牛云" th:value="${tabId}?:0" href="/configweb/index"/>
参数name:
tabId|name|id
`tabId`:组件标识名称`tabId`(可根据业务场景自定设定当前参数值);
`name`:这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值;
`id`:这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值;
2
3
参数data:
1=系统配置,2=阿里短信,3=阿里OSS,4=七牛云
参数值就是我们所指定的数据源,在某个非动态获取的地方可以直接指定数据源,组件也会自己去解析和渲染数据并最终呈现完美的结果。参数
href
:当前参数定义了点击Tab选项卡时所访问的请求地址,同时组件会自动将当前tab选项卡
的ID参数值以参数的形式拼接在后面,如:/configweb/index?tabId=1
组件使用
那么我们如何在表单中使用复选框组件呢,如下:
<form class="layui-form model-form" action="">
<div class="layui-form-item style="width:625px;">
<label class="layui-form-label">用户角色:</label>
<div class="layui-input-block">
<div class="layui-tab">
<widget:tabSelect name="tabId|name|id" data="1=系统配置,2=阿里短信,3=阿里OSS,4=七牛云" th:value="${tabId}?:0" href="/configweb/index"/>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">内容不一样是要有,因为你可以监听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>
</form>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 效果展示:
# 读取配置
组件:
<widget:tabSelect name="tabId|name|id" th:data="${CONFIG_GROUP_LIST}" th:value="${tabId}?:0" href="/configweb/index"/>
参数name:
tabId|name|id
`tabId`:组件标识名称`tabId`(可根据业务场景自定设定当前参数值);
`name`:这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值;
`id`:这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值;
2
3
参数data:
${CONFIG_GROUP_LIST}
参数值是后端以数据绑定的方式将数据源绑定到组件上,组件会读取绑定的数据源并进行渲染;参数
href
:当前参数定义了点击Tab选项卡时所访问的请求地址,同时组件会自动将当前tab选项卡
的ID参数值以参数的形式拼接在后面,如:/configweb/index?tabId=1
组件使用
那么我们如何在表单中使用复选框组件呢,如下:
<form class="layui-form model-form" action="">
<div class="layui-form-item style="width:625px;">
<label class="layui-form-label">用户角色:</label>
<div class="layui-input-block">
<div class="layui-tab">
<widget:tabSelect name="tabId|name|id" th:data="${CONFIG_GROUP_LIST}" th:value="${tabId}?:0" href="/configweb/index"/>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">内容不一样是要有,因为你可以监听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>
</form>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 读取SQL语句
组件:
<widget:tabSelect name="tabId|name|id" sql="SELECT id,
nameFROM sys_config_group WHERE mark=1 ORDER BY sort ASC;" th:value="${tabId}?:0" href="/configweb/index"/>
参数name:
tabId|name|id
`tabId`:组件标识名称`tabId`(可根据业务场景自定设定当前参数值);
`name`:这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值;
`id`:这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值;
2
3
参数
sql
:SELECT id,
nameFROM sys_config_group WHERE mark=1 ORDER BY sort ASC;
SQL语句传入组件内部,组件会自动根据传入的SQL语句
进行查询数据源并自动进行数据渲染,组件元素的装配,最终完美的显示在界面上;参数
href
:当前参数定义了点击Tab选项卡时所访问的请求地址,同时组件会自动将当前tab选项卡
的ID参数值以参数的形式拼接在后面,如:/configweb/index?tabId=1
组件使用
那么我们如何在表单中使用复选框组件呢,如下:
<form class="layui-form model-form" action="">
<div class="layui-form-item style="width:625px;">
<label class="layui-form-label">用户角色:</label>
<div class="layui-input-block">
<div class="layui-tab">
<widget:tabSelect name="tabId|name|id" sql="SELECT id, `name` FROM sys_config_group WHERE mark=1 ORDER BY sort ASC;" th:value="${tabId}?:0" href="/configweb/index"/>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">内容不一样是要有,因为你可以监听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>
</form>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17