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

搜索
博主信息
博文 43
粉絲 1
評論 0
訪問量 42344
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
初識layui表單
蔚藍世紀
原創(chuàng)
1058人瀏覽過

一、什么是Layui

layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。

二、配置Layui

1.到layui官方網(wǎng)站下載軟件。
2.獲得 layui 后，將其完整地部署到我們的項目目錄（或靜態(tài)資源服務器），只需要引入下述兩個文件：

  1. ./layui/css/layui.css
  2. ./layui/layui.js

三、Layui表單示例

創(chuàng)建主頁文件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" type="text/css" href="layui/css/layui.css">
  7.     <script type="text/javascript" src="layui/layui.js"></script>
  8.     <title>曲劇藝術(shù)管理系統(tǒng)</title>
  9. </head>
  10. <body>
  11.     <!-- header -->
  12.     <div style="height:50px;line-height:50px;background:#000;padding:0px 10px;color:#fff"">
  13.         <span>曲劇藝術(shù)后臺管理系統(tǒng)</span>        
  14.         <div style="float:right;">
  15.         <span><i class="layui-icon layui-icon-username"></i>admin</span>
  16.         <span><a href="" style="color:#fff">退出</a></span>
  17.         </div>
  18.     </div>
  19.     <!-- left menu -->
  20.     <div style="float:left;">
  21.     <ul class="layui-nav layui-nav-tree" lay-filter="test" lay-accordion>
  22. <!-- 側(cè)邊導航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  23.   <li class="layui-nav-item layui-nav-itemed">
  24.     <a href="javascript:;">文章管理</a>
  25.     <dl class="layui-nav-child">
  26.       <dd><a href="javascript:;">戲劇要聞</a></dd>
  27.       <dd><a href="javascript:;">臺前幕后</a></dd>      
  28.     </dl>
  29.   </li>
  30.   <li class="layui-nav-item">
  31.     <a href="javascript:;">視頻管理</a>
  32.     <dl class="layui-nav-child">
  33.       <dd><a href="">名段欣賞</a></dd>
  34.       <dd><a href="">完整劇目</a></dd>
  35.       <dd><a href="">梨園新秀</a></dd>
  36.     </dl>
  37.   </li>
  38.   <li class="layui-nav-item"><a href="">圖片管理</a></li>
  39.   <li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
  40. </ul>
  41. </div>
  42. <div style="float:right;width:1000px;height:600px;">
  43. <iframe style="width:100%;height:100%" frameborder="0" src="main.html" frameborder="0"></iframe>    
  44. </div>
  45. </body>
  46. </html>
  47. <script>
  48. //注意：折疊面板 依賴 element 模塊，否則無法進行功能性操作
  49. layui.use('element', function(){
  50.   var element = layui.element;
  51. });
  52. </script>

創(chuàng)建表單文件main.html表單：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  7.   <script type="text/javascript" src="layui/layui.js"></script>
  8. </head>
  9. <body>
  10.   <form class="layui-form" action="">
  11.   <div class="layui-form-item">
  12.     <label class="layui-form-label">賬號</label>
  13.     <div class="layui-input-inline">
  14.       <input type="text" name="title" required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
  15.     </div>
  16.   </div>
  17.   <div class="layui-form-item">
  18.     <label class="layui-form-label">密碼</label>
  19.     <div class="layui-input-inline">
  20.       <input type="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
  21.     </div>
  22.     <!-- <div class="layui-form-mid layui-word-aux">輔助文字</div> -->
  23.   </div>
  24.   <div class="layui-form-item">
  25.     <label class="layui-form-label">城市</label>
  26.     <div class="layui-input-inline">
  27.       <select name="city" lay-filter="test">
  28.         <option value=""></option>
  29.         <option value="0">河南省</option>
  30.         <option value="1">河北省</option>
  31.         <option value="2">江蘇省</option>
  32.         <option value="3">四川省</option>
  33.         <option value="4">浙江省</option>  
  34.       </select>
  35.       </div>
  36.       <div name="city" class="layui-input-inline">
  37.         <select name="city" lay-verify="required">
  38.         <option value=""></option>
  39.         <option value="鄭州市">鄭州市</option>
  40.         <option value="洛陽市">洛陽市</option>
  41.         <option value="漯河市">漯河市</option>
  42.         <option value="平頂山市">平頂山市</option>
  43.         <option value="南陽市">南陽市</option>
  44.       </select>
  45.       </div>
  46.       <div name="city" class="layui-input-inline">
  47.      <select name="" id="">
  48.      <option value=""></option>        
  49.      <option value="宛城區(qū)">宛城區(qū)</option> 
  50.      <option value="臥龍區(qū)">臥龍區(qū)</option> 
  51.      <option value="鎮(zhèn)平縣">鎮(zhèn)平縣</option>        
  52.      <option value="南召縣">南召縣</option>        
  53.      <option value="方城縣">方城縣</option>        
  54.      <option value="社旗縣">社旗縣</option>        
  55.      <option value="新野縣">新野縣</option>        
  56.      <option value="桐柏縣">桐柏縣</option>  
  57.      <option value="淅川縣">淅川縣</option>  
  58.      <option value="西峽縣">西峽縣</option>  
  59.       </select>
  60.       </div>       
  61.   </div>
  62.   <div class="layui-form-item">
  63.     <label class="layui-form-label">愛好</label>
  64.     <div class="layui-input-block">
  65.       <input type="checkbox" name="like[write]" title="寫作">
  66.       <input type="checkbox" name="like[read]" title="閱讀" checked>
  67.       <input type="checkbox" name="like[dai]" title="旅游">
  68.       <input type="checkbox" name="like[dai]" title="健身">
  69.     </div>
  70.   </div>
  71.   <div class="layui-form-item">
  72.     <label class="layui-form-label">開關</label>
  73.     <div class="layui-input-block">
  74.       <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" checked="">
  75.     </div>
  76.   </div>
  77.   <div class="layui-form-item">
  78.     <label class="layui-form-label">性別</label>
  79.     <div class="layui-input-block">
  80.       <input type="radio" name="sex" value="男" title="男">
  81.       <input type="radio" name="sex" value="女" title="女" checked>
  82.     </div>
  83.   </div>
  84.   <div class="layui-form-item layui-form-text">
  85.     <label class="layui-form-label">評論</label>
  86.     <div class="layui-input-inline">
  87.       <textarea name="desc" placeholder="請輸入內(nèi)容" class="layui-textarea"></textarea>
  88.     </div>
  89.   </div>
  90.   <div class="layui-form-item">
  91.     <div class="layui-input-block">
  92.       <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  93.       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  94.     </div>
  95.   </div>
  96. </form>
  97. <script>
  98. layui.use(['form'], function(){
  99.    var form = layui.form;
  100.   $ = layui.jquery;
  101. });
  102. </script>
  103. </body>
  104. </html>

輸出效果預覽：

四、總結(jié)

layui大大減少了程序員的工作量，但是作為一個程序員，基礎代碼一定要掌握的足夠好，再加上layui的幫助才能事半功倍。

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

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

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

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

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