简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > layui前端框架基础
Blogger Information
Blog 57
fans 3
comment 0
visits 59794
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
layui前端框架基础
岂几岂几
Original
1514 people have browsed it

layui前端框架基础

1. layui框架的引入

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

  • 在html页面中引入layui的脚本文件 layui/css/layui.css , layui/layui.js 
  1. <!-- 记得把路径改成自己项目中实际存放的路径 -->
  2. <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  3. <script src="/static/plugin/layui/layui.js"></script>
  • 然后就可以使用layui的样式和内置模块了.
  • tips: layui内置了jQuery, 即, 引入了layui, 就可以不引入jQuery了, 直接使用layui内置的jQuery即可.

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

2.1 layui中表单的基本结构

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

2.2 layui表单控件

    1. 文本框/文本域
    • input控件加入 layui-input 样式, 就能渲染layui样式的文本框.
    • textarea控件加入 layui-textarea 样式, 就能渲染layui样式的文本域.
  1. <!-- HTML -->
  2. <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() ), 则将重新渲染整个表单.

  1. <div class="layui-form-item">
  2.     <label class="layui-form-label">选择框</label>
  3.     <div class="layui-input-block">
  4.         <!-- select控件 -->
  5.         <!-- lay-verify="required"表示必填项 -->
  6.         <select name="city" lay-verify="required">
  7.             <option value=""></option>
  8.             <option value="0">北京</option>
  9.             <!-- disabled属性表示这个选项不可选 -->
  10.             <option value="1" disabled>上海</option>
  11.             <option value="2">广州</option>
  12.             <option value="3">深圳</option>
  13.             <option value="4">杭州</option>
  14.         </select>
  15.     </div>
  16. </div>
  18. <script>
  19.     //初始化form对象.
  20.     layui.use('form', function() {
  21.         /* var form表示变量form为局部变量, 只能在当前回调中使用 */
  22.         var form = layui.form;
  23.         /* 不写var, 则表示变量form1为全局变量, 可以在当前HTML中的其他js代码中使用 */
  24.         form1 = layui.form;
  25.     });
  26. </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) 
  1.   <div class="layui-form-item">
  2.       <label class="layui-form-label">复选框</label>
  3.       <div class="layui-input-block">
  4.           默认风格：
  5.           <input type="checkbox" name="" title="写作" checked>
  6.           <input type="checkbox" name="" title="发呆">
  7.           <input type="checkbox" name="" title="禁用" disabled>
  9.           原始风格：
  10.           <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
  11.           <input type="checkbox" name="" title="发呆" lay-skin="primary">
  12.           <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
  13.       </div>
  14.   </div>
  15.   <div class="layui-form-item">
  16.       <label class="layui-form-label">开关</label>
  17.       <div class="layui-input-block">
  18.           <input type="checkbox" name="xxx" lay-skin="switch">
  19.           <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
  20.           <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
  21.           <input type="checkbox" name="aaa" lay-skin="switch" disabled>
  22.       </div>
  23.   </div>
    1. 单选框
    • 使用和复选框类似.
    • 单选框获取选中的值: data.status = $('input[name="status"]:checked').val(); 
  1.   <div class="layui-form-item">
  2.       <label class="layui-form-label">开关</label>
  3.       <div class="layui-input-block">
  4.           <input type="radio" name="sex" value="nan" title="男">
  5.           <input type="radio" name="sex" value="nv" title="女" checked>
  6.           <input type="radio" name="sex" value="" title="中性" disabled>
  7.       </div>
  8.   </div>

2.3 layui控件杂项

  • 更新渲染

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

  • 使用layui内置的jQuery, 在js中初始化 $ 对象即可.

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

  • 为layui控件添加事件监听的一般流程

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

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

3. layui表格

3.1 layui样式的表格

  • 只需要给table元素加上 layui-table , 就能渲染layui默认风格的表格.

  • 设置其他表格属性, 可以得到layui其他风格的表格

  1. <table class="layui-table">
  2.     <colgroup>
  3.         <col width="150">
  4.         <col width="200">
  5.         <col>
  6.     </colgroup>
  7.     <thead>
  8.         <tr>
  9.             <th>昵称</th>
  10.             <th>加入时间</th>
  11.             <th>签名</th>
  12.         </tr>
  13.     </thead>
  14.     <tbody>
  15.         <tr>
  16.             <td>贤心</td>
  17.             <td>2016-11-29</td>
  18.             <td>人生就像是一场修行</td>
  19.         </tr>
  20.         <tr>
  21.             <td>许闲心</td>
  22.             <td>2016-11-28</td>
  23.             <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
  24.         </tr>
  25.     </tbody>
  26. </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 对象.
  1. <div class="layui-progress">
  2.     <!-- lay-percent指定当前进度 -->
  3.     <div class="layiu-progress-bar" lay-percent="10%"></div>
  4. </div>
  6. <script>
  7.     //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
  8.     layui.use('element', function() {
  9.         var element = layui.element;
  10.     });
  11. </script>

5. 栅格系统

  • 跟bootstrap的栅格系统类似.

  • 行容器加上 layui-row 样式类;

  • 行内列所占的格子用 layui-col-xxxNum 样式类来指定. 其中

    • xx 可以是: lg : 桌面大型屏幕; md : 桌面中等屏幕; sm : 小屏幕, 如平板; xs : 超小屏幕, 如手机.
    • Num 指定当前列所占的栅格份数, 可以是1-12份. 如: layui-col-md6 .
  1. <div class="layui-row">
  2.     <div class="layui-col-md6">两等分1</div>
  3.     <div class="layui-col-md6">两等分2</div>
  4. </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好看. 但内容不少, 不过学习成本相对比较低, 记住常用的, 其他要用到的时候再去查手册吧.
Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：总体来说写的非常不错，继续加油！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！