亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 52
粉絲 0
評論 3
訪問量 53038
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
實戰(zhàn)：第1章 layui基礎
王小飛
原創(chuàng)
1497人瀏覽過

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后臺管理系統(tǒng)</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">內容區(qū)域</div>
  47.       </div>
  48.       <div class="layui-colla-item">
  49.         <h2 class="layui-colla-title">左側菜單2</h2>
  50.         <div class="layui-colla-content">內容區(qū)域</div>
  51.       </div>
  52.       <div class="layui-colla-item">
  53.         <h2 class="layui-colla-title">左側菜單3</h2>
  54.         <div class="layui-colla-content">內容區(qū)域</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.     //監(jiān)聽提交
  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="發(fā)呆"
  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.     //監(jiān)聽提交
  136.     form.on("submit(formDemo)", function (data) {
  137.       layer.msg(JSON.stringify(data.field));
  138.       return false;
  139.     });
  140.   });
  141. </script>

效果：

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網訂閱號
每天精選資源文章推送
PHP中文網APP
隨時隨地碎片化學習
PHP中文網抖音號
發(fā)現有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網，和優(yōu)秀的人一起學習！
    全站2000+教程免費學