search

博客列表 >实战：第1章 layui基础

实战：第1章 layui基础

王小飞
王小飞原创
2020年06月02日 16:10:16899浏览

layui基础

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>layui</title>
  6.     <link rel="stylesheet" href="layui/css/layui.css" />
  7.     <script src="layui/layui.js"></script>
  8.     <style>
  9.       header {
  10.         display: flex;
  11.         justify-content: space-between;
  12.         height: 50px;
  13.         line-height: 50px;
  14.         box-sizing: border-box;
  15.         padding: 0 10px;
  16.         background-color: black;
  17.         color: white;
  18.         font-size: 18px;
  19.       }
  20.       main {
  21.         display: flex;
  22.         margin-top: 20px;
  23.       }
  24.       .layui-form-item .layui-input-inline {
  25.         width: 520px;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <!--顶部导航-->
  31.     <header>
  32.       <span>layUI后台管理系统</span>
  33.       <div>
  34.         <span><i class="layui-icon layui-icon-username"></i></span>
  35.         <span>xiaofei</span>
  36.         <a href="" style="color: white;">退出</a>
  37.       </div>
  38.     </header>
  39.     <div
  40.       class="layui-collapse"
  41.       lay-accordion
  42.       style="width: 200px; float: left;"
  43.     >
  44.       <div class="layui-colla-item">
  45.         <h2 class="layui-colla-title">左侧菜单1</h2>
  46.         <div class="layui-colla-content layui-show">内容区域</div>
  47.       </div>
  48.       <div class="layui-colla-item">
  49.         <h2 class="layui-colla-title">左侧菜单2</h2>
  50.         <div class="layui-colla-content">内容区域</div>
  51.       </div>
  52.       <div class="layui-colla-item">
  53.         <h2 class="layui-colla-title">左侧菜单3</h2>
  54.         <div class="layui-colla-content">内容区域</div>
  55.       </div>
  56.     </div>
  57.     <div style="float: left; width: 1200px; height: 1500px;">
  58.       <iframe
  59.         style="width: 100%; height: 100%;"
  60.         src="cont.html"
  61.         frameborder="0"
  62.       ></iframe>
  63.     </div>
  64.   </body>
  65. </html>
  66. <script>
  67.   //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  68.   // left-menu 折叠
  69.   layui.use("element", function () {
  70.     var element = layui.element;
  71.   });
  73.   //Demo
  74.   layui.use("form", function () {
  75.     var form = layui.form;
  76.     //监听提交
  77.     form.on("submit(formDemo)", function (data) {
  78.       layer.msg(JSON.stringify(data.field));
  79.       return false;
  80.     });
  81.   });
  82. </script>

内容iframe代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>layui</title>
  6.     <link rel="stylesheet" href="layui/css/layui.css" />
  7.     <script src="layui/layui.js"></script>
  8.   </head>
  9.   <booy>
  10.     <main>
  11.       <!--left-menu-->
  12.       <!--lay-accordion 来开启手风琴,进行折叠操作时，始终只会展现当前的面板。-->
  13.       <!--layui-show 展开-->
  15.       <form class="layui-form" action="">
  16.         <div class="layui-form-item">
  17.           <label class="layui-form-label">输入框</label>
  18.           <div class="layui-input-block">
  19.             <input
  20.               type="text"
  21.               name="title"
  22.               required
  23.               lay-verify="required"
  24.               placeholder="请输入标题"
  25.               autocomplete="off"
  26.               class="layui-input"
  27.             />
  28.           </div>
  29.         </div>
  30.         <div class="layui-form-item">
  31.           <label class="layui-form-label">密码框</label>
  32.           <div class="layui-input-inline">
  33.             <input
  34.               type="password"
  35.               name="password"
  36.               required
  37.               lay-verify="required"
  38.               placeholder="请输入密码"
  39.               autocomplete="off"
  40.               class="layui-input"
  41.             />
  42.           </div>
  43.           <div class="layui-form-mid layui-word-aux">辅助文字</div>
  44.         </div>
  45.         <div class="layui-form-item">
  46.           <label class="layui-form-label">选择框</label>
  47.           <div class="layui-input-block">
  48.             <select name="city" lay-verify="required">
  49.               <option value=""></option>
  50.               <option value="0">北京</option>
  51.               <option value="1">上海</option>
  52.               <option value="2">广州</option>
  53.               <option value="3">深圳</option>
  54.               <option value="4">杭州</option>
  55.             </select>
  56.           </div>
  57.         </div>
  58.         <div class="layui-form-item">
  59.           <label class="layui-form-label">复选框</label>
  60.           <div class="layui-input-block">
  61.             <input
  62.               type="checkbox"
  63.               name="like[write]"
  64.               title="写作"
  65.               lay-skin="primary"
  66.             />
  67.             <input
  68.               type="checkbox"
  69.               name="like[read]"
  70.               title="阅读"
  71.               checked
  72.               lay-skin="primary"
  73.             />
  74.             <input
  75.               type="checkbox"
  76.               name="like[dai]"
  77.               title="发呆"
  78.               lay-skin="primary"
  79.             />
  80.           </div>
  81.         </div>
  82.         <div class="layui-form-item">
  83.           <label class="layui-form-label">开关</label>
  84.           <div class="layui-input-block">
  85.             <input
  86.               type="checkbox"
  87.               name="yyy"
  88.               lay-skin="switch"
  89.               lay-text="ON|OFF"
  90.               checked
  91.             />
  92.           </div>
  93.         </div>
  94.         <div class="layui-form-item">
  95.           <label class="layui-form-label">单选框</label>
  96.           <div class="layui-input-block">
  97.             <input type="radio" name="sex" value="男" title="男" />
  98.             <input type="radio" name="sex" value="女" title="女" checked />
  99.           </div>
  100.         </div>
  101.         <div class="layui-form-item layui-form-text">
  102.           <label class="layui-form-label">文本域</label>
  103.           <div class="layui-input-block">
  104.             <textarea
  105.               name="desc"
  106.               placeholder="请输入内容"
  107.               class="layui-textarea"
  108.             ></textarea>
  109.           </div>
  110.         </div>
  111.         <div class="layui-form-item">
  112.           <div class="layui-input-block">
  113.             <button class="layui-btn" lay-submit lay-filter="formDemo">
  114.               立即提交
  115.             </button>
  116.             <button type="reset" class="layui-btn layui-btn-primary">
  117.               重置
  118.             </button>
  119.           </div>
  120.         </div>
  121.       </form>
  122.     </main>
  123.   </booy>
  124. </html>
  125. <script>
  126.   //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  127.   // left-menu 折叠
  128.   layui.use("element", function () {
  129.     var element = layui.element;
  130.   });
  132.   //Demo
  133.   layui.use("form", function () {
  134.     var form = layui.form;
  135.     //监听提交
  136.     form.on("submit(formDemo)", function (data) {
  137.       layer.msg(JSON.stringify(data.field));
  138.       return false;
  139.     });
  140.   });
  141. </script>

效果：

上一条：layui基础知识下一条：基本的getter/setter、常用过滤器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多