search

博客列表 >PHP综合实战：layui框架的使用

PHP综合实战：layui框架的使用

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年06月02日 20:03:251633浏览

代码：

1、index.html代码：

  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.     <link rel="stylesheet" href="layui/css/layui.css" />
  7.     <script src="layui/layui.js"></script>
  8.     <title>Layui的使用</title>
  9.     <style>
  10.       .nav {
  11.         height: 50px;
  12.         background-color: #484848;
  13.         color: white;
  14.         font-size: 1.2rem;
  15.         display: flex;
  16.         align-items: center;
  17.         justify-content: space-between;
  18.         padding: 0 10px;
  19.       }
  20.       .nav a {
  21.         color: whitesmoke;
  22.       }
  23.       .nav a:hover {
  24.         color: darkgray;
  25.       }
  26.       .nav > div:last-child {
  27.         width: 160px;
  28.         display: flex;
  29.         align-items: center;
  30.         justify-content: space-evenly;
  31.       }
  32.       .container {
  33.         display: flex;
  34.       }
  35.       .container > .menu {
  36.         width: 200px;
  37.       }
  38.       .container > .iframe {
  39.         flex-grow: 1;
  40.         height: 670px;
  41.       }
  42.       .container > .iframe > iframe {
  43.         width: 100%;
  44.         height: 100%;
  45.       }
  46.     </style>
  47.   </head>
  48.   <body>
  49.     <!-- 头部导航 -->
  50.     <div class="nav">
  51.       <div>
  52.         <span>CMS后台管理</span>
  53.       </div>
  54.       <div>
  55.         <i class="layui-icon layui-icon-username" style="font-size: 1.2em;"></i>
  56.         <a href="">admin</a>
  57.         <a href="">退出</a>
  58.       </div>
  59.     </div>
  60.     <!-- 主体部分 -->
  61.     <div class="container">
  62.       <div class="menu">
  63.         <div class="layui-collapse" lay-accordion>
  64.           <div class="layui-colla-item">
  65.             <h2 class="layui-colla-title">管理</h2>
  66.             <div class="layui-colla-content layui-show">
  67.               <a href="from.html" target="user">用户</a>
  68.             </div>
  69.           </div>
  70.           <div class="layui-colla-item">
  71.             <h2 class="layui-colla-title">商品</h2>
  72.             <div class="layui-colla-content">大成168</div>
  73.           </div>
  74.           <div class="layui-colla-item">
  75.             <h2 class="layui-colla-title">文章</h2>
  76.             <div class="layui-colla-content">文章系统上线啦！</div>
  77.           </div>
  78.         </div>
  79.       </div>
  80.       <div class="iframe">
  81.         <iframe
  82.           src="test.html"
  83.           frameborder="0"
  84.           scrolling="no"
  85.           name="user"
  86.           placeholder="欢迎来到CMS管理系统"
  87.         >
  88.         </iframe>
  89.       </div>
  90.     </div>
  91.   </body>
  92.   <script>
  93.     //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  94.     layui.use("element", function () {
  95.       var element = layui.element;
  97.       //…
  98.     });
  99.   </script>
  100. </html>

2、form.html代码

  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.     <link rel="stylesheet" href="layui/css/layui.css" />
  7.     <script src="layui/layui.js"></script>
  8.     <title>Document</title>
  9.     <style>
  10.       body {
  11.         height: 1200px;
  12.         background-color: lightgreen;
  13.       }
  14.       form {
  15.         padding: 10px;
  16.         font-size: 1.2em;
  17.       }
  18.       .layui-input-block {
  19.         width: 360px;
  20.       }
  21.       .layui-form-label {
  22.         text-align: center;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <form action="" class="layui-form">
  28.       <div class="layui-form-item">
  29.         <label for="" class="layui-form-label">用户名:</label>
  30.         <div class="layui-input-block">
  31.           <input
  32.             type="email"
  33.             placeholder="email@163.com"
  34.             class="layui-input"
  35.             required
  36.             lay-verify="required"
  37.           />
  38.         </div>
  39.       </div>
  40.       <div class="layui-form-item">
  41.         <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;码:</label>
  42.         <div class="layui-input-inline">
  43.           <input
  44.             type="password"
  45.             name="title"
  46.             required
  47.             lay-verify="required"
  48.             placeholder="*********"
  49.             autocomplete="off"
  50.             class="layui-input"
  51.           />
  52.         </div>
  53.         <div class="layui-form-mid layui-word-aux">密码不少于6位</div>
  54.       </div>
  55.       <div class="layui-form-item">
  56.         <label for="" class="layui-form-label">选择框:</label>
  57.         <div class="layui-input-block">
  58.           <select name="area" id="">
  59.             <option value="1">华东</option>
  60.             <option value="2" checked>华北</option>
  61.             <option value="3" disabled>华中</option>
  62.             <optgroup label="东北地区">
  63.               <option value="01">黑龙江</option>
  64.               <option value="02">吉林</option>
  65.               <option value="03">大连</option>
  66.             </optgroup>
  67.           </select>
  68.         </div>
  69.       </div>
  70.       <div class="layui-form-item">
  71.         <label for="" class="layui-form-label">爱好:</label>
  72.         <div class="layui-input-block">
  73.           <input type="checkbox" title="写作" name="model[]" />
  74.           <input type="checkbox" title="阅读" name="model[]" checked />
  75.           <input
  76.             type="checkbox"
  77.             title="阅读"
  78.             name="model[]"
  79.             lay-skin="switch"
  80.             lay-text="ON|OFF"
  81.             checked
  82.           />
  83.           <input
  84.             type="checkbox"
  85.             title="单词"
  86.             name="modol[]"
  87.             lay-skin="primary"
  88.           />
  89.         </div>
  90.       </div>
  91.       <div class="layui-form-item">
  92.         <label for="" class="layui-form-label">性别:</label>
  93.         <div class="layui-input-block">
  94.           <input type="radio" title="男" name="sex" checked />
  95.           <input type="radio" title="女" name="sex" />
  96.         </div>
  97.       </div>
  98.       <div class="layui-form-item">
  99.         <label for="" class="layui-form-label">个人介绍</label>
  100.         <div class="layui-input-block">
  101.           <textarea
  102.             name=""
  103.             id=""
  104.             cols="30"
  105.             rows="10"
  106.             placeholder="输入不少于100字的个人介绍"
  107.             class="layui-textarea"
  108.             style="resize: none;"
  109.           ></textarea>
  110.         </div>
  111.       </div>
  112.       <div class="layui-form-item">
  113.         <div class="layui-input-block">
  114.           <button class="layui-btn">提交</button>
  115.           <button type="reset" class="layui-btn layui-btn-warm">重置</button>
  116.         </div>
  117.       </div>
  118.     </form>
  119.   </body>
  120.   <script>
  121.     //Demo
  122.     layui.use("form", function () {
  123.       var form = layui.form;
  125.       //监听提交
  126.       form.on("submit(formDemo)", function (data) {
  127.         layer.msg(JSON.stringify(data.field));
  128.         return false;
  129.       });
  130.     });
  131.   </script>
  132. </html>

3、test.html代码：

  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.     <style>
  8.       div {
  9.         position: absolute;
  10.         margin: auto;
  11.         top: 0;
  12.         bottom: 0;
  13.         left: 0;
  14.         right: 0;
  15.         text-align: center;
  16.         background-color: #00ffff;
  17.         display: flex;
  18.         justify-content: center;
  19.         justify-items: center;
  20.         align-items: center;
  21.         align-content: center;
  22.       }
  23.       div > h1 {
  24.         color: lightblue;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div><h1>欢迎来CMS管理系统</h1></div>
  30.   </body>
  31. </html>

4、运行结果：
http://www.zhongyequan.com/php/index.html

上一条：socket PHP中的socket如何和websocket进行握手。下一条：PHP基础：composer 的常用命令
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多