Community Learn Tools Library Leisure
search
English
Home > List of blog posts > PHP综合实战：layui框架的使用
Blogger Information
Blog 145
fans 7
comment 7
visits 164600
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP综合实战：layui框架的使用
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1634 people have browsed it

代码：

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

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post