作业地址

作业地址： layui基础知识

做作业的过程中，有几个容易犯错的点记录一下.

lay-filter是写在标签里面的，不是写在容器上

放上源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <style type="text/css" media="screen">
        .layui-form-label {
            /*width:300px;*/
        }
    </style>
</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-inline">
                <input type="text" name="" class="layui-input" placeholder="请输入标题">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请输入大名</label>
            <div class="layui-input-inline">
                <input type="text" name="" class="layui-input" placeholder="请输入标题">
            </div>
            <div class="layui-form-mid layui-word-aux">张三李四王五</div>
        </div>
         <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
             <div class="layui-input-inline">
              <select name="city" lay-filter="test">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
              </select>
            </div>
             <div name="city" class="layui-input-inline">
        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="" title="写作" checked>
                <input type="checkbox" name="" title="睡觉">
                <input type="checkbox" name="" title="禁用" disabled>
                <input type="checkbox" name="" title="小的" lay-skin="primary">
                <input type="checkbox" name="" title="女朋友" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block" >
                <input type="checkbox" name="xxx" lay-skin="switch" lay-text="开启|关闭" lay-filter="test">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男">
                <input type="radio" name="sex" value="2" title="女">
                <input type="radio" name="sex" value="3" title="保密">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <textarea name="" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                 <button class="layui-btn">提交</button>
                 <button class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
  </div>
</body>
</html>
<script>
layui.use('form', function(){
  var form = layui.form;
  $ = layui.jquery;
    form.on('select(test)', function(data){
      console.log(data.value);
      if(data.value >= 0) {
        var citys = ['长沙','衡阳'];
        var html = '<select>';
        $.each(citys,function(i, v) {
            html += ('<option>' + v + '</option>');
        });
        html += '</select>';
        $('div[name="city"]').html(html);
        form.render;
      }
    });
        // switch
       form.on('switch(test)', function(data){
            console.log(data.elem.checked);
            layer.confirm('是否要开启？', {
                  btn: ['开启','不开启'] //按钮
                }, function(){
                  layer.msg('的确很重要', {icon: 1});
                }, function(){
                   $(data.elem).prop('checked',false);
                });
             });
    });
// });
</script>

总结

今天这解课，让我学到了很多东西，实战部分和基础是紧紧联系的，基础不牢固，很多代码就不能理解，前面少的作业还是要好好补回来

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

在线商城支付-支付宝

2020-07-10 15:44:06