码迷,mamicode.com
首页 > 其他好文 > 详细

layUI表单--乐字节前端

时间:2020-06-18 17:46:15      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:区块   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 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js 通过script标签引入layer.js后,直接用即可。
2. layui 模块化使用 如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.csslayui.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(‘很高兴见到你

layUI表单--乐字节前端

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!