微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > layui前端框架基础
博主信息
博文 58
粉丝 3
评论 0
访问量 76700
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
layui前端框架基础
岂几岂几
原创
1855人浏览过

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好看. 但内容不少, 不过学习成本相对比较低, 记住常用的, 其他要用到的时候再去查手册吧.
批改老师：WJWJ

批改状态：合格

老师批语：总体来说写的非常不错，继续加油！
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录