Layui的学习

水深无声 2022-05-23 00:54 420阅读 0赞

\#\#基础说明

当你需要使用layui的一些特效或许功能的时候，基本都是需要加载相应的模块的

--------------------

> 加载方法有两种：

①加载外部模块

②一次性加载所有模块

--------------------

\#\#页面元素

> 布局

1.1 栅格系统  
核心：将一个容器分成12等分，根据不同的屏幕大小，将内容以不同的比例进行显示  
行：`<div class="layui-row"></div>`  
每行中的列数：`<div class="layui-col-md*"></div>`  
屏幕类型： xs、sm、md、lg  
列间的间距：`layui-col-space5`  
列间的偏移：`layui-col-md-offset*`

例子：

<div class="layui-container">//定义一个容器
      <div class="layui-row  layui-col-space10"> //容器中的一行，每列的间距为10
    	   <div class="layui-col-md4"> //对于中型屏幕宽度为4
    		    内容 //该列中显示的内容
    	   </div>
    	   <div class="layui-col-md4 layui-col-md-offset4"> //在中型屏幕下，这个内容会偏移4个单位
    		    1/3
    	   </div>
    	   <div class="layui-col-md4">
    		    1/3
    	   </div>
      </div>
    </div>

1.2 后台布局

在官网中有完整的代码，这里就不复制粘贴了。  
[后台布局代码][Link 1]

> 颜色

颜色种类：[颜色种类][Link 2]

背景色：`class="layui-bg-red"`

> 图标(icon)

添加图标：`<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>`

> 动画(animation)

添加动画：`<div class="layui-anim layui-anim-up"></div>`

循环动画，追加：\`layui-anim-loop

> 按钮(button)

1,建立基本的按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。 通过追加格式为layui-btn-\{type\}的class来定义其它按钮风格

按钮用法：`<a href="http://www.layui.com" class="layui-btn layui-btn-normal">一个可跳转的按钮</a>`

2，建立图标按钮

图标按钮用法：`<button class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon">ဂ</i> </button>`  
在按钮里面包含一个图标

3,按钮组

按钮组的用法：\`

增加  
编辑  
删除

> 表单(form)：依赖模块form

1，输入框

用法：`<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">`

其中  
required：注册浏览器所规定的必填字段  
lay-verify：注册form模块需要验证的类型  
class=“layui-input”：layui.css提供的通用CSS类

2，下拉框

下拉框用法：

<select name="city" lay-verify="">
      <option value="">请选择一个城市</option>
      <option value="010">北京</option>
      <option value="021">上海</option>
      <option value="0571">杭州</option>
    </select>

其中：  
属性selected可设定默认项  
属性disabled开启禁用，select和option标签都支持

3，复选框

用法：

其中：  
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）  
属性checked可设定默认选中  
属性lay-skin可设置复选框的风格  
设置value="1"可自定义值，否则选中时返回的就是默认的on

4，开关

用法：  
`<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked> <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭"> <input type="checkbox" name="aaa" lay-skin="switch" disabled>`

其中：  
属性checked可设定默认开  
属性disabled开启禁用  
属性lay-text可自定义开关两种状态的文本  
设置value="1"可自定义值，否则选中时返回的就是默认的on

5，单选框

用法：

其中：  
属性title可自定义文本  
属性disabled开启禁用  
设置value="xxx"可自定义值，否则选中时返回的就是默认的on

6，文本域

文本域用法：  
`<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>`

7,组装行内表单

用法：

其中：  
class=“layui-inline”：定义外层行内  
class=“layui-input-inline”：定义内层行内

> 导航(navigate)：依赖element模块

1,水平导航

用法：

<ul class="layui-nav" lay-filter="">
      <li class="layui-nav-item"><a href="">最新活动</a></li>
      <li class="layui-nav-item layui-this"><a href="">产品</a></li>
      <li class="layui-nav-item"><a href="">大数据</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child"> 
          <dd><a href="">移动模块</a></dd>
          <dd><a href="">后台模版</a></dd>
          <dd><a href="">电商平台</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
     
    <script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
      var element = layui.element;
      
      //…
    });
    </script>

其中：

layui-this来指向当前页面分类

2，在导航中添加修改其他内容

2.1 在导航中添加图片、徽章

2.2 修改导航栏的主题颜色（设置背景颜色）

其中：  
水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）  
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

3，垂直/侧边导航

垂直/侧边导航栏与水平导航栏结构一样，不同的是：  
垂直导航需要追加`class：layui-nav-tree`  
侧边导航需要追加`class：layui-nav-tree layui-nav-side`

4,面包屑

用法：

其中：  
lay-separator="-" 来自定义分隔符

> 选项卡(tab)：依赖element模块

1，常规选项卡

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

其中：  
设成卡片分格：`追加class：layui-tab-card`  
允许Tab选项卡被删除：`追加class：lay-allowClose="true"`

2，ID焦点定位

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

> 进度条(progress)：依赖element模块

进度条用法：

<div class="layui-progress" lay-showPercent="true">
      <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
    </div>
           
    <div class="layui-progress" lay-showPercent="yes">
      <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
    </div>
     
    <div class="layui-progress layui-progress-big" lay-showPercent="yes">
      <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
    </div>
    <script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function(){
      var element = layui.element;
    });
    </script>

> 面板：依赖element模块

1，卡片面板

用法：

<div class="layui-card">
      <div class="layui-card-header">卡片面板</div>
      <div class="layui-card-body">
        卡片式面板面板通常用于非白色背景色的主体内<br>
        从而映衬出边框投影
      </div>
    </div>

2，折叠面板：依赖element模块

折叠面板用法：

<div class="layui-collapse">
      <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 layui-show">内容区域</div>
      </div>
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">鲁迅</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
      </div>
    </div>
     
    <script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
      var element = layui.element;
      
      //…
    });
    </script>

其中：  
设置class为 layui-show 来选择性初始展开某一个面板

3，开启手风琴

与折叠面板的差别不大，但是需要增加属性：lay-accordion。作用就是每次打开都只有一个页面。

用法：`<div class="layui-collapse" lay-accordion></div>`

> 表格

1，用法

<table class="layui-table">
      <colgroup>
        <col width="150">
        <col width="200">
        <col>
      </colgroup>
      <thead>
        <tr>
          <th>昵称</th>
          <th>加入时间</th>
          <th>签名</th>
        </tr> 
      </thead>
      <tbody>
        <tr>
          <td>贤心</td>
          <td>2016-11-29</td>
          <td>人生就像是一场修行</td>
        </tr>
        <tr>
          <td>许闲心</td>
          <td>2016-11-28</td>
          <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
      </tbody>
    </table>

其中：  
开启隔行背景：class=“lay-even”  
切换边框分格：class=“lay-skin=“属性值””  
修改表格尺寸：class=“lay-size=“属性值””

> 徽章(badge)

徽章用法：

其中：  
边框的类型：

> 时间线

用法：

<ul class="layui-timeline">
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">8月18日</h3>
          <p>
            layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
            <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
            <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
          </p>
        </div>
      </li>
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">8月16日</h3>
          <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
          <ul>
            <li>《登高》</li>
            <li>《茅屋为秋风所破歌》</li>
          </ul>
        </div>
      </li>
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">8月15日</h3>
          <p>
            中国人民抗日战争胜利72周年
            <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
            <br>铭记、感恩
            <br>所有为中华民族浴血奋战的英雄将士
            <br>永垂不朽
          </p>
        </div>
      </li>
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
          <div class="layui-timeline-title">过去</div>
        </div>
      </li>
    </ul>

> 辅助功能

1，引用区块

<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
    <blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>

2，字段集区块

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

3，有颜色的横线

用法：

赤色分割线
    <hr class="layui-bg-red">
    橙色分割线
    <hr class="layui-bg-orange">
    墨绿分割线
    <hr class="layui-bg-green">

\#\#内置模块

> 弹出层(layui下的layer)：依赖layer模块

1，加载layer模块

①作为独立组件使用，如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。通过script标签引入layer.js后，直接用即可

②layui 模块化使用，如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js，通过layui.use(‘layer’, callback)加载模块

2，基本参数（参数太多，这里仅摘抄部分参数）

①type - 基本层类型，类型：Number，默认：0
    ②title - 标题，类型：String/Array/Boolean，默认：'信息'
    ③content - 内容，类型：String/DOM/Array，默认：''
    ④skin - 样式类名，类型：String，默认：''
    ⑤area - 宽高，类型：String/Array，默认：'auto'
    ⑥offset - 坐标，类型：String/Array，默认：垂直水平居中
    ⑦icon - 图标。信息框和加载层的私有参数，类型：Number，默认：-1（信息框）/0（加载层）
    ⑧btn - 按钮，类型：String/Array，默认：'确认'
    ⑨btnAlign - 按钮排列，类型：String，默认：r
    ⑩closeBtn - 关闭按钮分格，类型：String/Boolean，默认：1
    11，closeBtn - 关闭按钮类型，类型：String/Boolean，默认：1
    12，shade - 遮罩，弹出层周围的颜色，类型：String/Array/Boolean，默认：0.3
    13，shadeClose - 是否点击遮罩关闭，类型：Boolean，默认：false
    14，time - 自动关闭弹出层所需毫秒，类型：Number，默认：0
    15，anim - 弹出动画，类型：Number，默认：0
    16，isOutAnim - close关闭层过程中的动画，类型：Boolean，默认：true
    17，maxmin - 最大最小化。类型：Boolean，默认：false
    18，fixed - 是否把弹出层位置固定，类型：Boolean，默认：true
    19,resize - 是否允许拉伸弹出层，类型：Boolean，默认：true
    20，scrollbar - 是否允许浏览器出现滚动条，类型：Boolean，默认：true
    21，maxWidth - 最大宽度，类型：Number，默认：360
    22，maxHeight - 最大高度，类型：Number，默认：无
    23，moveOut - 是否允许拖拽到窗口外，类型：Boolean，默认：false

1，layer.config(options) - 初始化全局配置。
    如：
    layer.config({
      anim: 1, //默认动画风格
      skin: 'layui-layer-molv' //默认皮肤
      …
    });
    
    2，layer.ready(callback) - 初始化就绪
    如：
    layer.ready(function(){
      layer.msg('很高兴一开场就见到你');
    });     
    
    3，layer.open(options) - 原始核心方法
    创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数
    如：
    var index = layer.open({
      content: 'test'
    });
    //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。       
    
    4，layer.alert(content, options, yes) - 普通信息框
    如：
    layer.alert('加了个图标', {icon: 1}); 
    layer.alert('有了回调', function(index){
      //do something
      layer.close(index);
    });    
    
    5，layer.confirm(content, options, yes, cancel) - 询问框
    layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
      //do something
      layer.close(index);
    });
    layer.confirm('is not?', function(index){
      //do something
      layer.close(index);
    });  
    
    6，layer.msg(content, options, end) - 提示框
    如：
    layer.msg('有表情地提示', {icon: 6}); 
    layer.msg('关闭后想做些什么', function(){
      //do something
    }); 
    layer.msg('同上', {
      icon: 1,
      time: 2000 //2秒关闭（如果不配置，默认是3秒）
    }, function(){
      //do something
    });   
     
    7，layer.close(index) - 关闭特定层
    如：
    //当你想关闭当前页的某个层时
    var index = layer.open();
    var index = layer.alert();
    var index = layer.load();
    var index = layer.tips();
    //正如你看到的，每一种弹层调用方式，都会返回一个index
    layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可
     
    //如果你想关闭最新弹出的层，直接获取layer.index即可
    layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
    
    8，layer.closeAll(type) - 关闭所有层
    
    9，layer.tab(options) - 弹出tab层
    如：
    layer.tab({
      area: ['600px', '300px'],
      tab: [{
        title: 'TAB1', 
        content: '内容1'
      }, {
        title: 'TAB2', 
        content: '内容2'
      }, {
        title: 'TAB3', 
        content: '内容3'
      }]
    });

\------暂时学习至此，后面会续-----

[Link 1]: http://www.layui.com/doc/element/layout.html#admin
[Link 2]: http://www.layui.com/doc/element/color.html