layUI表單--樂字節前端

表單

​ <font color="red">依賴加載模塊：form </font>

1. 在一個容器中設定 class="layui-form" 來標識一個表單元素塊

   <form class="layui-form" action="">
   
   </form>

2. 基本的行區塊結構，它提供了響應式的支持。能夠換成其餘結構，但必需要在外層容器中定義class="layui-form"，form模塊才能正常工做。

   <div class="layui-form-item">
       <label class="layui-form-label">標籤區域</label>
       <div class="layui-input-block">
       原始表單元素區域
       </div>
   </div>

輸入框

<input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input" />

• required：註冊瀏覽器所規定的必填字段
• lay-verify：註冊form模塊須要驗證的類型
• class="layui-input"：layui.css提供的通用CSS類

下拉選擇框

<select name="city" lay-verify="">
  <option value="">請選擇一個城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>

• 屬性selected可設定默認項
• 屬性disabled開啓禁用，select和option標籤都支持

<select name="city" lay-verify="">
  <option value="010">北京</option>
  <option value="021" disabled>上海（禁用效果）</option>
  <option value="0571" selected>杭州</option>
</select>

• 能夠經過 optgroup 標籤給select分組

<select name="quiz">
  <option value="">請選擇</option>
  <optgroup label="城市記憶">
    <option value="你工做的第一個城市">你工做的第一個城市？</option>
  </optgroup>
  <optgroup label="學生時代">
    <option value="你的工號">你的工號？</option>
    <option value="你最喜歡的老師">你最喜歡的老師？</option>
  </optgroup>
</select>

• 經過設定屬性 lay-search 來開啓搜索匹配功能

<select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
</select>

複選框

<h2>默認風格：</h2>
<input type="checkbox" name="" title="寫做" checked>
<input type="checkbox" name="" title="發呆"> 
<input type="checkbox" name="" title="禁用" disabled> 

<h2>原始風格：</h2>
<input type="checkbox" name="" title="寫做" lay-skin="primary" checked>
<input type="checkbox" name="" title="發呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

• 屬性title可自定義文本（舒適提示：若是隻想顯示覆選框，能夠不用設置title）
• 屬性checked可設定默認選中
• 屬性lay-skin可設置複選框的風格 （原始風格：lay-skin="primary"）
• 設置value="1"可自定義值，不然選中時返回的就是默認的on

開關

將複選框checkbox，經過設定 lay-skin="switch" 造成了開關風格

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="開啓|關閉">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

• 屬性checked可設定默認開
• 屬性disabled開啓禁用
• 屬性lay-text可自定義開關兩種狀態的文本 （兩種文本用 "|" 隔開）
• 設置value="1"可自定義值，不然選中時返回的就是默認的on

單選框

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

• 屬性title可自定義文本
• 屬性disabled開啓禁用
• 設置value="xxx"可自定義值，不然選中時返回的就是默認的on

文本域

<textarea name="remark" required lay-verify="required" placeholder="請輸入我的介紹" class="layui-textarea"></textarea>

• class="layui-textarea"：layui.css提供的通用CSS類

組裝行內表單

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">範圍</label>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="text" name="price_min" placeholder="￥" 
                 autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="text" name="price_max" placeholder="￥" 
                 autocomplete="off" class="layui-input">
        </div>
    </div>
</div>

• class="layui-inline"：定義外層行內
• class="layui-input-inline"：定義內層行內

忽略美化渲染

​ 能夠對錶單元素增長屬性 lay-ignore 設置後，將不會對該標籤進行美化渲染，即保留系統風格。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>

表單方框風格

​ 經過追加 layui-form-pane 的class，來設定表單的方框風格。

<form class="layui-form layui-form-pane" action="">
  <!-- 
        內部結構都同樣，值得注意的是 複選框/開關/單選框 這些組合在該風格下須要額外添加 pane屬性（不然     會看起來比較彆扭），如： 
  -->
  <div class="layui-form-item" pane>
    <label class="layui-form-label">單選框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
</form>

組件示例

彈出層

<font color="red">模塊加載名稱：layer，獨立版本：layer.layui.com</font>

使用場景

因爲layer能夠獨立使用，也能夠經過Layui模塊化使用。因此請按照你的實際需求來選擇。

場景	用前準備	調用方式
1. 做爲獨立組件使用	若是你只是單獨想使用 layer，你能夠去 layer 獨立版本官網下載組件包。你須要在你的頁面引入jQuery1.8以上的任意版本，並引入layer.js。	經過script標籤引入layer.js後，直接用便可。
2. layui 模塊化使用	若是你使用的是 layui，那麼你直接在官網下載 layui 框架便可，無需引入 jQuery 和 layer.js，但須要引入layui.css和layui.js	經過layui.use('layer', callback)加載模塊

1. 做爲獨立組件使用 layer

   <!-- 引入好layer.js後，直接用便可 -->
   <script src="layer.js"></script>
   <script>
   layer.msg('hello'); 
   </script>

2. 在 layui 中使用 layer

   layui.use('layer', function(){
    var layer = layui.layer;
   
    layer.msg('hello');
   });

基礎參數

1. type - 基本層類型

   類型：Number，默認：0
   
   可傳入的值有：
   0（信息框，默認）
   1（頁面層）
   2（iframe層）
   3（加載層）
   4（tips層）

2. title - 標題

   類型：String/Array/Boolean，默認：'信息'
   
   title支持三種類型的值：
   若傳入的是普通的字符串，如 title :'我是標題'，那麼只會改變標題文本；
   若須要自定義樣式，能夠title: ['文本', 'font-size:18px;']，數組第二項能夠寫任意css樣式；
   若你不想顯示標題欄，能夠 title: false；

3. content - 內容

   類型：String/DOM/Array，默認：''
   
   content可傳入的值是靈活多變的，不只能夠傳入普通的html內容，還能夠指定DOM。

   /* 信息框 */
   layer.open({
      type:0,
      title:"系統消息",
      // content能夠傳入任意的文本或html
      content:"Hello"
   });
   
   /* 頁面層 */
   layer.open({
      type:1,
      title:"系統消息",
      // content能夠傳入任意的文本或html
      content:"<div style='height:100px;width:200px'>Hello</div>"
   });
   
   /* iframe */
   layer.open({
      type:2,
      title:"系統消息",
      // content是一個URL，若是你不想讓iframe出現滾動條，你還能夠content: ['url', 'no']
      content:"http://www.baidu.com"
      // content:["http://www.baidu.com",'no']
   });
   
   /* tips層 */
   layer.open({
    type: 4,
    content: ['內容', '#id'] //數組第二項即吸附元素選擇器或者DOM
   });

4. area - 寬高

   類型：String/Array，默認：'auto'
   
   在默認狀態下，layer是寬高都自適應的。
   當定義寬度時，你能夠area: '500px'，高度仍然是自適應的。
   當寬高都要定義時，你能夠area: ['500px', '300px']。

5. icon - 圖標

   注：信息框和加載層的私有參數。
   
   類型：Number，默認：-1（信息框）/0（加載層）
   
   信息框默認不顯示圖標。當你想顯示圖標時，默認層能夠傳入0-6。若是是加載層，能夠傳入0-2。

   // eg1
   layer.alert('酷斃了', {icon: 1});
   // eg2
   layer.msg('不開心。。', {icon: 5});
   // eg3
   layer.load(1); // 風格1的加載

6. 示例

   // eg1
   layer.alert('很高興見到你