Layui 字段集区块、面板和Tab选项卡

缺乏、安全感 2021-12-10 04:19 357阅读 0赞

### 一、字段集区块 ###

两种：**字段集区块 - 横线风格** 和 **字段集区块 - 默认风格**

<fieldset class="layui-elem-field layui-field-title">
            <legend>字段集区块 - 横线风格</legend>
            <div class="layui-field-box">
                内容区域
            </div>
        </fieldset>
    
        <fieldset class="layui-elem-field">
            <legend>字段集区块 - 默认风格</legend>
            <div class="layui-field-box">
                内容区域
            </div>
        </fieldset>

![20190715150501151.png][]

### 二、面板 ###

**1、折叠面板**

通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。

**2、开启手风琴**

在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

依赖加载组件：element

<div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">杜甫</h2>
                <div class="layui-colla-content ">内容区域</div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">李清照</h2>
                <div class="layui-colla-content layui-show">内容区域</div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">鲁迅</h2>
                <div class="layui-colla-content ">内容区域</div>
            </div>
        </div>
    
    <script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
      var element = layui.element;
      
      //…
    });
    </script>

![20190715151126245.png][]

### 三、Tab选项卡 ###

Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。

依赖加载组件：element

**1、默认风格的Tab / 简洁风格的Tab / 卡片风格的Tab**

通过对父容器添加class 来设置风格

简洁风格的Tab：layui-tab-brief

卡片风格的Tab：layui-tab-card

<div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</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>
        </div>
    
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
            </div>
        </div>
    
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
            </div>
        </div>
    
    <script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
      var element = layui.element;
      
      //…
    });
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

**4、ID焦点定位**

通过对选项卡设置属性 lay-id="xxx" 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配。

属性 lay-id 是扮演这项功能的主要角色，它是动态操作的重要凭据，

同样的还有增加选项卡和删除选项卡，都需要用到 lay-id。

<div class="layui-tab" lay-filter="test1">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="111" >文章列表</li>
                <li lay-id="222">发送信息</li>
                <li lay-id="333">权限分配</li>
                <li lay-id="444">审核</li>
                <li lay-id="555">订单管理</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>
    
    <script>
    layui.use('element', function(){
      var element = layui.element;
      
      //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
      var layid = location.hash.replace(/^#test1=/, '');
      element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项
      
      //监听Tab切换，以改变地址hash值
      element.on('tab(test1)', function(){
        location.hash = 'test1='+ this.getAttribute('lay-id');
      });
    });
    </script>

![20190715153436723.png][]

更多操作详官网：[内置组件 - 常用元素操作][-]

以官方文档为准，常用自己敲一遍熟悉

ends ~

[20190715150501151.png]: /images/20211209/7cec0a649969432a8db6b1773cdc6c9f.png
[20190715151126245.png]: /images/20211209/300c6ece2c9d4fc4aba3884d8dd6dec4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20211209/c804ef927b22442bb85334f9956d1b0d.png
[20190715153436723.png]: /images/20211209/b24f396e04a34b4bbae98e35bb169a18.png
[-]: https://www.layui.com/doc/modules/element.html