search

博客列表 ># layui 实战项目-表单的设计

# layui 实战项目-表单的设计

我是郭富城
我是郭富城原创
2020年06月02日 06:09:17902浏览

layui 实战项目-表单的设计

1.1 什么是 layui

layui（谐音：类 UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

1.2 利用 layui 框架快速渲染前端框架

1.2.1 首页框架

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="/layui/css/layui.css" />
  8.     <script src="/layui/layui.js"></script>
  9.   </head>
  10.   <body>
  11.     <!-- 头部 -->
  12.     <div
  13.       style="
  14.         height: 50px;
  15.         line-height: 50px;
  16.         background-color: black;
  17.         padding: 0 10px;
  18.         color: #fff;
  19.       "
  20.     >
  21.       <span>后台管理系统</span>
  22.       <div style="float: right;">
  23.         <span><i class="layui-icon layui-icon-username"></i>admin</span>
  24.         <span><a href="" style="color: white;">退出</a></span>
  25.       </div>
  26.     </div>
  27.     <!-- 侧边栏导航 -->
  28.     <div style="width: 300px; float: left;">
  29.       <div class="layui-collapse" lay-accordion>
  30.         <div class="layui-colla-item">
  31.           <h2 class="layui-colla-title">管理员管理</h2>
  32.           <div class="layui-colla-content layui-show">内容区域</div>
  33.         </div>
  34.         <div class="layui-colla-item">
  35.           <h2 class="layui-colla-title">文章管理</h2>
  36.           <div class="layui-colla-content">内容区域</div>
  37.         </div>
  38.         <div class="layui-colla-item">
  39.           <h2 class="layui-colla-title">商品管理</h2>
  40.           <div class="layui-colla-content">内容区域</div>
  41.         </div>
  42.         <div class="layui-colla-item">
  43.           <h2 class="layui-colla-title">文章管理</h2>
  44.           <div class="layui-colla-content">内容区域</div>
  45.         </div>
  46.         <div class="layui-colla-item">
  47.           <h2 class="layui-colla-title">商品管理</h2>
  48.           <div class="layui-colla-content">内容区域</div>
  49.         </div>
  50.         <div class="layui-colla-item">
  51.           <h2 class="layui-colla-title">文章管理</h2>
  52.           <div class="layui-colla-content">内容区域</div>
  53.         </div>
  54.         <div class="layui-colla-item">
  55.           <h2 class="layui-colla-title">商品管理</h2>
  56.           <div class="layui-colla-content">内容区域</div>
  57.         </div>
  58.         <div class="layui-colla-item">
  59.           <h2 class="layui-colla-title">文章管理</h2>
  60.           <div class="layui-colla-content">内容区域</div>
  61.         </div>
  62.         <div class="layui-colla-item">
  63.           <h2 class="layui-colla-title">商品管理</h2>
  64.           <div class="layui-colla-content">内容区域</div>
  65.         </div>
  66.       </div>
  67.     </div>
  68.     <div style="float: left; width: 1200px; height: 600px;">
  69.       <iframe
  70.         src="/main.html"
  71.         frameborder="0"
  72.         width="100%"
  73.         height="100%"
  74.       ></iframe>
  75.     </div>
  76.   </body>
  77. </html>
  78. <script>
  79.   //注意：导航 依赖 element 模块，否则无法进行功能性操作
  80.   layui.use("element", function () {
  81.     var element = layui.element;
  83.     //…
  84.   });
  85. </script>

1.2.2 主体区

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="/layui/css/layui.css" />
  8.     <script src="/layui/layui.js"></script>
  9.   </head>
  10.   <body>
  11.     <form class="layui-form" action="" style="margin-top: 20px;">
  12.       <div class="layui-form-item">
  13.         <label class="layui-form-label">输入框</label>
  14.         <div class="layui-input-block">
  15.           <input
  16.             type="text"
  17.             name="title"
  18.             required
  19.             lay-verify="required"
  20.             placeholder="请输入标题"
  21.             autocomplete="off"
  22.             class="layui-input"
  23.           />
  24.         </div>
  25.       </div>
  26.       <div class="layui-form-item">
  27.         <label class="layui-form-label">密码框</label>
  28.         <div class="layui-input-inline">
  29.           <input
  30.             type="password"
  31.             name="password"
  32.             required
  33.             lay-verify="required"
  34.             placeholder="请输入密码"
  35.             autocomplete="off"
  36.             class="layui-input"
  37.           />
  38.         </div>
  39.         <div class="layui-form-mid layui-word-aux">辅助文字</div>
  40.       </div>
  41.       <div class="layui-form-item">
  42.         <label class="layui-form-label">选择框</label>
  43.         <div class="layui-input-inline">
  44.           <select name="province" lay-verify="required" lay-filter="test">
  45.             <option value="">请选择你所在的地区</option>
  46.             <option value="0">北京</option>
  47.             <option value="1" disabled>上海</option>
  48.             <option value="2">广州</option>
  49.             <option value="3">深圳</option>
  50.             <option value="4">杭州</option>
  51.           </select>
  52.         </div>
  53.         <div name="city" class="layui-input-inline"></div>
  54.       </div>
  55.       <div class="layui-form-item">
  56.         <label class="layui-form-label">复选框</label>
  57.         <div class="layui-input-block">
  58.           <input type="checkbox" name="like[write]" title="写作" />
  59.           <input type="checkbox" name="like[read]" title="阅读" checked />
  60.           <input type="checkbox" name="like[dai]" title="发呆" />
  61.         </div>
  62.       </div>
  63.       <div class="layui-form-item">
  64.         <label class="layui-form-label">开关</label>
  65.         <div class="layui-input-block">
  66.           <input
  67.             type="checkbox"
  68.             name="switch"
  69.             lay-skin="switch"
  70.             lay-text="开启|关闭"
  71.           />
  72.         </div>
  73.       </div>
  74.       <div class="layui-form-item">
  75.         <label class="layui-form-label">单选框</label>
  76.         <div class="layui-input-block">
  77.           <input type="radio" name="sex" value="男" title="男" />
  78.           <input type="radio" name="sex" value="女" title="女" checked />
  79.         </div>
  80.       </div>
  81.       <div class="layui-form-item layui-form-text">
  82.         <label class="layui-form-label">文本域</label>
  83.         <div class="layui-input-block">
  84.           <textarea
  85.             name="desc"
  86.             placeholder="请输入内容"
  87.             class="layui-textarea"
  88.           ></textarea>
  89.         </div>
  90.       </div>
  91.       <div class="layui-form-item">
  92.         <div class="layui-input-block">
  93.           <button class="layui-btn" lay-submit lay-filter="formDemo">
  94.             立即提交
  95.           </button>
  96.           <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  97.         </div>
  98.       </div>
  99.     </form>
  100.   </body>
  101. </html>
  102. <script>
  103.   //Demo
  104.   layui.use("form", function () {
  105.     var form = layui.form;
  107.     //监听提交
  108.     form.on("submit(formDemo)", function (data) {
  109.       layer.msg(JSON.stringify(data.field));
  110.       return false;
  111.     });
  112.     $ = layui.jquery;
  113.     form.on("select(test)", function (data) {
  114.       console.log(data.value); //得到被选中的值
  115.       if (data.value == 3) {
  116.         var citys = ["福田区", "宝安区", "市区"];
  117.         var html = "<select>";
  118.         $.each(citys, function (i, v) {
  119.           html += "<option>" + v + "</option>";
  120.         });
  121.         html += "</select>";
  122.         $('div[name="city"]').html(html);
  123.         form.render();
  124.       }
  125.     });
  126.   });
  127. </script>

1.2.3 渲染效果图

1.3 总结

layui 属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。layui 是提供给后端开发人员最好的 ui 框架，基于 DOM 驱动，只要不涉及到交互 layui 还是很不错的。

上一条：我在一个企业级ERP业务系统中用了PHP工作流引擎下一条：前端入门：DOM 基础总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多