search

博客列表 >Layui框架的试用和了解

Layui框架的试用和了解

，多思曩惜，
，多思曩惜，原创
2020年06月08日 16:50:051201浏览

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，上手难度不大，实现效果不错，但还是需要多多练习。
  • 事件的响应还需要多多学习。
上一条：linux rabbitmq消息队列使用案例。下一条：PHP随手记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多