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

Layui框架的试用和了解

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

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>
  18. <!-- left -->
  19. <div style="width:150px;float: left;">
  20. <div class="layui-collapse" lay-accordion>
  21. <div class="layui-colla-item">
  22. <h2 class="layui-colla-title">管理员管理</h2>
  23. <div class="layui-colla-content layui-show">管理员</div>
  24. <div class="layui-colla-content">普通会员</div>
  25. <div class="layui-colla-content">游客</div>
  26. </div>
  27. <div class="layui-colla-item">
  28. <h2 class="layui-colla-title">文章管理</h2>
  29. <div class="layui-colla-content">内容区域</div>
  30. </div>
  31. <div class="layui-colla-item">
  32. <h2 class="layui-colla-title">商品管理</h2>
  33. <div class="layui-colla-content">内容区域</div>
  34. </div>
  35. </div>
  36. </div>
  37. <!-- 中间栏 -->
  38. <div style="float:right; width: 1400px; height: 600px;">
  39. <iframe style="width: 100%; height:100%;" frameborder="0" src="./table.html"></iframe>
  40. </div>
  41. </body>
  42. </html>
  43. <script>
  44. //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
  45. layui.use('element', function(){
  46. var element = layui.element;
  47. //…
  48. });
  49. </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">
  45. </div>
  46. </div>
  47. <div class="layui-form-item">
  48. <label for="" class="layui-form-label">复选框</label>
  49. <div class="layui-form-block">
  50. <input type="checkbox" name="" title="写作" checked>
  51. <input type="checkbox" name="" title="发呆">
  52. <input type="checkbox" name="" title="禁用" disabled lay-skin="primary">
  53. </div>
  54. </div>
  55. <div class="layui-form-item">
  56. <label for="" class="layui-form-label">开关</label>
  57. <div class="layui-input-block">
  58. <input type="checkbox" value="open" lay-filter="test" lay-skin="switch" lay-text="on|off">
  59. </div>
  60. </div>
  61. <div class="layui-form-item">
  62. <label for="" class="layui-form-label">性别</label>
  63. <div class="layui-form-block">
  64. <input type="radio" name="sex" value="0" title="男" checked>
  65. <input type="radio" name="sex" value="1" title="女">
  66. </div>
  67. </div>
  68. <div class="layui-form-item layui-form-text">
  69. <label class="layui-form-label">请填写描述</label>
  70. <div class="layui-input-inline">
  71. <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
  72. </div>
  73. </div>
  74. <div class="layui-form-item">
  75. <div class="layui-input-block">
  76. <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
  77. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  78. </div>
  79. </div>
  80. </div>
  81. <button class="layui-btn layui-btn-danger" onclick="closew()">关闭窗口</button>
  82. </body>
  83. </html>
  84. <script>
  85. layui.use(['form'],function(){
  86. form= layui.form;
  87. $=layui.jquery;
  88. form.on('select(test)',function(data){
  89. // console.log(data.value);
  90. if(data.value==3){
  91. var citys=['不知道','不清楚','不了解'];
  92. var html = "<select>";
  93. $.each(citys,function(i,v){
  94. html+=('<option>'+v+'</option)');
  95. });
  96. html += '</select>';
  97. $('div[name="city"]').html(html);
  98. form.render();
  99. }
  100. });
  101. form.on('switch(test)',function(data){
  102. // console.log(data.elem.checked);
  103. // if(data.elem.checked){
  104. // console.log($(data.elem).val());
  105. // }
  106. layer.confirm('是否开启?',{
  107. btn:['开启','取消']
  108. },function(){
  109. layer.msg('已开启',{icon:1});
  110. },function(){
  111. $(data.elem).prop('checked',false);
  112. form.render();
  113. });
  114. });
  115. });
  116. function closew(){
  117. parent.layer.closeAll();
  118. }
  119. </script>

总结

  • 初次接触Layui,上手难度不大,实现效果不错,但还是需要多多练习。
  • 事件的响应还需要多多学习。
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议