简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Layui常用组件
Blogger Information
Blog 43
fans 1
comment 0
visits 33807
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
1113 people have browsed it

layui常用组件输出效果在线预览
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" type="text/css" href="layui/css/layui.css">
  7.     <script type="text/javascript" src="layui/layui.js"></script>
  8.     <style type="text/css">
  9.         .item{
  10.             padding:20px;
  11.         }
  12.     </style>
  13.     <title>Document</title>
  14.   </head>
  15.   <body style="background:#f1f1f1">
  17.       <!-- 轮播图 -->
  18. <div class="layui-carousel" id="test1">
  19.   <div carousel-item>
  20.     <div style="background:#ff0000">图片1</div>
  21.     <div style="background:#fe2152">图片2</div>
  22.     <div style="background:#ff3326">图片3</div>
  23.     <div style="background:#ff7708">图片4</div>
  24.     <div style="background:#ff1251">图片5</div>
  25.   </div>
  26. </div>
  28.       <!-- 按钮 -->
  29.       <div style="padding:50px;">
  30.           <button>原生按钮</button>
  31.       <button class="layui-btn">默认按钮</button>
  32.       <button class="layui-btn layui-btn-danger layui-btn-lg">警告按钮</button>
  33.       <!-- 弹出层 -->
  34.       <button class="layui-btn layui-btn-normal" onclick="popup()">默认按钮</button> 
  35.       </div>
  38. <!-- 日期与时间 -->
  39.       <div class="layui-form">
  40.           <div class="layui-form-item">
  41.               <label class="layui-form-label">开始时间</label>
  42.               <div class="layui-input-inline">
  43.                   <input type="text" class="layui-input" id="mydate">
  44.               </div>
  45.           </div>
  46.       </div>
  48.       <!-- 文件上传 -->
  49.       <div class="layui-form">
  50.           <div class="layui-form-item">
  51.               <label class="layui-form-label">文件上传</label>
  52.               <div class="layui-input-inline">
  53.                   <input type="file" >
  54.               </div>
  55.           </div>
  56.       </div>
  57.       <!-- 布局 -->
  58.       <div class="layui-row">
  59.           <div class="layui-col-sm4 item">
  60.            <div class="layui-card">
  61.                <div class="layui-card-header">卡片面板1</div>
  62.                <div class="layui-card-body"> 
  63.     卡片式面板面板通常用于非白色背景色的主体内<br>
  64.     从而映衬出边框投影 
  65.            </div>
  66.           </div>
  67.           </div>
  68.       <div class="layui-col-sm4 item">
  69.       <div class="layui-card">
  70.   <div class="layui-card-header">卡片面板2</div>
  71.   <div class="layui-card-body">
  72.     卡片式面板面板通常用于非白色背景色的主体内<br>
  73.     从而映衬出边框投影
  74.   </div>
  75. </div>
  76. </div>
  77.   <div class="layui-col-sm4 item">
  78.   <div class="layui-card">
  79.   <div class="layui-card-header">卡片面板3</div>
  80.   <div class="layui-card-body">
  81.     卡片式面板面板通常用于非白色背景色的主体内<br>
  82.     从而映衬出边框投影
  83.   </div>
  84. </div>
  85. </div>
  86. </div>
  88. <!-- 进度条 -->
  90.       <div style="margin:40px;">进度条
  91.           <div class="layui-progress" lay-showPercent="yes">
  92.           <div class="layui-progress-bar layui-bg-orange" lay-percent="20%"></div>
  93.       </div>
  94.       </div>
  95.           <div style="margin:40px;">进度条
  96.           <div class="layui-progress" lay-showPercent="yes">
  97.           <div class="layui-progress-bar layui-bg-blue" lay-percent="2/3"></div>
  98.       </div>
  99.       </div>
  100.       <div style="margin:40px;">进度条
  101.           <div class="layui-progress" lay-showPercent="yes">
  102.           <div class="layui-progress-bar layui-bg-red" lay-percent="60%"></div>
  103.       </div>
  104.       </div>
  106. <!-- 表格 -->
  107. <div>
  108.       <table class="layui-table">表格
  109.   <colgroup>
  110.     <col width="150">
  111.     <col width="200">
  112.     <col>
  113.   </colgroup>
  114.   <thead>
  115.     <tr>
  116.       <th>昵称</th>
  117.       <th>加入时间</th>
  118.       <th>签名</th>
  119.     </tr> 
  120.   </thead>
  121.   <tbody>
  122.     <tr>
  123.       <td>木子</td>
  124.       <td>2016-11-29</td>
  125.       <td>人生就像是一场修行</td>
  126.     </tr>
  127.     <tr>
  128.       <td>闲心</td>
  129.       <td>2016-11-28</td>
  130.       <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
  131.     </tr>
  132.     <tr>
  133.       <td>西风</td>
  134.       <td>2020-06-02</td>
  135.       <td>人们总是生活在无尽的悔恨中</td>
  136.     </tr>
  137.   </tbody>
  138. </table>
  139. </div>
  140.   </body>
  141. </html>
  142. <script>
  143. //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
  144. layui.use(['element','layer','laydate','carousel'], function(){
  145.   var element = layui.element;
  146.   layer = layui.layer;
  147.   laydate = layui.laydate;
  148.   laydate.render({
  149.       elem:'#mydate'
  150.   });
  152.   var carousel = layui.carousel;
  153.   //建造实例
  154.   carousel.render({
  155.     elem: '#test1'
  156.     ,width: '100%' //设置容器宽度
  157.     ,arrow: 'always' //始终显示箭头
  158.     //,anim: 'updown' //切换动画方式
  159.   });
  160. });
  162. function popup(){
  163.     // layer.alert('我是layer alert',{icon:1});
  164.     // layer.msg('我是layer alert',{icon:1});
  165.     layer.open({
  166.   type: 2,
  167.   title: 'layer mobile页',
  168.   shadeClose: true,
  169.   shade: 0.8,
  170.   area: ['980px', '90%'],
  171.   content: 'https://www.php.cn/' //iframe的url
  172. }); 
  173. }
  174. </script>

输出效果：

总结：
Layui真的是太好用啦，怕用久了，手也懒了，脑子也懒了，把基本代码都给忘了。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：觉得layui好用, 那是你用过的ui还是太少了
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！