博客列表 >实战:第1章 layui基础

实战:第1章 layui基础

王小飞
王小飞原创
2020年06月02日 16:10:16904浏览

layui基础

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>layui</title>
  6. <link rel="stylesheet" href="layui/css/layui.css" />
  7. <script src="layui/layui.js"></script>
  8. <style>
  9. header {
  10. display: flex;
  11. justify-content: space-between;
  12. height: 50px;
  13. line-height: 50px;
  14. box-sizing: border-box;
  15. padding: 0 10px;
  16. background-color: black;
  17. color: white;
  18. font-size: 18px;
  19. }
  20. main {
  21. display: flex;
  22. margin-top: 20px;
  23. }
  24. .layui-form-item .layui-input-inline {
  25. width: 520px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <!--顶部导航-->
  31. <header>
  32. <span>layUI后台管理系统</span>
  33. <div>
  34. <span><i class="layui-icon layui-icon-username"></i></span>
  35. <span>xiaofei</span>
  36. <a href="" style="color: white;">退出</a>
  37. </div>
  38. </header>
  39. <div
  40. class="layui-collapse"
  41. lay-accordion
  42. style="width: 200px; float: left;"
  43. >
  44. <div class="layui-colla-item">
  45. <h2 class="layui-colla-title">左侧菜单1</h2>
  46. <div class="layui-colla-content layui-show">内容区域</div>
  47. </div>
  48. <div class="layui-colla-item">
  49. <h2 class="layui-colla-title">左侧菜单2</h2>
  50. <div class="layui-colla-content">内容区域</div>
  51. </div>
  52. <div class="layui-colla-item">
  53. <h2 class="layui-colla-title">左侧菜单3</h2>
  54. <div class="layui-colla-content">内容区域</div>
  55. </div>
  56. </div>
  57. <div style="float: left; width: 1200px; height: 1500px;">
  58. <iframe
  59. style="width: 100%; height: 100%;"
  60. src="cont.html"
  61. frameborder="0"
  62. ></iframe>
  63. </div>
  64. </body>
  65. </html>
  66. <script>
  67. //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
  68. // left-menu 折叠
  69. layui.use("element", function () {
  70. var element = layui.element;
  71. });
  72. //Demo
  73. layui.use("form", function () {
  74. var form = layui.form;
  75. //监听提交
  76. form.on("submit(formDemo)", function (data) {
  77. layer.msg(JSON.stringify(data.field));
  78. return false;
  79. });
  80. });
  81. </script>

内容iframe代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>layui</title>
  6. <link rel="stylesheet" href="layui/css/layui.css" />
  7. <script src="layui/layui.js"></script>
  8. </head>
  9. <booy>
  10. <main>
  11. <!--left-menu-->
  12. <!--lay-accordion 来开启手风琴,进行折叠操作时,始终只会展现当前的面板。-->
  13. <!--layui-show 展开-->
  14. <form class="layui-form" action="">
  15. <div class="layui-form-item">
  16. <label class="layui-form-label">输入框</label>
  17. <div class="layui-input-block">
  18. <input
  19. type="text"
  20. name="title"
  21. required
  22. lay-verify="required"
  23. placeholder="请输入标题"
  24. autocomplete="off"
  25. class="layui-input"
  26. />
  27. </div>
  28. </div>
  29. <div class="layui-form-item">
  30. <label class="layui-form-label">密码框</label>
  31. <div class="layui-input-inline">
  32. <input
  33. type="password"
  34. name="password"
  35. required
  36. lay-verify="required"
  37. placeholder="请输入密码"
  38. autocomplete="off"
  39. class="layui-input"
  40. />
  41. </div>
  42. <div class="layui-form-mid layui-word-aux">辅助文字</div>
  43. </div>
  44. <div class="layui-form-item">
  45. <label class="layui-form-label">选择框</label>
  46. <div class="layui-input-block">
  47. <select name="city" lay-verify="required">
  48. <option value=""></option>
  49. <option value="0">北京</option>
  50. <option value="1">上海</option>
  51. <option value="2">广州</option>
  52. <option value="3">深圳</option>
  53. <option value="4">杭州</option>
  54. </select>
  55. </div>
  56. </div>
  57. <div class="layui-form-item">
  58. <label class="layui-form-label">复选框</label>
  59. <div class="layui-input-block">
  60. <input
  61. type="checkbox"
  62. name="like[write]"
  63. title="写作"
  64. lay-skin="primary"
  65. />
  66. <input
  67. type="checkbox"
  68. name="like[read]"
  69. title="阅读"
  70. checked
  71. lay-skin="primary"
  72. />
  73. <input
  74. type="checkbox"
  75. name="like[dai]"
  76. title="发呆"
  77. lay-skin="primary"
  78. />
  79. </div>
  80. </div>
  81. <div class="layui-form-item">
  82. <label class="layui-form-label">开关</label>
  83. <div class="layui-input-block">
  84. <input
  85. type="checkbox"
  86. name="yyy"
  87. lay-skin="switch"
  88. lay-text="ON|OFF"
  89. checked
  90. />
  91. </div>
  92. </div>
  93. <div class="layui-form-item">
  94. <label class="layui-form-label">单选框</label>
  95. <div class="layui-input-block">
  96. <input type="radio" name="sex" value="男" title="男" />
  97. <input type="radio" name="sex" value="女" title="女" checked />
  98. </div>
  99. </div>
  100. <div class="layui-form-item layui-form-text">
  101. <label class="layui-form-label">文本域</label>
  102. <div class="layui-input-block">
  103. <textarea
  104. name="desc"
  105. placeholder="请输入内容"
  106. class="layui-textarea"
  107. ></textarea>
  108. </div>
  109. </div>
  110. <div class="layui-form-item">
  111. <div class="layui-input-block">
  112. <button class="layui-btn" lay-submit lay-filter="formDemo">
  113. 立即提交
  114. </button>
  115. <button type="reset" class="layui-btn layui-btn-primary">
  116. 重置
  117. </button>
  118. </div>
  119. </div>
  120. </form>
  121. </main>
  122. </booy>
  123. </html>
  124. <script>
  125. //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
  126. // left-menu 折叠
  127. layui.use("element", function () {
  128. var element = layui.element;
  129. });
  130. //Demo
  131. layui.use("form", function () {
  132. var form = layui.form;
  133. //监听提交
  134. form.on("submit(formDemo)", function (data) {
  135. layer.msg(JSON.stringify(data.field));
  136. return false;
  137. });
  138. });
  139. </script>

效果:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议