search

博客列表 >初识LayUI

初识LayUI

海阔天空
海阔天空原创
2020年06月03日 16:50:12713浏览

LayUI

Layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式。Layui更多是为服务端程序员量身定做，无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切所需要的元素与交互，从这里信手拈来。

效果图如下：

代码如下：

  1. //demo1.html
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.     <head>
  6.         <meta charset="UTF-8" />
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.         <title>LayUI管理平台</title>
  9.         <link rel="stylesheet" href="/layui/css/layui.css" />
  10.         <script src="/layui/layui.js"></script>
  11.         <style>
  12.             .container {
  13.                  display: flex; 
  14.                  width: 100vw;
  15.                  height: 850px;
  16.                  box-sizing: border-box;
  17.             }
  18.             iframe{
  19.                 width:90%;
  20.                 height:95%;
  21.                 margin-top: 30px;
  22.                 margin-left: 60px;
  23.             }
  24.             .iframe{
  25.                 width:100%;
  26.                 height:100%;
  28.             }
  29.             #nav {
  30.                 background-color: #000;
  31.                 color: white;
  32.                 height: 50px;
  33.                 line-height: 50px;
  34.                 padding-left: 20px;
  35.                 display: flex;
  36.                 font-size: 18px;
  37.                 font-weight: 550;
  38.             }
  39.             #nav span:nth-of-type(2) {
  40.                 color: rgb(206, 134, 134);
  41.                 margin-left: auto;
  42.                 padding: 0 3px;
  43.                 font-size: 20px;
  44.             }
  45.             #nav span:nth-of-type(3) {
  46.                 color: rgb(206, 134, 134);
  47.                 padding-right: 20px;
  48.             }
  49.             #nav span:last-of-type {
  50.                 padding-right: 20px;
  51.             }
  52.             #nav span:last-of-type a {
  53.                 color: white;
  54.             }
  55.             .leftmenu {
  56.                 width: 200px;
  57.                 padding: 30px 30px;
  58.             }
  59.             .content{
  60.                 background-color: #fff;
  61.             }
  62.         </style>
  63.     </head>
  64.     <body>
  65.         <!-- header -->
  66.         <div id="nav">
  67.             <span>LayUI后台管理系统</span>
  68.             <span class="layui-icon layui-icon-username"></span>
  69.             <span>admin</span>
  70.             <span><a href="">退出</a></span>
  71.         </div>
  72.         <!-- 工作区 -->
  73.         <div class="container">
  74.             <!-- 左侧菜单 -->
  75.             <div class="layui-collapse leftmenu" lay-accordion>
  76.                 <div class="layui-colla-item">
  77.                     <h2 class="layui-colla-title">杜甫</h2>
  78.                     <div class="layui-colla-content content">唐代大诗人，尊称诗圣</div>
  79.                 </div>
  80.                 <div class="layui-colla-item">
  81.                     <h2 class="layui-colla-title">李清照</h2>
  82.                     <div class="layui-colla-content content">宋代大词人</div>
  83.                 </div>
  84.                 <div class="layui-colla-item">
  85.                     <h2 class="layui-colla-title">鲁迅</h2>
  86.                     <div class="layui-colla-content content" >近代大文豪</div>
  87.                 </div>
  88.             </div>
  89.             <!-- 右侧工作区 -->
  90.             <div class="iframe">
  91.                 <iframe frameborder="none" src="main.html"></iframe>
  92.             </div>
  93.         </div>
  94.         <script>
  95.             //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  96.             layui.use("element", function () {
  97.                 var element = layui.element;
  99.                 //…
  100.             });
  101.         </script>
  102.     </body>
  103. </html>
  105. //main.html
  107. <!DOCTYPE html>
  108. <html lang="en">
  109. <head>
  110.     <meta charset="UTF-8">
  111.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  112.     <title>Document</title>
  113.     <link rel="stylesheet" href="/layui/css/layui.css" />
  114.     <script src="/layui/layui.js"></script>
  115. </head>
  116. <body>
  117.     <form class="layui-form layui-form-pane" action="">
  118.         <div class="layui-form-item">
  119.           <label class="layui-form-label">输入框</label>
  120.           <div class="layui-input-block">
  121.             <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
  122.           </div>
  123.         </div>
  124.         <div class="layui-form-item">
  125.           <label class="layui-form-label">密码框</label>
  126.           <div class="layui-input-inline">
  127.             <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
  128.           </div>
  129.           <div class="layui-form-mid layui-word-aux">辅助文字</div>
  130.         </div>
  131.         <div class="layui-form-item">
  132.           <label class="layui-form-label">选择框</label>
  133.           <div class="layui-input-inline">
  134.             <select name="city" lay-verify="required">
  135.               <option value=""></option>
  136.               <option value="0">北京</option>
  137.               <option value="1">上海</option>
  138.               <option value="2">广州</option>
  139.               <option value="3">深圳</option>
  140.               <option value="4">杭州</option>
  141.             </select>
  142.           </div>
  143.         </div>
  144.         <div class="layui-form-item" pane>
  145.           <label class="layui-form-label">复选框</label>
  146.           <div class="layui-input-block">
  147.             <input type="checkbox" name="like[write]" title="写作">
  148.             <input type="checkbox" name="like[read]" title="阅读" checked>
  149.             <input type="checkbox" name="like[dai]" title="发呆"lay-skin="primary">
  150.           </div>
  151.         </div>
  152.         <div class="layui-form-item" pane>
  153.           <label class="layui-form-label">开关</label>
  154.           <div class="layui-input-block">
  155.             <input type="checkbox" name="switch" lay-skin="switch" lay-text="开启|关闭">
  156.           </div>
  157.         </div>
  158.         <div class="layui-form-item" pane>
  159.           <label class="layui-form-label">单选框</label>
  160.           <div class="layui-input-block">
  161.             <input type="radio" name="sex" value="男" title="男">
  162.             <input type="radio" name="sex" value="女" title="女" checked>
  163.           </div>
  164.         </div>
  165.         <div class="layui-form-item layui-form-text">
  166.           <label class="layui-form-label">文本域</label>
  167.           <div class="layui-input-block">
  168.             <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
  169.           </div>
  170.         </div>
  171.         <div class="layui-form-item">
  172.           <div class="layui-input-block">
  173.             <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  174.             <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  175.           </div>
  176.         </div>
  177.       </form>
  179.       <script>
  180.       //Demo
  181.       layui.use('form', function(){
  182.         var form = layui.form;
  184.         //监听提交
  185.         form.on('submit(formDemo)', function(data){
  186.           layer.msg(JSON.stringify(data.field));
  187.           return false;
  188.         });
  189.       });
  190.       </script>
  191. </body>
  192. </html>

总结：初次接触Layui，听了老师的讲解，感觉上手相对不是太难，实现效果不错，效率较高。
1、下载并安装Layui。
2、阅读了Layui手册。
3、初步掌握了界面的实现，事件的响应等还需要今后的学习逐步掌握。

上一条：Laravel框架安装下一条：实战：第2章 Laravel安装
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多