简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > layui基础知识
Blogger Information
Blog 36
fans 1
comment 0
visits 29323
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
layui基础知识
Jason
Original
883 people have browsed it

作业地址

作业地址 ： layui基础知识

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

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

放上源码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>注册页面</title>
  6.     <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  7.     <script type="text/javascript" src="layui/layui.js"></script>
  8.     <style type="text/css" media="screen">
  9.         .layui-form-label {
  10.             /*width:300px;*/
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="layui-form">
  16.         <div class="layui-form-item">
  17.             <label class="layui-form-label">输入框</label>
  18.             <div class="layui-input-inline">
  19.                 <input type="text" name="" class="layui-input" placeholder="请输入标题">
  20.             </div>
  21.         </div>
  23.         <div class="layui-form-item">
  24.             <label class="layui-form-label">请输入大名</label>
  25.             <div class="layui-input-inline">
  26.                 <input type="text" name="" class="layui-input" placeholder="请输入标题">
  27.             </div>
  28.             <div class="layui-form-mid layui-word-aux">张三李四王五</div>
  29.         </div>
  33.          <div class="layui-form-item">
  34.             <label class="layui-form-label">选择框</label>
  35.              <div class="layui-input-inline">
  36.               <select name="city" lay-filter="test">
  37.                 <option value=""></option>
  38.                 <option value="0">北京</option>
  39.                 <option value="1">上海</option>
  40.                 <option value="2">广州</option>
  41.                 <option value="3">深圳</option>
  42.                 <option value="4">杭州</option>
  43.               </select>
  44.             </div>
  46.              <div name="city" class="layui-input-inline">
  47.         </div>
  49.         </div>
  52.         <div class="layui-form-item">
  53.             <label class="layui-form-label">复选框</label>
  54.             <div class="layui-input-block">
  55.                 <input type="checkbox" name="" title="写作" checked>
  56.                 <input type="checkbox" name="" title="睡觉">
  57.                 <input type="checkbox" name="" title="禁用" disabled>
  58.                 <input type="checkbox" name="" title="小的" lay-skin="primary">
  59.                 <input type="checkbox" name="" title="女朋友" lay-skin="primary">
  60.             </div>
  61.         </div>
  63.         <div class="layui-form-item">
  64.             <label class="layui-form-label">状态</label>
  65.             <div class="layui-input-block" >
  66.                 <input type="checkbox" name="xxx" lay-skin="switch" lay-text="开启|关闭" lay-filter="test">
  67.             </div>
  68.         </div>
  72.         <div class="layui-form-item">
  73.             <label class="layui-form-label">性别</label>
  74.             <div class="layui-input-block">
  75.                 <input type="radio" name="sex" value="1" title="男">
  76.                 <input type="radio" name="sex" value="2" title="女">
  77.                 <input type="radio" name="sex" value="3" title="保密">
  78.             </div>
  79.         </div>
  81.         <div class="layui-form-item">
  82.             <label class="layui-form-label">性别</label>
  83.             <div class="layui-input-inline">
  84.                 <textarea name="" class="layui-textarea"></textarea>
  85.             </div>
  86.         </div>
  88.         <div class="layui-form-item">
  89.             <div class="layui-input-block">
  90.                  <button class="layui-btn">提交</button>
  91.                  <button class="layui-btn layui-btn-primary">重置</button>
  92.             </div>
  93.         </div>
  94.   </div>
  95. </body>
  96. </html>
  98. <script>
  99. layui.use('form', function(){
  100.   var form = layui.form;
  101.   $ = layui.jquery;
  102.     form.on('select(test)', function(data){
  103.       console.log(data.value);
  105.       if(data.value >= 0) {
  106.         var citys = ['长沙','衡阳'];
  107.         var html = '<select>';
  108.         $.each(citys,function(i, v) {
  109.             html += ('<option>' + v + '</option>');
  110.         });
  111.         html += '</select>';
  112.         $('div[name="city"]').html(html);
  113.         form.render;
  114.       }
  115.     });
  118.         // switch
  119.        form.on('switch(test)', function(data){
  120.             console.log(data.elem.checked);
  121.             layer.confirm('是否要开启？', {
  122.                   btn: ['开启','不开启'] //按钮
  123.                 }, function(){
  124.                   layer.msg('的确很重要', {icon: 1});
  125.                 }, function(){
  126.                    $(data.elem).prop('checked',false);
  127.                 });
  128.              });
  129.     });
  131. // });
  134. </script>

总结

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！