JavaWeb - 在线文档

# 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

  • 参数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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

← 标签组件 →