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

一、字段集区块

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

    <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>

    

二、面板

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>

   

 

三、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>

     

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> 

      

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

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

 ends ~