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

一、字段集区块

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

    
        字段集区块 - 横线风格
        

            内容区域
        
    

    
        字段集区块 - 默认风格
        

            内容区域
        
    

    

二、面板

1、折叠面板

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

2、开启手风琴

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

依赖加载组件：element 

    

        

            杜甫
            
内容区域
        
        

            李清照
            
内容区域
        
        

            鲁迅
            
内容区域
        
    


//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});

   

 

三、Tab选项卡

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

      依赖加载组件：element

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

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

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

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

    

        

            
网站设置
            
用户管理
            
权限分配
        
        

            
内容1
            
内容2
            
内容3
        
    

    

        

            
网站设置
            
用户管理
            
权限分配
        
        

            
内容1
            
内容2
            
内容3
        
    

    

        

            
网站设置
            
用户管理
            
权限分配
        
        

            
内容1
            
内容2
            
内容3
        
    


//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});

     

4、ID焦点定位

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

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

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

    

        

            
文章列表
            
发送信息
            
权限分配
            
审核
            
订单管理
        
        

            
1
            
2
            
3
            
4
            
5
        
    


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');
  });
});
 

      

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

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

 ends ~