layui前端框架基础

1. layui框架的引入

在layui的官网 https://www.layui.com/ 首页点击”立刻下载”按钮, 下载layui的代码文件.
把下载到的layui代码文件包放到项目中, 以laravel项目为例, 放到 /public 目录中. 一般来说, 按照下图安排项目的前端文件.

在html页面中引入layui的脚本文件 layui/css/layui.css , layui/layui.js

<!-- 记得把路径改成自己项目中实际存放的路径 -->
<link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
<script src="/static/plugin/layui/layui.js"></script>

然后就可以使用layui的样式和内置模块了.
tips: layui内置了jQuery, 即, 引入了layui, 就可以不引入jQuery了, 直接使用layui内置的jQuery即可.

2. layui表单元素的使用方法

2.1 layui中表单的基本结构

<body>
    <!-- layui的表单结构 -->
    <!-- 1. 最外层要有一个拥有"layui-form"样式类的容器, 元素用form, div...都可以 -->
    <form class="layui-form">
        <!-- 2. 每个表单项要放在一个"layui-form-item"子容器中 -->
        <div class="layui-form-item">
            <!-- 3. label部分要拥有"layui-form-label"样式类 -->
            <label for="username" class="layui-form-label">用户名:</label>
            <!-- 4. 表单控件要放在"layui-input-inline"(可自定义宽度)或
                "layui-input-block"(占满label剩余的行空间)容器中
             -->
            <div class="layui-input-block">
                <!-- 5.表单控件要有"layui-input", 或"layui-textarea"等样式类 -->
                <input type="text" name="username" id="username" class="layui-input">
            </div>
        </div>
        <!-- 第二个表单项, 放在另一个layui-form-item中... -->
        <!-- 若按钮想跟表单控件对齐, 则放入"layui-input-block"容器中 -->
        <div class="layui-form-item">
            <!-- 按钮跟表单控件对齐 -->
            <div class="layui-input-block">
                <button type="button">提交</button>
            </div>
        </div>
    </form>
</body>

2.2 layui表单控件

1. 文本框/文本域
- input控件加入 layui-input 样式, 就能渲染layui样式的文本框.
- textarea控件加入 layui-textarea 样式, 就能渲染layui样式的文本域.

<!-- HTML -->
<input type="text" name="username" id="username" class="layui-input">

1. 下拉菜单
- select控件加入 layui-input 样式.
- js代码初始化layui的 form 对象.
- 使用js代码修改select的属性或值后, 要调用 form.render(selector) 方法来重新渲染修改结果. 如果不给 render 方法传参(即: form.render() ), 则将重新渲染整个表单.

<div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
        <!-- select控件 -->
        <!-- lay-verify="required"表示必填项 -->
        <select name="city" lay-verify="required">
            <option value=""></option>
            <option value="0">北京</option>
            <!-- disabled属性表示这个选项不可选 -->
            <option value="1" disabled>上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
        </select>
    </div>
</div>
<script>
    //初始化form对象.
    layui.use('form', function() {
        /* var form表示变量form为局部变量, 只能在当前回调中使用 */
        var form = layui.form;
        /* 不写var, 则表示变量form1为全局变量, 可以在当前HTML中的其他js代码中使用 */
        form1 = layui.form;
    });
</script>

1. 复选框/开关
- 复选框不需要加layui样式, input控件设置属性 type="checkbox" 就能出现layui默认样式的复选框, 默认样式的复选框比较大.
- 如果不喜欢默认样式的复选框, 则可以给 input:checkbox 控件加上属性赋值: lay-skin="primary" , 就能渲染经典样式的复选框.
- 为 input:checkbox 控件加上 title="checkbox文本" , 就能设置复选框的label部分文本.
- 把 lay-skin 属性赋值为 switch , 就能渲染开关样式.
  - lay-text 属性设置开关的开/关时显示的文本. 如: lay-text="开启|关闭"
- 无论是复选框, 还是开关
  - 加上 checked 属性设定为默认选中/开启.
  - 加上 disabled 属性设定为复选框不可用/禁用开关
  - 设置 value="自定义值" , 可自定义选中/开启时的返回值, 否则返回默认值”ON”.
  - jquery获取复选框/开关的选中情况/开关情况: $('#status').prop('checked') ? true : false, . 注意, 不能用 attr('checked') , 否则会出现只前两次点击有效, 第三次开始点击无效的bug.
  - jquery设置复选框/开关选中/开启: $('#status').prop('checked', true) ; 取消选中/关闭: $('#status').prop('checked', false)

  <div class="layui-form-item">
      <label class="layui-form-label">复选框</label>
      <div class="layui-input-block">
          默认风格：
          <input type="checkbox" name="" title="写作" checked>
          <input type="checkbox" name="" title="发呆">
          <input type="checkbox" name="" title="禁用" disabled>
          原始风格：
          <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
          <input type="checkbox" name="" title="发呆" lay-skin="primary">
          <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">开关</label>
      <div class="layui-input-block">
          <input type="checkbox" name="xxx" lay-skin="switch">
          <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>
      </div>
  </div>

1. 单选框
- 使用和复选框类似.
- 单选框获取选中的值: data.status = $('input[name="status"]:checked').val();

  <div class="layui-form-item">
      <label class="layui-form-label">开关</label>
      <div class="layui-input-block">
          <input type="radio" name="sex" value="nan" title="男">
          <input type="radio" name="sex" value="nv" title="女" checked>
          <input type="radio" name="sex" value="" title="中性" disabled>
      </div>
  </div>

2.3 layui控件杂项

更新渲染
- 当使用js修改layui的下拉菜单, 复选框/开关, 单选框的属性或值时, 需要调用 form.render(type, filter); 方法重新渲染这些控件. 其中type值可以是: 1. select(下拉菜单); 2. checkbox(复选框/开关); 3. radio(单选框); 若不传参, 则表示重新渲染所有表单控件.
使用layui内置的jQuery, 在js中初始化 $ 对象即可.

<script>
    layui.use(['form', '$'], function() {
        /* 初始化form对象 */
        form = layui.form;
        // 其他layui内置对象的声明和初始化...
        /* 初始化$对象为jQuery对象, 注意, 要声明为全局变量, 否则当前回调函数外的地方不能使用$对象 */
        $ = layui.jquery;
    });
</script>

为layui控件添加事件监听的一般流程
- 1. 为layui控件添加 lay-filter(过滤器值) 事件过滤器, 如: lay-filter(filterVal1) ;
- 1. 在layui.use()方法参数中的回调函数中, 使用 form.on('event(过滤器值)', 事件处理回调) 来给第1步的控件绑定事件处理逻辑, 如: form.on(submit('filterVal1'), function() {...}) ;
  - 其中的event()可以是:

<select class="layui-input" lay-filter="sel1">
    <option valie=""></option>
    <option valie="1">first</option>
    <option valie="2">second</option>
    <option valie="3">third</option>
</select>
<script>
    layui.use(['form'], function() {
        form = layui.form;
        // 为lay-filter=sel1的下拉菜单添加下拉选择时的处理脚本.
        form.on('select(sel1)', function(ele) {
            // 通过ele参数可获取的内容
            // 下拉菜单
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            // 复选框/开关
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框/开关value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            // 单选框
            console.log(data.elem); //得到radio原始DOM对象
            console.log(data.value); //被点击的radio的value值
            // 按钮
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            // do something...
        });
    });
</script>

3. layui表格

3.1 layui样式的表格

只需要给table元素加上 layui-table , 就能渲染layui默认风格的表格.
设置其他表格属性, 可以得到layui其他风格的表格

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

4. 进度条

1. 进度条的外框要添加 layui-progress 样式类;
1. 进度条的当前进度部分要添加 layui-progress-bar 样式类, 并用 lay-percent="进度百分比" 属性来指定当前进度的百分比.
- 使用 layui-bg-xxx 来设置当前进度部分的颜色. 如: layui-bg-orange .
- lay-percent 属性的值也可以是分数. 如: lay-percent="1/3"
1. 在layui.use()方法的回调入参中, 声明并初始化 element 对象.

<div class="layui-progress">
    <!-- lay-percent指定当前进度 -->
    <div class="layiu-progress-bar" lay-percent="10%"></div>
</div>
<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function() {
        var element = layui.element;
    });
</script>

5. 栅格系统

跟bootstrap的栅格系统类似.
行容器加上 layui-row 样式类;
行内列所占的格子用 layui-col-xxxNum 样式类来指定. 其中
- xx 可以是: lg : 桌面大型屏幕; md : 桌面中等屏幕; sm : 小屏幕, 如平板; xs : 超小屏幕, 如手机.
- Num 指定当前列所占的栅格份数, 可以是1-12份. 如: layui-col-md6 .

<div class="layui-row">
    <div class="layui-col-md6">两等分1</div>
    <div class="layui-col-md6">两等分2</div>
</div>

6. 弹出层

layui的弹出层依赖layui的 layer 对象, 需要在 layui.use() 方法的回调入参中声明和初始化.
弹提示的种类:
- layer.alert(提示信息, 属性设置对象, 点击确定后的回调[可选]) (提示框), 如: layer.alert("用户名不能为空", {icon: 2}) . 其中:
  - 属性设置对象, 可以设置图标(icon属性), 标题文本(title属性), 显示时间(time属性)
- layer.msg(参数同alert) (提示小标签), 如: layer.alert("保存成功", {icon: 1});
- layer.confirm(提示信息, 属性设置对象, 确定回调, 取消回调[可选]) (询问框), 如: layer.conform('确定要删除吗", {icon: 3, title: '提示'}, function() {...}, function() {...}) .

学习心得

layui个人感觉比bootstrap好看. 但内容不少, 不过学习成本相对比较低, 记住常用的, 其他要用到的时候再去查手册吧.

layui前端框架基础

layui前端框架基础

1. layui框架的引入

2. layui表单元素的使用方法

2.1 layui中表单的基本结构

2.2 layui表单控件

2.3 layui控件杂项

3. layui表格

3.1 layui样式的表格

4. 进度条

5. 栅格系统

6. 弹出层

学习心得

相关文章