精华内容
下载资源
问答
  • 想做一个动态新增表但功能,但是你会发现原先定义好时间控件没有效果了,变成了普通input框,于是就需要重新渲染了 1.页面效果 1.html代码 <div id="pay_content" > <label class="relative block"&...

    问题

    想做一个动态新增表但功能,但是你会发现原先定义好的时间控件没有效果了,变成了普通的input框,于是就需要重新渲染了

    1.页面效果
    在这里插入图片描述

    1.html代码

    <div id="pay_content" >
       <label class="relative block">
            <span class="color-green font-w7" required>缴费详情</span>
            <div class="notdata">
                <div class="layui-col-md6">
                    <span>缴费金额</span>
                </div>
                <div class="layui-col-md3">
                    <span>缴费截止时间</span>
                </div>
                <div class="pay_content">
                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">第1期</label>
                        <div>
                            <div class="layui-col-md4">
                                <input type="text" name="pay_content[price][]" required placeholder="请输入缴费金额"
                                    class="layui-input ">
                            </div>
                            <div class="layui-col-md4">
                                <input type="text" name="pay_content[end_time][]" data-date-input="date" required
                                    placeholder="请选择缴费截止时间" class="layui-input date">
                            </div>
                            <div class="layui-col-md1">
                                <a href="javascript:void(0);" class="layui-btn layui-btn-danger pay_content_delete"
                                    onclick="del_installment(this)">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" onclick="add_installment()">新增</button>
            </div>
        </label>
    </div>
    

    2.jq代码

    
    <script>
        form.render()
        $default_html = `
            <div class="layui-form-item" pane>
                <label class="layui-form-label">第1期</label>
                <div>
                    <div class="layui-col-md4">
                        <input type="text" name="pay_content[price][]" required placeholder="请输入缴费金额"
                            class="layui-input ">
                    </div>
                    <div class="layui-col-md4">
                        <input type="text" name="pay_content[end_time][]" data-date-input="date" required
                            placeholder="请选择缴费截止时间" class="layui-input date">
                    </div>
                    <div class="layui-col-md1">
                        <a href="javascript:void(0);" class="layui-btn layui-btn-danger pay_content_delete"
                            οnclick="del_installment(this)">删除</a>
                    </div>
                </div>
            </div>
        `;
        //新增缴费详情
        function add_installment() {
            //追加子元素
            $('.pay_content').append($default_html);
            //遍历渲染时间选择器
            lay('.date').each(function () {
                laydate.render({
                    elem: this, //元素
                });
            });
        }
        //删除缴费详情栏目
        function del_installment(that) {
            console.log(1111)
            console.log($(that).parent().parent().parent().hide());
        }
    </script>
    

    重点

    这个方法我也是找了很久,各种尝试,本来准备动态修改id来解决,但是还是被我找到了这种更方便的方法分享给大家,希望对你们有所帮助

    //遍历渲染时间选择器
     lay('.date').each(function () {
            laydate.render({
                elem: this, //元素
            });
        });
    

    如果您觉得本篇对你有帮助,可以点关注,给个赞,支持一下博主,过程有遇到什么问题也欢迎评论私信,进行交流

    展开全文
  • layui

    2019-10-05 12:43:47
    layui的使用: 使用小图标时的写法: 图标是字,可以用样式写 <i class="layui-icon layui-icon-face-smile"></i> <i class="layui-icon layui-icon-survey"></i> 写布局时:...

    layui的使用:

    使用小图标时的写法:

     

    图标是字,可以用样式写

    <i class="layui-icon layui-icon-face-smile"></i>  
    <i class="layui-icon layui-icon-survey"></i>

     

    写布局时:

    最外层的div的class名用  layui-fluid

    第二层的div的class名用layui-row

    <div class="layui-fluid">
         <div class="layui-row">
              
         </div>
    </div>

     

    转载于:https://www.cnblogs.com/shandayuan/p/11431235.html

    展开全文
  • Layui的Form

    2018-10-14 12:10:51
    layui-form-item : formlayui-form-label :label layui-input-block :长输入框 layui-input-inline : 短输入框 autocomplete 属性是否补全 placeholder 提示 class风格 lay-verify ...

    样式:
    layui-form :form
    layui-form-pane : form风格
    layui-form-item : form的行
    layui-form-label :label
    layui-input-block :长输入框
    layui-input-inline : 短输入框

    autocomplete 属性是否补全
    placeholder 提示
    class风格
    lay-verify Layui校验

    <form class="layui-form layui-form-pane" action="">
    	
      <div class="layui-form-item">
        <label class="layui-form-label">长输入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
      </div>
      
      <div class="layui-form-item">
        <label class="layui-form-label">短输入框</label>
        <div class="layui-input-inline">
          <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">日期选择</label>
          <div class="layui-input-block">
            <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">行内表单</label>
          <div class="layui-input-inline">
            <input type="text" name="number" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
          <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
      </div>
      
      <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>
      
      <div class="layui-form-item">
        <label class="layui-form-label">单行选择框</label>
        <div class="layui-input-block">
          <select name="interest" lay-filter="aihao">
            <option value=""></option>
            <option value="0">写作</option>
            <option value="1" selected="">阅读</option>
            <option value="2">游戏</option>
            <option value="3">音乐</option>
            <option value="4">旅行</option>
          </select>
        </div>
      </div>
      
      <div class="layui-form-item">
        <label class="layui-form-label">行内选择框</label>
        <div class="layui-input-inline">
          <select name="quiz1">
            <option value="">请选择省</option>
            <option value="浙江" selected="">浙江省</option>
            <option value="你的工号">江西省</option>
            <option value="你最喜欢的老师">福建省</option>
          </select>
        </div>
        <div class="layui-input-inline">
          <select name="quiz2">
            <option value="">请选择市</option>
            <option value="杭州">杭州</option>
            <option value="宁波" disabled="">宁波</option>
            <option value="温州">温州</option>
            <option value="温州">台州</option>
            <option value="温州">绍兴</option>
          </select>
        </div>
        <div class="layui-input-inline">
          <select name="quiz3">
            <option value="">请选择县/区</option>
            <option value="西湖区">西湖区</option>
            <option value="余杭区">余杭区</option>
            <option value="拱墅区">临安市</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item" pane="">
        <label class="layui-form-label">开关-开</label>
        <div class="layui-input-block">
          <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
        </div>
      </div>
      <div class="layui-form-item" pane="">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="男" title="男" checked="">
          <input type="radio" name="sex" value="女" title="女">
          <input type="radio" name="sex" value="禁" title="禁用" disabled="">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
      </div>
    </form>
    
    展开全文
  • Layui

    2020-05-12 16:17:52
    Layui: 根据官方放里面引入class类 1.图标使用 2.设置背景颜色 ...

    Layui: 根据官方放里面引入class类

    1.图标的使用

    2.设置背景颜色

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • layui的下拉框的级联实现

    千次阅读 2019-12-24 19:58:57
    layui的下拉框级联解决代码如下: <div class="layui-form toolbar"> <div class="layui-inline"> <label class="layui-form-label">一级分类</label> <div class="layui-input-...
  • Layui的基础用法

    2020-08-08 16:02:15
    个人使用Layui的记录 Layui使用表格 HTML代码: 注意:其中的lay-filter是要与表格的一些点击事件绑定的,不可忘记填写。 <div class="divContent"> <div class="layui-card"> <div class="layui-...
  • LayUI select 动态联动

    千次阅读 2019-03-18 22:34:09
    LayUI select 动态联动 要实现联动效果注意两点: 第一:要可以监听到 select change 事件; 第二:异步加载内容,需要重新渲染后才可以 正常使用。 html 代码: <form class="layui-form batchinput-...
  • layui checkbox事件

    千次阅读 2020-07-07 17:30:32
    form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 --> <div class="layui-form-item"> <label class="layui-form-label">复选框</label> <...
  • LAYUI

    2020-08-08 09:49:27
    文章目录FORM 验证两次密码输入一致CSRFHTMLJS自定义弹出框位置手风琴HTMLJS合并单独手动关闭comfirm,并重新加载tableJS标题 单元格点击事件监听HTMLJS FORM 验证 两次密码输入一致 ...<div class="layui
  • Layui的表单理解

    2020-09-29 10:06:35
    使用layui表单时候需要在创建form标签里面添加一个layui-form类,class=“layui-form” 来标识一个表单元素块,通过规范好HTML结构及CSS类,来组装成各式各样表单元素,并通过内置 form模块 来完成各种...
  • 整体的效果:一、首先百度搜索layui的地址,然后下载layui的压缩包,,将压缩包的文件解压缩,然后将解压缩后的文件复制到你的编译器上;二、建立一个html文件,引入layui.css 和 layui.js两个文件,一定要将地址写...
  • Layui的表单模块

    2020-09-07 19:10:48
    Layui的表单模块: 上面是简单的表单,接下来我们着上面的标签的展开的Layui表单的认识。 1.更新渲染 有些时候,你的有些表单元素可能是动态插入的。这时form模块的自动化渲染是会对其失效的。 第一个参数:type,为...
  • form class=layui-form batchinput-form action= id=box-form> <div class=layui-form-item> <div class=layui-input-inline> <label class=layui-form-label>所在省份: <div class=layui-input-block> <...
  • 一、首先百度搜索layui的地址,然后下载layui的压缩包,,将压缩包的文件解压缩,然后将解压缩后的文件复制到你的编译器上; 二、建立一个html文件,引入layui.css 和 layui.js两个文件,一定要将地址写对,css和js...
  • 操作layui checkbox

    千次阅读 2019-06-01 17:34:50
    form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 --> <div class="layui-form-item"> <label class="layui-form-label">复选框</label> <...
  • 1.保证在正确引入layui的CSS和JS后 用法如下: <i class=layui-icon xss=removed> layui-icon layui-icon-loading :这个是引用体图标的固定写法,图标出来是静态的 layui-anim layui-anim-rotate layui-anim-loop...
  • 将input与button放在一个大div中,然后将input的div的class定义成layui-inline,button放在独自的div里时也要定义div的classlayui-inline; (如果想让几个input同行,就把他们放在一个大的div里,大的div的class...
  • layui的上传图片

    2018-11-10 00:02:00
    前台html代码: <div class="layui-form-item"> <label class="layui-form-label">电影图片</label> <div class="layui-input-block"> <input ty...
  • layui的下拉框动态赋值

    千次阅读 2020-02-01 13:42:00
    第一步:先把layui官方给模板粘到自己前端 注:下面代码是我直接从layui官网粘过来 <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class=...
  • form class="layui-form" action="" method=""> <div class="logi_content"> <p class="tit">管理系统</p> <div class="layui-form-item"> <label...
  • 首先展示tree的页面,要引入对应的layui的css文件和js文件 , 这里是我展示tree的地方 &amp;lt;div class=&quot;layui-side layui-bg-black &quot;&amp;gt; &amp;lt;div class=&quot;...
  • layui的upload模块使用

    2021-01-26 18:46:14
    首先,肯定要引入layui的layui.js和layui.css html部分: <div class="layui-col-md5 article-contents"> <img id="headIcon" alt="" src="" style="height: 100px;width: auto;"> <button ...
  • 基于layui的下拉列表的数据回显

    万次阅读 2018-11-07 17:09:15
    静态网页+layui渲染 ...div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-block"> <select id="t" name="quiz2"&...
  • layui 单选框

    2018-06-12 13:24:00
    div class="layui-form-item"> <label class="layui-form-label">是否通过</label> <div class="layui-input-block"> <input type="radio" name="state" value="1" title="通过"...
  • layui下拉框使用

    万次阅读 2019-03-19 18:35:39
    div class="layui-form"> <select name="" id="" lay-filter="myselect"> <option value="zhang">张先生</option> <option value="wang">王先生</option>...
  • layui的select联动

    千次阅读 2019-05-23 11:27:26
    要实现联动效果注意两点: 第一要可以监听到selectchange事件;...form class="layui-form batchinput-form"action="" id="box-form"> <div class="layui-form-item" > <div clas...
  • layui的验证规则

    2018-12-25 16:44:00
    layui表单元素校验只需在元素上加入lay-verify <input type="text" id="a" name="a" placeholder="A" lay-verify="required|number" class="layui-input">  layui提供了以下值: required(必填...
  • layui菜单使用

    2020-04-04 22:08:24
    layUI的菜单分为两类:水平菜单和垂直菜单。 水平菜单: <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>水平导航菜单</legend> </fieldset...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,373
精华内容 949
关键字:

layui的class