search

博客列表 >Layui框架实战（面板、轮播图、Form表单）

Layui框架实战（面板、轮播图、Form表单）

w™下載一個妳
w™下載一個妳原创
2020年06月06日 18:52:171798浏览

Layui框架实战

1.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
  7.       rel="stylesheet"
  8.       type="text/css"
  9.       href="/php11.edu/test/layui-v2.5.6/layui/css/layui.css"
  10.     />
  11.     <script
  12.       type="text/javascript"
  13.       src="/php11.edu/test/layui-v2.5.6/layui/layui.js"
  14.     ></script>
  15.     <title>Layui后台管理系统</title>
  16.   </head>
  17.   <body>
  18.     <!-- header -->
  19.     <div
  20.       style="
  21.         height: 50px;
  22.         line-height: 50px;
  23.         background: rgb(75, 75, 233);
  24.         padding: 0px 10px;
  25.         color: #fff;
  26.       "
  27.     >
  28.       <div style="color: #fff;">
  29.         <span>Layui后台管理系统</span>
  30.         <div style="float: right;">
  31.           <span><i class="layui-icon layui-icon-username"></i>admin</span>
  32.           <span><a href="" style="color: #fff;">退出</a></span>
  33.         </div>
  34.       </div>
  35.     </div>
  37.     <!-- left menu -->
  38.     <div
  39.       style="
  40.         width: 200px;
  41.         float: left;
  42.         height: 450px;
  43.         justify-content: flex-end;
  44.       "
  45.     >
  46.       <div class="layui-collapse" lay-accordion>
  47.         <div class="layui-colla-item">
  48.           <h2 class="layui-colla-title">系统管理</h2>
  49.           <div class="layui-colla-content">内容区域</div>
  50.         </div>
  51.         <div class="layui-colla-item">
  52.           <h2 class="layui-colla-title">用户管理</h2>
  53.           <div class="layui-colla-content">内容区域</div>
  54.         </div>
  55.         <div class="layui-colla-item">
  56.           <h2 class="layui-colla-title">运营管理</h2>
  57.           <div class="layui-colla-content">内容区域</div>
  58.         </div>
  59.         <div class="layui-colla-item">
  60.           <h2 class="layui-colla-title">项目介绍</h2>
  61.           <div class="layui-colla-content">内容区域</div>
  62.         </div>
  63.         <div class="layui-colla-item">
  64.           <h2 class="layui-colla-title">文章发布</h2>
  65.           <div class="layui-colla-content">内容区域</div>
  66.         </div>
  67.         <div class="layui-colla-item">
  68.           <h2 class="layui-colla-title">会员管理</h2>
  69.           <div class="layui-colla-content">内容区域</div>
  70.         </div>
  71.         <div class="layui-colla-item">
  72.           <h2 class="layui-colla-title">友情链接</h2>
  73.           <div class="layui-colla-content">内容区域</div>
  74.         </div>
  75.       </div>
  76.     </div>
  77.     <!-- 主导区 -->
  78.     <div style="float: right; width: 1000px; height: 450px;">
  79.       <iframe
  80.         style="width: 100%; height: 100%;"
  81.         src="/php11.edu/test/0601/main.html"
  82.         frameborder="none"
  83.       ></iframe>
  84.     </div>
  85.   </body>
  86. </html>
  88. <script>
  89.   //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  90.   layui.use("element", function () {
  91.     var element = layui.element;
  93.     //…
  94.   });
  95. </script>

2.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
  7.       rel="stylesheet"
  8.       href="/php11.edu/test/layui-v2.5.6/layui/css/layui.css"
  9.     />
  10.     <script src="/php11.edu/test/layui-v2.5.6/layui/layui.js"></script>
  11.     <title>Document</title>
  12.   </head>
  13.   <body>
  14.     <div class="layui-carousel" id="test1">
  15.       <div carousel-item>
  16.         <div><img src="/php11.edu/images/1112.png" />条目1</div>
  17.         <div><img src="/php11.edu/images/1113.png" />条目2</div>
  18.         <div><img src="/php11.edu/images/1114.jpg" />条目3</div>
  19.       </div>
  20.     </div>
  21.   </body>
  22. </html>
  23. <script>
  24.   layui.use("carousel", function () {
  25.     var carousel = layui.carousel;
  26.     //建造实例
  27.     carousel.render({
  28.       elem: "#test1",
  29.       width: "100%", //设置容器宽度
  30.       arrow: "always", //始终显示箭头
  31.       //,anim: 'updown' //切换动画方式
  32.     });
  33.   });
  34. </script>

3.Layui框架面板和轮播图演练效果图：

4.Layui框架form表单演练代码：

  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
  7.       rel="stylesheet"
  8.       href="/php11.edu/test/layui-v2.5.6/layui/css/layui.css"
  9.     />
  10.     <script
  11.       type="text/javascript"
  12.       src="/php11.edu/test/layui-v2.5.6/layui/layui.js"
  13.     ></script>
  14.     <title>Form表单练习</title>
  15.   </head>
  16.   <body>
  17.     <form class="layui-form">
  18.          <div style="padding: 20px 140px 20px;font-size: 20px;color: blue;font-size:x-large">Form表单</div>
  19.       <div class="layui-form-item">
  20.         <label class="layui-form-label">昵称</label>
  21.         <div class="layui-input-inline">
  22.           <input
  23.             type="text"
  24.             name=""
  25.             placeholder="请输入"
  26.             autocomplete="off"
  27.             autofocus
  28.             class="layui-input"
  29.           />
  30.         </div>
  31.       </div>
  32.       <div class="layui-form-item">
  33.         <label class="layui-form-label">性别</label>
  34.         <div class="layui-input-block">
  35.           <input type="radio" name="sex" value="0" title="男" />
  36.           <input type="radio" name="sex" value="0" title="女" />
  37.           <input type="radio" name="sex" value="0" title="保密" checked />
  38.         </div>
  39.       </div>
  40.       <div class="layui-form-item">
  41.         <label class="layui-form-label">邮箱</label>
  42.         <div class="layui-input-inline">
  43.           <input
  44.             type="email"
  45.             name="email"
  46.             placeholder="123456@qq.com"
  47.             autocomplete="off"
  48.             class="layui-input"
  49.           />
  50.         </div>
  51.       </div>
  52.       <div class="layui-form-item">
  53.         <label class="layui-form-label">人群</label>
  54.         <div class="layui-input-inline">
  55.           <select name="interest" lay-filter="aihao">
  56.             <option value="0">请选择</option>
  57.             <option value="1">学生</option>
  58.             <option value="2">上班族</option>
  59.             <option value="2">程序员</option>
  60.           </select>
  61.         </div>
  62.       </div>
  63.       <div class="layui-form-item">
  64.         <label class="layui-form-label">籍贯</label>
  65.         <div class="layui-input-inline">
  66.           <select name="interest" lay-filter="aihao">
  67.             <option value="0">请选择</option>
  68.             <option value="1">湖南</option>
  69.             <option value="2">湖北</option>
  70.             <option value="2">河南</option>
  71.             <option value="2">河北</option>
  72.           </select>
  73.         </div>
  74.       </div>
  75.       <div class="layui-form-item">
  76.         <label class="layui-form-label">爱好</label>
  77.         <div class="layui-input-inline">
  78.           <input type="checkbox" name="like[write]" title="旅游" />
  79.           <input type="checkbox" name="like[read]" title="游泳" />
  80.           <input type="checkbox" name="like[read]" title="编程" />
  81.           <input type="checkbox" name="like[read]" title="运动" />
  82.         </div>
  83.       </div>
  84.     </div>
  85.     <div class="layui-form-item layui-form-text ">
  86.       <label class="layui-form-label ">自我评价</label>
  87.       <div class="layui-input-inline ">
  88.         <textarea placeholder="请输入内容" class="layui-textarea" cols="30" rows="6" ></textarea>
  89.       </div>
  90.     </div>
  91.         </div>
  92.       </div>
  93.       <div class="layui-form-item" style="padding: 0px 120px;">
  94.         <div class="layui-input-inline">
  95.           <button class="layui-btn" lay-submit lay-filter="*">提交</button>
  96.           <button type="reset"  class="layui-btn layui-btn-danger">重置</button>
  97.         </div>
  98.       </div>
  99.     </form>
  100.   </body>
  101. </html>
  102. <script src="layui.js"></script>
  103. <script>
  104.   layui.use("form", function () {
  105.     var form = layui.form;
  106.   });
  107. </script>

5.Layui框架form表单演练效果图：

学习总结：

layui框架用起来非常方便在元素中添加classs属性按照手册指导使用即可，其中有JS样式和CSS样式，只要按照所规定的方法引用就能实现不一样的效果，layui文档中还有介绍很多相关的模板示例，很详细，只要多加练习菜鸟也能很快掌握，此节课老师讲的也非常清晰。

上一条：layui：如何让select中的option属性默认并保留在第一位下一条：JavaScript数组与对象的常用方法及 json 的序列化
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多