layUI表单--乐字节前端

标签：区块   mod   依赖   llb   nan   head   table   group   元素   

? <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.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(‘很高兴见到你

layUI表单--乐字节前端

标签：区块   mod   依赖   llb   nan   head   table   group   元素   

原文地址：https://blog.51cto.com/14819669/2505644