# 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`的值;
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 效果展示:

    mixureSecure

# 读取配置

  • 组件:<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`的值;
1
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>
1
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`的值;
1
2
3
  • 参数sqlSELECT 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17