Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Layui框架的试用和了解
Blogger Information
Blog 28
fans 0
comment 0
visits 26003
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框架的试用和了解
，多思曩惜，
Original
1203 people have browsed it

layui框架的试用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="./layui/css/layui.css"> 
  7.     <script type="text/javascript" src="./layui/layui.js"></script>
  8.     <title>www</title>
  9. </head>
  10. <body>
  11.     <div style="height: 50px; line-height: 50px;color:#fff; background-color: #000; padding: 0 20px;">
  12.         <span style="color: #fff;">后台管理</span>
  13.         <div style="float: right; color: #fff;">
  14.             <span><i class="layui-icon layui-icon-username"></i>admin</span>
  15.             <span><a href="" style="color: #fff;">退出</a></span>
  16.         </div>
  17.     </div>
  19.     <!-- left -->
  20.     <div style="width:150px;float: left;">
  21.         <div class="layui-collapse" lay-accordion>
  22.             <div class="layui-colla-item">
  23.             <h2 class="layui-colla-title">管理员管理</h2>
  24.             <div class="layui-colla-content layui-show">管理员</div>
  25.             <div class="layui-colla-content">普通会员</div>
  26.             <div class="layui-colla-content">游客</div>
  27.             </div>
  28.             <div class="layui-colla-item">
  29.             <h2 class="layui-colla-title">文章管理</h2>
  30.             <div class="layui-colla-content">内容区域</div>
  31.             </div>
  32.             <div class="layui-colla-item">
  33.             <h2 class="layui-colla-title">商品管理</h2>
  34.             <div class="layui-colla-content">内容区域</div>
  35.             </div>
  36.         </div>
  37.     </div>
  38.     <!-- 中间栏 -->
  39.     <div style="float:right; width: 1400px; height: 600px;">
  40.         <iframe style="width: 100%; height:100%;"  frameborder="0" src="./table.html"></iframe>
  41.     </div>
  43. </body>
  44. </html>
  45. <script>
  46.     //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  47.     layui.use('element', function(){
  48.       var element = layui.element;
  49.       //…
  50.     });
  51. </script>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="./layui/css/layui.css"> 
  7.     <script type="text/javascript" src="./layui/layui.js"></script>
  8.     <title>Document</title>
  9. </head>
  10. <body style="background-color: rgb(228, 227, 227);">
  11.     <div style="padding: 20px;">
  12.         <div class="layui-progress">
  13.             <div class="layui-progress-bar  layui-bg-red" lay-percent="50%">
  14.             </div>
  15.         </div>
  16.     </div>
  17.     <div class="layui-row">
  18.         <div class="layui-col-sm4">
  19.             <div class="layui-card">
  20.                 <div class="layui-card-header">
  21.                     卡片
  22.                 </div>
  23.                 <div class="layui-card-body">
  24.                     卡片是变法全文请问耦合器of好气哦和哈佛年会是打发 
  25.                     器of好气哦和哈佛年会是打发 
  26.                 </div>
  27.             </div>
  28.         </div>
  29.         <div class="layui-col-sm4">
  30.             <div class="layui-card">
  31.                 <div class="layui-card-header">
  32.                     卡片
  33.                 </div>
  34.                 <div class="layui-card-body">
  35.                     卡片是变法全文请问耦合器of好气哦和哈佛年会是打发 
  36.                     器of好气哦和哈佛年会是打发 
  37.                 </div>
  38.             </div>
  39.         </div>
  40.         <div class="layui-col-sm4">
  41.             <div class="layui-card">
  42.                 <div class="layui-card-header">
  43.                     卡片
  44.                 </div>
  45.                 <div class="layui-card-body">
  46.                     卡片是变法全文请问耦合器of好气哦和哈佛年会是打发 
  47.                     器of好气哦和哈佛年会是打发 
  48.                 </div>
  49.             </div>
  50.         </div>
  51.     </div>
  52.     <table class="layui-table" lay-skin="" lay-size="sm">
  53.         <thead>
  54.             <tr>
  55.                 <th>名称</th>
  56.                 <th>时间</th>
  57.                 <th>签名</th>
  58.             </tr>
  59.         </thead>
  60.         <tbody>
  61.             <tr>
  62.                 <td>闲心</td>
  63.                 <td>2016-11-29</td>
  64.                 <td>人生就像是一场修行</td>      
  65.             </tr>
  66.             <tr>
  67.                 <td>闲心2</td>
  68.                 <td>2016-11-29</td>
  69.                 <td>人生就像是一场修行2</td>      
  70.             </tr>
  71.             <tr>
  72.                 <td>闲心3</td>
  73.                 <td>2016-11-29</td>
  74.                 <td>人生就像是一场修行3</td>      
  75.             </tr>
  76.         </tbody>
  77.     </table>
  78.     <button class="layui-btn" onclick="popo()">提交</button>
  79.     <div class="layui-form">
  80.         <div class="layui-form-item">
  81.             <label for="" class="layui-form-label">开始时间</label>
  82.             <div class="layui-input-inline">
  83.                 <input type="text" class="layui-input" id="mydate">
  84.             </div>
  85.         </div>
  86.         <div class="layui-form-item">
  87.             <label for="" class="layui-form-label">开始时间</label>
  88.             <div class="layui-input-inline">
  89.                 <input type="file" class="layui-icon">
  90.             </div>
  91.         </div>
  92.     </div>
  93.     <div class="layui-carousel" id="test1">
  94.         <div carousel-item>
  95.             <div>条目1</div>
  96.             <div>条目2</div>
  97.             <div>条目3</div>
  98.             <div>条目4</div>
  99.             <div>条目5</div>
  100.         </div>
  101.     </div>
  102. </body>
  103. </html>
  104. <script>
  105.     layui.use(['element','layer','laydate','carousel'],function(){
  106.         var element=layui.element;
  107.         layer=layui.layer;
  108.         laydate = layui.laydate;
  109.         laydate.render({
  110.             elem:'#mydate'
  111.         });
  112.         var carousel = layui.carousel;
  113.         carousel.render({
  114.             elem:'#test1',width:'100%',arrow:'always'
  115.         });
  116.     });
  117.     function popo(){
  118.         // layer.alert("测试",{icon:1});
  119.         layer.msg("测试",{icon:2});
  120.         layer.open({
  121.         type: 2,
  122.         title: 'layer mobile页',
  123.         shadeClose: true,
  124.         shade: 0.8,
  125.         area: ['380px', '90%'],
  126.         content: './mian.html' //iframe的url
  127.         });
  128.     }
  129. </script>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="./layui/css/layui.css">
  7.     <script src="./layui/layui.js"></script>
  8.     <title>Document</title>
  9.     <style>
  10.         .layui-form-item .layui-input-inline{
  11.             width: 300px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="layui-form">
  17.         <div class="layui-form-item">
  18.             <label for="" class="layui-form-label">用户名</label>
  19.             <div class="layui-input-block">
  20.                 <input type="text" name="" class="layui-input" placeholder="请输入">
  21.             </div>
  22.         </div>
  23.         <div class="layui-form-item">
  24.             <label for="" class="layui-form-label">密码</label>
  25.             <div class="layui-input-inline">
  26.                 <input type="password" name="" class="layui-input" placeholder="密码">
  27.             </div>
  28.             <div class="layui-form-mid layui-word-aux">
  29.                 辅助文字
  30.             </div>
  31.         </div>
  32.         <div class="layui-form-item">
  33.             <label class="layui-form-label">选择框</label>
  34.             <div class="layui-input-inline">
  35.                 <select name="city" lay-filter="test" lay-skin="select">
  36.                   <option value="">请选择</option>
  37.                   <option value="0">北京</option>
  38.                   <option value="1" disabled>上海</option>
  39.                   <option value="2">广州</option>
  40.                   <option value="3">深圳</option>
  41.                   <option value="4">杭州</option>
  42.                 </select>
  43.             </div>
  44.             <div name="city" class="layui-input-inline">
  46.             </div> 
  47.         </div>
  48.         <div class="layui-form-item">
  49.             <label for="" class="layui-form-label">复选框</label>
  50.             <div class="layui-form-block">
  51.                 <input type="checkbox" name="" title="写作" checked>
  52.                 <input type="checkbox" name="" title="发呆">
  53.                 <input type="checkbox" name="" title="禁用" disabled lay-skin="primary">
  54.             </div>
  55.         </div>
  56.         <div class="layui-form-item">
  57.             <label for="" class="layui-form-label">开关</label>
  58.             <div class="layui-input-block">
  59.                 <input type="checkbox" value="open" lay-filter="test" lay-skin="switch" lay-text="on|off">
  60.             </div>
  61.         </div>
  62.         <div class="layui-form-item">
  63.             <label for="" class="layui-form-label">性别</label>
  64.             <div class="layui-form-block">
  65.                 <input type="radio" name="sex" value="0" title="男" checked>
  66.                 <input type="radio" name="sex" value="1" title="女">
  67.             </div>
  68.         </div>
  69.         <div class="layui-form-item layui-form-text">
  70.             <label class="layui-form-label">请填写描述</label>
  71.             <div class="layui-input-inline">
  72.               <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
  73.             </div>
  74.         </div>
  75.         <div class="layui-form-item">
  76.             <div class="layui-input-block">
  77.               <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
  78.               <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  79.             </div>
  80.         </div>
  81.     </div>
  82.     <button  class="layui-btn layui-btn-danger" onclick="closew()">关闭窗口</button>
  83. </body>
  84. </html>
  85. <script>
  86.     layui.use(['form'],function(){
  87.        form= layui.form;
  88.         $=layui.jquery;
  89.         form.on('select(test)',function(data){
  90.             // console.log(data.value);
  91.             if(data.value==3){
  92.                 var citys=['不知道','不清楚','不了解'];
  93.                 var html = "<select>";
  94.                  $.each(citys,function(i,v){
  95.                     html+=('<option>'+v+'</option)');
  96.                  });
  97.                  html += '</select>';
  98.                  $('div[name="city"]').html(html);
  99.                  form.render();
  100.             }
  101.         });
  103.         form.on('switch(test)',function(data){
  104.             // console.log(data.elem.checked);
  105.             // if(data.elem.checked){
  106.             //     console.log($(data.elem).val());
  107.             // }
  108.             layer.confirm('是否开启？',{
  109.                 btn:['开启','取消']
  110.             },function(){
  111.                 layer.msg('已开启',{icon:1});
  112.             },function(){
  113.                 $(data.elem).prop('checked',false);
  114.                 form.render();
  115.             });
  116.         });
  117.     });
  118.     function closew(){
  119.             parent.layer.closeAll();
  120.     }
  121. </script>

总结

  • 初次接触Layui，上手难度不大，实现效果不错，但还是需要多多练习。
  • 事件的响应还需要多多学习。
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