4 년 전 · 6849f1b922
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
 
				+/.idea
			
 
				+/.user.ini
			
--- a/about/disclaimer.html
+++ b/about/disclaimer.html
@@ -0,0 +1,199 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui 开源界面框架免责声明</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-about" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          关于
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html">
			
 
				+                <cite>免责声明</cite>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html">
			
 
				+                <cite>友情链接</cite>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="notice.html" tppabs="http://www.layui.com/about/notice.html">
			
 
				+                <cite>重要公告</cite> 
			
 
				+                <span class="layui-badge-dot"></span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content layui-text">
			
 
				+    
			
 
				+    <div class="layui-row">
			
 
				+      <h1 class="site-h1 layui-col-md10 layui-col-xs12" style="font-size: 26px;">layui 开源界面框架免责声明</h1>
			
 
				+    
			
 
				+      <blockquote class="layui-elem-quote layui-col-md10 layui-col-xs12">
			
 
				+        任何用户在使用由 layui 技术开发团队（以下简称「本团队」）研发的系列开源界面框架（以下简称「layui 开源界面框架」）前，请您仔细阅读并透彻理解本声明。您可以选择不使用 layui 开源界面框架，若您一旦使用 layui 开源界面框架，您的使用行为即被视为对本声明全部内容的认可和接受。
			
 
				+      </blockquote>
			
 
				+      
			
 
				+      
			
 
				+      <ul class="layui-col-md10 layui-col-xs12">
			
 
				+        <li>1. layui 开源界面框架是一款开源免费的 Web UI 纯静态框架 ，主要用于更高效地开发网页界面。且 layui 开源界面框架并不具备「互联网接入、网络数据存储、通讯传输以及窃取用户隐私」中的任何一项与用户数据等信息相关的动态功能，layui 开源界面框架仅是 UI 组件或素材类的本地资源。</li>
			
 
				+        <li>2. layui 开源界面框架仅属于 Web 前端的 UI 组件库，并不涉及任何后台程序代码；其尊重并保护所有用户的个人隐私权，不窃取任何用户计算机中的信息。更不具备用户数据存储等网络传输功能。</li>
			
 
				+        <li>3. 您承诺秉着合法、合理的原则使用 layui 开源界面框架，不利用 layui 开源界面框架进行任何违法、侵害他人合法利益等恶意的行为，亦不将 layui 开源界面框架运用于任何违反我国法律法规的 Web 平台。</li>
			
 
				+        <li>4. 任何单位或个人因下载使用 layui 开源界面框架而产生的任何意外、疏忽、合约毁坏、诽谤、版权或知识产权侵犯及其造成的损失 (包括但不限于直接、间接、附带或衍生的损失等)，本团队不承担任何法律责任。</li>
			
 
				+        <li>5. 用户明确并同意本声明条款列举的全部内容，对使用 layui 开源界面框架可能存在的风险和相关后果将完全由用户自行承担，本团队不承担任何法律责任。</li>
			
 
				+        <li>6. 任何单位或个人在阅读本免责声明后，应在《<a href="https://gitee.com/sentsin/layui/blob/master/LICENSE" target="_blank" rel="nofollow">MIT 开源许可证</a>》所允许的范围内进行合法的发布、传播和使用 layui  开源界面框架等行为，若违反本免责声明条款或违反法律法规所造成的法律责任(包括但不限于民事赔偿和刑事责任），由违约者自行承担。</li>
			
 
				+        <li>7. 本团队对 layui 开源界面框架拥有知识产权（包括但不限于商标权、专利权、著作权、商业秘密等），上述产品均受到相关法律法规的保护。</li>
			
 
				+        <li>8. 任何单位或个人不得在未经本团队书面授权的情况下对 layui 开源界面框架本身申请相关的知识产权。</li>
			
 
				+        <li>9. 如果本声明的任何部分被认为无效或不可执行，则该部分将被解释为反映本团队的初衷，其余部分仍具有完全效力。不可执行的部分声明，并不构成我们放弃执行该声明的权利。</li>
			
 
				+        <li>10. 本团队有权随时对本声明条款及附件内容进行单方面的变更，并以消息推送、网页公告等方式予以公布，公布后立即自动生效，无需另行单独通知；若您在本声明内容公告变更后继续使用的，表示您已充分阅读、理解并接受修改后的声明内容。</li>
			
 
				+      </ul>
			
 
				+      
			
 
				+    <style>
			
 
				+    .layui-text ul li{padding-bottom: 10px;}
			
 
				+    </style>
			
 
				+      
			
 
				+      
			
 
				+      
			
 
				+      
			
 
				+      
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-btn-container" style="margin-top: 0; margin-bottom: 10px;">
			
 
				+      <a href="../index.html" tppabs="http://www.layui.com/" class="layui-btn"><i class="layui-icon layui-icon-left" style="font-size: 14px;"></i> 返回首页</a>
			
 
				+    </div>
			
 
				+    
			
 
				+    <hr class="layui-col-md9 layui-col-xs12">
			
 
				+    
			
 
				+  </div>
			
 
				+  
			
 
				+</div>
			
 
				+
			
 
				+<div class="layui-footer footer footer-about">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'about'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/about/notice.html
+++ b/about/notice.html
@@ -0,0 +1,195 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui 重要公告</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-about" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          关于
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html">
			
 
				+                <cite>免责声明</cite>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html">
			
 
				+                <cite>友情链接</cite>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="notice.html" tppabs="http://www.layui.com/about/notice.html">
			
 
				+                <cite>重要公告</cite> 
			
 
				+                <span class="layui-badge-dot"></span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content layui-text">
			
 
				+    
			
 
				+    <div class="layui-row">
			
 
				+      <h1 class="site-h1" style="font-size: 26px;">layui 重要公告</h1>
			
 
				+      
			
 
				+      <p>
			
 
				+        所有对 layui 为之热爱、鞭策、奉献，和支持过的开发者：
			
 
				+        <br>请接受我用意念和字节传达的深深歉意。这是一个无力、无奈，甚至无助的决定：
			
 
				+      </p>
			
 
				+    
			
 
				+      <blockquote class="layui-elem-quote layui-quote-nm">
			
 
				+        <em style="font-style: normal;">layui 官网将于 <strong>2021年10月13日</strong> 进行下线。</em>
			
 
				+      </blockquote>
			
 
				+      
			
 
				+      <p>届时，包括新版下载、文档和示例在内的所有框架日常维护工作，将全部迁移到 Github 和 Gitee。
			
 
				+      <br>此后，layui 仍会在代码托管平台所活跃，且 2.7 正式版也将在其间首发。而 layui 官网将不复存在。<br>这不是终结，只是重归到开源的纯粹中来。
			
 
				+      </p>
			
 
				+      
			
 
				+      <p>再者，对于 layuiAdmin 和 layim 的用户，将会迁移到新站进行保留，以便老用户还能下载使用，且此二者不再面向新用户。</p>
			
 
				+      
			
 
				+      <p>过去五年，layui 有幸被应用在不计其数的 Web 平台，在前端工程化迅速席来的浪潮中，我们仍然感受到一丝来自于 jQuery 的余晖，这是一种带有热量的冰冷（反之亦可）。使命已达，便纵有万般遗憾，更与何人说？！</p>
			
 
				+      
			
 
				+      <p>最后，请大家怀揣对 Web 前端技术的热忱，去拥抱 Vue.js、拥抱 Element UI、拥抱更好的新时代，
			
 
				+      <br>以及，所有那些值得去追求的美好事物。</p>
			
 
				+      
			
 
				+      <p>—— 贤心</p>
			
 
				+      
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-btn-container" style="margin-top: 50px; margin-bottom: 10px;">
			
 
				+      <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow" class="layui-btn">我有话说</a>
			
 
				+    </div>
			
 
				+    
			
 
				+    <hr class="layui-col-md9 layui-col-xs12">
			
 
				+    
			
 
				+  </div>
			
 
				+  
			
 
				+</div>
			
 
				+
			
 
				+<div class="layui-footer footer footer-about">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'about'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/about/relatedlinks.html
+++ b/about/relatedlinks.html
--- a/alone.html
+++ b/alone.html
@@ -0,0 +1,139 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui 独立组件</title>
			
 
				+  <meta name="keywords" content="layui,ui,ui框架,前端框架,JS组件">
			
 
				+  <meta name="description" content="layui 是一套开源的 Web UI 解决方案，其内部采用的是自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。">
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="../res.layui.com/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="../res.layui.com/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body class="site-home" id="LAY_home">
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-alone" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="../res.layui.com/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<div class="layui-container" style="min-height: 800px;">
			
 
				+  <blockquote class="layui-elem-quote layui-text" style="margin: 30px 0;">
			
 
				+    尽管 layui 中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从 layui 中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。
			
 
				+  </blockquote>
			
 
				+  
			
 
				+  <fieldset class="layui-elem-field layui-field-title">
			
 
				+    <legend style="margin-bottom: 20px; text-align: center;">layui 独立组件</legend>
			
 
				+    <div class="layui-field-box">
			
 
				+      <ul class="layui-row layui-col-space1">
			
 
				+        <li class="layui-col-sm6">
			
 
				+          <div class="alone"><a href="layer/index.html" tppabs="http://www.layui.com/layer/?alone" target="_blank">layer<cite>通用型弹出层组件</cite></a></div>
			
 
				+        </li>
			
 
				+        <li class="layui-col-sm6">
			
 
				+          <div class="alone"><a href="laydate/index.html" tppabs="http://www.layui.com/laydate/?alone" target="_blank">layDate<cite>日期与时间组件</cite></a></div>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+      <p style="padding: 50px 15px 30px; text-align: center; color: #999;">请注意：如果你不想使用 layui，而只是要单独使用上述组件，你可以前往组件各自的主页进行下载</p>
			
 
				+    </div>
			
 
				+  </fieldset>
			
 
				+</div>
			
 
				+
			
 
				+<div class="layui-footer footer footer-alone">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="../res.layui.com/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'alone'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="../res.layui.com/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '../res.layui.com/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/admin.html
+++ b/demo/admin.html
@@ -0,0 +1,353 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui 管理界面大框架布局 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<iframe src="layout-admin.html-from=demo.htm" tppabs="http://www.layui.com/demo/layout-admin.html?from=demo" frameborder="0" id="demoAdmin" style="width: 100%; height: 300px; border-radius: 2px;"></iframe>     
			
 
				+               
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/layout.html#admin" tppabs="http://www.layui.com/doc/element/layout.html#admin" target="_blank">布局文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+</script>
			
 
				+</div>
			
 
				+<script>
			
 
				+layui.use('layer', function(){
			
 
				+  var $ = layui.$
			
 
				+  ,setIframe = function(){
			
 
				+    var height = $(window).height() - 200;
			
 
				+    $('#demoAdmin').height(height);
			
 
				+  };
			
 
				+  
			
 
				+  setIframe();
			
 
				+  $(window).on('resize', setIframe);
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/anim.html
+++ b/demo/anim.html
@@ -0,0 +1,438 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@动画 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+<style>
			
 
				+.site-doc-icon li{width: 25%;}
			
 
				+.site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
			
 
				+/* 低于 1200 像素时 */
			
 
				+@media screen and (max-width: 1200px) {
			
 
				+  .site-doc-icon li{width: 50%;}
			
 
				+}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>动画过程演示</legend>
			
 
				+</fieldset>
			
 
				+<div style="max-width: 1140px;"> 
			
 
				+  <ul class="layui-border-box site-doc-icon site-doc-anim">
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-down">顶部往下滑入</div>
			
 
				+      <div class="code">layui-anim-down</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-downbit">微微往下滑入</div>
			
 
				+      <div class="code">layui-anim-downbit</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-up">底部往上滑入</div>
			
 
				+      <div class="code">layui-anim-up</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
			
 
				+      <div class="code">layui-anim-upbit</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
			
 
				+      <div class="code">layui-anim-scale</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
			
 
				+      <div class="code">layui-anim-scaleSpring</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-scalesmall">平滑放小</div>
			
 
				+      <div class="code">layui-anim-scalesmall</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-scalesmall-spring">弹簧式放小</div>
			
 
				+      <div class="code">layui-anim-scalesmall-spring</div>
			
 
				+    </li>
			
 
				+    
			
 
				+    
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
			
 
				+      <div class="code">layui-anim-fadein</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
			
 
				+      <div class="code">layui-anim-fadeout</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
			
 
				+      <div class="code">layui-anim-rotate</div>
			
 
				+    </li>
			
 
				+    <li>
			
 
				+      <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
			
 
				+      <div class="code">追加：layui-anim-loop</div>
			
 
				+    </li>
			
 
				+  </ul>
			
 
				+</div>
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html" target="_blank">动画文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+</script>
			
 
				+</div>
			
 
				+<script>
			
 
				+layui.use('jquery', function(){
			
 
				+  var $ = layui.$;
			
 
				+  
			
 
				+  //演示动画
			
 
				+  $('.site-doc-icon .layui-anim').on('click', function(){
			
 
				+    var othis = $(this), anim = othis.data('anim');
			
 
				+ 
			
 
				+    //停止循环
			
 
				+    if(othis.hasClass('layui-anim-loop')){
			
 
				+      return othis.removeClass(anim);
			
 
				+    }
			
 
				+    
			
 
				+    othis.removeClass(anim);
			
 
				+    
			
 
				+    setTimeout(function(){
			
 
				+      othis.addClass(anim);
			
 
				+    });
			
 
				+    //恢复渐隐
			
 
				+    if(anim === 'layui-anim-fadeout'){
			
 
				+      setTimeout(function(){
			
 
				+        othis.removeClass(anim);
			
 
				+      }, 1300);
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/auxiliar.html
+++ b/demo/auxiliar.html
@@ -0,0 +1,408 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@辅助性元素 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>引用区块 - 默认风格</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<blockquote class="layui-elem-quote">这个貌似不用多介绍，因为你已经在太多的地方都看到</blockquote>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>引用区块 - 一般风格</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<blockquote class="layui-elem-quote layui-quote-nm">
			
 
				+  猿强，则国强。国强，则猿更强！ 
			
 
				+  <br>——孟子的崇拜者
			
 
				+</blockquote>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>字段集区块</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field">
			
 
				+  <legend>爱好</legend>
			
 
				+  <div class="layui-field-box">
			
 
				+    你可以在这里放任何内容，比如表单神马的
			
 
				+  </div>
			
 
				+</fieldset>
			
 
				+<br>
			
 
				+<fieldset class="layui-elem-field layui-field-title">
			
 
				+  <legend>带标题的横线</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+内容区域
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>分割线</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+默认分割线
			
 
				+<hr>
			
 
				+ 
			
 
				+赤色分割线
			
 
				+<hr class="layui-border-red">
			
 
				+ 
			
 
				+橙色分割线
			
 
				+<hr class="layui-border-orange">
			
 
				+ 
			
 
				+墨绿分割线
			
 
				+<hr class="layui-border-green">
			
 
				+ 
			
 
				+青色分割线
			
 
				+<hr class="layui-border-cyan">
			
 
				+ 
			
 
				+蓝色分割线
			
 
				+<hr class="layui-border-blue">
			
 
				+ 
			
 
				+黑色分割线
			
 
				+<hr class="layui-border-black">
			
 
				+ 
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>纯圆角</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-inline">
			
 
				+  <img src="/public/avatar/168.jpg-t=1490352249902.jpg" tppabs="http://cdn.layui.com/avatar/168.jpg?t=1490352249902" class="layui-circle">
			
 
				+</div>
			
 
				+       
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html" target="_blank">辅助性元素文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/badge.html
+++ b/demo/badge.html
@@ -0,0 +1,404 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@徽章 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>小徽章、大家族</legend>
			
 
				+</fieldset>
			
 
				+   
			
 
				+<blockquote class="layui-elem-quote layui-quote-nm">
			
 
				+  小圆点：
			
 
				+  <span class="layui-badge-dot"></span>
			
 
				+  <span class="layui-badge-dot layui-bg-orange"></span>
			
 
				+  <span class="layui-badge-dot layui-bg-green"></span>
			
 
				+  <span class="layui-badge-dot layui-bg-cyan"></span>
			
 
				+  <span class="layui-badge-dot layui-bg-blue"></span>
			
 
				+  <span class="layui-badge-dot layui-bg-black"></span>
			
 
				+  <span class="layui-badge-dot layui-bg-gray"></span>
			
 
				+  
			
 
				+  <br><br>常规弧形徽章：
			
 
				+  <span class="layui-badge">6</span>
			
 
				+  <span class="layui-badge">99</span>
			
 
				+  <span class="layui-badge">61728</span>
			
 
				+  <span class="layui-badge">赤</span>
			
 
				+  <span class="layui-badge layui-bg-orange">橙</span>
			
 
				+  <span class="layui-badge layui-bg-green">绿</span>
			
 
				+  <span class="layui-badge layui-bg-cyan">青</span>
			
 
				+  <span class="layui-badge layui-bg-blue">蓝</span>
			
 
				+  <span class="layui-badge layui-bg-black">黑</span>
			
 
				+  <span class="layui-badge layui-bg-gray">灰</span>
			
 
				+  
			
 
				+  <br><br>边框徽章：
			
 
				+  <span class="layui-badge-rim">6</span>
			
 
				+  <span class="layui-badge-rim">Hot</span>
			
 
				+</blockquote> 
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>与其它元素的搭配</legend>
			
 
				+</fieldset> 
			
 
				+ 
			
 
				+<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
			
 
				+<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
			
 
				+ 
			
 
				+<br><br>
			
 
				+ 
			
 
				+<ul class="layui-nav style="text-align: right;"> <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="">控制台<span class="layui-badge">9</span></a>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="">个人中心<span class="layui-badge-dot"></span></a>
			
 
				+  </li>
			
 
				+</ul>
			
 
				+<br>
			
 
				+ 
			
 
				+<div class="layui-tab layui-tab-brief">
			
 
				+  <ul class="layui-tab-title">
			
 
				+    <li class="layui-this">网站设置</li>
			
 
				+    <li>用户管理<span class="layui-badge-dot"></span></li>
			
 
				+    <li>最新邮件<span class="layui-badge">99+</span></li>
			
 
				+  </ul>
			
 
				+  <div class="layui-tab-content"></div>
			
 
				+</div>
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html" target="_blank">徽章文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/button.html
+++ b/demo/button.html
@@ -0,0 +1,496 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@按钮 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>按钮主题</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
			
 
				+  <button type="button" class="layui-btn">默认按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button class="layui-btn layui-btn-primary layui-border">原始按钮</button>
			
 
				+  <button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
			
 
				+  <button class="layui-btn layui-btn-primary layui-border-blue">百搭按钮</button>
			
 
				+  <button class="layui-btn layui-btn-primary layui-border-orange">暖色按钮</button>
			
 
				+  <button class="layui-btn layui-btn-primary layui-border-red">警告按钮</button>
			
 
				+  <button class="layui-btn layui-btn-primary layui-border-black">深色按钮</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>按钮尺寸</legend>
			
 
				+</fieldset>
			
 
				+  
			
 
				+<div class="layui-btn-container">  
			
 
				+  <button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
			
 
				+  <button type="button" class="layui-btn">默认按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
			
 
				+</div> 
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<div style="width: 370px; margin: 0;">
			
 
				+  <button type="button" class="layui-btn layui-btn-fluid">流体按钮（即宽度最大化适应）</button>
			
 
				+</div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>灵活的图标按钮（更多图标请阅览：文档-图标）</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn"><i class="layui-icon">&#xe600;</i></button>
			
 
				+  <button type="button" class="layui-btn"><i class="layui-icon">&#xe603;</i></button>
			
 
				+  <button type="button" class="layui-btn"><i class="layui-icon">&#xe602;</i></button>
			
 
				+  <button type="button" class="layui-btn"><i class="layui-icon">&#xe642;</i></button>
			
 
				+  <button type="button" class="layui-btn"><i class="layui-icon">&#xe640;</i></button>
			
 
				+  <button type="button" class="layui-btn"><i class="layui-icon">&#xe641;</i></button>
			
 
				+</div>
			
 
				+  
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe600;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe603;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe602;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe642;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe640;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe641;</i></button>
			
 
				+</div>
			
 
				+  
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe600;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe603;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe642;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe640;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe641;</i></button>
			
 
				+ 
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe600;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe603;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe642;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe640;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe641;</i></button>
			
 
				+  
			
 
				+  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe600;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe603;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe642;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe640;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe641;</i></button>
			
 
				+</div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>还可以是圆角按钮</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
			
 
				+</div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>风格混搭的按钮</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
			
 
				+  <a href="../doc/element/button.html" tppabs="http://www.layui.com/doc/element/button.html" class="layui-btn" target="_blank">跳转的按钮</a>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe640;</i> 删除</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon">&#xe641;</i> 分享</button>
			
 
				+</div> 
			
 
				+ 
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>按钮组</legend>
			
 
				+</fieldset> 
			
 
				+ 
			
 
				+<div class="layui-btn-group">
			
 
				+  <button type="button" class="layui-btn">增加</button>
			
 
				+  <button type="button" class="layui-btn ">编辑</button>
			
 
				+  <button type="button" class="layui-btn">删除</button>
			
 
				+</div>
			
 
				+<div class="layui-btn-group">
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe642;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe640;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
			
 
				+</div>
			
 
				+<div class="layui-btn-group">
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe654;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe642;</i></button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe640;</i></button>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>按钮容器</legend>
			
 
				+</fieldset>
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn">按钮一</button> 
			
 
				+  <button type="button" class="layui-btn">按钮二</button> 
			
 
				+  <button type="button" class="layui-btn">按钮三</button> 
			
 
				+</div>
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn">按钮一</button> 
			
 
				+  <button type="button" class="layui-btn">按钮二</button> 
			
 
				+  <button type="button" class="layui-btn">按钮三</button> 
			
 
				+</div>
			
 
				+          </div>
			
 
				+          
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p>如果“查看代码”中的图标字符显示为：，那是正常的。具体在使用时，请参照【文档-图标字体】将其替换为对应的Unicode 字符。</p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/button.html" tppabs="http://www.layui.com/doc/element/button.html" target="_blank">按钮文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/carousel.html
+++ b/demo/carousel.html
@@ -0,0 +1,533 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@通用轮播 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+<style>
			
 
				+/* 为了区分效果 */
			
 
				+div[carousel-item]>*{text-align: center; line-height: 280px; color: #fff;}
			
 
				+div[carousel-item]>*:nth-child(2n){background-color: #009688;}
			
 
				+div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
			
 
				+#test2 div[carousel-item]>*{line-height: 120px;}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>常规轮播</legend>
			
 
				+</fieldset>  
			
 
				+ 
			
 
				+<div class="layui-carousel" id="test1" lay-filter="test1">
			
 
				+  <div carousel-item>
			
 
				+    <div>条目1</div>
			
 
				+    <div>条目2</div>
			
 
				+    <div>条目3</div>
			
 
				+    <div>条目4</div>
			
 
				+    <div>条目5</div>
			
 
				+  </div>
			
 
				+</div> 
			
 
				+ 
			
 
				+<div class="layui-carousel" id="test2" style="margin-top: 15px;">
			
 
				+  <div carousel-item>
			
 
				+    <div>条目1</div>
			
 
				+    <div>条目2</div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>设定各种参数</legend>
			
 
				+</fieldset> 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">宽高</label>
			
 
				+      <div class="layui-input-inline" style="width: 98px;">
			
 
				+        <input type="tel" name="width" value="600" autocomplete="off" placeholder="width" class="layui-input demoSet">
			
 
				+      </div>
			
 
				+      <div class="layui-input-inline" style="width: 98px;">
			
 
				+        <input type="tel" name="height" value="280" autocomplete="off" placeholder="height" class="layui-input demoSet">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">动画类型</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <div class="layui-btn-group demoTest" style="margin-top: 5px;">
			
 
				+        <button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-type="set" data-key="anim" data-value="default">左右切换</button>
			
 
				+        <button class="layui-btn layui-btn-sm" data-type="set" data-key="anim" data-value="updown">上下切换</button>
			
 
				+        <button class="layui-btn layui-btn-sm" data-type="set" data-key="anim" data-value="fade">渐隐渐显</button>
			
 
				+      </div> 
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">箭头状态</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <div class="layui-btn-group demoTest" style="margin-top: 5px;">
			
 
				+        <button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-type="set" data-key="arrow" data-value="hover">悬停显示</button>
			
 
				+        <button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow" data-value="always">始终显示</button>
			
 
				+        <button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow" data-value="none">不显示</button>
			
 
				+      </div> 
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">指示器位置</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <div class="layui-btn-group demoTest" style="margin-top: 5px;">
			
 
				+        <button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-key="indicator" data-type="set" data-value="inside">容器内部</button>
			
 
				+        <button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator" data-value="outside">容器外部</button>
			
 
				+        <button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator" data-value="none">不显示</button>
			
 
				+      </div> 
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">自动切换</label>
			
 
				+      <div class="layui-input-block">
			
 
				+        <input type="checkbox" name="switch" lay-skin="switch" checked lay-text="ON|OFF" lay-filter="autoplay">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label" style="width: auto;">时间间隔</label>
			
 
				+      <div class="layui-input-inline" style="width: 120px;">
			
 
				+        <input type="tel" name="interval" value="3000" autocomplete="off" placeholder="毫秒" class="layui-input demoSet">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<div class="layui-carousel" id="test3" lay-filter="test4">
			
 
				+  <div carousel-item>
			
 
				+    <div>条目1</div>
			
 
				+    <div>条目2</div>
			
 
				+    <div>条目3</div>
			
 
				+    <div>条目4</div>
			
 
				+    <div>条目5</div>
			
 
				+  </div>
			
 
				+</div> 
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>填充轮播元素 - 以图片为例</legend>
			
 
				+</fieldset>    
			
 
				+ 
			
 
				+<div class="layui-carousel" id="test10">
			
 
				+  <div carousel-item>
			
 
				+    <div><img src="/public/static/images/layui/demo/1.png" tppabs="http://res.layui.com/static/images/layui/demo/1.png"></div>
			
 
				+    <div><img src="/public/static/images/layui/demo/2.png" tppabs="http://res.layui.com/static/images/layui/demo/2.png"></div>
			
 
				+    <div><img src="/public/static/images/layui/demo/3.png" tppabs="http://res.layui.com/static/images/layui/demo/3.png"></div>
			
 
				+    <div><img src="/public/static/images/layui/demo/4.png" tppabs="http://res.layui.com/static/images/layui/demo/4.png"></div>
			
 
				+    <div><img src="/public/static/images/layui/demo/5.png" tppabs="http://res.layui.com/static/images/layui/demo/5.png"></div>
			
 
				+    <div><img src="/public/static/images/layui/demo/6.png" tppabs="http://res.layui.com/static/images/layui/demo/6.png"></div>
			
 
				+    <div><img src="/public/static/images/layui/demo/7.png" tppabs="http://res.layui.com/static/images/layui/demo/7.png"></div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html" target="_blank">表单元素文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['carousel', 'form'], function(){
			
 
				+  var carousel = layui.carousel
			
 
				+  ,form = layui.form;
			
 
				+  
			
 
				+  //常规轮播
			
 
				+  carousel.render({
			
 
				+    elem: '#test1'
			
 
				+    ,arrow: 'always'
			
 
				+  });
			
 
				+  
			
 
				+  //改变下时间间隔、动画类型、高度
			
 
				+  carousel.render({
			
 
				+    elem: '#test2'
			
 
				+    ,interval: 1800
			
 
				+    ,anim: 'fade'
			
 
				+    ,height: '120px'
			
 
				+  });
			
 
				+  
			
 
				+  //设定各种参数
			
 
				+  var ins3 = carousel.render({
			
 
				+    elem: '#test3'
			
 
				+  });
			
 
				+  //图片轮播
			
 
				+  carousel.render({
			
 
				+    elem: '#test10'
			
 
				+    ,width: '778px'
			
 
				+    ,height: '440px'
			
 
				+    ,interval: 5000
			
 
				+  });
			
 
				+  
			
 
				+  //事件
			
 
				+  carousel.on('change(test4)', function(res){
			
 
				+    console.log(res)
			
 
				+  });
			
 
				+  
			
 
				+  var $ = layui.$, active = {
			
 
				+    set: function(othis){
			
 
				+      var THIS = 'layui-bg-normal'
			
 
				+      ,key = othis.data('key')
			
 
				+      ,options = {};
			
 
				+      
			
 
				+      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
			
 
				+      options[key] = othis.data('value');
			
 
				+      ins3.reload(options);
			
 
				+    }
			
 
				+  };
			
 
				+  
			
 
				+  //监听开关
			
 
				+  form.on('switch(autoplay)', function(){
			
 
				+    ins3.reload({
			
 
				+      autoplay: this.checked
			
 
				+    });
			
 
				+  });
			
 
				+  
			
 
				+  $('.demoSet').on('keyup', function(){
			
 
				+    var value = this.value
			
 
				+    ,options = {};
			
 
				+    if(!/^\d+$/.test(value)) return;
			
 
				+    
			
 
				+    options[this.name] = value;
			
 
				+    ins3.reload(options);
			
 
				+  });
			
 
				+  
			
 
				+  //其它示例
			
 
				+  $('.demoTest .layui-btn').on('click', function(){
			
 
				+    var othis = $(this), type = othis.data('type');
			
 
				+    active[type] ? active[type].call(this, othis) : '';
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/code.html
+++ b/demo/code.html
@@ -0,0 +1,432 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@文本行主题 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			
 
				+  <legend>默认修饰</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+      <pre class="layui-code">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+      </pre>
			
 
				+      
			
 
				+      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+        <legend>notepad 风格</legend>
			
 
				+      </fieldset>
			
 
				+       
			
 
				+      <pre class="layui-code" lay-title="JavaScript" lay-skin="notepad">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+      </pre>
			
 
				+      
			
 
				+     
			
 
				+      
			
 
				+      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+        <legend>叠加使用</legend>
			
 
				+      </fieldset>
			
 
				+       
			
 
				+      <pre class="layui-code">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+      <pre class="layui-code">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+      </pre>
			
 
				+      </pre>
			
 
				+      
			
 
				+      <pre class="layui-code" lay-skin="notepad">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+      <pre class="layui-code" lay-skin="notepad">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+<pre class="layui-code" lay-skin="notepad">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+<pre class="layui-code" lay-skin="notepad">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+<pre class="layui-code" lay-skin="notepad">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+      </pre>
			
 
				+      </pre>
			
 
				+      </pre>
			
 
				+      </pre>
			
 
				+      </pre>
			
 
				+      
			
 
				+      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+        <legend>固定高度</legend>
			
 
				+      </fieldset>
			
 
				+       
			
 
				+      <pre class="layui-code" lay-height="150px">
			
 
				+//在里面存放任意的文本内容
			
 
				+test
			
 
				+test
			
 
				+test
			
 
				+      </pre>       
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html" target="_blank">文本行修饰文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('code', function(){
			
 
				+  
			
 
				+  //layui.code(); 实际使用时，执行该方法即可。而此处注释是因为修饰器在别的js中已经执行过了
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/colorpicker.html
+++ b/demo/colorpicker.html
@@ -0,0 +1,527 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html class="site-demo-overflow">
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@ 颜色选择器- 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+<style>
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>常规使用</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div style="margin-left: 30px;">
			
 
				+  <div id="test1"></div>
			
 
				+  <div id="test2" style="margin-left: 30px;"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>表单赋值</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div style="margin-left: 30px;">
			
 
				+  <form class="layui-form" action="">
			
 
				+    <div class="layui-form-item">
			
 
				+      <div class="layui-input-inline" style="width: 120px;">
			
 
				+        <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
			
 
				+      </div>
			
 
				+      <div class="layui-inline" style="left: -11px;">
			
 
				+        <div id="test-form"></div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </form>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>RGB / RGBA 色值</legend>
			
 
				+</fieldset>
			
 
				+<div style="margin-left: 30px;">
			
 
				+  <div id="test3"></div>
			
 
				+  <div id="test4" style="margin-left: 30px;"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>透明度选择</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div style="margin-left: 30px;">
			
 
				+  <div id="test5"></div>
			
 
				+  <div id="test6" style="margin-left: 30px;"></div>
			
 
				+  <div id="test7" style="margin-left: 30px;"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>预定义颜色项</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div style="margin-left: 30px;">
			
 
				+  <div id="test8"></div>
			
 
				+  <div id="test9" style="margin-left: 30px;"></div>
			
 
				+</div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>全功能和回调的使用</legend>
			
 
				+</fieldset>
			
 
				+<div style="margin-left: 30px;">
			
 
				+  <input type="hidden" name="color" value="" id="test-all-input">
			
 
				+  <div id="test-all"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>颜色框尺寸</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div style="margin-left: 30px;">
			
 
				+  <div id="test10"></div>
			
 
				+  <div id="test11" style="margin-left: 30px;"></div>
			
 
				+  <div id="test12" style="margin-left: 30px;"></div>
			
 
				+</div>
			
 
				+            
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html" target="_blank">颜色选择器文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('colorpicker', function(){
			
 
				+  var $ = layui.$
			
 
				+  ,colorpicker = layui.colorpicker;
			
 
				+  //常规使用
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test1' //绑定元素
			
 
				+    ,change: function(color){ //颜色改变的回调
			
 
				+      layer.tips('选择了：'+ color, this.elem, {
			
 
				+        tips: 1
			
 
				+      });
			
 
				+    }
			
 
				+  });
			
 
				+   
			
 
				+  //初始色值
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test2'
			
 
				+    ,color: '#2ec770' //设置默认色
			
 
				+    ,done: function(color){
			
 
				+      layer.tips('选择了：'+ color, this.elem);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //表单赋值
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test-form'
			
 
				+    ,color: '#1c97f5'
			
 
				+    ,done: function(color){
			
 
				+      $('#test-form-input').val(color);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //RGB 、RGBA
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test3'
			
 
				+    ,color: 'rgb(68,66,66)'
			
 
				+    ,format: 'rgb' //默认为 hex
			
 
				+  });
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test4'
			
 
				+    ,color: 'rgba(68,66,66,0.5)'
			
 
				+    ,format: 'rgb'
			
 
				+    ,alpha: true //开启透明度滑块
			
 
				+  });
			
 
				+  
			
 
				+  //开启透明度
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test5'
			
 
				+    ,color: '#009688' //hex
			
 
				+    ,alpha: true //开启透明度
			
 
				+    ,format: 'rgb'
			
 
				+  });
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test6'
			
 
				+    ,color: 'rgb(0,150,136,0.6)' //rgba
			
 
				+    ,alpha: true
			
 
				+    ,format: 'rgb'
			
 
				+  });
			
 
				+  colorpicker.render({ //无初始色值时
			
 
				+    elem: '#test7'
			
 
				+    ,alpha: true
			
 
				+    ,format: 'rgb'
			
 
				+  });
			
 
				+  
			
 
				+  //预定义颜色项
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test8'
			
 
				+    ,color: '#c71585'
			
 
				+    ,predefine: true // 开启预定义颜色
			
 
				+  });
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test9'
			
 
				+    ,color: '#9d8a0e'
			
 
				+    ,predefine: true // 开启预定义颜色
			
 
				+    ,colors: ['#ff8c00','#00ced1','#9d8a0e'] //自定义预定义颜色项
			
 
				+  });
			
 
				+  
			
 
				+  //开启全功能
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test-all'
			
 
				+    ,color: 'rgba(7, 155, 140, 1)'
			
 
				+    ,format: 'rgb'
			
 
				+    ,predefine: true
			
 
				+    ,alpha: true
			
 
				+    ,done: function(color){
			
 
				+      $('#test-all-input').val(color); //向隐藏域赋值
			
 
				+      layer.tips('给指定隐藏域设置了颜色值：'+ color, this.elem);
			
 
				+      
			
 
				+      color || this.change(color); //清空时执行 change
			
 
				+    }
			
 
				+    ,change: function(color){
			
 
				+      //给当前页面头部和左侧设置主题色
			
 
				+      $('.header-demo,.layui-side .layui-nav').css('background-color', color);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //设定颜色框尺寸
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test10'
			
 
				+    ,size: 'lg' //大号下拉框
			
 
				+  });
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test11'
			
 
				+    //,size: 'sm' //默认 sm
			
 
				+  });
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test12'
			
 
				+    ,size: 'xs' //mini下拉框
			
 
				+  });  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/dropdown.html
+++ b/demo/dropdown.html
@@ -0,0 +1,963 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@通用下拉菜单 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>初演示</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button class="layui-btn demo1">
			
 
				+    下拉菜单
			
 
				+    <i class="layui-icon layui-icon-down layui-font-12"></i>
			
 
				+  </button>
			
 
				+  <button class="layui-btn layui-btn-primary demo1">
			
 
				+    下拉菜单
			
 
				+    <i class="layui-icon layui-icon-down layui-font-12"></i>
			
 
				+  </button>
			
 
				+</div>
			
 
				+ 
			
 
				+<div class="layui-inline" style="width: 235px;">
			
 
				+  <input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="demo2">
			
 
				+</div>
			
 
				+<div class="layui-inline layui-word-aux layui-font-gray">
			
 
				+  可以绑定任意元素，<a href="javascript:;" class="layui-font-blue" id="demo3">比如这段文字 <i class="layui-icon layui-font-12 layui-icon-down"></i></a>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>高级演示</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button class="layui-btn" id="demo100">
			
 
				+    无限层级 + 跳转 + 事件 + 自定义模板
			
 
				+  </button>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>在表格中的应用</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div style="max-width: 728px;">
			
 
				+  <table class="layui-hide" id="test-dropdown-table"  lay-filter="test-dropdown-table"></table>
			
 
				+</div>
			
 
				+<script type="text/html" id="test-dropdown-toolbar-barDemo">
			
 
				+  <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
			
 
				+  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
			
 
				+</script>
			
 
				+<div style="margin-top: 15px">
			
 
				+   
			
 
				+<!-- 示例-970 -->
			
 
				+
			
 
				+  
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title">
			
 
				+  <legend>自定义事件</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button class="layui-btn layui-btn-primary" id="demo4">
			
 
				+    hover
			
 
				+    <i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
			
 
				+  </button>
			
 
				+  <button class="layui-btn layui-btn-primary" id="demo5">
			
 
				+    mousedown
			
 
				+    <i class="layui-icon layui-icon-down layui-font-12"></i>
			
 
				+  </button>
			
 
				+  <button class="layui-btn layui-btn-primary" id="demo6">
			
 
				+    dblclick - 双击
			
 
				+    <i class="layui-icon layui-icon-circle layui-font-12"></i>
			
 
				+  </button>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>右键菜单</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-bg-gray" style="height: 260px; text-align: center;" id="demo7">
			
 
				+  <span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span>
			
 
				+</div>
			
 
				+<button class="layui-btn" style="margin-top: 15px;" lay-demoActive="rightclick">
			
 
				+  开启全局右键菜单
			
 
				+</button>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>弹出位置</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button class="layui-btn layui-btn-primary" id="demo200">
			
 
				+    左对齐
			
 
				+    <i class="layui-icon layui-icon-down layui-font-12"></i>
			
 
				+  </button>
			
 
				+  <button class="layui-btn layui-btn-primary" id="demo201">
			
 
				+    居中对齐
			
 
				+    <i class="layui-icon layui-icon-down layui-font-12"></i>
			
 
				+  </button>
			
 
				+  <button class="layui-btn layui-btn-primary" id="demo202">
			
 
				+    右对齐
			
 
				+    <i class="layui-icon layui-icon-down layui-font-12"></i>
			
 
				+  </button>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>重定义风格</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button class="layui-btn" id="demo8">
			
 
				+    重定义样式
			
 
				+    <i class="layui-icon layui-icon-list layui-font-14"></i>
			
 
				+  </button>
			
 
				+  <style>
			
 
				+    .site-dropdown-demo,
			
 
				+    .site-dropdown-demo .layui-menu{background-color: #000; border: none;}
			
 
				+    .site-dropdown-demo .layui-menu li{color: #fff;}
			
 
				+    .site-dropdown-demo .layui-menu li:hover{background-color: #333;}
			
 
				+  </style>
			
 
				+  <button class="layui-btn" id="demo9">
			
 
				+    重定义内容
			
 
				+    <i class="layui-icon layui-icon-list layui-font-14"></i>
			
 
				+  </button>
			
 
				+</div>
			
 
				+ 
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html" target="_blank">下拉菜单文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+
			
 
				+<script>
			
 
				+layui.use(['dropdown', 'util', 'layer', 'table'], function(){
			
 
				+  var dropdown = layui.dropdown
			
 
				+  ,util = layui.util
			
 
				+  ,layer = layui.layer
			
 
				+  ,table = layui.table
			
 
				+  ,$ = layui.jquery;
			
 
				+  
			
 
				+  //初演示
			
 
				+  dropdown.render({
			
 
				+    elem: '.demo1'
			
 
				+    ,data: [{
			
 
				+      title: 'menu item11'
			
 
				+      ,id: 100
			
 
				+    },{
			
 
				+      title: 'menu item22'
			
 
				+      ,id: 101
			
 
				+    },{
			
 
				+      title: 'menu item33'
			
 
				+      ,id: 102
			
 
				+    }]
			
 
				+    ,click: function(obj){
			
 
				+      layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //初演示 - 绑定输入框
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo2'
			
 
				+    ,data: [{
			
 
				+      title: 'menu item 1'
			
 
				+      ,id: 101
			
 
				+    },{
			
 
				+      title: 'menu item 2'
			
 
				+      ,id: 102
			
 
				+    },{
			
 
				+      title: 'menu item 3'
			
 
				+      ,id: 103
			
 
				+    },{
			
 
				+      title: 'menu item 4'
			
 
				+      ,id: 104
			
 
				+    },{
			
 
				+      title: 'menu item 5'
			
 
				+      ,id: 105
			
 
				+    },{
			
 
				+      title: 'menu item 6'
			
 
				+      ,id: 106
			
 
				+    }]
			
 
				+    ,click: function(obj){
			
 
				+      this.elem.val(obj.title);
			
 
				+    }
			
 
				+    ,style: 'width: 235px;'
			
 
				+  });
			
 
				+  
			
 
				+  //初演示 - 绑定文字
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo3'
			
 
				+    ,data: [{
			
 
				+      title: 'menu item 1'
			
 
				+      ,id: 100
			
 
				+    },{
			
 
				+      title: 'menu item 2'
			
 
				+      ,id: 101
			
 
				+      ,child: [{  //横向子菜单
			
 
				+        title: 'menu item 2-1'
			
 
				+        ,id: 1011
			
 
				+      },{
			
 
				+        title: 'menu item 2-2'
			
 
				+        ,id: 1012
			
 
				+      }]
			
 
				+    },{
			
 
				+      title: 'menu item 3'
			
 
				+      ,id: 102
			
 
				+    },{
			
 
				+      type: '-' //分割线
			
 
				+    },{
			
 
				+      title: 'menu group'
			
 
				+      ,id: 103
			
 
				+      ,type: 'group' //纵向菜单组
			
 
				+      ,child: [{
			
 
				+        title: 'menu item 4-1'
			
 
				+        ,id: 1031
			
 
				+      },{
			
 
				+        title: 'menu item 4-2'
			
 
				+        ,id: 1032
			
 
				+      }]
			
 
				+    },{
			
 
				+      type: '-' //分割线
			
 
				+    },{
			
 
				+      title: 'menu item 5'
			
 
				+      ,id: 104
			
 
				+    },{
			
 
				+      title: 'menu item 5'
			
 
				+      ,id: 104
			
 
				+    }]
			
 
				+    ,click: function(obj){
			
 
				+      this.elem.val(obj.title);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //高级演示 - 各种组合
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo100'
			
 
				+    ,data: [{
			
 
				+      title: 'menu item 1'
			
 
				+      ,templet: '<i class="layui-icon layui-icon-picture"></i> {{d.title}} <span class="layui-badge-dot"></span>'
			
 
				+      ,id: 100
			
 
				+      ,href: '#'
			
 
				+    },{
			
 
				+      title: 'menu item 2'
			
 
				+      ,templet: '<img src="http://cdn.layui.com/avatar/168.jpg?t=123" style="width: 16px;"> {{d.title}}'
			
 
				+      ,id: 101
			
 
				+      ,href: '/'
			
 
				+      ,target: '_blank'
			
 
				+    }
			
 
				+    ,{type: '-'} //分割线
			
 
				+    ,{
			
 
				+      title: 'menu item 3'
			
 
				+      ,id: 102
			
 
				+      ,type: 'group'
			
 
				+      ,child: [{
			
 
				+        title: 'menu item 3-1'
			
 
				+        ,id: 103
			
 
				+      },{
			
 
				+        title: 'menu item 3-2'
			
 
				+        ,id: 104
			
 
				+        ,child: [{
			
 
				+          title: 'menu item 3-2-1'
			
 
				+          ,id: 105
			
 
				+        },{
			
 
				+          title: 'menu item 3-2-2'
			
 
				+          ,id: 11
			
 
				+          ,type: 'group'
			
 
				+          ,child: [{
			
 
				+            title: 'menu item 3-2-2-1'
			
 
				+            ,id: 111
			
 
				+          },{
			
 
				+            title: 'menu item 3-2-2-2'
			
 
				+            ,id: 1111
			
 
				+          }]
			
 
				+        },{
			
 
				+          title: 'menu item 3-2-3'
			
 
				+          ,id: 11111
			
 
				+        }]
			
 
				+      },{
			
 
				+        title: 'menu item 3-3'
			
 
				+        ,id: 111111
			
 
				+        ,type: 'group'
			
 
				+        ,child: [{
			
 
				+          title: 'menu item 3-3-1'
			
 
				+          ,id: 22
			
 
				+        },{
			
 
				+          title: 'menu item 3-3-2'
			
 
				+          ,id: 222
			
 
				+          ,child: [{
			
 
				+            title: 'menu item 3-3-2-1'
			
 
				+            ,id: 2222
			
 
				+          },{
			
 
				+            title: 'menu item 3-3-2-2'
			
 
				+            ,id: 22222
			
 
				+          },{
			
 
				+            title: 'menu item 3-3-2-3'
			
 
				+            ,id: 2222222
			
 
				+          }]
			
 
				+        },{
			
 
				+          title: 'menu item 3-3-3'
			
 
				+          ,id: 333
			
 
				+        }]
			
 
				+      }]
			
 
				+    }
			
 
				+    ,{type: '-'}
			
 
				+    ,{
			
 
				+      title: 'menu item 4'
			
 
				+      ,id: 4
			
 
				+    },{
			
 
				+      title: 'menu item 5'
			
 
				+      ,id: 5
			
 
				+      ,child: [{
			
 
				+        title: 'menu item 5-1'
			
 
				+        ,id: 55
			
 
				+        ,child: [{
			
 
				+          title: 'menu item 5-1-1'
			
 
				+          ,id: 5555
			
 
				+        },{
			
 
				+          title: 'menu item 5-1-2'
			
 
				+          ,id: 55555
			
 
				+        },{
			
 
				+          title: 'menu item 5-1-3'
			
 
				+          ,id: 555555
			
 
				+        }]
			
 
				+      },{
			
 
				+        title: 'menu item 5-2'
			
 
				+        ,id: 52
			
 
				+      },{
			
 
				+        title: 'menu item 5-3'
			
 
				+        ,id: 53
			
 
				+      }]
			
 
				+    },{type:'-'},{
			
 
				+      title: 'menu item 6'
			
 
				+      ,id: 66
			
 
				+      ,type: 'group'
			
 
				+      ,isSpreadItem: false
			
 
				+      ,child: [{
			
 
				+        title: 'menu item 6-1'
			
 
				+        ,id: 666
			
 
				+      },{
			
 
				+        title: 'menu item 6-2'
			
 
				+        ,id: 6666
			
 
				+      },{
			
 
				+        title: 'menu item 6-3'
			
 
				+        ,id: 66666
			
 
				+      }]
			
 
				+    }]
			
 
				+    ,click: function(item){
			
 
				+      layer.msg(util.escape(JSON.stringify(item)));
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  // dropdown 在表格中的应用
			
 
				+  table.render({
			
 
				+    elem: '#test-dropdown-table'
			
 
				+    ,url: '../test/table/demo5.json.js'/*tpa=http://www.layui.com/test/table/demo5.json*/
			
 
				+    ,title: '用户数据表'
			
 
				+    ,cols: [[
			
 
				+      {type: 'checkbox', fixed: 'left'}
			
 
				+      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
			
 
				+      ,{field:'username', title:'用户名', width:120, edit: 'text'}
			
 
				+      ,{field:'email', title:'邮箱', minWidth:150}
			
 
				+      ,{fixed: 'right', title:'操作', toolbar: '#test-dropdown-toolbar-barDemo', width:150}
			
 
				+    ]]
			
 
				+    ,limits: [3]
			
 
				+    ,page: true
			
 
				+  });
			
 
				+  //行工具事件
			
 
				+  table.on('tool(test-dropdown-table)', function(obj){
			
 
				+    var that = this
			
 
				+    ,data = obj.data;
			
 
				+      
			
 
				+    if(obj.event === 'edit'){
			
 
				+      layer.prompt({
			
 
				+        formType: 2
			
 
				+        ,value: data.email
			
 
				+      }, function(value, index){
			
 
				+        obj.update({
			
 
				+          email: value
			
 
				+        });
			
 
				+        layer.close(index);
			
 
				+      });
			
 
				+    } else if(obj.event === 'more'){
			
 
				+      //更多下拉菜单
			
 
				+      dropdown.render({
			
 
				+        elem: that
			
 
				+        ,show: true //外部事件触发即显示
			
 
				+        ,data: [{
			
 
				+          title: 'item 1'
			
 
				+          ,id: 'aaa'
			
 
				+        }, {
			
 
				+          title: 'item 2'
			
 
				+          ,id: 'bbb'
			
 
				+        }, {
			
 
				+          title: '删除'
			
 
				+          ,id: 'del'
			
 
				+        }]
			
 
				+        ,click: function(data, othis){
			
 
				+          //根据 id 做出不同操作
			
 
				+          if(data.id === 'del'){
			
 
				+            layer.confirm('真的删除行么', function(index){
			
 
				+              obj.del();
			
 
				+              layer.close(index);
			
 
				+            });
			
 
				+          } else {
			
 
				+            layer.msg('得到表格下拉菜单 id：'+ data.id);
			
 
				+          }
			
 
				+        }
			
 
				+        ,align: 'right' //右对齐弹出（v2.6.8 新增）
			
 
				+        ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
			
 
				+      }); 
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //自定义事件 - hover
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo4'
			
 
				+    ,trigger: 'hover'
			
 
				+    ,data: [{
			
 
				+      title: 'menu item 1'
			
 
				+      ,id: 100
			
 
				+    },{
			
 
				+      title: 'menu item 2'
			
 
				+      ,id: 101
			
 
				+    },{
			
 
				+      title: 'menu item 3'
			
 
				+      ,id: 102
			
 
				+    }]
			
 
				+  });
			
 
				+  
			
 
				+  //自定义事件 - mousedown
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo5'
			
 
				+    ,trigger: 'mousedown'
			
 
				+    ,data: [{
			
 
				+      title: 'menu item 1'
			
 
				+      ,id: 100
			
 
				+    },{
			
 
				+      title: 'menu item 2'
			
 
				+      ,id: 101
			
 
				+    },{
			
 
				+      title: 'menu item 3'
			
 
				+      ,id: 102
			
 
				+    }]
			
 
				+  });
			
 
				+  
			
 
				+  //自定义事件 - dblclick
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo6'
			
 
				+    ,trigger: 'dblclick'
			
 
				+    ,data: [{
			
 
				+      title: 'menu item 1'
			
 
				+      ,id: 100
			
 
				+    },{
			
 
				+      title: 'menu item 2'
			
 
				+      ,id: 101
			
 
				+    },{
			
 
				+      title: 'menu item 3'
			
 
				+      ,id: 102
			
 
				+    }]
			
 
				+  });
			
 
				+  
			
 
				+  //右键菜单
			
 
				+  var inst = dropdown.render({
			
 
				+    elem: '#demo7' //也可绑定到 document，从而重置整个右键
			
 
				+    ,trigger: 'contextmenu' //contextmenu
			
 
				+    ,isAllowSpread: false //禁止菜单组展开收缩
			
 
				+    ,style: 'width: 200px' //定义宽度，默认自适应
			
 
				+    ,id: 'test777' //定义唯一索引
			
 
				+    ,data: [{
			
 
				+      title: 'menu item 1'
			
 
				+      ,id: 'test'
			
 
				+    }, {
			
 
				+      title: 'Printing'
			
 
				+      ,id: 'print'
			
 
				+    },{
			
 
				+      title: 'Reload'
			
 
				+      ,id: 'reload'
			
 
				+    },{type:'-'},{
			
 
				+      title: 'menu item 3'
			
 
				+      ,id: '#3'
			
 
				+      ,child: [{
			
 
				+        title: 'menu item 3-1'
			
 
				+        ,id: '#1'
			
 
				+      },{
			
 
				+        title: 'menu item 3-2'
			
 
				+        ,id: '#2'
			
 
				+      },{
			
 
				+        title: 'menu item 3-3'
			
 
				+        ,id: '#3'
			
 
				+      }]
			
 
				+    },{type:'-'},{
			
 
				+      title: 'menu item 4'
			
 
				+      ,id: ''
			
 
				+    },{
			
 
				+      title: 'menu item 5'
			
 
				+      ,id: '#1'
			
 
				+    },{
			
 
				+      title: 'menu item 6'
			
 
				+      ,id: '#1'
			
 
				+    }]
			
 
				+    ,click: function(obj, othis){
			
 
				+      if(obj.id === 'test'){
			
 
				+        layer.msg('click');
			
 
				+      } else if(obj.id === 'print'){
			
 
				+        window.print();
			
 
				+      } else if(obj.id === 'reload'){
			
 
				+        location.reload();
			
 
				+      }
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //对齐方式
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo200'
			
 
				+    ,data: [{
			
 
				+      title: 'menu item test 111'
			
 
				+      ,id: 100
			
 
				+    },{
			
 
				+      title: 'menu item test 222'
			
 
				+      ,id: 101
			
 
				+    },{
			
 
				+      title: 'menu item test 333'
			
 
				+      ,id: 102
			
 
				+    }]
			
 
				+  });
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo201'
			
 
				+    ,align: 'center' //居中对齐（2.6.8 新增）
			
 
				+    ,data: [{
			
 
				+      title: 'menu item test 111'
			
 
				+      ,id: 100
			
 
				+    },{
			
 
				+      title: 'menu item test 222'
			
 
				+      ,id: 101
			
 
				+    },{
			
 
				+      title: 'menu item test 333'
			
 
				+      ,id: 102
			
 
				+    }]
			
 
				+  });
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo202'
			
 
				+    ,align: 'right' //右对齐（2.6.8 新增）
			
 
				+    ,data: [{
			
 
				+      title: 'menu item test 111'
			
 
				+      ,id: 100
			
 
				+    },{
			
 
				+      title: 'menu item test 222'
			
 
				+      ,id: 101
			
 
				+    },{
			
 
				+      title: 'menu item test 333'
			
 
				+      ,id: 102
			
 
				+    }]
			
 
				+  });
			
 
				+  
			
 
				+  
			
 
				+  //重定义样式
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo8'
			
 
				+    ,data: [{
			
 
				+      title: 'menu item 1'
			
 
				+      ,id: 100
			
 
				+    },{
			
 
				+      title: 'menu item 2'
			
 
				+      ,id: 101
			
 
				+    },{
			
 
				+      title: 'menu item 3'
			
 
				+      ,id: 103
			
 
				+    },{
			
 
				+      title: 'menu item 4'
			
 
				+      ,id: 104
			
 
				+    },{
			
 
				+      title: 'menu item 5'
			
 
				+      ,id: 105
			
 
				+    },{
			
 
				+      title: 'menu item 6'
			
 
				+      ,id: 106
			
 
				+    }]
			
 
				+    ,className: 'site-dropdown-demo'
			
 
				+    ,ready: function(elemPanel, elem){
			
 
				+      layer.msg('定义了一个 className');
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //重定义内容
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo9'
			
 
				+    ,content: ['<div class="layui-tab layui-tab-brief">'
			
 
				+      ,'<ul class="layui-tab-title">'
			
 
				+        ,'<li class="layui-this">Tab header 1</li>'
			
 
				+        ,'<li>Tab header 2</li>'
			
 
				+        ,'<li>Tab header 3</li>'
			
 
				+      ,'</ul>'
			
 
				+      ,'<div class="layui-tab-content">'
			
 
				+        ,'<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 参数中插入任意的 html 内容，可替代默认的下拉菜单。 从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>'
			
 
				+        ,'<div class="layui-tab-item">Tab body 2</div>'
			
 
				+        ,'<div class="layui-tab-item">Tab body 3</div>'
			
 
				+      ,'</div>'
			
 
				+    ,'</div>'].join('')
			
 
				+    ,style: 'width: 370px; height: 200px; padding: 0 15px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);'
			
 
				+    ,ready: function(){
			
 
				+      layui.use('element', function(element){
			
 
				+        element.render('tab');
			
 
				+      });
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  
			
 
				+  //其他操作
			
 
				+  util.event('lay-demoactive', {
			
 
				+    //全局右键菜单
			
 
				+    rightclick: function(othis){
			
 
				+      if(!othis.data('open')){
			
 
				+        dropdown.reload('test777', {
			
 
				+          elem: document //将事件直接绑定到 document
			
 
				+        });
			
 
				+        layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
			
 
				+        othis.html('取消全局右键菜单');
			
 
				+        othis.data('open', true);
			
 
				+      } else {
			
 
				+        dropdown.reload('test777', {
			
 
				+          elem: '#demo7' //重新绑定到指定元素上
			
 
				+        });
			
 
				+        layer.msg('已取消全局右键菜单，恢复默认右键菜单')
			
 
				+        othis.html('开启全局右键菜单');
			
 
				+        othis.data('open', false);
			
 
				+      }
			
 
				+    }
			
 
				+  })
			
 
				+});
			
 
				+</script>
			
 
				+
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/flow.html
+++ b/demo/flow.html
@@ -0,0 +1,436 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@流加载 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+<style>
			
 
				+.flow-default{width: 600px; height: 400px; overflow: auto; font-size: 0;}
			
 
				+.flow-default li{display: inline-block; margin: 0 5px; font-size: 14px; width: 48%;  margin-bottom: 10px; height: 100px; line-height: 100px; text-align: center; background-color: #eee;}
			
 
				+.flow-default img{width: 100%; height: 100%;}
			
 
				+.site-demo-flow{width: 600px; height: 300px; overflow: auto; text-align: center;}
			
 
				+.site-demo-flow img{width: 40%; height: 200px; margin: 0 2px 5px 0; border: none;}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			
 
				+  <legend>信息流 - 滚动加载</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<ul class="flow-default" id="LAY_demo1"></ul>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>信息流 - 手工加载</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<ul class="flow-default" style="height: 300px;" id="LAY_demo2"></ul>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>图片懒加载</legend>
			
 
				+</fieldset>
			
 
				+<div class="site-demo-flow" id="LAY_demo3">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+  <img lay-src="/public/upload/2017_3/168_1488985841996_23077.png" tppabs="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png">
			
 
				+</div>
			
 
				+ 
			
 
				+<p style="margin-top: 20px;">
			
 
				+  无论滚动条上滑还是下滑，都只始终加载当前屏的图片（你可以快速拉动滚动条到中间区域，然后再往上滑动试试）
			
 
				+  <br>layui 的图片懒加载，除了对滚动条的性能进行了美好的优化，也对图片的「当前屏」进行了高效计算，无惧于任何规模庞大的图片数量！
			
 
				+</p>             
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html" target="_blank">流加载文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('flow', function(){
			
 
				+  var flow = layui.flow;
			
 
				+ 
			
 
				+  flow.load({
			
 
				+    elem: '#LAY_demo1' //流加载容器
			
 
				+    ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
			
 
				+    ,done: function(page, next){ //执行下一页的回调
			
 
				+      
			
 
				+      //模拟数据插入
			
 
				+      setTimeout(function(){
			
 
				+        var lis = [];
			
 
				+        for(var i = 0; i < 8; i++){
			
 
				+          lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
			
 
				+        }
			
 
				+        
			
 
				+        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
			
 
				+        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
			
 
				+        next(lis.join(''), page < 10); //假设总页数为 10
			
 
				+      }, 500);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  flow.load({
			
 
				+    elem: '#LAY_demo2' //流加载容器
			
 
				+    ,scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。
			
 
				+    ,isAuto: false
			
 
				+    ,isLazyimg: true
			
 
				+    ,done: function(page, next){ //加载下一页
			
 
				+      //模拟插入
			
 
				+      setTimeout(function(){
			
 
				+        var lis = [];
			
 
				+        for(var i = 0; i < 6; i++){
			
 
				+          lis.push('<li><img lay-src="/public/upload/2017_3/168_1488985841996_23077.png?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
			
 
				+        }
			
 
				+        next(lis.join(''), page < 6); //假设总页数为 6
			
 
				+      }, 500);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //按屏加载图片
			
 
				+  flow.lazyimg({
			
 
				+    elem: '#LAY_demo3 img'
			
 
				+    ,scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/form.html
+++ b/demo/form.html
@@ -0,0 +1,841 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html class="site-demo-overflow">
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@表单 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote layui-text">
			
 
				+  鉴于小伙伴的普遍反馈，先温馨提醒两个常见“问题”：1. <a href="../doc/base/faq.html#form" tppabs="http://www.layui.com/doc/base/faq.html#form" target="_blank">为什么select/checkbox/radio没显示？</a> 2. <a href="../doc/modules/form.html#render" tppabs="http://www.layui.com/doc/modules/form.html#render" target="_blank">动态添加的表单元素如何更新？</a>
			
 
				+</blockquote>
			
 
				+              
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			
 
				+  <legend>表单集合演示</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<form class="layui-form" action="">
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">单行输入框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">验证必填项</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="text" name="username" lay-verify="required" lay-reqText="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">验证手机</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">验证邮箱</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">多规则验证</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">验证日期</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">验证链接</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">验证身份证</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">自定义验证</label>
			
 
				+    <div class="layui-input-inline">
			
 
				+      <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
			
 
				+    </div>
			
 
				+    <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">范围</label>
			
 
				+      <div class="layui-input-inline" style="width: 100px;">
			
 
				+        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+      <div class="layui-form-mid">-</div>
			
 
				+      <div class="layui-input-inline" style="width: 100px;">
			
 
				+        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">单行选择框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <select name="interest" lay-filter="aihao">
			
 
				+        <option value=""></option>
			
 
				+        <option value="0">写作</option>
			
 
				+        <option value="1" selected>阅读</option>
			
 
				+        <option value="2">游戏</option>
			
 
				+        <option value="3">音乐</option>
			
 
				+        <option value="4">旅行</option>
			
 
				+      </select>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">分组选择框</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <select name="quiz">
			
 
				+          <option value="">请选择问题</option>
			
 
				+          <optgroup label="城市记忆">
			
 
				+            <option value="你工作的第一个城市">你工作的第一个城市</option>
			
 
				+          </optgroup>
			
 
				+          <optgroup label="学生时代">
			
 
				+            <option value="你的工号">你的工号</option>
			
 
				+            <option value="你最喜欢的老师">你最喜欢的老师</option>
			
 
				+          </optgroup>
			
 
				+        </select>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">搜索选择框</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <select name="modules" lay-verify="required" lay-search>
			
 
				+          <option value="">直接选择或搜索选择</option>
			
 
				+          <option value="1">layer</option>
			
 
				+          <option value="2">form</option>
			
 
				+          <option value="3">layim</option>
			
 
				+          <option value="4">element</option>
			
 
				+          <option value="5">laytpl</option>
			
 
				+          <option value="6">upload</option>
			
 
				+          <option value="7">laydate</option>
			
 
				+          <option value="8">laypage</option>
			
 
				+          <option value="9">flow</option>
			
 
				+          <option value="10">util</option>
			
 
				+          <option value="11">code</option>
			
 
				+          <option value="12">tree</option>
			
 
				+          <option value="13">layedit</option>
			
 
				+          <option value="14">nav</option>
			
 
				+          <option value="15">tab</option>
			
 
				+          <option value="16">table</option>
			
 
				+          <option value="17">select</option>
			
 
				+          <option value="18">checkbox</option>
			
 
				+          <option value="19">switch</option>
			
 
				+          <option value="20">radio</option>
			
 
				+        </select>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">联动选择框</label>
			
 
				+    <div class="layui-input-inline">
			
 
				+      <select name="quiz1">
			
 
				+        <option value="">请选择省</option>
			
 
				+        <option value="浙江" selected>浙江省</option>
			
 
				+        <option value="你的工号">江西省</option>
			
 
				+        <option value="你最喜欢的老师">福建省</option>
			
 
				+      </select>
			
 
				+    </div>
			
 
				+    <div class="layui-input-inline">
			
 
				+      <select name="quiz2">
			
 
				+        <option value="">请选择市</option>
			
 
				+        <option value="杭州">杭州</option>
			
 
				+        <option value="宁波" disabled>宁波</option>
			
 
				+        <option value="温州">温州</option>
			
 
				+        <option value="温州">台州</option>
			
 
				+        <option value="温州">绍兴</option>
			
 
				+      </select>
			
 
				+    </div>
			
 
				+    <div class="layui-input-inline">
			
 
				+      <select name="quiz3">
			
 
				+        <option value="">请选择县/区</option>
			
 
				+        <option value="西湖区">西湖区</option>
			
 
				+        <option value="余杭区">余杭区</option>
			
 
				+        <option value="拱墅区">临安市</option>
			
 
				+      </select>
			
 
				+    </div>
			
 
				+    <div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">复选框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="checkbox" name="like[write]" title="写作">
			
 
				+      <input type="checkbox" name="like[read]" title="阅读" checked>
			
 
				+      <input type="checkbox" name="like[game]" title="游戏">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item" pane>
			
 
				+    <label class="layui-form-label">原始复选框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked>
			
 
				+      <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
			
 
				+      <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">开关-默认关</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">开关-默认开</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">单选框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="radio" name="sex" value="男" title="男" checked>
			
 
				+      <input type="radio" name="sex" value="女" title="女">
			
 
				+      <input type="radio" name="sex" value="禁" title="禁用" disabled>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item layui-form-text">
			
 
				+    <label class="layui-form-label">普通文本域</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <!--<div class="layui-form-item layui-form-text">
			
 
				+    <label class="layui-form-label">编辑器</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
			
 
				+    </div>
			
 
				+  </div>-->
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-input-block">
			
 
				+      <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
			
 
				+      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</form>
			
 
				+ 
			
 
				+<!-- 示例-970 -->
			
 
				+
			
 
				+  
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>赋值和取值</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<form class="layui-form" action="" lay-filter="example">
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">输入框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">密码框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">选择框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <select name="interest" lay-filter="aihao">
			
 
				+        <option value=""></option>
			
 
				+        <option value="0">写作</option>
			
 
				+        <option value="1">阅读</option>
			
 
				+        <option value="2">游戏</option>
			
 
				+        <option value="3">音乐</option>
			
 
				+        <option value="4">旅行</option>
			
 
				+      </select>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">复选框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="checkbox" name="like[write]" title="写作">
			
 
				+      <input type="checkbox" name="like[read]" title="阅读">
			
 
				+      <input type="checkbox" name="like[daze]" title="发呆">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">开关</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">单选框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="radio" name="sex" value="男" title="男" checked>
			
 
				+      <input type="radio" name="sex" value="女" title="女">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item layui-form-text">
			
 
				+    <label class="layui-form-label">文本域</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+ 
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-input-block">
			
 
				+      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
			
 
				+      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
			
 
				+      <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</form>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>方框风格的表单集合</legend>
			
 
				+</fieldset>
			
 
				+<form class="layui-form layui-form-pane" action="">
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">长输入框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">短输入框</label>
			
 
				+    <div class="layui-input-inline">
			
 
				+      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">日期选择</label>
			
 
				+      <div class="layui-input-block">
			
 
				+        <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">行内表单</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" name="number" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">密码</label>
			
 
				+    <div class="layui-input-inline">
			
 
				+      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
			
 
				+    </div>
			
 
				+    <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">范围</label>
			
 
				+      <div class="layui-input-inline" style="width: 100px;">
			
 
				+        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+      <div class="layui-form-mid">-</div>
			
 
				+      <div class="layui-input-inline" style="width: 100px;">
			
 
				+        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">单行选择框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <select name="interest" lay-filter="aihao">
			
 
				+        <option value=""></option>
			
 
				+        <option value="0">写作</option>
			
 
				+        <option value="1" selected>阅读</option>
			
 
				+        <option value="2">游戏</option>
			
 
				+        <option value="3">音乐</option>
			
 
				+        <option value="4">旅行</option>
			
 
				+      </select>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div class="layui-form-item">
			
 
				+    <label class="layui-form-label">行内选择框</label>
			
 
				+    <div class="layui-input-inline">
			
 
				+      <select name="quiz1">
			
 
				+        <option value="">请选择省</option>
			
 
				+        <option value="浙江" selected>浙江省</option>
			
 
				+        <option value="你的工号">江西省</option>
			
 
				+        <option value="你最喜欢的老师">福建省</option>
			
 
				+      </select>
			
 
				+    </div>
			
 
				+    <div class="layui-input-inline">
			
 
				+      <select name="quiz2">
			
 
				+        <option value="">请选择市</option>
			
 
				+        <option value="杭州">杭州</option>
			
 
				+        <option value="宁波" disabled>宁波</option>
			
 
				+        <option value="温州">温州</option>
			
 
				+        <option value="温州">台州</option>
			
 
				+        <option value="温州">绍兴</option>
			
 
				+      </select>
			
 
				+    </div>
			
 
				+    <div class="layui-input-inline">
			
 
				+      <select name="quiz3">
			
 
				+        <option value="">请选择县/区</option>
			
 
				+        <option value="西湖区">西湖区</option>
			
 
				+        <option value="余杭区">余杭区</option>
			
 
				+        <option value="拱墅区">临安市</option>
			
 
				+      </select>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item" pane>
			
 
				+    <label class="layui-form-label">开关-开</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item" pane>
			
 
				+    <label class="layui-form-label">单选框</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <input type="radio" name="sex" value="男" title="男" checked>
			
 
				+      <input type="radio" name="sex" value="女" title="女">
			
 
				+      <input type="radio" name="sex" value="禁" title="禁用" disabled>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item layui-form-text">
			
 
				+    <label class="layui-form-label">文本域</label>
			
 
				+    <div class="layui-input-block">
			
 
				+      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-form-item">
			
 
				+    <button class="layui-btn" lay-submit lay-filter="demo2">跳转式提交</button>
			
 
				+  </div>
			
 
				+</form>
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/form.html" tppabs="http://www.layui.com/doc/element/form.html" target="_blank">表单元素文档</a>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html" target="_blank">表单组件文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+        
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['form', 'layedit', 'laydate'], function(){
			
 
				+  var form = layui.form
			
 
				+  ,layer = layui.layer
			
 
				+  ,layedit = layui.layedit
			
 
				+  ,laydate = layui.laydate;
			
 
				+  
			
 
				+  //日期
			
 
				+  laydate.render({
			
 
				+    elem: '#date'
			
 
				+  });
			
 
				+  laydate.render({
			
 
				+    elem: '#date1'
			
 
				+  });
			
 
				+  
			
 
				+  //创建一个编辑器
			
 
				+  var editIndex = layedit.build('LAY_demo_editor');
			
 
				+ 
			
 
				+  //自定义验证规则
			
 
				+  form.verify({
			
 
				+    title: function(value){
			
 
				+      if(value.length < 5){
			
 
				+        return '标题至少得5个字符啊';
			
 
				+      }
			
 
				+    }
			
 
				+    ,pass: [
			
 
				+      /^[\S]{6,12}$/
			
 
				+      ,'密码必须6到12位，且不能出现空格'
			
 
				+    ]
			
 
				+    ,content: function(value){
			
 
				+      layedit.sync(editIndex);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //监听指定开关
			
 
				+  form.on('switch(switchTest)', function(data){
			
 
				+    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
			
 
				+      offset: '6px'
			
 
				+    });
			
 
				+    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
			
 
				+  });
			
 
				+  
			
 
				+  //监听提交
			
 
				+  form.on('submit(demo1)', function(data){
			
 
				+    layer.alert(JSON.stringify(data.field), {
			
 
				+      title: '最终的提交信息'
			
 
				+    })
			
 
				+    return false;
			
 
				+  });
			
 
				+ 
			
 
				+  //表单赋值
			
 
				+  layui.$('#LAY-component-form-setval').on('click', function(){
			
 
				+    form.val('example', {
			
 
				+      "username": "贤心" // "name": "value"
			
 
				+      ,"password": "123456"
			
 
				+      ,"interest": 1
			
 
				+      ,"like[write]": true //复选框选中状态
			
 
				+      ,"close": true //开关状态
			
 
				+      ,"sex": "女"
			
 
				+      ,"desc": "我爱 layui"
			
 
				+    });
			
 
				+  });
			
 
				+  
			
 
				+  //表单取值
			
 
				+  layui.$('#LAY-component-form-getval').on('click', function(){
			
 
				+    var data = form.val('example');
			
 
				+    alert(JSON.stringify(data));
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/grid.html
+++ b/demo/grid.html
@@ -0,0 +1,638 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@栅格 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+<style>
			
 
				+.site-demo .layui-row{margin-bottom: 10px;}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->          
			
 
				+          
			
 
				+<div style="margin: 0 auto; max-width: 1140px;">
			
 
				+ 
			
 
				+  <blockquote class="layui-elem-quote">注意：下述演示中的颜色只是做一个区分作用，并非栅格内置。</blockquote>
			
 
				+   
			
 
				+  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			
 
				+    <legend>始终等比例水平排列</legend>
			
 
				+  </fieldset>
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-xs6">
			
 
				+      <div class="grid-demo grid-demo-bg1">6/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs6">
			
 
				+      <div class="grid-demo">6/12</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-xs3">
			
 
				+      <div class="grid-demo grid-demo-bg1">3/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs3">
			
 
				+      <div class="grid-demo">3/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs3">
			
 
				+      <div class="grid-demo grid-demo-bg1">3/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs3">
			
 
				+      <div class="grid-demo">3/12</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+ 
			
 
				+  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			
 
				+    <legend>移动设备、桌面端的组合响应式展现</legend>
			
 
				+  </fieldset>
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-xs12 layui-col-md8">
			
 
				+      <div class="grid-demo grid-demo-bg1">移动：12/12、桌面：8/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs6 layui-col-md4">
			
 
				+      <div class="grid-demo">移动：6/12、桌面：4/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs6 layui-col-md12">
			
 
				+      <div class="grid-demo grid-demo-bg2">移动：6/12、桌面：12/12</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+    <legend>移动设备、平板、桌面端的复杂组合响应式展现</legend>
			
 
				+  </fieldset>
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
			
 
				+      <div class="grid-demo grid-demo-bg1">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
			
 
				+      <div class="grid-demo layui-bg-red">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
			
 
				+      <div class="grid-demo layui-bg-blue">移动：4/12 | 平板：12/12 | 桌面：4/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
			
 
				+      <div class="grid-demo layui-bg-green">移动：4/12 | 平板：7/12 | 桌面：8/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
			
 
				+      <div class="grid-demo layui-bg-black">移动：4/12 | 平板：5/12 | 桌面：4/12</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <fieldset class="layui-elem-field layui-field-title"  style="margin-top: 50px;">
			
 
				+    <legend>常规布局：从小屏幕堆叠到桌面水平排列</legend>
			
 
				+  </fieldset>
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo">1/12</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-md9">
			
 
				+      <div class="grid-demo grid-demo-bg1">75%</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md3">
			
 
				+      <div class="grid-demo">25%</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-md4">
			
 
				+      <div class="grid-demo grid-demo-bg1">33.33%</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md4">
			
 
				+      <div class="grid-demo">33.33%</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md4">
			
 
				+      <div class="grid-demo grid-demo-bg1">33.33%</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-md6">
			
 
				+      <div class="grid-demo grid-demo-bg1">50%</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md6">
			
 
				+      <div class="grid-demo">50%</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+    <legend>列间隔</legend>
			
 
				+  </fieldset>
			
 
				+   
			
 
				+  <div class="layui-row layui-col-space1">
			
 
				+    <div class="layui-col-md3">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/4</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md3">
			
 
				+      <div class="grid-demo">1/4</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md3">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/4</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md3">
			
 
				+      <div class="grid-demo">1/4</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <div class="layui-row layui-col-space5">
			
 
				+    <div class="layui-col-md4">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/3</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md4">
			
 
				+      <div class="grid-demo">1/3</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md4">
			
 
				+      <div class="grid-demo grid-demo-bg1">1/3</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <div class="layui-row layui-col-space10">
			
 
				+    <div class="layui-col-md9">
			
 
				+      <div class="grid-demo grid-demo-bg1">9/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md3">
			
 
				+      <div class="grid-demo">3/12</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <div class="layui-row layui-col-space15">
			
 
				+    <div class="layui-col-md7">
			
 
				+      <div class="grid-demo grid-demo-bg1">7/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md5">
			
 
				+      <div class="grid-demo">5/12</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <div class="layui-row layui-col-space30">
			
 
				+    <div class="layui-col-md7">
			
 
				+      <div class="grid-demo grid-demo-bg1">7/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md5">
			
 
				+      <div class="grid-demo">5/12</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+    <legend>列偏移</legend>
			
 
				+  </fieldset> 
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-md4">
			
 
				+      <div class="grid-demo grid-demo-bg1">4/12</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md4 layui-col-md-offset4">
			
 
				+      <div class="grid-demo">偏移4列</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1 layui-col-md-offset5">
			
 
				+      <div class="grid-demo grid-demo-bg1">偏移5列</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md1">
			
 
				+      <div class="grid-demo">不偏移</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-md3 layui-col-md-offset3">
			
 
				+      <div class="grid-demo grid-demo-bg1">偏移3列</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md3 layui-col-md-offset1">
			
 
				+      <div class="grid-demo">偏移1列</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+   
			
 
				+  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+    <legend>栅格嵌套</legend>
			
 
				+  </fieldset> 
			
 
				+   
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-md5">
			
 
				+      <div class="layui-row grid-demo">
			
 
				+        <div class="layui-col-md3">
			
 
				+          <div class="grid-demo grid-demo-bg1">内部列</div>
			
 
				+        </div>
			
 
				+        <div class="layui-col-md9">
			
 
				+          <div class="grid-demo grid-demo-bg2">内部列</div>
			
 
				+        </div>
			
 
				+        <div class="layui-col-md12">
			
 
				+          <div class="grid-demo grid-demo-bg3">内部列</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-md7">
			
 
				+      <div class="layui-row grid-demo grid-demo-bg1">
			
 
				+        <div class="layui-col-md12">
			
 
				+          <div class="grid-demo">内部列</div>
			
 
				+        </div>
			
 
				+        <div class="layui-col-md9">
			
 
				+          <div class="grid-demo grid-demo-bg2">内部列</div>
			
 
				+        </div>
			
 
				+        <div class="layui-col-md3">
			
 
				+          <div class="grid-demo grid-demo-bg3">内部列</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+</div>
			
 
				+ 
			
 
				+<div class="layui-fluid">
			
 
				+  <fieldset class="layui-elem-field layui-field-title">
			
 
				+    <legend>流体容器（宽度自适应，不固定）</legend>
			
 
				+  </fieldset>
			
 
				+  <div class="layui-row">
			
 
				+    <div class="layui-col-sm3">
			
 
				+      <div class="grid-demo grid-demo-bg1">25%</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-sm3">
			
 
				+      <div class="grid-demo">25%</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-sm3">
			
 
				+      <div class="grid-demo grid-demo-bg1">25%</div>
			
 
				+    </div>
			
 
				+    <div class="layui-col-sm3">
			
 
				+      <div class="grid-demo">25%</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html" target="_blank">栅格布局文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+ 
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/index.html
+++ b/demo/index.html
@@ -0,0 +1,554 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@在线示例 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin site-demo-fixed">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-body site-demo">
			
 
				+    <form id="LAY_demoForm" target="LAY_demo" method="post">
			
 
				+    <div class="site-demo-editor">
			
 
				+      <div class="site-demo-area">
			
 
				+        <textarea id="LAY_editor" spellcheck="false" placeholder="在此处输入代码">
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
			
 
				+  <title>镜像站@layui 调试预览</title>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355" media="all">
			
 
				+  <style>
			
 
				+    body{margin: 10px;}
			
 
				+    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+ 
			
 
				+<table class="layui-hide" id="demo" lay-filter="test"></table>
			
 
				+ 
			
 
				+<script type="text/html" id="barDemo">
			
 
				+  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
			
 
				+  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
			
 
				+</script>
			
 
				+ 
			
 
				+<div class="layui-tab layui-tab-brief" lay-filter="demo">
			
 
				+  <ul class="layui-tab-title">
			
 
				+    <li class="layui-this">演示说明</li>
			
 
				+    <li>日期</li>
			
 
				+    <li>分页</li>
			
 
				+    <li>上传</li>
			
 
				+    <li>滑块</li>
			
 
				+  </ul>
			
 
				+  <div class="layui-tab-content">
			
 
				+    <div class="layui-tab-item layui-show">
			
 
				+      <div class="layui-carousel" id="test1">
			
 
				+        <div carousel-item>
			
 
				+          <div><p class="layui-bg-green demo-carousel">在这里，你将以最直观的形式体验 layui！</p></div>
			
 
				+          <div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>
			
 
				+          <div><p class="layui-bg-blue demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
			
 
				+          <div><p class="layui-bg-orange demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>
			
 
				+          <div><p class="layui-bg-cyan demo-carousel">你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可</p></div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-tab-item">
			
 
				+      <div id="laydateDemo"></div>
			
 
				+    </div>
			
 
				+    <div class="layui-tab-item">
			
 
				+      <div id="pageDemo"></div>
			
 
				+    </div>
			
 
				+    <div class="layui-tab-item">
			
 
				+      <div class="layui-upload-drag" id="uploadDemo">
			
 
				+        <i class="layui-icon">&#xe67c;</i>
			
 
				+        <p>点击上传，或将文件拖拽到此处</p>
			
 
				+        <div class="layui-hide" id="uploadDemoView">
			
 
				+          <hr>
			
 
				+          <img src="" alt="上传成功后渲染" style="max-width: 100%">
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-tab-item">
			
 
				+      <div id="sliderDemo" style="margin: 50px 20px;"></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+
			
 
				+<blockquote class="layui-elem-quote layui-hide layui-text" id="footer">当前版本：layui v{{ layui.v }}</blockquote>
			
 
				+
			
 
				+  
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  version: '1632428048355' //为了更新 js 缓存，可忽略
			
 
				+});
			
 
				+ 
			
 
				+//加载模块  
			
 
				+layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
			
 
				+  //得到各种内置组件
			
 
				+  var layer = layui.layer //弹层
			
 
				+  ,laypage = layui.laypage //分页
			
 
				+  ,laydate = layui.laydate //日期
			
 
				+  ,table = layui.table //表格
			
 
				+  ,carousel = layui.carousel //轮播
			
 
				+  ,upload = layui.upload //上传
			
 
				+  ,element = layui.element //元素操作
			
 
				+  ,slider = layui.slider //滑块
			
 
				+  ,dropdown = layui.dropdown //下拉菜单
			
 
				+  
			
 
				+  //向世界问个好
			
 
				+  layer.msg('Hello World');
			
 
				+  
			
 
				+  //监听Tab切换
			
 
				+  element.on('tab(demo)', function(data){
			
 
				+    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
			
 
				+      tips: 1
			
 
				+    });
			
 
				+  });
			
 
				+  
			
 
				+  //执行一个 table 实例
			
 
				+  table.render({
			
 
				+    elem: '#demo'
			
 
				+    ,height: 420
			
 
				+    ,url: '/demo/table/user/' //数据接口
			
 
				+    ,url: '../demo/table/user/-page=1&limit=20.js' //数据接口
			
 
				+    ,title: '用户表'
			
 
				+    ,page: true //开启分页
			
 
				+    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
			
 
				+    ,totalRow: true //开启合计行
			
 
				+    ,cols: [[ //表头
			
 
				+      {type: 'checkbox', fixed: 'left'}
			
 
				+      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
			
 
				+      ,{field: 'username', title: '用户名', width:80}
			
 
				+      ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
			
 
				+      ,{field: 'sex', title: '性别', width:80, sort: true}
			
 
				+      ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 分'}
			
 
				+      ,{field: 'city', title: '城市', width:150} 
			
 
				+      ,{field: 'sign', title: '签名', width: 200}
			
 
				+      ,{field: 'classify', title: '职业', width: 100}
			
 
				+      ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
			
 
				+      ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
			
 
				+    ]]
			
 
				+  });
			
 
				+  
			
 
				+  //监听头工具栏事件
			
 
				+  table.on('toolbar(test)', function(obj){
			
 
				+    var checkStatus = table.checkStatus(obj.config.id)
			
 
				+    ,data = checkStatus.data; //获取选中的数据
			
 
				+    switch(obj.event){
			
 
				+      case 'add':
			
 
				+        layer.msg('添加');
			
 
				+      break;
			
 
				+      case 'update':
			
 
				+        if(data.length === 0){
			
 
				+          layer.msg('请选择一行');
			
 
				+        } else if(data.length > 1){
			
 
				+          layer.msg('只能同时编辑一个');
			
 
				+        } else {
			
 
				+          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
			
 
				+        }
			
 
				+      break;
			
 
				+      case 'delete':
			
 
				+        if(data.length === 0){
			
 
				+          layer.msg('请选择一行');
			
 
				+        } else {
			
 
				+          layer.msg('删除');
			
 
				+        }
			
 
				+      break;
			
 
				+    };
			
 
				+  });
			
 
				+  
			
 
				+  //监听行工具事件
			
 
				+  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			
 
				+    var data = obj.data //获得当前行数据
			
 
				+    ,layEvent = obj.event; //获得 lay-event 对应的值
			
 
				+    if(layEvent === 'detail'){
			
 
				+      layer.msg('查看操作');
			
 
				+    } else if(layEvent === 'more'){
			
 
				+      //下拉菜单
			
 
				+      dropdown.render({
			
 
				+        elem: this //触发事件的 DOM 对象
			
 
				+        ,show: true //外部事件触发即显示
			
 
				+        ,data: [{
			
 
				+          title: '编辑'
			
 
				+          ,id: 'edit'
			
 
				+        },{
			
 
				+          title: '删除'
			
 
				+          ,id: 'del'
			
 
				+        }]
			
 
				+        ,click: function(menudata){
			
 
				+          if(menudata.id === 'del'){
			
 
				+            layer.confirm('真的删除行么', function(index){
			
 
				+              obj.del(); //删除对应行（tr）的DOM结构
			
 
				+              layer.close(index);
			
 
				+              //向服务端发送删除指令
			
 
				+            });
			
 
				+          } else if(menudata.id === 'edit'){
			
 
				+            layer.msg('编辑操作，当前行 ID:'+ data.id);
			
 
				+          }
			
 
				+        }
			
 
				+        ,align: 'right' //右对齐弹出（v2.6.8 新增）
			
 
				+        ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
			
 
				+      })
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //执行一个轮播实例
			
 
				+  carousel.render({
			
 
				+    elem: '#test1'
			
 
				+    ,width: '100%' //设置容器宽度
			
 
				+    ,height: 200
			
 
				+    ,arrow: 'none' //不显示箭头
			
 
				+    ,anim: 'fade' //切换动画方式
			
 
				+  });
			
 
				+  
			
 
				+  //将日期直接嵌套在指定容器中
			
 
				+  var dateIns = laydate.render({
			
 
				+    elem: '#laydateDemo'
			
 
				+    ,position: 'static'
			
 
				+    ,calendar: true //是否开启公历重要节日
			
 
				+    ,mark: { //标记重要日子
			
 
				+      '0-10-14': '生日'
			
 
				+      ,'2020-01-18': '小年'
			
 
				+      ,'2020-01-24': '除夕'
			
 
				+      ,'2020-01-25': '春节'
			
 
				+      ,'2020-02-01': '上班'
			
 
				+    } 
			
 
				+    ,done: function(value, date, endDate){
			
 
				+      if(date.year == 2017 && date.month == 11 && date.date == 30){
			
 
				+        dateIns.hint('一不小心就月底了呢');
			
 
				+      }
			
 
				+    }
			
 
				+    ,change: function(value, date, endDate){
			
 
				+      layer.msg(value)
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //分页
			
 
				+  laypage.render({
			
 
				+    elem: 'pageDemo' //分页容器的id
			
 
				+    ,count: 1000 //数据总数
			
 
				+    ,limit: 10 //每页显示的数据条数
			
 
				+    ,skin: '#1E9FFF' //自定义选中色值
			
 
				+    //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
			
 
				+    ,jump: function(obj, first){
			
 
				+      if(!first){
			
 
				+        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
			
 
				+      }
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //上传
			
 
				+  upload.render({
			
 
				+    elem: '#uploadDemo'
			
 
				+    ,url: '' //此处配置你自己的上传接口即可
			
 
				+    ,done: function(res){
			
 
				+      layer.msg('上传成功');
			
 
				+      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
			
 
				+      console.log(res)
			
 
				+    }
			
 
				+    ,before: function(){
			
 
				+      layer.msg('上传中', {icon: 16, time: 0});
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //滑块
			
 
				+  var sliderInst = slider.render({
			
 
				+    elem: '#sliderDemo'
			
 
				+    ,input: true //输入框
			
 
				+  });
			
 
				+  
			
 
				+  //底部信息
			
 
				+  var footerTpl = lay('#footer')[0].innerHTML;
			
 
				+  lay('#footer').html(layui.laytpl(footerTpl).render({}))
			
 
				+  .removeClass('layui-hide');
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>        
			
 
				+        </textarea>
			
 
				+        <input type="hidden" name="html" id="LAY_demoCodes">
			
 
				+      </div>
			
 
				+      <div class="site-demo-btn">
			
 
				+        <button type="button" class="layui-btn" id="LAY_demo_run">运行代码</button>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    </form>
			
 
				+    <div class="site-demo-result">
			
 
				+      <iframe frameborder="0" id="LAY_demo" name="LAY_demo"></iframe>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/laydate.html
+++ b/demo/laydate.html
@@ -0,0 +1,960 @@
 
				+ 
			
 
				+ <!DOCTYPE html>
			
 
				+<html class="site-demo-overflow">
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@layDate - JS 日期和时间选择器组件/插件 - 在线演示 - Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+  <style>
			
 
				+  .site-demo-body .layui-form-label{width: 100px;}
			
 
				+  .site-demo-laydate .layui-inline{margin: 0 20px 20px 0;}
			
 
				+  @media screen and (max-width: 450px){
			
 
				+    .layui-form-item .layui-input-inline{margin-left: 130px;}
			
 
				+  }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<blockquote class="layui-elem-quote">
			
 
				+  layDate 是目前 layui 独立维护的三大组件之一。在 layui 2.0 的版本中，layDate 也完成了一次重写。
			
 
				+  <a class="layui-btn layui-btn-normal" href="../laydate/index-1.htm" tppabs="https://www.layui.com/laydate/" target="_blank">layDate 官网</a>
			
 
				+</blockquote>
			
 
				+      
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>常规用法</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">中文版</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">国际版</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test1-1" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+  <a name="range"> </a>
			
 
				+  
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>其它选择器</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">年选择器</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test2" placeholder="yyyy">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">年月选择器</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test3" placeholder="yyyy-MM">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">时间选择器</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test4" placeholder="HH:mm:ss">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">日期时间选择器</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+ 
			
 
				+<!-- 示例-970 -->
			
 
				+
			
 
				+  
			
 
				+          
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>范围选择</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">日期范围</label>
			
 
				+      <div class="layui-inline" id="test6">
			
 
				+        <div class="layui-input-inline">
			
 
				+          <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
			
 
				+        </div>
			
 
				+        <div class="layui-form-mid">-</div>
			
 
				+        <div class="layui-input-inline">
			
 
				+          <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">年范围</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test7" placeholder=" - ">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">年月范围</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test8" placeholder=" - ">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">时间范围</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test9" placeholder=" - ">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">日期时间范围</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test10" placeholder=" - ">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>自定义格式</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">请选择日期</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test11" placeholder="yyyy年MM月dd日">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">请选择日期</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test12" placeholder="dd/MM/yyyy">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">请选择月份</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test13" placeholder="yyyyMMdd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">请选择时间</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test14" placeholder="H点m分">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">请选择范围</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test15" placeholder=" ~ ">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">请选择范围</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test16" placeholder="开始 到 结束">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>公历节日和自定义重要日子</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">开启公历节日</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test17" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">自定义重要日</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test18" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>控制可选的日期与时间</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">限定可选日期</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test-limit1" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">前后若干天可选</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test-limit2" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">限定可选时间</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test-limit3" placeholder="HH:mm:ss">
			
 
				+      </div>
			
 
				+      <div class="layui-form-mid layui-word-aux">
			
 
				+        这里以控制在9:30-17:30为例
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>同时绑定多个</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <input type="text" class="layui-input test-item" placeholder="yyyy-MM-dd">
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <input type="text" class="layui-input test-item" placeholder="yyyy-MM-dd">
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <input type="text" class="layui-input test-item" placeholder="yyyy-MM-dd">
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>其它功能示例</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">初始赋值</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test19" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">选中后的回调</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test20" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">日期切换的回调</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test21" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">不出现底部栏</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test22" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">只出现确定按钮</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test23" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">自定义事件</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test24" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label" id="test25-1">点我触发</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test25" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label" id="test26-1">双击我触发</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test26" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">日期只读</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test27" readonly placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">非input元素</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <div id="test28" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;"></div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>其它主题</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <div class="layui-form-item">
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">墨绿主题</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test29" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">自定义颜色主题</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test30" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-inline">
			
 
				+      <label class="layui-form-label">格子主题</label>
			
 
				+      <div class="layui-input-inline">
			
 
				+        <input type="text" class="layui-input" id="test31" placeholder="yyyy-MM-dd">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div> 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>直接嵌套显示</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="site-demo-laydate">
			
 
				+  <div class="layui-inline" id="test-n1"></div>
			
 
				+  <div class="layui-inline" id="test-n2"></div>
			
 
				+  <div class="layui-inline" id="test-n3"></div>
			
 
				+  <div class="layui-inline" id="test-n4"></div>
			
 
				+</div>
			
 
				+          
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p>与独立组件layDate最大的不同在于，你现在需要自己绑定事件。</p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html" target="_blank">layDate文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('laydate', function(){
			
 
				+  var laydate = layui.laydate;
			
 
				+  
			
 
				+  //常规用法
			
 
				+  laydate.render({
			
 
				+    elem: '#test1'
			
 
				+  });
			
 
				+  
			
 
				+  //国际版
			
 
				+  laydate.render({
			
 
				+    elem: '#test1-1'
			
 
				+    ,lang: 'en'
			
 
				+  });
			
 
				+  
			
 
				+  //年选择器
			
 
				+  laydate.render({
			
 
				+    elem: '#test2'
			
 
				+    ,type: 'year'
			
 
				+  });
			
 
				+  
			
 
				+  //年月选择器
			
 
				+  laydate.render({
			
 
				+    elem: '#test3'
			
 
				+    ,type: 'month'
			
 
				+  });
			
 
				+  
			
 
				+  //时间选择器
			
 
				+  laydate.render({
			
 
				+    elem: '#test4'
			
 
				+    ,type: 'time'
			
 
				+  });
			
 
				+  
			
 
				+  //日期时间选择器
			
 
				+  laydate.render({
			
 
				+    elem: '#test5'
			
 
				+    ,type: 'datetime'
			
 
				+  });
			
 
				+  
			
 
				+  //日期范围
			
 
				+  laydate.render({
			
 
				+    elem: '#test6'
			
 
				+    //设置开始日期、日期日期的 input 选择器
			
 
				+    //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
			
 
				+    ,range: ['#test-startDate-1', '#test-endDate-1']
			
 
				+  });
			
 
				+  
			
 
				+  //年范围
			
 
				+  laydate.render({
			
 
				+    elem: '#test7'
			
 
				+    ,type: 'year'
			
 
				+    ,range: true
			
 
				+  });
			
 
				+  
			
 
				+  //年月范围
			
 
				+  laydate.render({
			
 
				+    elem: '#test8'
			
 
				+    ,type: 'month'
			
 
				+    ,range: true
			
 
				+  });
			
 
				+  
			
 
				+  //时间范围
			
 
				+  laydate.render({
			
 
				+    elem: '#test9'
			
 
				+    ,type: 'time'
			
 
				+    ,range: true
			
 
				+  });
			
 
				+  
			
 
				+  //日期时间范围
			
 
				+  laydate.render({
			
 
				+    elem: '#test10'
			
 
				+    ,type: 'datetime'
			
 
				+    ,range: true
			
 
				+  });
			
 
				+  
			
 
				+  //自定义格式
			
 
				+  laydate.render({
			
 
				+    elem: '#test11'
			
 
				+    ,format: 'yyyy年MM月dd日'
			
 
				+  });
			
 
				+  laydate.render({
			
 
				+    elem: '#test12'
			
 
				+    ,format: 'dd/MM/yyyy'
			
 
				+  });
			
 
				+  laydate.render({
			
 
				+    elem: '#test13'
			
 
				+    ,format: 'yyyyMMdd'
			
 
				+  });
			
 
				+  laydate.render({
			
 
				+    elem: '#test14'
			
 
				+    ,type: 'time'
			
 
				+    ,format: 'H点m分'
			
 
				+  });
			
 
				+  laydate.render({
			
 
				+    elem: '#test15'
			
 
				+    ,type: 'month'
			
 
				+    ,range: '~'
			
 
				+    ,format: 'yyyy-MM'
			
 
				+  });
			
 
				+  laydate.render({
			
 
				+    elem: '#test16'
			
 
				+    ,type: 'datetime'
			
 
				+    ,range: '到'
			
 
				+    ,format: 'yyyy年M月d日H时m分s秒'
			
 
				+  });
			
 
				+  
			
 
				+  //开启公历节日
			
 
				+  laydate.render({
			
 
				+    elem: '#test17'
			
 
				+    ,calendar: true
			
 
				+  });
			
 
				+  
			
 
				+  //自定义重要日
			
 
				+  laydate.render({
			
 
				+    elem: '#test18'
			
 
				+    ,mark: {
			
 
				+      '0-10-14': '生日'
			
 
				+      ,'0-12-31': '跨年' //每年的日期
			
 
				+      ,'0-0-10': '工资' //每月某天
			
 
				+      ,'0-0-15': '月中'
			
 
				+      ,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
			
 
				+      ,'2099-10-14': '呵呵'
			
 
				+    }
			
 
				+    ,done: function(value, date){
			
 
				+      if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
			
 
				+        layer.msg('这一天是：中国人民抗日战争胜利72周年');
			
 
				+      }
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //限定可选日期
			
 
				+  var ins22 = laydate.render({
			
 
				+    elem: '#test-limit1'
			
 
				+    ,min: '2016-10-14'
			
 
				+    ,max: '2080-10-14'
			
 
				+    ,ready: function(){
			
 
				+      ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //前后若干天可选，这里以7天为例
			
 
				+  laydate.render({
			
 
				+    elem: '#test-limit2'
			
 
				+    ,min: -7
			
 
				+    ,max: 7
			
 
				+  });
			
 
				+  
			
 
				+  //限定可选时间
			
 
				+  laydate.render({
			
 
				+    elem: '#test-limit3'
			
 
				+    ,type: 'time'
			
 
				+    ,min: '09:30:00'
			
 
				+    ,max: '17:30:00'
			
 
				+    ,btns: ['clear', 'confirm']
			
 
				+  });
			
 
				+  
			
 
				+  //同时绑定多个
			
 
				+  lay('.test-item').each(function(){
			
 
				+    laydate.render({
			
 
				+      elem: this
			
 
				+      ,trigger: 'click'
			
 
				+    });
			
 
				+  });
			
 
				+  
			
 
				+  //初始赋值
			
 
				+  laydate.render({
			
 
				+    elem: '#test19'
			
 
				+    ,value: '1989-10-14'
			
 
				+    ,isInitValue: true
			
 
				+  });
			
 
				+  
			
 
				+  //选中后的回调
			
 
				+  laydate.render({
			
 
				+    elem: '#test20'
			
 
				+    ,done: function(value, date){
			
 
				+      layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //日期切换的回调
			
 
				+  laydate.render({
			
 
				+    elem: '#test21'
			
 
				+    ,change: function(value, date){
			
 
				+      layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
			
 
				+    }
			
 
				+  });
			
 
				+  //不出现底部栏
			
 
				+  laydate.render({
			
 
				+    elem: '#test22'
			
 
				+    ,showBottom: false
			
 
				+  });
			
 
				+  
			
 
				+  //只出现确定按钮
			
 
				+  laydate.render({
			
 
				+    elem: '#test23'
			
 
				+    ,btns: ['confirm']
			
 
				+  });
			
 
				+  
			
 
				+  //自定义事件
			
 
				+  laydate.render({
			
 
				+    elem: '#test24'
			
 
				+    ,trigger: 'mousedown'
			
 
				+  });
			
 
				+  
			
 
				+  //点我触发
			
 
				+  laydate.render({
			
 
				+    elem: '#test25'
			
 
				+    ,eventElem: '#test25-1'
			
 
				+    ,trigger: 'click'
			
 
				+  });
			
 
				+  
			
 
				+  //双击我触发
			
 
				+  lay('#test26-1').on('dblclick', function(){
			
 
				+    laydate.render({
			
 
				+      elem: '#test26'
			
 
				+      ,show: true
			
 
				+      ,closeStop: '#test26-1'
			
 
				+    });
			
 
				+  });
			
 
				+  
			
 
				+  //日期只读
			
 
				+  laydate.render({
			
 
				+    elem: '#test27'
			
 
				+    ,trigger: 'click'
			
 
				+  });
			
 
				+  
			
 
				+  //非input元素
			
 
				+  laydate.render({
			
 
				+    elem: '#test28'
			
 
				+  });
			
 
				+  
			
 
				+  //墨绿主题
			
 
				+  laydate.render({
			
 
				+    elem: '#test29'
			
 
				+    ,theme: 'molv'
			
 
				+  });
			
 
				+  
			
 
				+  //自定义颜色
			
 
				+  laydate.render({
			
 
				+    elem: '#test30'
			
 
				+    ,theme: '#393D49'
			
 
				+  });
			
 
				+  
			
 
				+  //格子主题
			
 
				+  laydate.render({
			
 
				+    elem: '#test31'
			
 
				+    ,theme: 'grid'
			
 
				+  });
			
 
				+  
			
 
				+  
			
 
				+  //直接嵌套显示
			
 
				+  laydate.render({
			
 
				+    elem: '#test-n1'
			
 
				+    ,position: 'static'
			
 
				+  });
			
 
				+  laydate.render({
			
 
				+    elem: '#test-n2'
			
 
				+    ,position: 'static'
			
 
				+    ,lang: 'en'
			
 
				+  });
			
 
				+  laydate.render({
			
 
				+    elem: '#test-n3'
			
 
				+    ,type: 'month'
			
 
				+    ,position: 'static'
			
 
				+  });
			
 
				+  laydate.render({
			
 
				+    elem: '#test-n4'
			
 
				+    ,type: 'time'
			
 
				+    ,position: 'static'
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/layedit.html
+++ b/demo/layedit.html
@@ -0,0 +1,404 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@ 富文本编辑器- 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>完整功能（没错，目前工具栏只有这么多）</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<textarea class="layui-textarea" id="LAY_demo1" style="display: none">
			
 
				+  
			
 
				+  把编辑器的初始内容放在这textarea即可
			
 
				+</textarea>
			
 
				+ 
			
 
				+<div class="site-demo-button" style="margin-top: 20px;">
			
 
				+  <button class="layui-btn site-demo-layedit" data-type="content">获取编辑器内容</button>
			
 
				+  <button class="layui-btn site-demo-layedit" data-type="text">获取编辑器纯文本内容</button>
			
 
				+  <button class="layui-btn site-demo-layedit" data-type="selection">获取编辑器选中内容</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>自定义工具栏</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div style="margin-bottom: 20px; width: 500px;">
			
 
				+  <textarea class="layui-textarea" id="LAY_demo2" style="display: none"></textarea>
			
 
				+</div>               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+  <!-- 通用-970*90 -->
			
 
				+  <ins class="adsbygoogle"
			
 
				+     style="display:inline-block;width:970px;height:90px"
			
 
				+     data-ad-client="ca-pub-6111334333458862"
			
 
				+     data-ad-slot="6835627838"></ins>
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html" target="_blank">layedit文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+  <script>
			
 
				+    layui.use('layedit', function(){
			
 
				+      var layedit = layui.layedit
			
 
				+              ,$ = layui.jquery;
			
 
				+
			
 
				+      //构建一个默认的编辑器
			
 
				+      var index = layedit.build('LAY_demo1');
			
 
				+
			
 
				+      //编辑器外部操作
			
 
				+      var active = {
			
 
				+        content: function(){
			
 
				+          alert(layedit.getContent(index)); //获取编辑器内容
			
 
				+        }
			
 
				+        ,text: function(){
			
 
				+          alert(layedit.getText(index)); //获取编辑器纯文本内容
			
 
				+        }
			
 
				+        ,selection: function(){
			
 
				+          alert(layedit.getSelection(index));
			
 
				+        }
			
 
				+      };
			
 
				+
			
 
				+      $('.site-demo-layedit').on('click', function(){
			
 
				+        var type = $(this).data('type');
			
 
				+        active[type] ? active[type].call(this) : '';
			
 
				+      });
			
 
				+
			
 
				+      //自定义工具栏
			
 
				+      layedit.build('LAY_demo2', {
			
 
				+        tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']
			
 
				+        ,height: 100
			
 
				+      })
			
 
				+    });
			
 
				+  </script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/layer.html
+++ b/demo/layer.html
@@ -0,0 +1,494 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@layer弹出层 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote">
			
 
				+  大部分演示都在 layer 独立组件的官网（<a class="layui-font-blue" href="https://layer.layui.com/" target="_blank">layer.layui.com</a>），与内置的 layer 模块，用法是完全一致的
			
 
				+</blockquote>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>特殊例子</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="layerDemo" style="margin-bottom: 0;">
			
 
				+  <blockquote class="layui-elem-quote layui-quote-nm">
			
 
				+    Tips：为了更清晰演示，每触发下述一个例子之前，都会关闭所有已经演示的层
			
 
				+  </blockquote>
			
 
				+  
			
 
				+  <div class="layui-btn-container" style="margin-top: 30px;">
			
 
				+    <button data-method="setTop" class="layui-btn">多窗口模式 + 层叠置顶 + Esc 关闭</button>
			
 
				+    <button data-method="confirmTrans" class="layui-btn">配置一个透明的询问框</button>
			
 
				+    <button data-method="notice" class="layui-btn">示范一个公告层</button>
			
 
				+  </div>
			
 
				+  <div class="layui-btn-container">
			
 
				+    <button data-method="offset" data-type="t" class="layui-btn layui-btn-normal">上弹出</button>
			
 
				+    <button data-method="offset" data-type="r" class="layui-btn layui-btn-normal">右弹出</button>
			
 
				+    <button data-method="offset" data-type="b" class="layui-btn layui-btn-normal">下弹出</button>
			
 
				+    <button data-method="offset" data-type="l" class="layui-btn layui-btn-normal">左弹出</button>
			
 
				+    <button data-method="offset" data-type="lt" class="layui-btn layui-btn-normal">左上弹出</button>
			
 
				+    <button data-method="offset" data-type="lb" class="layui-btn layui-btn-normal">左下弹出</button>
			
 
				+    <button data-method="offset" data-type="rt" class="layui-btn layui-btn-normal">右上弹出</button>
			
 
				+    <button data-method="offset" data-type="rb" class="layui-btn layui-btn-normal">右下弹出</button>
			
 
				+    <button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出</button>
			
 
				+  </div>
			
 
				+  
			
 
				+  <div style="margin-top: 15px">
			
 
				+     
			
 
				+<!-- 示例-970 -->
			
 
				+
			
 
				+  
			
 
				+  </div>
			
 
				+</div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>更多示例</legend>
			
 
				+</fieldset>
			
 
				+<a class="layui-btn layui-btn-normal" href="https://layer.layui.com/" target="_blank">去 layer 官网查看</a>
			
 
				+   
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html" target="_blank">layer文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('layer', function(){ //独立版的layer无需执行这一句
			
 
				+  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
			
 
				+  
			
 
				+  //触发事件
			
 
				+  var active = {
			
 
				+    setTop: function(){
			
 
				+      var that = this; 
			
 
				+      //多窗口模式，层叠置顶
			
 
				+      layer.open({
			
 
				+        type: 1 //此处以iframe举例
			
 
				+        ,title: '当你选择该窗体时，即会在最顶端'
			
 
				+        ,area: ['390px', '260px']
			
 
				+        ,shade: 0
			
 
				+        ,maxmin: true
			
 
				+        ,offset: [ //为了演示，随机坐标
			
 
				+          Math.random()*($(window).height()-300)
			
 
				+          ,Math.random()*($(window).width()-390)
			
 
				+        ] 
			
 
				+        ,content: '<div style="padding: 15px;">内容标记：'+ new Date().getTime() + '，按 ESC 键可关闭。<br><br>当你的页面有很多很多 layer 窗口，你需要像 Window 窗体那样，点击某个窗口，该窗体就置顶在上面，那么 layer.setTop() 可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优。</div>'
			
 
				+        
			
 
				+        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
			
 
				+        ,yes: function(){
			
 
				+          $(that).click(); 
			
 
				+        }
			
 
				+        ,btn2: function(){
			
 
				+          layer.closeAll();
			
 
				+        }
			
 
				+        
			
 
				+        ,zIndex: layer.zIndex //重点1
			
 
				+        ,success: function(layero, index){
			
 
				+          layer.setTop(layero); //重点2. 保持选中窗口置顶
			
 
				+          
			
 
				+          //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
			
 
				+          layer.escIndex = layer.escIndex || [];
			
 
				+          layer.escIndex.unshift(index);
			
 
				+          //选中当前层时，将当前层索引放置在首位
			
 
				+          layero.on('mousedown', function(){
			
 
				+            var _index = layer.escIndex.indexOf(index);
			
 
				+            if(_index !== -1){
			
 
				+              layer.escIndex.splice(_index, 1); //删除原有索引
			
 
				+            }
			
 
				+            layer.escIndex.unshift(index); //将索引插入到数组首位
			
 
				+          });
			
 
				+        }
			
 
				+        ,end: function(){
			
 
				+          //更新索引
			
 
				+          if(typeof layer.escIndex === 'object'){
			
 
				+            layer.escIndex.splice(0, 1);
			
 
				+          }
			
 
				+        }
			
 
				+      });
			
 
				+    }
			
 
				+    ,confirmTrans: function(){
			
 
				+      //配置一个透明的询问框
			
 
				+      layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
			
 
				+        time: 20000, //20s后自动关闭
			
 
				+        btn: ['明白了', '知道了', '哦']
			
 
				+      });
			
 
				+    }
			
 
				+    ,notice: function(){
			
 
				+      //示范一个公告层
			
 
				+      layer.open({
			
 
				+        type: 1
			
 
				+        ,title: false //不显示标题栏
			
 
				+        ,closeBtn: false
			
 
				+        ,area: '300px;'
			
 
				+        ,shade: 0.8
			
 
				+        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
			
 
				+        ,btn: ['火速围观', '残忍拒绝']
			
 
				+        ,btnAlign: 'c'
			
 
				+        ,moveType: 1 //拖拽模式，0或者1
			
 
				+        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级 ^_^</div>'
			
 
				+        ,success: function(layero){
			
 
				+          var btn = layero.find('.layui-layer-btn');
			
 
				+          btn.find('.layui-layer-btn0').attr({
			
 
				+            href: '../index.html'/*tpa=http://www.layui.com/*/
			
 
				+            ,target: '_blank'
			
 
				+          });
			
 
				+        }
			
 
				+      });
			
 
				+    }
			
 
				+    ,offset: function(othis){
			
 
				+      var type = othis.data('type')
			
 
				+      ,text = othis.text();
			
 
				+      
			
 
				+      layer.open({
			
 
				+        type: 1
			
 
				+        ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
			
 
				+        ,id: 'layerDemo'+type //防止重复弹出
			
 
				+        ,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
			
 
				+        ,btn: '关闭全部'
			
 
				+        ,btnAlign: 'c' //按钮居中
			
 
				+        ,shade: 0 //不显示遮罩
			
 
				+        ,yes: function(){
			
 
				+          layer.closeAll();
			
 
				+        }
			
 
				+      });
			
 
				+    }
			
 
				+  };
			
 
				+  
			
 
				+  $('#layerDemo .layui-btn').on('click', function(){
			
 
				+    var othis = $(this), method = othis.data('method');
			
 
				+    active[method] ? active[method].call(this, othis) : '';
			
 
				+  });
			
 
				+  
			
 
				+  
			
 
				+  //多窗口模式 - esc 键
			
 
				+  $(document).on('keyup', function(e){
			
 
				+    if(e.keyCode === 27){
			
 
				+      layer.close(layer.escIndex ? layer.escIndex[0] : 0);
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/layim.html
+++ b/demo/layim.html
@@ -0,0 +1,763 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@WebIM 网页聊天界面组件 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="https://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+
			
 
				+
			
 
				+  <div class="layui-header header header-demo" autumn>
			
 
				+    <div class="layui-fluid">
			
 
				+      <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+        <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+      </a>
			
 
				+      <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+      <div class="layui-hide-xs site-notice"></div>
			
 
				+
			
 
				+      <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+        <li class="layui-nav-item ">
			
 
				+          <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+        </li>
			
 
				+        <li class="layui-nav-item layui-this">
			
 
				+          <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+        </li>
			
 
				+
			
 
				+        <li class="layui-nav-item">
			
 
				+          <a href="javascript:;">
			
 
				+            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>-->
			
 
				+            周边
			
 
				+          </a>
			
 
				+          <dl class="layui-nav-child layui-nav-child-c">
			
 
				+            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+              <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+              <hr>
			
 
				+            </dd>
			
 
				+
			
 
				+            <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+            <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+          </dl>
			
 
				+        </li>
			
 
				+
			
 
				+        <li class="layui-nav-item layui-hide-xs">
			
 
				+          <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+  <!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+  <![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="https://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="https://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="https://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="https://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="https://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="https://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="https://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="https://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="https://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="https://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="https://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="https://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="https://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="https://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="https://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="https://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="https://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="https://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="https://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="https://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="https://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="https://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="https://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="https://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="https://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="https://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="https://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="https://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="https://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="https://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="https://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<blockquote class="layui-elem-quote">
			
 
				+LayIM 是基于 layui 的一款用于开发网页端聊天系统的纯静态 UI 界面解决方案，其包含的只是一套前端源代码素材和相关的模拟示例，没有后端程序及数据库存储等服务。
			
 
				+</blockquote>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>面板外的操作示例</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="site-demo-button">
			
 
				+  <button class="layui-btn site-demo-layim" data-type="chat">自定义会话</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="message">接受好友的消息</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="messageAudio">接受音频消息</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="messageVideo">接受视频消息</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="messageTemp">接受临时会话消息</button>
			
 
				+  
			
 
				+  <br>
			
 
				+  
			
 
				+  <button class="layui-btn site-demo-layim" data-type="add">申请好友</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="addqun">申请加群</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="addFriend">同意好友</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="addGroup">增加群组到主面板</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="removeFriend">删除主面板好友</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="removeGroup">删除主面板群组</button>
			
 
				+  
			
 
				+  <br>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="setGray">置灰离线好友</button>
			
 
				+  <button class="layui-btn site-demo-layim" data-type="unGray">取消好友置灰</button>
			
 
				+  <button class="layui-btn site-demo-layim" style="background-color: #3FDD86" data-type="mobile">WAP 版演示</button>
			
 
				+</div> 
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>其它</legend>
			
 
				+          </fieldset>
			
 
				+          
			
 
				+          <a href="../../www.layui.com/layim/index.html" target="_blank" class="layui-btn layui-btn-warm">获取 LayIM</a>
			
 
				+          
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+  <!-- 通用-970*90 -->
			
 
				+  <ins class="adsbygoogle"
			
 
				+     style="display:inline-block;width:970px;height:90px"
			
 
				+     data-ad-client="ca-pub-6111334333458862"
			
 
				+     data-ad-slot="6835627838"></ins>
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="https://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p>我们更希望您能授权获得 LayIM。扣码防不住，君子不用防。</p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../fly.layui.com/docs/7.html" target="_blank">LayIM 文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+
			
 
				+  <div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a>
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+
			
 
				+  <script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+  <script>
			
 
				+    layui.config({
			
 
				+      base: '/public/static/lay/modules/layui/'
			
 
				+      ,version: '1632428048260'
			
 
				+    }).use('global');
			
 
				+  </script>
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: ''
			
 
				+  ,layimPath: '../layim/pro/dist/' //配置 layim.js 所在目录
			
 
				+  ,layimAssetsPath: '../layim/pro/dist/layim-assets/' //layim 资源文件所在目录
			
 
				+}).extend({
			
 
				+  layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
			
 
				+}).use('layim', function(layim){ //加载组件
			
 
				+  var layim = layui.layim;
			
 
				+  
			
 
				+  //演示自动回复
			
 
				+  var autoReplay = [
			
 
				+    '您好，我现在有事不在，一会再和您联系。', 
			
 
				+    '你没发错吧？face[微笑] ',
			
 
				+    '这是一段演示消息 face[哈哈] ',
			
 
				+    '演示消息 face[心] face[心] face[心] ',
			
 
				+    'face[威武] face[威武] face[威武] face[威武] ',
			
 
				+    '<（@￣︶￣@）>',
			
 
				+    '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
			
 
				+    'face[黑线]  你慢慢说，别急……',
			
 
				+    '(*^__^*) face[嘻嘻]'
			
 
				+  ];
			
 
				+  
			
 
				+  //基础配置
			
 
				+  layim.config({
			
 
				+    //初始化接口
			
 
				+    init: {
			
 
				+      url: '../../www.layui.com/layim/pro/demo/json/getList.json.js'
			
 
				+      ,data: {}
			
 
				+    }
			
 
				+    //查看群员接口
			
 
				+    ,members: {
			
 
				+      url: '../../www.layui.com/layim/pro/demo/json/getMembers.json.js'
			
 
				+      ,data: {}
			
 
				+    }
			
 
				+    
			
 
				+    ,uploadImage: {
			
 
				+      url: '' //（返回的数据格式见下文）
			
 
				+      ,type: '' //默认post
			
 
				+    }
			
 
				+    ,uploadFile: {
			
 
				+      url: '' //（返回的数据格式见下文）
			
 
				+      ,type: '' //默认post
			
 
				+    }
			
 
				+    
			
 
				+    ,isAudio: true //开启聊天工具栏音频
			
 
				+    ,isVideo: true //开启聊天工具栏视频
			
 
				+    
			
 
				+    //扩展工具栏
			
 
				+    ,tool: [{
			
 
				+      alias: 'code'
			
 
				+      ,title: '代码'
			
 
				+      ,icon: '&#xe64e;'
			
 
				+    }]
			
 
				+    
			
 
				+    //,brief: true //是否简约模式（若开启则不显示主面板）
			
 
				+    
			
 
				+    //,title: 'WebIM' //自定义主面板最小化时的标题
			
 
				+    //,right: '100px' //主面板相对浏览器右侧距离
			
 
				+    //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
			
 
				+    ,initSkin: '3.jpg'/*tpa=https://www.layui.com/demo/3.jpg*/ //1-5 设置初始背景
			
 
				+    //,skin: ['aaa.jpg'/*tpa=https://www.layui.com/demo/aaa.jpg*/] //新增皮肤
			
 
				+    //,isfriend: false //是否开启好友
			
 
				+    //,isgroup: false //是否开启群组
			
 
				+    //,min: true //是否始终最小化主面板，默认false
			
 
				+    //,notice: true //是否开启桌面消息提醒，默认false
			
 
				+    //,voice: false //声音提醒，默认开启，声音文件为：default.mp3
			
 
				+    
			
 
				+    ,msgbox: layui.cache.layimAssetsPath + 'html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
			
 
				+    ,find: layui.cache.layimAssetsPath + 'html/find.html' //发现页面地址，若不开启，剔除该项即可
			
 
				+    ,chatLog: layui.cache.layimAssetsPath + 'html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
			
 
				+    
			
 
				+  });
			
 
				+  //监听在线状态的切换事件
			
 
				+  layim.on('online', function(status){
			
 
				+    layer.msg(status);
			
 
				+  });
			
 
				+  
			
 
				+  //监听签名修改
			
 
				+  layim.on('sign', function(value){
			
 
				+    layer.msg(value);
			
 
				+  });
			
 
				+  //监听自定义工具栏点击，以添加代码为例
			
 
				+  layim.on('tool(code)', function(insert){
			
 
				+    layer.prompt({
			
 
				+      title: '插入代码 - 工具栏扩展示例'
			
 
				+      ,formType: 2
			
 
				+      ,shade: 0
			
 
				+    }, function(text, index){
			
 
				+      layer.close(index);
			
 
				+      insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
			
 
				+    });
			
 
				+  });
			
 
				+  
			
 
				+  //监听layim建立就绪
			
 
				+  layim.on('ready', function(res){
			
 
				+    //console.log(res.mine);
			
 
				+    layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
			
 
				+  });
			
 
				+  //监听发送消息
			
 
				+  layim.on('sendMessage', function(data){
			
 
				+    var To = data.to;
			
 
				+    //console.log(data);
			
 
				+    
			
 
				+    if(To.type === 'friend'){
			
 
				+      layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
			
 
				+    }
			
 
				+    
			
 
				+    //演示自动回复
			
 
				+    setTimeout(function(){
			
 
				+      var obj = {};
			
 
				+      if(To.type === 'group'){
			
 
				+        obj = {
			
 
				+          username: '模拟群员'+(Math.random()*100|0)
			
 
				+          ,avatar: layui.cache.layimAssetsPath + 'images/face/'+ (Math.random()*72|0) + '.gif'
			
 
				+          ,id: To.id
			
 
				+          ,type: To.type
			
 
				+          ,content: autoReplay[Math.random()*9|0]
			
 
				+        }
			
 
				+      } else {
			
 
				+        obj = {
			
 
				+          username: To.name
			
 
				+          ,avatar: To.avatar
			
 
				+          ,id: To.id
			
 
				+          ,type: To.type
			
 
				+          ,content: autoReplay[Math.random()*9|0]
			
 
				+        }
			
 
				+        layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
			
 
				+      }
			
 
				+      layim.getMessage(obj);
			
 
				+    }, 1000);
			
 
				+  });
			
 
				+  //监听查看群员
			
 
				+  layim.on('members', function(data){
			
 
				+    //console.log(data);
			
 
				+  });
			
 
				+  
			
 
				+  //监听聊天窗口的切换
			
 
				+  layim.on('chatChange', function(res){
			
 
				+    var type = res.data.type;
			
 
				+    console.log(res.data.id)
			
 
				+    if(type === 'friend'){
			
 
				+      //模拟标注好友状态
			
 
				+      //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
			
 
				+    } else if(type === 'group'){
			
 
				+      //模拟系统消息
			
 
				+      layim.getMessage({
			
 
				+        system: true
			
 
				+        ,id: res.data.id
			
 
				+        ,type: "group"
			
 
				+        ,content: '模拟群员'+(Math.random()*100|0) + '加入群聊'
			
 
				+      });
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  
			
 
				+  //面板外的操作
			
 
				+  var $ = layui.jquery, active = {
			
 
				+    chat: function(){
			
 
				+      //自定义会话
			
 
				+      layim.chat({
			
 
				+        name: '小测试'
			
 
				+        ,type: 'friend'
			
 
				+        ,avatar: '../../other/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg'/*tpa=https://tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg*/
			
 
				+        ,id: 1008612
			
 
				+      });
			
 
				+      layer.msg('也就是说，此人可以不在好友面板里');
			
 
				+    }
			
 
				+    ,message: function(){
			
 
				+      //制造好友消息
			
 
				+      layim.getMessage({
			
 
				+        username: "测试1"
			
 
				+        ,avatar: "/public/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
			
 
				+        ,id: "100001"
			
 
				+        ,type: "friend"
			
 
				+        ,content: "嗨，你好！这是一条测试内容。演示标记："+ new Date().getTime()
			
 
				+        ,timestamp: new Date().getTime()
			
 
				+      });
			
 
				+    }
			
 
				+    ,messageAudio: function(){
			
 
				+      //接受音频消息
			
 
				+      layim.getMessage({
			
 
				+        username: "测试1"
			
 
				+        ,avatar: "/public/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
			
 
				+        ,id: "100001"
			
 
				+        ,type: "friend"
			
 
				+        ,content: "audio[http://gddx.sc.chinaz.com/Files/DownLoad/sound1/201510/6473.mp3]"
			
 
				+        ,timestamp: new Date().getTime()
			
 
				+      });
			
 
				+    }
			
 
				+    ,messageVideo: function(){
			
 
				+      //接受视频消息
			
 
				+      layim.getMessage({
			
 
				+        username: "测试1"
			
 
				+        ,avatar: "/public/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
			
 
				+        ,id: "100001"
			
 
				+        ,type: "friend"
			
 
				+        ,content: "video[http://www.w3school.com.cn//i/movie.ogg]"
			
 
				+        ,timestamp: new Date().getTime()
			
 
				+      });
			
 
				+    }
			
 
				+    ,messageTemp: function(){
			
 
				+      //接受临时会话消息
			
 
				+      layim.getMessage({
			
 
				+        username: "测试X"
			
 
				+        ,avatar: "/public/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
			
 
				+        ,id: "198909151014"
			
 
				+        ,type: "friend"
			
 
				+        ,content: "临时："+ new Date().getTime()
			
 
				+      });
			
 
				+    }
			
 
				+    ,add: function(){
			
 
				+      //实际使用时数据由动态获得
			
 
				+      layim.add({
			
 
				+        type: 'friend'
			
 
				+        ,username: '测试Y'
			
 
				+        ,avatar: '/public/images/fly/avatar/default.png'/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
			
 
				+        ,submit: function(group, remark, index){
			
 
				+          layer.msg('好友申请已发送，请等待对方确认', {
			
 
				+            icon: 1
			
 
				+            ,shade: 0.5
			
 
				+          }, function(){
			
 
				+            layer.close(index);
			
 
				+          });
			
 
				+          
			
 
				+          //通知对方
			
 
				+          /*
			
 
				+          $.post('/im-applyFriend/', {
			
 
				+            uid: info.uid
			
 
				+            ,from_group: group
			
 
				+            ,remark: remark
			
 
				+          }, function(res){
			
 
				+            if(res.status != 0){
			
 
				+              return layer.msg(res.msg);
			
 
				+            }
			
 
				+            layer.msg('好友申请已发送，请等待对方确认', {
			
 
				+              icon: 1
			
 
				+              ,shade: 0.5
			
 
				+            }, function(){
			
 
				+              layer.close(index);
			
 
				+            });
			
 
				+          });
			
 
				+          */
			
 
				+        }
			
 
				+      });
			
 
				+    }
			
 
				+    ,addqun: function(){
			
 
				+      layim.add({
			
 
				+        type: 'group'
			
 
				+        ,username: '测试群组1'
			
 
				+        ,avatar: '/public/images/fly/avatar/default.png'/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
			
 
				+        ,submit: function(group, remark, index){
			
 
				+          layer.msg('申请已发送，请等待管理员确认', {
			
 
				+            icon: 1
			
 
				+            ,shade: 0.5
			
 
				+          }, function(){
			
 
				+            layer.close(index);
			
 
				+          });
			
 
				+          
			
 
				+          //通知对方
			
 
				+          /*
			
 
				+          $.post('/im-applyGroup/', {
			
 
				+            uid: info.uid
			
 
				+            ,from_group: group
			
 
				+            ,remark: remark
			
 
				+          }, function(res){
			
 
				+          
			
 
				+          });
			
 
				+          */
			
 
				+        }
			
 
				+      });
			
 
				+    }
			
 
				+    ,addFriend: function(){
			
 
				+      var user = {
			
 
				+        type: 'friend'
			
 
				+        ,id: 1234560
			
 
				+        ,username: '测试A' //好友昵称，若申请加群，参数为：groupname
			
 
				+        ,avatar: '/public/images/fly/avatar/default.png'/*tpa=https://res.layui.com/images/fly/avatar/default.png*/ //头像
			
 
				+        ,sign: '测试内容'
			
 
				+      }
			
 
				+      layim.setFriendGroup({
			
 
				+        type: user.type
			
 
				+        ,username: user.username
			
 
				+        ,avatar: user.avatar
			
 
				+        ,group: layim.cache().friend //获取好友列表数据
			
 
				+        ,submit: function(group, index){
			
 
				+          //一般在此执行Ajax和WS，以通知对方已经同意申请
			
 
				+          //……
			
 
				+          
			
 
				+          //同意后，将好友追加到主面板
			
 
				+          layim.addList({
			
 
				+            type: user.type
			
 
				+            ,username: user.username
			
 
				+            ,avatar: user.avatar
			
 
				+            ,groupid: group //所在的分组id
			
 
				+            ,id: user.id //好友ID
			
 
				+            ,sign: user.sign //好友签名
			
 
				+          });
			
 
				+          
			
 
				+          layer.close(index);
			
 
				+        }
			
 
				+      });
			
 
				+    }
			
 
				+    ,addGroup: function(){
			
 
				+      layer.msg('已成功把[测试群组33]添加到群组里', {
			
 
				+        icon: 1
			
 
				+      });
			
 
				+      //增加一个群组
			
 
				+      layim.addList({
			
 
				+        type: 'group'
			
 
				+        ,avatar: "/public/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
			
 
				+        ,groupname: '测试群组33'
			
 
				+        ,id: "12333333"
			
 
				+        ,members: 0
			
 
				+      });
			
 
				+    }
			
 
				+    ,removeFriend: function(){
			
 
				+      layer.msg('已成功删除[测试2]', {
			
 
				+        icon: 1
			
 
				+      });
			
 
				+      //删除一个好友
			
 
				+      layim.removeList({
			
 
				+        id: 100001222
			
 
				+        ,type: 'friend'
			
 
				+      });
			
 
				+    }
			
 
				+    ,removeGroup: function(){
			
 
				+      layer.msg('已成功删除[测试群组33]', {
			
 
				+        icon: 1
			
 
				+      });
			
 
				+      //删除一个群组
			
 
				+      layim.removeList({
			
 
				+        id: 12333333
			
 
				+        ,type: 'group'
			
 
				+      });
			
 
				+    }
			
 
				+    //置灰离线好友
			
 
				+    ,setGray: function(){
			
 
				+      layim.setFriendStatus(168168, 'offline');
			
 
				+      
			
 
				+      layer.msg('已成功将好友[测试4]置灰', {
			
 
				+        icon: 1
			
 
				+      });
			
 
				+    }
			
 
				+    //取消好友置灰
			
 
				+    ,unGray: function(){
			
 
				+      layim.setFriendStatus(168168, 'online');
			
 
				+      
			
 
				+      layer.msg('成功取消好友[测试4]置灰状态', {
			
 
				+        icon: 1
			
 
				+      });
			
 
				+    }
			
 
				+    //移动端版本
			
 
				+    ,mobile: function(){
			
 
				+      var device = layui.device();
			
 
				+      var mobileHome = '../../www.layui.com/layim/pro/demo/mobile.html';
			
 
				+      if(device.android || device.ios){
			
 
				+        return location.href = mobileHome;
			
 
				+      }
			
 
				+      var index = layer.open({
			
 
				+        type: 2
			
 
				+        ,title: '移动版演示 （或手机扫右侧二维码预览）'
			
 
				+        ,content: mobileHome
			
 
				+        ,area: ['375px', '667px']
			
 
				+        ,shadeClose: true
			
 
				+        ,scrollbar: false
			
 
				+        ,shade: 0.8
			
 
				+        ,end: function(){
			
 
				+          layer.close(index + 2);
			
 
				+        }
			
 
				+      });
			
 
				+    }
			
 
				+  };
			
 
				+  $('.site-demo-layim').on('click', function(){
			
 
				+    var type = $(this).data('type');
			
 
				+    active[type] ? active[type].call(this) : '';
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/layout-admin.html
+++ b/demo/layout-admin.html
--- a/demo/layout-admin.html-from=demo.htm
+++ b/demo/layout-admin.html-from=demo.htm
--- a/demo/laypage.html
+++ b/demo/laypage.html
@@ -0,0 +1,590 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@layPage, 多功能JS分页组件/插件 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="layui-this">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>总页数低于页码总数</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo0"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>总页数大于页码总数</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo1"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>自定义主题 - 颜色随意定义</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo2"></div>
			
 
				+<div id="demo2-1"></div>
			
 
				+<div id="demo2-2"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>自定义首页、尾页、上一页、下一页文本</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo3"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>不显示首页尾页</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo4"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>开启HASH</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo5"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>只显示上一页、下一页</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo6"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>显示完整功能</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo7"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>自定义排版</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo8"></div>
			
 
				+<div id="demo9"></div>
			
 
				+<div id="demo10"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>自定义每页条数的选择项</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo11"></div>
			
 
				+ 
			
 
				+ 
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>将一段已知数组分页展示</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="demo20"></div>
			
 
				+<ul id="biuuu_city_list"></ul> 
			
 
				+ 
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html" target="_blank">layPage文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['laypage', 'layer'], function(){
			
 
				+  var laypage = layui.laypage
			
 
				+  ,layer = layui.layer;
			
 
				+  
			
 
				+  //总页数低于页码总数
			
 
				+  laypage.render({
			
 
				+    elem: 'demo0'
			
 
				+    ,count: 50 //数据总数
			
 
				+  });
			
 
				+  
			
 
				+  //总页数大于页码总数
			
 
				+  laypage.render({
			
 
				+    elem: 'demo1'
			
 
				+    ,count: 70 //数据总数
			
 
				+    ,jump: function(obj){
			
 
				+      console.log(obj)
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //自定义样式
			
 
				+  laypage.render({
			
 
				+    elem: 'demo2'
			
 
				+    ,count: 100
			
 
				+    ,theme: '#1E9FFF'
			
 
				+  });
			
 
				+  laypage.render({
			
 
				+    elem: 'demo2-1'
			
 
				+    ,count: 100
			
 
				+    ,theme: '#FF5722'
			
 
				+  });
			
 
				+  laypage.render({
			
 
				+    elem: 'demo2-2'
			
 
				+    ,count: 100
			
 
				+    ,theme: '#FFB800'
			
 
				+  });
			
 
				+  
			
 
				+  //自定义首页、尾页、上一页、下一页文本
			
 
				+  laypage.render({
			
 
				+    elem: 'demo3'
			
 
				+    ,count: 100
			
 
				+    ,first: '首页'
			
 
				+    ,last: '尾页'
			
 
				+    ,prev: '<em>←</em>'
			
 
				+    ,next: '<em>→</em>'
			
 
				+  });
			
 
				+  
			
 
				+  //不显示首页尾页
			
 
				+  laypage.render({
			
 
				+    elem: 'demo4'
			
 
				+    ,count: 100
			
 
				+    ,first: false
			
 
				+    ,last: false
			
 
				+  });
			
 
				+  
			
 
				+  //开启HASH
			
 
				+  laypage.render({
			
 
				+    elem: 'demo5'
			
 
				+    ,count: 500
			
 
				+    ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
			
 
				+    ,hash: 'fenye' //自定义hash值
			
 
				+  });
			
 
				+  
			
 
				+  //只显示上一页、下一页
			
 
				+  laypage.render({
			
 
				+    elem: 'demo6'
			
 
				+    ,count: 50
			
 
				+    ,layout: ['prev', 'next']
			
 
				+    ,jump: function(obj, first){
			
 
				+      if(!first){
			
 
				+        layer.msg('第 '+ obj.curr +' 页');
			
 
				+      }
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //完整功能
			
 
				+  laypage.render({
			
 
				+    elem: 'demo7'
			
 
				+    ,count: 100
			
 
				+    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
			
 
				+    ,jump: function(obj){
			
 
				+      console.log(obj)
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //自定义排版
			
 
				+  laypage.render({
			
 
				+    elem: 'demo8'
			
 
				+    ,count: 1000
			
 
				+    ,layout: ['limit', 'prev', 'page', 'next']
			
 
				+  });
			
 
				+  laypage.render({
			
 
				+    elem: 'demo9'
			
 
				+    ,count: 1000
			
 
				+    ,layout: ['prev', 'next', 'page']
			
 
				+  });
			
 
				+  laypage.render({
			
 
				+    elem: 'demo10'
			
 
				+    ,count: 1000
			
 
				+    ,layout: ['page', 'count']
			
 
				+  });
			
 
				+  
			
 
				+  //自定义每页条数的选择项
			
 
				+  laypage.render({
			
 
				+    elem: 'demo11'
			
 
				+    ,count: 1000
			
 
				+    ,limit: 100
			
 
				+    ,limits: [100, 300, 500]
			
 
				+  });
			
 
				+  
			
 
				+  
			
 
				+  //将一段数组分页展示
			
 
				+  
			
 
				+  //测试数据
			
 
				+  var data = [
			
 
				+    '北京',
			
 
				+    '上海',
			
 
				+    '广州',
			
 
				+    '深圳',
			
 
				+    '杭州',
			
 
				+    '长沙',
			
 
				+    '合肥',
			
 
				+    '宁夏',
			
 
				+    '成都',
			
 
				+    '西安',
			
 
				+    '南昌',
			
 
				+    '上饶',
			
 
				+    '沈阳',
			
 
				+    '济南',
			
 
				+    '厦门',
			
 
				+    '福州',
			
 
				+    '九江',
			
 
				+    '宜春',
			
 
				+    '赣州',
			
 
				+    '宁波',
			
 
				+    '绍兴',
			
 
				+    '无锡',
			
 
				+    '苏州',
			
 
				+    '徐州',
			
 
				+    '东莞',
			
 
				+    '佛山',
			
 
				+    '中山',
			
 
				+    '成都',
			
 
				+    '武汉',
			
 
				+    '青岛',
			
 
				+    '天津',
			
 
				+    '重庆',
			
 
				+    '南京',
			
 
				+    '九江',
			
 
				+    '香港',
			
 
				+    '澳门',
			
 
				+    '台北'
			
 
				+  ];
			
 
				+  
			
 
				+  //调用分页
			
 
				+  laypage.render({
			
 
				+    elem: 'demo20'
			
 
				+    ,count: data.length
			
 
				+    ,jump: function(obj){
			
 
				+      //模拟渲染
			
 
				+      document.getElementById('biuuu_city_list').innerHTML = function(){
			
 
				+        var arr = []
			
 
				+        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
			
 
				+        layui.each(thisData, function(index, item){
			
 
				+          arr.push('<li>'+ item +'</li>');
			
 
				+        });
			
 
				+        return arr.join('');
			
 
				+      }();
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/laytpl.html
+++ b/demo/laytpl.html
@@ -0,0 +1,386 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@laytpl前端模版引擎 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-body site-demo">
			
 
				+    <div class="layui-main">
			
 
				+      
			
 
				+      <blockquote class="layui-elem-quote">
			
 
				+        修改下面的数据和模版，可直接呈现渲染后的结果。模板语法见：<a class="layui-btn layui-btn-normal" href="../doc/modules/laytpl.html#syntax" tppabs="http://www.layui.com/doc/modules/laytpl.html#syntax" target="_blank">laytpl文档</a>
			
 
				+      </blockquote>
			
 
				+      
			
 
				+      <div class="site-demo-laytpl">
			
 
				+        
			
 
				+        <div>
			
 
				+          <span>数据</span>
			
 
				+          <span>模版</span>
			
 
				+        </div>
			
 
				+      
			
 
				+        <textarea class="site-demo-text" id="data">
			
 
				+{
			
 
				+  "title": "Layui常用模块"
			
 
				+  ,"list": [
			
 
				+    {
			
 
				+      "modname": "弹层"
			
 
				+      ,"alias": "layer"
			
 
				+      ,"site": "layer.layui.com"
			
 
				+    }
			
 
				+    ,{
			
 
				+      "modname": "表单"
			
 
				+      ,"alias": "form"
			
 
				+    }
			
 
				+    ,{
			
 
				+      "modname": "分页"
			
 
				+      ,"alias": "laypage"
			
 
				+    }
			
 
				+    ,{
			
 
				+      "modname": "日期"
			
 
				+      ,"alias": "laydate"
			
 
				+    }
			
 
				+    ,{
			
 
				+      "modname": "上传"
			
 
				+      ,"alias": "upload"
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
 
				+        </textarea>
			
 
				+      
			
 
				+        <textarea class="site-demo-text" id="tpl">
			
 
				+<h3>{{ d.title }}</h3>
			
 
				+<ul>
			
 
				+{{#  layui.each(d.list, function(index, item){ }}
			
 
				+  <li>
			
 
				+    <span>{{ item.modname }}</span>
			
 
				+    <span>{{ item.alias }}：</span>
			
 
				+    <span>{{ item.site || '' }}</span>
			
 
				+  </li>
			
 
				+{{#  }); }}
			
 
				+ 
			
 
				+{{#  if(d.list.length === 0){ }}
			
 
				+  无数据
			
 
				+{{#  } }} 
			
 
				+</ul>
			
 
				+        </textarea>
			
 
				+        
			
 
				+        
			
 
				+        
			
 
				+      </div>
			
 
				+      
			
 
				+      <div class="site-demo-tplres">
			
 
				+        <h2 class="site-demo-tplh2">视图结果</h2>
			
 
				+        <div class="site-demo-tplview" id="view"></div>
			
 
				+      </div>
			
 
				+       
			
 
				+       
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+       
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<script>
			
 
				+layui.use('laytpl', function(laytpl){
			
 
				+  
			
 
				+  var view = document.getElementById('view')
			
 
				+  ,controller = function(){
			
 
				+    try{
			
 
				+      var html = laytpl(tpl.value).render(JSON.parse(data.value));
			
 
				+      view.innerHTML = html;
			
 
				+    } catch(e){
			
 
				+      view.innerHTML = '<span style="color: #c00;">'+ e.toString() + '</span>';
			
 
				+    }
			
 
				+  };
			
 
				+  
			
 
				+  controller();
			
 
				+  
			
 
				+  layui.each(document.getElementsByTagName('textarea'), function(index, item){
			
 
				+    item.onkeyup = function(){
			
 
				+      controller();
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/menu.html
+++ b/demo/menu.html
@@ -0,0 +1,524 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@基础菜单 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+<blockquote class="layui-elem-quote">
			
 
				+  以下为「基础菜单」的静态展示，更多操作可见：<a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html" class="layui-btn layui-btn-primary layui-border-blue">下拉菜单组件</a> 
			
 
				+</blockquote>
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn" lay-active="lg">大尺寸</button> 
			
 
				+  <button type="button" class="layui-btn" lay-active="normal">常规尺寸</button> 
			
 
				+</div>
			
 
				+<div class="layui-row layui-col-space30" id="demo-box" style="margin: 0 auto; max-width: 970px;">
			
 
				+  
			
 
				+  <div class="layui-col-xs9 layui-col-md3">
			
 
				+    <div class="layui-panel">
			
 
				+      <ul class="layui-menu" id="demo1">
			
 
				+        <li lay-options="{id: 100}">
			
 
				+          <div class="layui-menu-body-title">menu item 1</a></div>
			
 
				+        </li>
			
 
				+        <li lay-options="{id: 101}">
			
 
				+          <div class="layui-menu-body-title">
			
 
				+            <a href="">menu item 2 <span class="layui-badge-dot"></span></a>
			
 
				+          </div>
			
 
				+        </li>
			
 
				+        <li class="layui-menu-item-divider"></li>
			
 
				+        <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
			
 
				+          <div class="layui-menu-body-title">
			
 
				+            menu group <i class="layui-icon layui-icon-up"></i>
			
 
				+          </div>
			
 
				+          <ul>
			
 
				+            <li lay-options="{id: 103}">
			
 
				+              <div class="layui-menu-body-title">menu item 3-1</div>
			
 
				+            </li>
			
 
				+            <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
			
 
				+              <div class="layui-menu-body-title">menu group 2</div>
			
 
				+              <ul>
			
 
				+                <li class="layui-menu-item-checked">
			
 
				+                  <div class="layui-menu-body-title">menu item 3-2-1</div>
			
 
				+                </li>
			
 
				+                <li><div class="layui-menu-body-title">menu item 3-2-2</div></li>
			
 
				+              </ul>
			
 
				+            </li>
			
 
				+            <li><div class="layui-menu-body-title">menu item 3-3</div></li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class="layui-menu-item-divider"></li>
			
 
				+        <li><div class="layui-menu-body-title">menu item 4 <span class="layui-badge">1</span></div></li>
			
 
				+        <li><div class="layui-menu-body-title">menu item 5</div></li>
			
 
				+        <li><div class="layui-menu-body-title">menu item 6</div></li>
			
 
				+        <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
			
 
				+          <div class="layui-menu-body-title">
			
 
				+            menu item 7 Children
			
 
				+            <i class="layui-icon layui-icon-right"></i>
			
 
				+          </div>
			
 
				+          <div class="layui-panel layui-menu-body-panel">
			
 
				+            <ul>
			
 
				+              <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
			
 
				+                <div class="layui-menu-body-title">
			
 
				+                  menu item 7-1
			
 
				+                  <i class="layui-icon layui-icon-right"></i>
			
 
				+                </div>
			
 
				+                <div class="layui-panel layui-menu-body-panel">
			
 
				+                  <ul>
			
 
				+                    <li><div class="layui-menu-body-title">menu item 7-2-1</div></li>
			
 
				+                    <li><div class="layui-menu-body-title">menu item 7-2-2</div></li>
			
 
				+                    <li><div class="layui-menu-body-title">menu item 7-2-3</div></li>
			
 
				+                    <li><div class="layui-menu-body-title">menu item 7-2-4</div></li>
			
 
				+                  </ul>
			
 
				+                </div>
			
 
				+              </li>
			
 
				+              <li><div class="layui-menu-body-title">menu item 7-2</div></li>
			
 
				+              <li><div class="layui-menu-body-title">menu item 7-3</div></li>
			
 
				+            </ul>
			
 
				+          </div>
			
 
				+        </li>
			
 
				+        <li>menu item 8</li>
			
 
				+        <li class="layui-menu-item-divider"></li>
			
 
				+        <li class="layui-menu-item-group" lay-options="{type: 'group'}">
			
 
				+          <div class="layui-menu-body-title">menu group 9</div>
			
 
				+          <ul>
			
 
				+            <li><div class="layui-menu-body-title">menu item 9-1</div></li>
			
 
				+            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
			
 
				+              <div class="layui-menu-body-title">
			
 
				+                menu item 9-2
			
 
				+                <i class="layui-icon layui-icon-right"></i>
			
 
				+              </div>
			
 
				+              <div class="layui-panel layui-menu-body-panel">
			
 
				+                <ul>
			
 
				+                  <li><div class="layui-menu-body-title">menu item 9-2-1</div></li>
			
 
				+                  <li><div class="layui-menu-body-title">menu item 9-2-2</div></li>
			
 
				+                  <li><div class="layui-menu-body-title">menu item 9-2-3</div></li>
			
 
				+                </ul>
			
 
				+              </div>
			
 
				+            </li>
			
 
				+            <li><div class="layui-menu-body-title">menu item 9-31</div></li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class="layui-menu-item-divider"></li>
			
 
				+        <li><div class="layui-menu-body-title">menu item 10</div></li>
			
 
				+      </ul>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-col-xs9 layui-col-md3">
			
 
				+    <div class="layui-panel">
			
 
				+      <ul class="layui-menu" id="docDemoMenu1">
			
 
				+        <li lay-options="{id: 100}">
			
 
				+          <div class="layui-menu-body-title">menu item 1</div>
			
 
				+        </li>
			
 
				+        <li lay-options="{id: 101}">
			
 
				+          <div class="layui-menu-body-title">
			
 
				+            <a href="">menu item 2 <span class="layui-badge-dot"></span></a>
			
 
				+          </div>
			
 
				+        </li>
			
 
				+        <li class="layui-menu-item-divider"></li>
			
 
				+        <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group', isAllowSpread: false}">
			
 
				+          <div class="layui-menu-body-title">
			
 
				+            menu group
			
 
				+          </div>
			
 
				+          <ul>
			
 
				+            <li lay-options="{id: 1031}"><div class="layui-menu-body-title">menu item 3-1</div></li>
			
 
				+            <li lay-options="{id: 1032}">
			
 
				+              <div class="layui-menu-body-title">menu item 3-2</div>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class="layui-menu-item-divider"></li>
			
 
				+        <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group', isAllowSpread: false}">
			
 
				+          <div class="layui-menu-body-title">menu group 2</div>
			
 
				+          <ul>
			
 
				+            <li lay-options="{id: 1031}"><div class="layui-menu-body-title">menu item 4-1</div></li>
			
 
				+            <li lay-options="{id: 1032}">
			
 
				+              <div class="layui-menu-body-title">menu item 4-2</div>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </li>
			
 
				+        <li class="layui-menu-item-divider"></li>
			
 
				+        <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
			
 
				+          <div class="layui-menu-body-title">
			
 
				+            menu item 5 
			
 
				+            <i class="layui-icon layui-icon-right"></i>
			
 
				+          </div>
			
 
				+          <div class="layui-panel layui-menu-body-panel">
			
 
				+            <ul>
			
 
				+              <li lay-options="{id: 1051}">
			
 
				+                <div class="layui-menu-body-title">menu item 5-1</div>
			
 
				+              </li>
			
 
				+              <li lay-options="{id: 1051}">
			
 
				+                <div class="layui-menu-body-title">menu item 5-2</div>
			
 
				+              </li>
			
 
				+            </ul>
			
 
				+          </div>
			
 
				+        </li>
			
 
				+        <li lay-options="{id: 106}">
			
 
				+          <div class="layui-menu-body-title">menu item 6</div>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>  
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html" target="_blank">基础菜单文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['dropdown', 'util'], function(){
			
 
				+  var dropdown = layui.dropdown
			
 
				+  ,util = layui.util
			
 
				+  ,$ = layui.jquery;
			
 
				+  
			
 
				+  //菜单点击事件
			
 
				+  dropdown.on('click(demo1)', function(options){
			
 
				+    var thisElem = $(this);
			
 
				+    console.log(thisElem, options);
			
 
				+  });
			
 
				+  
			
 
				+  
			
 
				+  util.event('lay-active', {
			
 
				+    normal: function(){
			
 
				+      $('#demo-box').children().addClass('layui-col-md3').removeClass('layui-col-md4');
			
 
				+      $('#demo-box').find('.layui-menu').removeClass('layui-menu-lg');
			
 
				+    }
			
 
				+    ,lg: function(){
			
 
				+      $('#demo-box').children().addClass('layui-col-md4').removeClass('layui-col-md3')
			
 
				+      $('#demo-box').find('.layui-menu').addClass('layui-menu-lg');
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/nav.html
+++ b/demo/nav.html
@@ -0,0 +1,553 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@导航菜单/面包屑 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+<style>
			
 
				+.layui-nav-tree{vertical-align: top;}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+              
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>水平导航菜单</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<ul class="layui-nav">
			
 
				+  <li class="layui-nav-item layui-this"><a href="">选中</a></li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="javascript:;">常规</a>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item"><a href="">导航</a></li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="javascript:;">子级</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="">菜单1</a></dd>
			
 
				+      <dd><a href="">菜单2</a></dd>
			
 
				+      <dd><a href="">菜单3</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="javascript:;">选项</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="">选项1</a></dd>
			
 
				+      <dd class="layui-this"><a href="">选项2</a></dd>
			
 
				+      <dd><a href="">选项3</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item"><a href="">演示</a></li>
			
 
				+</ul>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>导航带徽章和图片</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<ul class="layui-nav" lay-bar="disabled">
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="">带徽章<span class="layui-badge">9</span></a>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="">小圆点<span class="layui-badge-dot"></span></a>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item" lay-unselect>
			
 
				+    <a href="javascript:;"><img src="../../other/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img"></a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="javascript:;">子级菜单</a></dd>
			
 
				+      <dd><a href="javascript:;">横线隔断</a></dd>
			
 
				+      <hr>
			
 
				+      <dd style="text-align: center;"><a href="">退出</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+</ul>
			
 
				+<blockquote class="layui-elem-quote layui-text" style="margin-top: 15px;">
			
 
				+  该导航通过配置 lay-bar="disabled" 属性，禁用了滑块跟随功能
			
 
				+</blockquote>
			
 
				+<div style="margin-top: 15px;">
			
 
				+ 
			
 
				+<!-- 示例-970 -->
			
 
				+
			
 
				+  
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>更多导航主题</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<ul class="layui-nav layui-bg-cyan">
			
 
				+  <li class="layui-nav-item"><a href="">藏青导航</a></li>
			
 
				+  <li class="layui-nav-item"><a href="">产品</a></li>
			
 
				+  <li class="layui-nav-item"><a href="">大数据</a></li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="javascript:;">解决方案</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="">移动模块</a></dd>
			
 
				+      <dd><a href="">后台模版</a></dd>
			
 
				+      <dd><a href="">电商平台</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item"><a href="">社区</a></li>
			
 
				+</ul>
			
 
				+<br>
			
 
				+<ul class="layui-nav layui-bg-green">
			
 
				+  <li class="layui-nav-item"><a href="">墨绿导航</a></li>
			
 
				+  <li class="layui-nav-item"><a href="">产品</a></li>
			
 
				+  <li class="layui-nav-item"><a href="">大数据</a></li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="javascript:;">解决方案</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="">移动模块</a></dd>
			
 
				+      <dd><a href="">后台模版</a></dd>
			
 
				+      <dd><a href="">电商平台</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item"><a href="">社区</a></li>
			
 
				+</ul>
			
 
				+<br>
			
 
				+<ul class="layui-nav layui-bg-blue"  lay-bar="disabled">
			
 
				+  <li class="layui-nav-item"><a href="">艳蓝导航</a></li>
			
 
				+  <li class="layui-nav-item"><a href="">产品</a></li>
			
 
				+  <li class="layui-nav-item"><a href="">大数据</a></li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="javascript:;">解决方案</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="">移动模块</a></dd>
			
 
				+      <dd><a href="">后台模版</a></dd>
			
 
				+      <dd><a href="">电商平台</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item"><a href="">社区</a></li>
			
 
				+</ul> 
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>垂直导航菜单</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<ul class="layui-nav layui-nav-tree layui-inline"  lay-filter="demo" style="margin-right: 10px;">
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a href="javascript:;">默认展开</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="javascript:;">选项一</a></dd>
			
 
				+      <dd><a href="javascript:;">选项二</a></dd>
			
 
				+      <dd><a href="javascript:;">选项三</a></dd>
			
 
				+      <dd><a href="">跳转项</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="javascript:;">解决方案</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="">移动模块</a></dd>
			
 
				+      <dd><a href="">后台模版</a></dd>
			
 
				+      <dd><a href="">电商平台</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item"><a href="">云市场</a></li>
			
 
				+  <li class="layui-nav-item"><a href="">社区</a></li>
			
 
				+</ul>
			
 
				+<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline"  lay-filter="demo">
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a href="javascript:;">默认展开</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="javascript:;">选项一</a></dd>
			
 
				+      <dd><a href="javascript:;">选项二</a></dd>
			
 
				+      <dd><a href="javascript:;">选项三</a></dd>
			
 
				+      <dd><a href="">跳转项</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item">
			
 
				+    <a href="javascript:;">解决方案</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd><a href="">移动模块</a></dd>
			
 
				+      <dd><a href="">后台模版</a></dd>
			
 
				+      <dd><a href="">电商平台</a></dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  <li class="layui-nav-item"><a href="">云市场</a></li>
			
 
				+  <li class="layui-nav-item"><a href="">社区</a></li>
			
 
				+</ul>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>侧边固定导航菜单</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+← 囖，就左边那家伙！ 带图标神马的那是必须可以的。另外你可能还需要下拉菜单，这个将在下版本推出！
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>默认面包屑</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<span class="layui-breadcrumb">
			
 
				+  <a href="../index.html" tppabs="http://www.layui.com/">首页</a>
			
 
				+  <a href="index.html" tppabs="http://www.layui.com/demo/">演示</a>
			
 
				+  <a><cite>导航元素</cite></a>
			
 
				+</span>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>自定义分隔符的面包屑</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<span class="layui-breadcrumb" lay-separator="—">
			
 
				+  <a href="">首页</a>
			
 
				+  <a href="">国际新闻</a>
			
 
				+  <a href="">亚太地区</a>
			
 
				+  <a><cite>正文</cite></a>
			
 
				+</span>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>还可以用于门户频道的面包屑</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<span class="layui-breadcrumb" lay-separator="|">
			
 
				+  <a href="">娱乐</a>
			
 
				+  <a href="">八卦</a>
			
 
				+  <a href="">体育</a>
			
 
				+  <a href="">搞笑</a>
			
 
				+  <a href="">视频</a>
			
 
				+  <a href="">游戏</a>
			
 
				+  <a href="">综艺</a>
			
 
				+</span>
			
 
				+ 
			
 
				+<p class="layui-elem-quote">其实就是自定义了个“|”的分隔符，然后最后一项也可以点。</p>        
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html" target="_blank">导航元素文档</a>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html" target="_blank">常用元素操作</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('element', function(){
			
 
				+  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
			
 
				+  
			
 
				+  //监听导航点击
			
 
				+  element.on('nav(demo)', function(elem){
			
 
				+    //console.log(elem)
			
 
				+    layer.msg(elem.text());
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/panel.html
+++ b/demo/panel.html
--- a/demo/progress.html
+++ b/demo/progress.html
@@ -0,0 +1,478 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@进度条 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+              
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			
 
				+  <legend>默认风格的进度条</legend>
			
 
				+</fieldset>
			
 
				+  
			
 
				+<div class="layui-progress">
			
 
				+  <div class="layui-progress-bar" lay-percent="40%"></div>
			
 
				+</div>
			
 
				+<div style="margin-top: 15px; width:300px">
			
 
				+  <div class="layui-progress">
			
 
				+    <div class="layui-progress-bar" lay-percent="70%"></div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+<br>
			
 
				+温馨提示：进度条的宽度是 100% 适配于它的父级元素，如上面的进度条是在一个 300px 的父容器中。
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>更多颜色选取</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-progress">
			
 
				+  <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<br>
			
 
				+ 
			
 
				+<div class="layui-progress">
			
 
				+  <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<br>
			
 
				+ 
			
 
				+<div class="layui-progress">
			
 
				+  <div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<br>
			
 
				+ 
			
 
				+<div class="layui-progress">
			
 
				+  <div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<br>
			
 
				+ 
			
 
				+<div class="layui-progress">
			
 
				+  <div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>大尺寸进度条</legend>
			
 
				+</fieldset>
			
 
				+<div class="layui-progress layui-progress-big">
			
 
				+  <div class="layui-progress-bar" lay-percent="20%"></div>
			
 
				+</div>
			
 
				+   
			
 
				+<br>
			
 
				+<div class="layui-progress layui-progress-big">
			
 
				+  <div class="layui-progress-bar layui-bg-green" lay-percent="35%"></div>
			
 
				+</div>
			
 
				+<br>
			
 
				+<div class="layui-progress layui-progress-big">
			
 
				+  <div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin: 50px 0 30px;">
			
 
				+  <legend>显示进度比文本</legend>
			
 
				+</fieldset>
			
 
				+<div class="layui-progress" lay-showPercent="true">
			
 
				+  <div class="layui-progress-bar" lay-percent="20%"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<br>
			
 
				+ 
			
 
				+<div class="layui-progress" lay-showPercent="true">
			
 
				+  <div class="layui-progress-bar" lay-percent="5 / 10"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<br>
			
 
				+ 
			
 
				+<div class="layui-progress layui-progress-big" lay-showPercent="true">
			
 
				+  <div class="layui-progress-bar" lay-percent="70%"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<br>
			
 
				+正如你上述看到的，除了百分数，还支持分数（v2.1.7 新增）
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>动态改变进度</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="demo">
			
 
				+  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
			
 
				+</div>
			
 
				+ 
			
 
				+<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
			
 
				+  <button class="layui-btn site-demo-active" data-type="setPercent">设置 50%</button>
			
 
				+  <button class="layui-btn site-demo-active" data-type="loading">模拟 loading</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 示例-970 -->
			
 
				+
			
 
				+  
			
 
				+ 
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+        
			
 
				+        
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html" target="_blank">进度条文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('element', function(){
			
 
				+  var $ = layui.jquery
			
 
				+  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
			
 
				+  
			
 
				+  //触发事件
			
 
				+  var active = {
			
 
				+    setPercent: function(){
			
 
				+      //设置50%进度
			
 
				+      element.progress('demo', '50%')
			
 
				+    }
			
 
				+    ,loading: function(othis){
			
 
				+      var DISABLED = 'layui-btn-disabled';
			
 
				+      if(othis.hasClass(DISABLED)) return;
			
 
				+    
			
 
				+      //模拟loading
			
 
				+      var n = 0, timer = setInterval(function(){
			
 
				+        n = n + Math.random()*10|0;  
			
 
				+        if(n>100){
			
 
				+          n = 100;
			
 
				+          clearInterval(timer);
			
 
				+          othis.removeClass(DISABLED);
			
 
				+        }
			
 
				+        element.progress('demo', n+'%');
			
 
				+      }, 300+Math.random()*1000);
			
 
				+      
			
 
				+      othis.addClass(DISABLED);
			
 
				+    }
			
 
				+  };
			
 
				+  
			
 
				+  $('.site-demo-active').on('click', function(){
			
 
				+    var othis = $(this), type = $(this).data('type');
			
 
				+    active[type] ? active[type].call(this, othis) : '';
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/rate.html
+++ b/demo/rate.html
@@ -0,0 +1,499 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@ 评分- 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>基础效果</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test1"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>显示文字</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test2"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>半星效果</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test3"></div>
			
 
				+<div><div id="test4"></div></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>自定义内容</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test5"></div>
			
 
				+<div><div id="test6"></div></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>自定义长度</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test7"></div>
			
 
				+<div><div id="test8"></div></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>只读</legend>
			
 
				+</fieldset>
			
 
				+  
			
 
				+<div id="test9"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>自定义主题色</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<ul>
			
 
				+  <li><div id="test10"></li>
			
 
				+  <li><div id="test11"></li>
			
 
				+  <li><div id="test12"></li>
			
 
				+  <li><div id="test13"></li>
			
 
				+  <li><div id="test14"></li>
			
 
				+</ul>
			
 
				+            
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html" target="_blank">评分文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['rate'], function(){
			
 
				+  var rate = layui.rate;
			
 
				+  //基础效果
			
 
				+  rate.render({
			
 
				+    elem: '#test1'
			
 
				+  })
			
 
				+ 
			
 
				+  //显示文字
			
 
				+  rate.render({
			
 
				+    elem: '#test2'
			
 
				+    ,value: 2 //初始值
			
 
				+    ,text: true //开启文本
			
 
				+  });
			
 
				+ 
			
 
				+  //半星效果
			
 
				+  rate.render({
			
 
				+    elem: '#test3'
			
 
				+    ,value: 2.5 //初始值
			
 
				+    ,half: true //开启半星
			
 
				+  })
			
 
				+  rate.render({
			
 
				+    elem: '#test4'
			
 
				+    ,value: 3.5
			
 
				+    ,half: true
			
 
				+    ,text: true
			
 
				+  })
			
 
				+ 
			
 
				+  //自定义文本
			
 
				+  rate.render({
			
 
				+    elem: '#test5'
			
 
				+    ,value: 3
			
 
				+    ,text: true
			
 
				+    ,setText: function(value){ //自定义文本的回调
			
 
				+      var arrs = {
			
 
				+        '1': '极差'
			
 
				+        ,'2': '差'
			
 
				+        ,'3': '中等'
			
 
				+        ,'4': '好'
			
 
				+        ,'5': '极好'
			
 
				+      };
			
 
				+      this.span.text(arrs[value] || ( value + "星"));
			
 
				+    }
			
 
				+  })
			
 
				+  rate.render({
			
 
				+    elem: '#test6'
			
 
				+    ,value: 1.5
			
 
				+    ,half: true
			
 
				+    ,text: true
			
 
				+    ,setText: function(value){
			
 
				+      this.span.text(value);
			
 
				+    }
			
 
				+  })
			
 
				+ 
			
 
				+  //自定义长度
			
 
				+  rate.render({
			
 
				+    elem: '#test7'
			
 
				+    ,length: 3
			
 
				+  });
			
 
				+  rate.render({
			
 
				+    elem: '#test8'
			
 
				+    ,length: 10
			
 
				+    ,value: 8 //初始值
			
 
				+  });
			
 
				+ 
			
 
				+  //只读
			
 
				+  rate.render({
			
 
				+    elem: '#test9'
			
 
				+    ,value: 4
			
 
				+    ,readonly: true
			
 
				+  });
			
 
				+ 
			
 
				+  //主题色
			
 
				+  rate.render({
			
 
				+    elem: '#test10'
			
 
				+    ,value: 3
			
 
				+    ,theme: '#FF8000' //自定义主题色
			
 
				+  });
			
 
				+  rate.render({
			
 
				+    elem: '#test11'
			
 
				+    ,value: 3
			
 
				+    ,theme: '#009688'
			
 
				+  });
			
 
				+ 
			
 
				+  rate.render({
			
 
				+    elem: '#test12'
			
 
				+    ,value: 2.5
			
 
				+    ,half: true
			
 
				+    ,theme: '#1E9FFF'
			
 
				+  })
			
 
				+  rate.render({
			
 
				+    elem: '#test13'
			
 
				+    ,value: 2.5
			
 
				+    ,half: true
			
 
				+    ,theme: '#2F4056'
			
 
				+  });
			
 
				+  rate.render({
			
 
				+    elem: '#test14'
			
 
				+    ,value: 2.5
			
 
				+    ,half: true
			
 
				+    ,theme: '#FE0000'
			
 
				+  })
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/slider.html
+++ b/demo/slider.html
@@ -0,0 +1,539 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@滑块 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+<style>
			
 
				+.demo-slider{margin: 45px 30px; width: 40%;}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>基本滑块</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest1" class="demo-slider"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>定义初始值</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest2" class="demo-slider"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>设置最大最小值</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest3" class="demo-slider"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>设置步长</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest4" class="demo-slider"></div>
			
 
				+<div id="slideTest5" class="demo-slider"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>设置提示文本</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest6" class="demo-slider"></div>
			
 
				+<div id="slideTest7" class="demo-slider"></div>
			
 
				+<div id="test-slider-tips1" style="position:relative; left: 30px; top: -20px;"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>开启输入框</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest8" class="demo-slider"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>开启范围选择</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest9" class="demo-slider"></div>
			
 
				+<div id="test-slider-tips2" style="position:relative; left: 30px; margin-top: -10px;"></div>
			
 
				+ 
			
 
				+<div id="slideTest10" class="demo-slider"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>垂直滑块</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest11" style="margin: 45px 30px; display: inline-block;"></div>
			
 
				+<div id="slideTest12" style="margin: 45px 30px; display: inline-block;"></div>
			
 
				+<div id="slideTest13" style="margin: 45px 30px; display: inline-block;"></div>
			
 
				+<div id="slideTest14" style="margin: 45px 30px; display: inline-block;"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>自定义颜色</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest15" class="demo-slider"></div>
			
 
				+<div id="slideTest16" class="demo-slider"></div>
			
 
				+<div id="slideTest17" class="demo-slider"></div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>禁用滑块</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="slideTest18" class="demo-slider"></div>
			
 
				+            
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html" target="_blank">滑块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('slider', function(){
			
 
				+  var $ = layui.$
			
 
				+  ,slider = layui.slider;
			
 
				+  //默认滑块
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest1'
			
 
				+  });
			
 
				+  
			
 
				+  //定义初始值
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest2'
			
 
				+    ,value: 20 //初始值
			
 
				+  });
			
 
				+  
			
 
				+  //设置最大最小值
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest3'
			
 
				+    ,min: 20 //最小值
			
 
				+    ,max: 50 //最大值
			
 
				+  });
			
 
				+  
			
 
				+  //设置步长
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest4'
			
 
				+    ,step: 10 //步长
			
 
				+  });
			
 
				+  
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest5'
			
 
				+    ,step: 10 //步长
			
 
				+    ,showstep: true //开启间隔点
			
 
				+  });
			
 
				+  
			
 
				+  //设置提示文本
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest6'
			
 
				+    ,min: 20
			
 
				+    ,max: 1000
			
 
				+    ,setTips: function(value){ //自定义提示文本
			
 
				+     return value + 'GB';
			
 
				+    }
			
 
				+  });
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest7'
			
 
				+    ,tips: false //关闭默认提示层
			
 
				+    ,change: function(value){
			
 
				+      $('#test-slider-tips1').html('当前数值：'+ value);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //开启输入框
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest8'
			
 
				+    ,input: true //输入框
			
 
				+  });
			
 
				+  
			
 
				+  //开启范围选择
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest9'
			
 
				+    ,value: 40 //初始值
			
 
				+    ,range: true //范围选择
			
 
				+    ,change: function(vals){
			
 
				+      $('#test-slider-tips2').html('开始值：'+ vals[0] + '、结尾值：'+ vals[1]);
			
 
				+    }
			
 
				+  });
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest10'
			
 
				+    ,value: [30, 60] //初始值
			
 
				+    ,range: true //范围选择
			
 
				+  });
			
 
				+  
			
 
				+  //垂直滑块
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest11'
			
 
				+    ,type: 'vertical' //垂直滑块
			
 
				+  });
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest12'
			
 
				+    ,value: 30
			
 
				+    ,type: 'vertical' //垂直滑块
			
 
				+  });
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest13'
			
 
				+    ,value: 50
			
 
				+    ,range: true //范围选择
			
 
				+    ,type: 'vertical' //垂直滑块
			
 
				+  });
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest14'
			
 
				+    ,value: 80
			
 
				+    ,input: true //输入框
			
 
				+    ,type: 'vertical' //垂直滑块
			
 
				+  });
			
 
				+  
			
 
				+  //自定义颜色
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest15'
			
 
				+    ,theme: '#1E9FFF' //主题色
			
 
				+  });
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest16'
			
 
				+    ,value: 50
			
 
				+    ,theme: '#5FB878' //主题色
			
 
				+  });
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest17'
			
 
				+    ,value: [30, 70]
			
 
				+    ,range: true
			
 
				+    ,theme: '#FF5722' //主题色
			
 
				+  });
			
 
				+  
			
 
				+  //禁用滑块
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest18'
			
 
				+    ,value: 35
			
 
				+    ,disabled: true //禁用滑块
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/tab.html
+++ b/demo/tab.html
@@ -0,0 +1,549 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Tab选项卡 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+              
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>默认风格的Tab</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-tab">
			
 
				+  <ul class="layui-tab-title">
			
 
				+    <li class="layui-this">网站设置</li>
			
 
				+    <li>用户管理</li>
			
 
				+    <li>权限分配</li>
			
 
				+    <li>商品管理</li>
			
 
				+    <li>订单管理</li>
			
 
				+  </ul>
			
 
				+  <div class="layui-tab-content">
			
 
				+    <div class="layui-tab-item layui-show">
			
 
				+      1. 高度默认自适应，也可以随意固宽。
			
 
				+      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
			
 
				+    </div>
			
 
				+    <div class="layui-tab-item">内容2</div>
			
 
				+    <div class="layui-tab-item">内容3</div>
			
 
				+    <div class="layui-tab-item">内容4</div>
			
 
				+    <div class="layui-tab-item">内容5</div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>动态操作Tab</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-tab" lay-filter="demo" lay-allowClose="true">
			
 
				+  <ul class="layui-tab-title">
			
 
				+    <li class="layui-this" lay-id="11">网站设置</li>
			
 
				+    <li lay-id="22">用户管理</li>
			
 
				+    <li lay-id="33">权限分配</li>
			
 
				+    <li lay-id="44">商品管理</li>
			
 
				+    <li lay-id="55">订单管理</li>
			
 
				+  </ul>
			
 
				+  <div class="layui-tab-content">
			
 
				+    <div class="layui-tab-item layui-show">内容1</div>
			
 
				+    <div class="layui-tab-item">内容2</div>
			
 
				+    <div class="layui-tab-item">内容3</div>
			
 
				+    <div class="layui-tab-item">内容4</div>
			
 
				+    <div class="layui-tab-item">内容5</div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+<div class="site-demo-button" style="margin-bottom: 0;">
			
 
				+  <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
			
 
				+  <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>
			
 
				+  <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 示例-970 -->
			
 
				+
			
 
				+  
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>Hash地址定位</legend>
			
 
				+</fieldset>
			
 
				+<div class="layui-tab" lay-filter="test">
			
 
				+  <ul class="layui-tab-title">
			
 
				+    <li class="layui-this" lay-id="11">网站设置</li>
			
 
				+    <li lay-id="22">用户管理</li>
			
 
				+    <li lay-id="33">权限分配</li>
			
 
				+    <li lay-id="44">商品管理</li>
			
 
				+    <li lay-id="55">订单管理</li>
			
 
				+  </ul>
			
 
				+  <div class="layui-tab-content">
			
 
				+    <div class="layui-tab-item layui-show">
			
 
				+      点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
			
 
				+    </div>
			
 
				+    <div class="layui-tab-item">内容2</div>
			
 
				+    <div class="layui-tab-item">内容3</div>
			
 
				+    <div class="layui-tab-item">内容4</div>
			
 
				+    <div class="layui-tab-item">内容5</div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>简洁风格的Tab</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			
 
				+  <ul class="layui-tab-title">
			
 
				+    <li class="layui-this">网站设置</li>
			
 
				+    <li>用户管理</li>
			
 
				+    <li>权限分配</li>
			
 
				+    <li>商品管理</li>
			
 
				+    <li>订单管理</li>
			
 
				+  </ul>
			
 
				+  <div class="layui-tab-content" style="height: 100px;">
			
 
				+    <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div>
			
 
				+    <div class="layui-tab-item">内容2</div>
			
 
				+    <div class="layui-tab-item">内容3</div>
			
 
				+    <div class="layui-tab-item">内容4</div>
			
 
				+    <div class="layui-tab-item">内容5</div>
			
 
				+  </div>
			
 
				+</div> 
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>卡片风格的Tab</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-tab layui-tab-card">
			
 
				+  <ul class="layui-tab-title">
			
 
				+    <li class="layui-this">网站设置</li>
			
 
				+    <li>用户管理</li>
			
 
				+    <li>权限分配</li>
			
 
				+    <li>商品管理</li>
			
 
				+    <li>订单管理</li>
			
 
				+  </ul>
			
 
				+  <div class="layui-tab-content" style="height: 100px;">
			
 
				+    <div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div>
			
 
				+    <div class="layui-tab-item">2</div>
			
 
				+    <div class="layui-tab-item">3</div>
			
 
				+    <div class="layui-tab-item">4</div>
			
 
				+    <div class="layui-tab-item">5</div>
			
 
				+    <div class="layui-tab-item">6</div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>当Tab数超过一定宽度</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-tab layui-tab-card" style="width: 290px;">
			
 
				+  <ul class="layui-tab-title">
			
 
				+    <li class="layui-this">网站设置</li>
			
 
				+    <li>用户管理</li>
			
 
				+    <li>权限分配</li>
			
 
				+    <li>商品管理</li>
			
 
				+    <li>订单管理</li>
			
 
				+  </ul>
			
 
				+  <div class="layui-tab-content" style="height: 100px;">
			
 
				+    <div class="layui-tab-item layui-show">
			
 
				+      1. 宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。
			
 
				+      <br>2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。
			
 
				+    </div>
			
 
				+    <div class="layui-tab-item">2</div>
			
 
				+    <div class="layui-tab-item">3</div>
			
 
				+    <div class="layui-tab-item">4</div>
			
 
				+    <div class="layui-tab-item">5</div>
			
 
				+    <div class="layui-tab-item">6</div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>带删除功能的Tab</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-tab layui-tab-card" lay-allowClose="true">
			
 
				+  <ul class="layui-tab-title">
			
 
				+    <li class="layui-this">网站设置</li>
			
 
				+    <li>用户基本管理</li>
			
 
				+    <li>权限分配</li>
			
 
				+    <li>商品管理</li>
			
 
				+    <li>订单管理</li>
			
 
				+  </ul>
			
 
				+  <div class="layui-tab-content" style="height: 150px;">
			
 
				+    <div class="layui-tab-item layui-show">
			
 
				+      1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例
			
 
				+      2. 删除功能适用于所有风格
			
 
				+    </div>
			
 
				+    <div class="layui-tab-item">2</div>
			
 
				+    <div class="layui-tab-item">3</div>
			
 
				+    <div class="layui-tab-item">4</div>
			
 
				+    <div class="layui-tab-item">5</div>
			
 
				+    <div class="layui-tab-item">6</div>
			
 
				+  </div>
			
 
				+</div>             
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+        
			
 
				+        
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html" target="_blank">Tab元素文档</a>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html" target="_blank">常用元素操作</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('element', function(){
			
 
				+  var $ = layui.jquery
			
 
				+  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
			
 
				+  
			
 
				+  //触发事件
			
 
				+  var active = {
			
 
				+    tabAdd: function(){
			
 
				+      //新增一个Tab项
			
 
				+      element.tabAdd('demo', {
			
 
				+        title: '新选项'+ (Math.random()*1000|0) //用于演示
			
 
				+        ,content: '内容'+ (Math.random()*1000|0)
			
 
				+        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
			
 
				+      })
			
 
				+    }
			
 
				+    ,tabDelete: function(othis){
			
 
				+      //删除指定Tab项
			
 
				+      element.tabDelete('demo', '44'); //删除：“商品管理”
			
 
				+      
			
 
				+      
			
 
				+      othis.addClass('layui-btn-disabled');
			
 
				+    }
			
 
				+    ,tabChange: function(){
			
 
				+      //切换到指定Tab项
			
 
				+      element.tabChange('demo', '22'); //切换到：用户管理
			
 
				+    }
			
 
				+  };
			
 
				+  
			
 
				+  $('.site-demo-active').on('click', function(){
			
 
				+    var othis = $(this), type = othis.data('type');
			
 
				+    active[type] ? active[type].call(this, othis) : '';
			
 
				+  });
			
 
				+  
			
 
				+  //Hash地址的定位
			
 
				+  var layid = location.hash.replace(/^#test=/, '');
			
 
				+  element.tabChange('test', layid);
			
 
				+  
			
 
				+  element.on('tab(test)', function(elem){
			
 
				+    location.hash = 'test='+ $(this).attr('lay-id');
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table-element.html
+++ b/demo/table-element.html
@@ -0,0 +1,635 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@静态表格 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+<style>
			
 
				+.layui-table .layui-form-checkbox[lay-skin=primary]{margin:0;}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+ 
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+<blockquote class="layui-elem-quote">
			
 
				+  本页面只是演示静态表格，如果你需要的是数据表格，可前往：
			
 
				+  <a class="layui-btn layui-btn-normal" href="table.html" tppabs="http://www.layui.com/demo/table.html" target="_blank">表格模块示例</a>
			
 
				+</blockquote>   
			
 
				+             
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			
 
				+  <legend>默认表格</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-form">
			
 
				+  <table class="layui-table">
			
 
				+    <colgroup>
			
 
				+      <col width="150">
			
 
				+      <col width="150">
			
 
				+      <col width="200">
			
 
				+      <col>
			
 
				+    </colgroup>
			
 
				+    <thead>
			
 
				+      <tr>
			
 
				+        <th>人物</th>
			
 
				+        <th>民族</th>
			
 
				+        <th>出场时间</th>
			
 
				+        <th>格言</th>
			
 
				+      </tr> 
			
 
				+    </thead>
			
 
				+    <tbody>
			
 
				+      <tr>
			
 
				+        <td>贤心</td>
			
 
				+        <td>汉族</td>
			
 
				+        <td>1989-10-14</td>
			
 
				+        <td>人生似修行</td>
			
 
				+      </tr>
			
 
				+      <tr>
			
 
				+        <td>张爱玲</td>
			
 
				+        <td>汉族</td>
			
 
				+        <td>1920-09-30</td>
			
 
				+        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+      </tr>
			
 
				+      <tr>
			
 
				+        <td>Helen Keller</td>
			
 
				+        <td>拉丁美裔</td>
			
 
				+        <td>1880-06-27</td>
			
 
				+        <td> Life is either a daring adventure or nothing.</td>
			
 
				+      </tr>
			
 
				+      <tr>
			
 
				+        <td>岳飞</td>
			
 
				+        <td>汉族</td>
			
 
				+        <td>1103-北宋崇宁二年</td>
			
 
				+        <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
			
 
				+      </tr>
			
 
				+      <tr>
			
 
				+        <td>孟子</td>
			
 
				+        <td>华夏族（汉族）</td>
			
 
				+        <td>公元前-372年</td>
			
 
				+        <td>猿强，则国强。国强，则猿更强！ </td>
			
 
				+      </tr>
			
 
				+    </tbody>
			
 
				+  </table>
			
 
				+</div>
			
 
				+         
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>行边框表格</legend>
			
 
				+</fieldset>  
			
 
				+ 
			
 
				+<table class="layui-table" lay-skin="line">
			
 
				+  <colgroup>
			
 
				+    <col width="150">
			
 
				+    <col width="150">
			
 
				+    <col width="200">
			
 
				+    <col>
			
 
				+  </colgroup>
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th>人物</th>
			
 
				+      <th>民族</th>
			
 
				+      <th>出场时间</th>
			
 
				+      <th>格言</th>
			
 
				+    </tr> 
			
 
				+  </thead>
			
 
				+  <tbody>
			
 
				+    <tr>
			
 
				+      <td>贤心</td>
			
 
				+      <td>汉族</td>
			
 
				+      <td>1989-10-14</td>
			
 
				+      <td>人生似修行</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>张爱玲</td>
			
 
				+      <td>汉族</td>
			
 
				+      <td>1920-09-30</td>
			
 
				+      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>Helen Keller</td>
			
 
				+      <td>拉丁美裔</td>
			
 
				+      <td>1880-06-27</td>
			
 
				+      <td> Life is either a daring adventure or nothing.</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>岳飞</td>
			
 
				+      <td>汉族</td>
			
 
				+      <td>1103-北宋崇宁二年</td>
			
 
				+      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>孟子</td>
			
 
				+      <td>华夏族（汉族）</td>
			
 
				+      <td>公元前-372年</td>
			
 
				+      <td>猿强，则国强。国强，则猿更强！ </td>
			
 
				+    </tr>
			
 
				+  </tbody>
			
 
				+</table>   
			
 
				+         
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>列边框表格</legend>
			
 
				+</fieldset>  
			
 
				+ 
			
 
				+<table class="layui-table" lay-even lay-skin="row">
			
 
				+  <colgroup>
			
 
				+    <col width="150">
			
 
				+    <col width="150">
			
 
				+    <col width="200">
			
 
				+    <col>
			
 
				+  </colgroup>
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th>人物</th>
			
 
				+      <th>民族</th>
			
 
				+      <th>出场时间</th>
			
 
				+      <th>格言</th>
			
 
				+    </tr> 
			
 
				+  </thead>
			
 
				+  <tbody>
			
 
				+    <tr>
			
 
				+      <td>贤心</td>
			
 
				+      <td>汉族</td>
			
 
				+      <td>1989-10-14</td>
			
 
				+      <td>人生似修行</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>张爱玲</td>
			
 
				+      <td>汉族</td>
			
 
				+      <td>1920-09-30</td>
			
 
				+      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>Helen Keller</td>
			
 
				+      <td>拉丁美裔</td>
			
 
				+      <td>1880-06-27</td>
			
 
				+      <td> Life is either a daring adventure or nothing.</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>岳飞</td>
			
 
				+      <td>汉族</td>
			
 
				+      <td>1103-北宋崇宁二年</td>
			
 
				+      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>孟子</td>
			
 
				+      <td>华夏族（汉族）</td>
			
 
				+      <td>公元前-372年</td>
			
 
				+      <td>猿强，则国强。国强，则猿更强！ </td>
			
 
				+    </tr>
			
 
				+  </tbody>
			
 
				+</table>  
			
 
				+         
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>无边框表格</legend>
			
 
				+</fieldset>  
			
 
				+ 
			
 
				+<table class="layui-table" lay-even lay-skin="nob">
			
 
				+  <colgroup>
			
 
				+    <col width="150">
			
 
				+    <col width="150">
			
 
				+    <col width="200">
			
 
				+    <col>
			
 
				+  </colgroup>
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th>人物</th>
			
 
				+      <th>民族</th>
			
 
				+      <th>出场时间</th>
			
 
				+      <th>格言</th>
			
 
				+    </tr> 
			
 
				+  </thead>
			
 
				+  <tbody>
			
 
				+    <tr>
			
 
				+      <td>贤心</td>
			
 
				+      <td>汉族</td>
			
 
				+      <td>1989-10-14</td>
			
 
				+      <td>人生似修行</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>张爱玲</td>
			
 
				+      <td>汉族</td>
			
 
				+      <td>1920-09-30</td>
			
 
				+      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>Helen Keller</td>
			
 
				+      <td>拉丁美裔</td>
			
 
				+      <td>1880-06-27</td>
			
 
				+      <td> Life is either a daring adventure or nothing.</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>岳飞</td>
			
 
				+      <td>汉族</td>
			
 
				+      <td>1103-北宋崇宁二年</td>
			
 
				+      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>孟子</td>
			
 
				+      <td>华夏族（汉族）</td>
			
 
				+      <td>公元前-372年</td>
			
 
				+      <td>猿强，则国强。国强，则猿更强！ </td>
			
 
				+    </tr>
			
 
				+  </tbody>
			
 
				+</table> 
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>其它尺寸表格</legend>
			
 
				+</fieldset> 
			
 
				+ 
			
 
				+<table class="layui-table" lay-size="lg">
			
 
				+  <colgroup>
			
 
				+    <col width="150">
			
 
				+    <col width="200">
			
 
				+    <col>
			
 
				+  </colgroup>
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th>昵称</th>
			
 
				+      <th>加入时间</th>
			
 
				+      <th>签名</th>
			
 
				+    </tr> 
			
 
				+  </thead>
			
 
				+  <tbody>
			
 
				+    <tr>
			
 
				+      <td>贤心</td>
			
 
				+      <td>2016-11-29</td>
			
 
				+      <td>人生就像是一场修行</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>许闲心</td>
			
 
				+      <td>2016-11-28</td>
			
 
				+      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>sentsin</td>
			
 
				+      <td>2016-11-27</td>
			
 
				+      <td> Life is either a daring adventure or nothing.</td>
			
 
				+    </tr>
			
 
				+  </tbody>
			
 
				+</table>
			
 
				+<table class="layui-table" lay-size="sm">
			
 
				+  <colgroup>
			
 
				+    <col width="150">
			
 
				+    <col width="200">
			
 
				+    <col>
			
 
				+  </colgroup>
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th>昵称</th>
			
 
				+      <th>加入时间</th>
			
 
				+      <th>签名</th>
			
 
				+    </tr> 
			
 
				+  </thead>
			
 
				+  <tbody>
			
 
				+    <tr>
			
 
				+      <td>贤心</td>
			
 
				+      <td>2016-11-29</td>
			
 
				+      <td>人生就像是一场修行</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>许闲心</td>
			
 
				+      <td>2016-11-28</td>
			
 
				+      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>sentsin</td>
			
 
				+      <td>2016-11-27</td>
			
 
				+      <td> Life is either a daring adventure or nothing.</td>
			
 
				+    </tr>
			
 
				+  </tbody>
			
 
				+</table>
			
 
				+ 
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/table.html" tppabs="http://www.layui.com/doc/element/table.html" target="_blank">表格元素文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+ 
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table.html
+++ b/demo/table.html
@@ -0,0 +1,466 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块 | 数据表格 | datatable - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="table/thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview">
			
 
				+           
			
 
				+<table class="layui-hide" id="test"></table>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url: '../demo/table/user/-page=1&limit=20.js'
			
 
				+    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			
 
				+    ,cols: [[
			
 
				+      {field:'id', width:80, title: 'ID', sort: true}
			
 
				+      ,{field:'username', width:80, title: '用户名'}
			
 
				+      ,{field:'sex', width:80, title: '性别', sort: true}
			
 
				+      ,{field:'city', width:80, title: '城市'}
			
 
				+      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
			
 
				+      ,{field:'experience', title: '积分', sort: true}
			
 
				+      ,{field:'score', title: '评分', sort: true}
			
 
				+      ,{field:'classify', title: '职业'}
			
 
				+      ,{field:'wealth', width:137, title: '财富', sort: true}
			
 
				+    ]]
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/auto.html
+++ b/demo/table/auto.html
@@ -0,0 +1,460 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，列宽自动分配 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test"></table>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url: '../../demo/table/user/-page=1&limit=20.js'
			
 
				+    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			
 
				+    ,cols: [[
			
 
				+      {field:'id', title: 'ID', sort: true}
			
 
				+      ,{field:'username', title: '用户名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
			
 
				+      ,{field:'sex', title: '性别', sort: true}
			
 
				+      ,{field:'city', title: '城市'}
			
 
				+      ,{field:'sign', title: '签名'}
			
 
				+      ,{field:'classify', title: '职业', align: 'center'} //单元格内容水平居中
			
 
				+      ,{field:'experience', title: '积分', sort: true, align: 'right'} //单元格内容水平居右
			
 
				+      ,{field:'score', title: '评分', sort: true, align: 'right'}
			
 
				+      ,{field:'wealth', title: '财富', sort: true, align: 'right'}
			
 
				+    ]]
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/cellEdit.html
+++ b/demo/table/cellEdit.html
@@ -0,0 +1,463 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，单元格可编辑 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-table" lay-data="{url: '../../demo/table/demo1/-page=1&limit=10.js', id:'test3', escape: true}" lay-filter="test3">
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th lay-data="{type:'checkbox'}">ID</th>
			
 
				+      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
			
 
				+      <th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
			
 
				+      <th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th>
			
 
				+      <th lay-data="{field:'sex', width:80, edit: 'text'}">性别</th>
			
 
				+      <th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>
			
 
				+      <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>
			
 
				+    </tr>
			
 
				+  </thead>
			
 
				+</table>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['table', 'util'], function(){
			
 
				+  var table = layui.table
			
 
				+  ,util = layui.util;
			
 
				+  
			
 
				+  //监听单元格编辑
			
 
				+  table.on('edit(test3)', function(obj){
			
 
				+    var value = obj.value //得到修改后的值
			
 
				+    ,data = obj.data //得到所在行所有键值
			
 
				+    ,field = obj.field; //得到字段
			
 
				+    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/cellEvent.html
+++ b/demo/table/cellEvent.html
@@ -0,0 +1,475 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，单元格事件 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+点击下面表格中的【签名列】，以演示单元格事件
			
 
				+ 
			
 
				+<table class="layui-table" lay-data="{height: 308, url: '../../demo/table/user/-page=1&limit=20.js'}" lay-filter="demoEvent">
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th lay-data="{field:'id', width:80}">ID</th>
			
 
				+      <th lay-data="{field:'username', width:80}">用户名</th>
			
 
				+      <th lay-data="{field:'sign', width:'50%', event: 'setSign', style:'cursor: pointer;'}">签名</th>
			
 
				+      <th lay-data="{field:'experience'}">积分</th>
			
 
				+      <th lay-data="{field:'score'}">评分</th>
			
 
				+    </tr>
			
 
				+  </thead>
			
 
				+</table> 
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table; 
			
 
				+  //监听单元格事件
			
 
				+  table.on('tool(demoEvent)', function(obj){
			
 
				+    var data = obj.data;
			
 
				+    if(obj.event === 'setSign'){
			
 
				+      layer.prompt({
			
 
				+        formType: 2
			
 
				+        ,title: '修改 ID 为 ['+ data.id +'] 的用户签名'
			
 
				+        ,value: data.sign
			
 
				+      }, function(value, index){
			
 
				+        layer.close(index);
			
 
				+        
			
 
				+        //这里一般是发送修改的Ajax请求
			
 
				+        
			
 
				+        //同步更新表格和缓存对应的值
			
 
				+        obj.update({
			
 
				+          sign: value
			
 
				+        });
			
 
				+      });
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/checkbox.html
+++ b/demo/table/checkbox.html
@@ -0,0 +1,461 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，开启复选框 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test"></table>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url: '../../demo/table/user/-page=1&limit=20.js'
			
 
				+    ,cols: [[
			
 
				+      {type:'checkbox'}
			
 
				+      ,{field:'id', width:80, title: 'ID', sort: true}
			
 
				+      ,{field:'username', width:80, title: '用户名'}
			
 
				+      ,{field:'sex', width:80, title: '性别', sort: true}
			
 
				+      ,{field:'city', width:80, title: '城市'}
			
 
				+      ,{field:'sign', title: '签名', minWidth: 100}
			
 
				+      ,{field:'experience', width:80, title: '积分', sort: true}
			
 
				+      ,{field:'score', width:80, title: '评分', sort: true}
			
 
				+      ,{field:'classify', width:80, title: '职业'}
			
 
				+      ,{field:'wealth', width:135, title: '财富', sort: true}
			
 
				+    ]]
			
 
				+    ,page: true
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/data.html
+++ b/demo/table/data.html
@@ -0,0 +1,552 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，将已知数据生成数据表格 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview">
			
 
				+    
			
 
				+<table class="layui-hide" id="demo"></table>
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  //展示已知数据
			
 
				+  table.render({
			
 
				+    elem: '#demo'
			
 
				+    ,cols: [[ //标题栏
			
 
				+      {field: 'id', title: 'ID', width: 80, sort: true}
			
 
				+      ,{field: 'username', title: '用户名', width: 120}
			
 
				+      ,{field: 'email', title: '邮箱', minWidth: 150}
			
 
				+      ,{field: 'sign', title: '签名', minWidth: 160}
			
 
				+      ,{field: 'sex', title: '性别', width: 80}
			
 
				+      ,{field: 'city', title: '城市', width: 100}
			
 
				+      ,{field: 'experience', title: '积分', width: 80, sort: true}
			
 
				+    ]]
			
 
				+    ,data: [{
			
 
				+      "id": "10001"
			
 
				+      ,"username": "杜甫"
			
 
				+      ,"email": "http://www.layui.com/demo/table/test@email.com"
			
 
				+      ,"sex": "男"
			
 
				+      ,"city": "浙江杭州"
			
 
				+      ,"sign": "人生恰似一场修行"
			
 
				+      ,"experience": "116"
			
 
				+      ,"ip": "192.168.0.8"
			
 
				+      ,"logins": "108"
			
 
				+      ,"joinTime": "2016-10-14"
			
 
				+    }, {
			
 
				+      "id": "10002"
			
 
				+      ,"username": "李白"
			
 
				+      ,"email": "http://www.layui.com/demo/table/test@email.com"
			
 
				+      ,"sex": "男"
			
 
				+      ,"city": "浙江杭州"
			
 
				+      ,"sign": "人生恰似一场修行"
			
 
				+      ,"experience": "12"
			
 
				+      ,"ip": "192.168.0.8"
			
 
				+      ,"logins": "106"
			
 
				+      ,"joinTime": "2016-10-14"
			
 
				+      ,"LAY_CHECKED": true
			
 
				+    }, {
			
 
				+      "id": "10003"
			
 
				+      ,"username": "王勃"
			
 
				+      ,"email": "http://www.layui.com/demo/table/test@email.com"
			
 
				+      ,"sex": "男"
			
 
				+      ,"city": "浙江杭州"
			
 
				+      ,"sign": "人生恰似一场修行"
			
 
				+      ,"experience": "65"
			
 
				+      ,"ip": "192.168.0.8"
			
 
				+      ,"logins": "106"
			
 
				+      ,"joinTime": "2016-10-14"
			
 
				+    }, {
			
 
				+      "id": "10004"
			
 
				+      ,"username": "贤心"
			
 
				+      ,"email": "http://www.layui.com/demo/table/test@email.com"
			
 
				+      ,"sex": "男"
			
 
				+      ,"city": "浙江杭州"
			
 
				+      ,"sign": "人生恰似一场修行"
			
 
				+      ,"experience": "666"
			
 
				+      ,"ip": "192.168.0.8"
			
 
				+      ,"logins": "106"
			
 
				+      ,"joinTime": "2016-10-14"
			
 
				+    }, {
			
 
				+      "id": "10005"
			
 
				+      ,"username": "贤心"
			
 
				+      ,"email": "http://www.layui.com/demo/table/test@email.com"
			
 
				+      ,"sex": "男"
			
 
				+      ,"city": "浙江杭州"
			
 
				+      ,"sign": "人生恰似一场修行"
			
 
				+      ,"experience": "86"
			
 
				+      ,"ip": "192.168.0.8"
			
 
				+      ,"logins": "106"
			
 
				+      ,"joinTime": "2016-10-14"
			
 
				+    }, {
			
 
				+      "id": "10006"
			
 
				+      ,"username": "贤心"
			
 
				+      ,"email": "http://www.layui.com/demo/table/test@email.com"
			
 
				+      ,"sex": "男"
			
 
				+      ,"city": "浙江杭州"
			
 
				+      ,"sign": "人生恰似一场修行"
			
 
				+      ,"experience": "12"
			
 
				+      ,"ip": "192.168.0.8"
			
 
				+      ,"logins": "106"
			
 
				+      ,"joinTime": "2016-10-14"
			
 
				+    }, {
			
 
				+      "id": "10007"
			
 
				+      ,"username": "贤心"
			
 
				+      ,"email": "http://www.layui.com/demo/table/test@email.com"
			
 
				+      ,"sex": "男"
			
 
				+      ,"city": "浙江杭州"
			
 
				+      ,"sign": "人生恰似一场修行"
			
 
				+      ,"experience": "16"
			
 
				+      ,"ip": "192.168.0.8"
			
 
				+      ,"logins": "106"
			
 
				+      ,"joinTime": "2016-10-14"
			
 
				+    }, {
			
 
				+      "id": "10008"
			
 
				+      ,"username": "贤心"
			
 
				+      ,"email": "http://www.layui.com/demo/table/test@email.com"
			
 
				+      ,"sex": "男"
			
 
				+      ,"city": "浙江杭州"
			
 
				+      ,"sign": "人生恰似一场修行"
			
 
				+      ,"experience": "106"
			
 
				+      ,"ip": "192.168.0.8"
			
 
				+      ,"logins": "106"
			
 
				+      ,"joinTime": "2016-10-14"
			
 
				+    }]
			
 
				+    //,skin: 'line' //表格风格
			
 
				+    ,even: true
			
 
				+    //,page: true //是否显示分页
			
 
				+    //,limits: [5, 7, 10]
			
 
				+    //,limit: 5 //每页默认显示的数量
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/demo1/-page=1&limit=10.js
+++ b/demo/table/demo1/-page=1&limit=10.js
--- a/demo/table/fixed.html
+++ b/demo/table/fixed.html
@@ -0,0 +1,463 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，固定列 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test"></table>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url: '../../demo/table/user/-page=1&limit=20.js'
			
 
				+    ,width: 892
			
 
				+    ,height: 330
			
 
				+    ,cols: [[
			
 
				+      {type:'checkbox', fixed: 'left'}
			
 
				+      ,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
			
 
				+      ,{field:'username', width:80, title: '用户名'}
			
 
				+      ,{field:'sex', width:80, title: '性别', sort: true}
			
 
				+      ,{field:'city', width:80, title: '城市'}
			
 
				+      ,{field:'sign', width: 219, title: '签名'}
			
 
				+      ,{field:'experience', width:80, title: '积分', sort: true}
			
 
				+      ,{field:'score', width:80, title: '评分', sort: true}
			
 
				+      ,{field:'classify', width:80, title: '职业'}
			
 
				+      ,{field:'wealth', width:120, title: '财富', sort: true, fixed: 'right'}
			
 
				+    ]]
			
 
				+    ,page: true
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/form.html
+++ b/demo/table/form.html
@@ -0,0 +1,482 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，加入表单元素 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test"></table>
			
 
				+ 
			
 
				+<script type="text/html" id="switchTpl">
			
 
				+  <!-- 这里的 checked 的状态只是演示 -->
			
 
				+  <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
			
 
				+</script>
			
 
				+ 
			
 
				+<script type="text/html" id="checkboxTpl">
			
 
				+  <!-- 这里的 checked 的状态只是演示 -->
			
 
				+  <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
			
 
				+</script>
			
 
				+
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table
			
 
				+  ,form = layui.form;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url: '../../demo/table/user/-page=1&limit=20.js'
			
 
				+    ,cellMinWidth: 80
			
 
				+    ,cols: [[
			
 
				+      {type:'numbers'}
			
 
				+      ,{type: 'checkbox'}
			
 
				+      ,{field:'id', title:'ID', width:100, unresize: true, sort: true}
			
 
				+      ,{field:'username', title:'用户名', templet: '#usernameTpl'}
			
 
				+      ,{field:'city', title:'城市'}
			
 
				+      ,{field:'wealth', title: '财富', minWidth:120, sort: true}
			
 
				+      ,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}
			
 
				+      ,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
			
 
				+    ]]
			
 
				+    ,page: true
			
 
				+  });
			
 
				+  
			
 
				+  //监听性别操作
			
 
				+  form.on('switch(sexDemo)', function(obj){
			
 
				+    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
			
 
				+  });
			
 
				+  
			
 
				+  //监听锁定操作
			
 
				+  form.on('checkbox(lockDemo)', function(obj){
			
 
				+    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/height.html
+++ b/demo/table/height.html
@@ -0,0 +1,457 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，数据表格的高度最大化适应 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview">  
			
 
				+ 
			
 
				+<table class="layui-table" lay-data="{height: 'full-200', cellMinWidth: 80, page: true, limit:30, url: '../../demo/table/user/-page=1&limit=20.js'}">
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th lay-data="{type:'checkbox'}">ID</th>
			
 
				+      <th lay-data="{field:'id', width:100, sort: true}">ID</th>
			
 
				+      <th lay-data="{field:'username', width:100}">用户名</th>
			
 
				+      <th lay-data="{field:'sex', width:100, sort: true}">性别</th>
			
 
				+      <th lay-data="{field:'sign', minWidth: 150}">签名</th>
			
 
				+      <th lay-data="{field:'experience', sort: true, align: 'right'}">积分</th>
			
 
				+      <th lay-data="{field:'score', sort: true, minWidth: 100, align: 'right'}">评分</th>
			
 
				+    </tr>
			
 
				+  </thead>
			
 
				+</table> 
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/initSort.html
+++ b/demo/table/initSort.html
@@ -0,0 +1,452 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，初始排序 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-table" lay-data="{height: 308, url: '../../demo/table/user/-page=1&limit=20.js', initSort: {field:'wealth', type:'desc'}}" lay-filter="demoEvent">
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th lay-data="{field:'id', width:80}">ID</th>
			
 
				+      <th lay-data="{field:'username', width:80}">用户名</th>
			
 
				+      <th lay-data="{field:'score', width:80, sort: true}">评分</th>
			
 
				+      <th lay-data="{field:'wealth', sort: true, minWidth: 150}">财富</th>
			
 
				+    </tr>
			
 
				+  </thead>
			
 
				+</table> 
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table; 
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/onrow.html
+++ b/demo/table/onrow.html
@@ -0,0 +1,484 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，监听行事件 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test" lay-filter="test"></table>
			
 
				+ 
			
 
				+<script type="text/html" id="toolbarDemo">
			
 
				+  <div class="layui-btn-container">
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
			
 
				+  </div>
			
 
				+</script>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url:'../../test/table/demo1.json.js'/*tpa=http://www.layui.com/test/table/demo1.json*/
			
 
				+    ,cols: [[
			
 
				+      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
			
 
				+      ,{field:'username', title:'用户名', width:120}
			
 
				+      ,{field:'email', title:'邮箱', width:150, templet: function(res){
			
 
				+        return '<em>'+ res.email +'</em>'
			
 
				+      }}
			
 
				+      ,{field:'sex', title:'性别', width:80, sort: true}
			
 
				+      ,{field:'city', title:'城市', width:100}
			
 
				+      ,{field:'sign', title:'签名'}
			
 
				+      ,{field:'experience', title:'积分', width:80, sort: true}
			
 
				+      ,{field:'ip', title:'IP', width:120}
			
 
				+      ,{field:'logins', title:'登入次数', width:100, sort: true}
			
 
				+      ,{field:'joinTime', title:'加入时间', width:120}
			
 
				+    ]]
			
 
				+    ,page: true
			
 
				+  });
			
 
				+  
			
 
				+  //监听行单击事件（双击事件为：rowDouble）
			
 
				+  table.on('row(test)', function(obj){
			
 
				+    var data = obj.data;
			
 
				+    
			
 
				+    layer.alert(JSON.stringify(data), {
			
 
				+      title: '当前行数据：'
			
 
				+    });
			
 
				+    
			
 
				+    //标注选中样式
			
 
				+    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/operate.html
+++ b/demo/table/operate.html
@@ -0,0 +1,518 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，数据操作和左右列固定 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview">  
			
 
				+<div style="margin-bottom: 5px;">          
			
 
				+ 
			
 
				+<!-- 示例-970 -->
			
 
				+
			
 
				+ 
			
 
				+</div>
			
 
				+ 
			
 
				+<div class="layui-btn-group demoTable">
			
 
				+  <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
			
 
				+  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
			
 
				+  <button class="layui-btn" data-type="isAll">验证是否全选</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<table class="layui-table" lay-data="{width: 892, height:330, url: '../../demo/table/user/-page=1&limit=20.js', page:true, id:'idTest'}" lay-filter="demo">
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
			
 
				+      <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
			
 
				+      <th lay-data="{field:'username', width:80}">用户名</th>
			
 
				+      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
			
 
				+      <th lay-data="{field:'city', width:80}">城市</th>
			
 
				+      <th lay-data="{field:'sign', width:160}">签名</th>
			
 
				+      <th lay-data="{field:'experience', width:80, sort: true}">积分</th>
			
 
				+      
			
 
				+      <th lay-data="{field:'classify', width:80}">职业</th>
			
 
				+      <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
			
 
				+      <th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">评分</th>
			
 
				+      <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
			
 
				+    </tr>
			
 
				+  </thead>
			
 
				+</table>
			
 
				+ 
			
 
				+<script type="text/html" id="barDemo">
			
 
				+  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
			
 
				+  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			
 
				+  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			
 
				+</script>
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  //监听表格复选框选择
			
 
				+  table.on('checkbox(demo)', function(obj){
			
 
				+    console.log(obj)
			
 
				+  });
			
 
				+  //监听工具条
			
 
				+  table.on('tool(demo)', function(obj){
			
 
				+    var data = obj.data;
			
 
				+    if(obj.event === 'detail'){
			
 
				+      layer.msg('ID：'+ data.id + ' 的查看操作');
			
 
				+    } else if(obj.event === 'del'){
			
 
				+      layer.confirm('真的删除行么', function(index){
			
 
				+        obj.del();
			
 
				+        layer.close(index);
			
 
				+      });
			
 
				+    } else if(obj.event === 'edit'){
			
 
				+      layer.alert('编辑行：<br>'+ JSON.stringify(data))
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  var $ = layui.$, active = {
			
 
				+    getCheckData: function(){ //获取选中数据
			
 
				+      var checkStatus = table.checkStatus('idTest')
			
 
				+      ,data = checkStatus.data;
			
 
				+      layer.alert(JSON.stringify(data));
			
 
				+    }
			
 
				+    ,getCheckLength: function(){ //获取选中数目
			
 
				+      var checkStatus = table.checkStatus('idTest')
			
 
				+      ,data = checkStatus.data;
			
 
				+      layer.msg('选中了：'+ data.length + ' 个');
			
 
				+    }
			
 
				+    ,isAll: function(){ //验证是否全选
			
 
				+      var checkStatus = table.checkStatus('idTest');
			
 
				+      layer.msg(checkStatus.isAll ? '全选': '未全选')
			
 
				+    }
			
 
				+  };
			
 
				+  
			
 
				+  $('.demoTable .layui-btn').on('click', function(){
			
 
				+    var type = $(this).data('type');
			
 
				+    active[type] ? active[type].call(this) : '';
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/page.html
+++ b/demo/table/page.html
@@ -0,0 +1,460 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，开启分页 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test"></table>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url: '../../demo/table/user/-page=1&limit=20.js'
			
 
				+    ,cols: [[
			
 
				+      {field:'id', width:80, title: 'ID', sort: true}
			
 
				+      ,{field:'username', width:80, title: '用户名'}
			
 
				+      ,{field:'sex', width:80, title: '性别', sort: true}
			
 
				+      ,{field:'city', width:80, title: '城市'}
			
 
				+      ,{field:'sign', title: '签名', minWidth: 150}
			
 
				+      ,{field:'experience', width:80, title: '积分', sort: true}
			
 
				+      ,{field:'score', width:80, title: '评分', sort: true}
			
 
				+      ,{field:'classify', width:80, title: '职业'}
			
 
				+      ,{field:'wealth', width:135, title: '财富', sort: true}
			
 
				+    ]]
			
 
				+    ,page: true
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/parseData.html
+++ b/demo/table/parseData.html
@@ -0,0 +1,478 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，解析任意数据格式 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+<blockquote class="layui-elem-quote layui-text">
			
 
				+  尽管本示例中的原始数据：<a href="../../test/table/demo3.json.js" tppabs="http://www.layui.com/test/table/demo3.json" target="_blank">/test/table/demo3.json</a>，并不符合 table 组件默认规定的数据格式，但从 layui 2.4.0 开始，新增的 parseData 回调可以将原始的任意格式的数据重新解析成 table 组件规定的数据格式。具体可以点击上方查看代码。
			
 
				+</blockquote>
			
 
				+ 
			
 
				+<table class="layui-hide" id="test" lay-filter="test"></table>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url:'../../test/table/demo3.json.js'/*tpa=http://www.layui.com/test/table/demo3.json*/
			
 
				+    ,toolbar: true
			
 
				+    ,title: '用户数据表'
			
 
				+    ,totalRow: true
			
 
				+    ,cols: [[
			
 
				+      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计行'}
			
 
				+      ,{field:'username', title:'用户名', width:120, edit: 'text'}
			
 
				+      ,{field:'email', title:'邮箱', width:150, edit: 'text'}
			
 
				+      ,{field:'experience', title:'积分', width:100, sort: true, totalRow: true}
			
 
				+      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
			
 
				+      ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
			
 
				+      ,{field:'sign', title:'签名'}
			
 
				+      ,{field:'city', title:'城市', width:100}
			
 
				+      ,{field:'ip', title:'IP', width:120}
			
 
				+      ,{field:'joinTime', title:'加入时间', width:120}
			
 
				+    ]]
			
 
				+    ,page: true
			
 
				+    ,response: {
			
 
				+      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
			
 
				+    }
			
 
				+    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
			
 
				+      return {
			
 
				+        "code": res.status, //解析接口状态
			
 
				+        "msg": res.message, //解析提示文本
			
 
				+        "count": res.total, //解析数据长度
			
 
				+        "data": res.rows.item //解析数据列表
			
 
				+      };
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/radio.html
+++ b/demo/table/radio.html
@@ -0,0 +1,479 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，开启单选框 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test" lay-filter="test"></table>
			
 
				+ 
			
 
				+<script type="text/html" id="toolbarDemo">
			
 
				+  <div class="layui-btn-container">
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
			
 
				+  </div>
			
 
				+</script>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url: '../../demo/table/user/-page=1&limit=20.js'
			
 
				+    ,toolbar: '#toolbarDemo'
			
 
				+    ,cols: [[
			
 
				+      {type:'radio'}
			
 
				+      ,{field:'id', width:80, title: 'ID', sort: true}
			
 
				+      ,{field:'username', width:80, title: '用户名'}
			
 
				+      ,{field:'sex', width:80, title: '性别', sort: true}
			
 
				+      ,{field:'city', width:80, title: '城市'}
			
 
				+      ,{field:'sign', title: '签名', minWidth: 100}
			
 
				+      ,{field:'experience', width:80, title: '积分', sort: true}
			
 
				+      ,{field:'score', width:80, title: '评分', sort: true}
			
 
				+      ,{field:'classify', width:80, title: '职业'}
			
 
				+      ,{field:'wealth', width:135, title: '财富', sort: true}
			
 
				+    ]]
			
 
				+    ,page: true
			
 
				+  });
			
 
				+  
			
 
				+  //头工具栏事件
			
 
				+  table.on('toolbar(test)', function(obj){
			
 
				+    var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
			
 
				+    switch(obj.event){
			
 
				+      case 'getCheckData':
			
 
				+        var data = checkStatus.data;  //获取选中行数据
			
 
				+        layer.alert(JSON.stringify(data));
			
 
				+      break;
			
 
				+    };
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/reload.html
+++ b/demo/table/reload.html
@@ -0,0 +1,495 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，数据表格的重载 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview"> 
			
 
				+ 
			
 
				+<div class="demoTable">
			
 
				+  搜索ID：
			
 
				+  <div class="layui-inline">
			
 
				+    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
			
 
				+  </div>
			
 
				+  <button class="layui-btn" data-type="reload">搜索</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  //方法级渲染
			
 
				+  table.render({
			
 
				+    elem: '#LAY_table_user'
			
 
				+    ,url: '../../demo/table/user/-page=1&limit=30.js'
			
 
				+    ,cols: [[
			
 
				+      {checkbox: true, fixed: true}
			
 
				+      ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
			
 
				+      ,{field:'username', title: '用户名', width:80}
			
 
				+      ,{field:'sex', title: '性别', width:80, sort: true}
			
 
				+      ,{field:'city', title: '城市', width:80}
			
 
				+      ,{field:'sign', title: '签名'}
			
 
				+      ,{field:'experience', title: '积分', sort: true, width:80}
			
 
				+      ,{field:'score', title: '评分', sort: true, width:80}
			
 
				+      ,{field:'classify', title: '职业', width:80}
			
 
				+      ,{field:'wealth', title: '财富', sort: true, width:135}
			
 
				+    ]]
			
 
				+    ,id: 'testReload'
			
 
				+    ,page: true
			
 
				+    ,height: 310
			
 
				+  });
			
 
				+  
			
 
				+  var $ = layui.$, active = {
			
 
				+    reload: function(){
			
 
				+      var demoReload = $('#demoReload');
			
 
				+      
			
 
				+      //执行重载
			
 
				+      table.reload('testReload', {
			
 
				+        page: {
			
 
				+          curr: 1 //重新从第 1 页开始
			
 
				+        }
			
 
				+        ,where: {
			
 
				+          key: {
			
 
				+            id: demoReload.val()
			
 
				+          }
			
 
				+        }
			
 
				+      });
			
 
				+    }
			
 
				+  };
			
 
				+  
			
 
				+  $('.demoTable .layui-btn').on('click', function(){
			
 
				+    var type = $(this).data('type');
			
 
				+    active[type] ? active[type].call(this) : '';
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/resetPage.html
+++ b/demo/table/resetPage.html
@@ -0,0 +1,468 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，自定义分页 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test"></table>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url: '../../demo/table/user/-page=1&limit=20.js'
			
 
				+    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
			
 
				+      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
			
 
				+      //,curr: 5 //设定初始在第 5 页
			
 
				+      ,groups: 1 //只显示 1 个连续页码
			
 
				+      ,first: false //不显示首页
			
 
				+      ,last: false //不显示尾页
			
 
				+      
			
 
				+    }
			
 
				+    ,cols: [[
			
 
				+      {field:'id', width:80, title: 'ID', sort: true}
			
 
				+      ,{field:'username', width:100, title: '用户名'}
			
 
				+      ,{field:'sex', width:80, title: '性别', sort: true}
			
 
				+      ,{field:'city', width:80, title: '城市'}
			
 
				+      ,{field:'sign', title: '签名', minWidth: 150}
			
 
				+      ,{field:'experience', width:80, title: '积分', sort: true}
			
 
				+      ,{field:'score', width:80, title: '评分', sort: true}
			
 
				+      ,{field:'classify', width:80, title: '职业'}
			
 
				+      ,{field:'wealth', width:135, title: '财富', sort: true}
			
 
				+    ]]
			
 
				+    
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/static.html
+++ b/demo/table/static.html
@@ -0,0 +1,485 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，转化静态表格 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview">
			
 
				+  
			
 
				+<div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
			
 
				+  <button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<table lay-filter="parse-table-demo">
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th lay-data="{field:'username', width:200}">昵称</th>
			
 
				+      <th lay-data="{field:'joinTime', width:150}">加入时间</th>
			
 
				+      <th lay-data="{field:'sign', minWidth: 180}">签名</th>
			
 
				+    </tr> 
			
 
				+  </thead>
			
 
				+  <tbody>
			
 
				+    <tr>
			
 
				+      <td>贤心1</td>
			
 
				+      <td>2016-11-28</td>
			
 
				+      <td>人生就像是一场修行 A</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>贤心2</td>
			
 
				+      <td>2016-11-29</td>
			
 
				+      <td>人生就像是一场修行 B</td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>贤心3</td>
			
 
				+      <td>2016-11-30</td>
			
 
				+      <td>人生就像是一场修行 C</td>
			
 
				+    </tr>
			
 
				+  </tbody>
			
 
				+</table>
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+ 
			
 
				+  var $ = layui.$, active = {
			
 
				+    parseTable: function(){
			
 
				+      table.init('parse-table-demo', { //转化静态表格
			
 
				+        //height: 'full-500'
			
 
				+      }); 
			
 
				+    }
			
 
				+  };
			
 
				+  
			
 
				+  $('.demoTable .layui-btn').on('click', function(){
			
 
				+    var type = $(this).data('type');
			
 
				+    active[type] ? active[type].call(this) : '';
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/style.html
+++ b/demo/table/style.html
@@ -0,0 +1,472 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，自定义单元格样式 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-table" lay-data="{height:305, url: '../../demo/table/user/-page=1&limit=20.js', page:true, id:'test2', skin: 'row', even: true}">
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
			
 
				+      <th lay-data="{field:'username', width:80, templet: '#usernameTpl'}">用户名</th>
			
 
				+      <th lay-data="{field:'sex', width:80, sort: true, templet: '#sexTpl'}">性别</th>
			
 
				+      <th lay-data="{field:'city', width:80}">城市</th>
			
 
				+      <th lay-data="{field:'sign'}">签名</th>
			
 
				+      <th lay-data="{field:'experience', width:80, sort: true, style:'background-color: #eee;'}">积分</th>
			
 
				+      <th lay-data="{field:'score', width:80, sort: true}">评分</th>
			
 
				+      <th lay-data="{field:'classify', width:80, style:'background-color: #009688; color: #fff;'}">职业</th>
			
 
				+      <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
			
 
				+    </tr>
			
 
				+  </thead>
			
 
				+</table>
			
 
				+ 
			
 
				+<script type="text/html" id="usernameTpl">
			
 
				+  <a href="../../-table-demo-id={{d.id}}.htm"/*tpa=http://www.layui.com/?table-demo-id={{d.id}}*/ class="layui-table-link" target="_blank">{{ d.username }}</a>
			
 
				+</script>
			
 
				+<script type="text/html" id="sexTpl">
			
 
				+  {{#  if(d.sex === '女'){ }}
			
 
				+    <span style="color: #F581B1;">{{ d.sex }}</span>
			
 
				+  {{#  } else { }}
			
 
				+    {{ d.sex }}
			
 
				+  {{#  } }}
			
 
				+</script>
			
 
				+
			
 
				+<script type="text/html" id="barDemo1">
			
 
				+  <a class="layui-btn layui-btn-xs" lay-event="edit">工具性按钮</a>
			
 
				+</script>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/thead.html
+++ b/demo/table/thead.html
@@ -0,0 +1,494 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，将已知数据生成数据表格 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+<style>
			
 
				+.layui-body{overflow-y: scroll}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+常用两级表头：
			
 
				+ 
			
 
				+<table class="layui-table" lay-data="{width:800, url:'../../test/table/demo2.json2.js', page: true, limit: 6, limits:[6]}">
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
			
 
				+      <th lay-data="{field:'username', width:150}" rowspan="2">联系人</th>
			
 
				+      <th lay-data="{align:'center'}" colspan="3">地址</th>
			
 
				+      <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
			
 
				+      <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="2">操作</th>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <th lay-data="{field:'province', width:120}">省</th>
			
 
				+      <th lay-data="{field:'city', width:120}">市</th>
			
 
				+      <th lay-data="{field:'zone', width:200}">区</th>
			
 
				+    </tr>
			
 
				+  </thead>
			
 
				+</table>
			
 
				+更多级表头（可以无限极）：
			
 
				+<table class="layui-table" lay-data="{url:'../../test/table/demo2.json3.js', cellMinWidth: 80, page: true}">
			
 
				+  <thead>
			
 
				+    <tr>
			
 
				+      <th lay-data="{field:'username', width:80}" rowspan="3">联系人</th>
			
 
				+      <th lay-data="{field:'amount', width:120}" rowspan="3">金额</th>
			
 
				+      <th lay-data="{align:'center'}" colspan="5">地址1</th>
			
 
				+      <th lay-data="{align:'center'}" colspan="2">地址2</th>
			
 
				+      <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="3">操作</th>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <th lay-data="{field:'province'}" rowspan="2">省</th>
			
 
				+      <th lay-data="{field:'city'}" rowspan="2">市</th>
			
 
				+      <th lay-data="{align:'center'}" colspan="3">详细</th>
			
 
				+      <th lay-data="{field:'province'}" rowspan="2">省</th>
			
 
				+      <th lay-data="{field:'city'}" rowspan="2">市</th>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <th lay-data="{field:'street'}" rowspan="2">街道</th>
			
 
				+      <th lay-data="{field:'address'}">小区</th>
			
 
				+      <th lay-data="{field:'house'}">单元</th>
			
 
				+    </tr>
			
 
				+  </thead>
			
 
				+</table>
			
 
				+ 
			
 
				+<script type="text/html" id="barDemo">
			
 
				+  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
			
 
				+  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
			
 
				+</script>
			
 
				+<p style="color: #999">注：上述例子读取的均是静态模拟数据</p>
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/toolbar.html
+++ b/demo/table/toolbar.html
@@ -0,0 +1,530 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，开启头部工具栏 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test" lay-filter="test"></table>
			
 
				+ 
			
 
				+<script type="text/html" id="toolbarDemo">
			
 
				+  <div class="layui-btn-container">
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
			
 
				+  </div>
			
 
				+</script>
			
 
				+ 
			
 
				+<script type="text/html" id="barDemo">
			
 
				+  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			
 
				+  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			
 
				+</script>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url:'../../test/table/demo1.json.js'/*tpa=http://www.layui.com/test/table/demo1.json*/
			
 
				+    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			
 
				+    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
			
 
				+      title: '提示'
			
 
				+      ,layEvent: 'LAYTABLE_TIPS'
			
 
				+      ,icon: 'layui-icon-tips'
			
 
				+    }]
			
 
				+    ,title: '用户数据表'
			
 
				+    ,cols: [[
			
 
				+      {type: 'checkbox', fixed: 'left'}
			
 
				+      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
			
 
				+      ,{field:'username', title:'用户名', width:120, edit: 'text'}
			
 
				+      ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
			
 
				+        return '<em>'+ res.email +'</em>'
			
 
				+      }}
			
 
				+      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
			
 
				+      ,{field:'city', title:'城市', width:100}
			
 
				+      ,{field:'sign', title:'签名'}
			
 
				+      ,{field:'experience', title:'积分', width:80, sort: true}
			
 
				+      ,{field:'ip', title:'IP', width:120}
			
 
				+      ,{field:'logins', title:'登入次数', width:100, sort: true}
			
 
				+      ,{field:'joinTime', title:'加入时间', width:120}
			
 
				+      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
			
 
				+    ]]
			
 
				+    ,page: true
			
 
				+  });
			
 
				+  
			
 
				+  //头工具栏事件
			
 
				+  table.on('toolbar(test)', function(obj){
			
 
				+    var checkStatus = table.checkStatus(obj.config.id);
			
 
				+    switch(obj.event){
			
 
				+      case 'getCheckData':
			
 
				+        var data = checkStatus.data;
			
 
				+        layer.alert(JSON.stringify(data));
			
 
				+      break;
			
 
				+      case 'getCheckLength':
			
 
				+        var data = checkStatus.data;
			
 
				+        layer.msg('选中了：'+ data.length + ' 个');
			
 
				+      break;
			
 
				+      case 'isAll':
			
 
				+        layer.msg(checkStatus.isAll ? '全选': '未全选');
			
 
				+      break;
			
 
				+      
			
 
				+      //自定义头工具栏右侧图标 - 提示
			
 
				+      case 'LAYTABLE_TIPS':
			
 
				+        layer.alert('这是工具栏右侧自定义的一个图标按钮');
			
 
				+      break;
			
 
				+    };
			
 
				+  });
			
 
				+  
			
 
				+  //监听行工具事件
			
 
				+  table.on('tool(test)', function(obj){
			
 
				+    var data = obj.data;
			
 
				+    //console.log(obj)
			
 
				+    if(obj.event === 'del'){
			
 
				+      layer.confirm('真的删除行么', function(index){
			
 
				+        obj.del();
			
 
				+        layer.close(index);
			
 
				+      });
			
 
				+    } else if(obj.event === 'edit'){
			
 
				+      layer.prompt({
			
 
				+        formType: 2
			
 
				+        ,value: data.email
			
 
				+      }, function(value, index){
			
 
				+        obj.update({
			
 
				+          email: value
			
 
				+        });
			
 
				+        layer.close(index);
			
 
				+      });
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/totalRow.html
+++ b/demo/table/totalRow.html
@@ -0,0 +1,500 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui table模块，开启合计行 - 在线演示</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="../layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="../table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="../laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="../transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="../tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="../code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<style>
			
 
				+body .site-demo-title,
			
 
				+body .layui-layout-admin .site-demo{left: 360px}
			
 
				+.layui-layout-admin .site-demo-body{top: 107px;}
			
 
				+body .site-demo-code{left: 160px;}
			
 
				+</style>
			
 
				+<div class="layui-side layui-side-child">
			
 
				+  <div class="layui-side-scroll">
			
 
				+    <!-- 左侧子菜单 -->
			
 
				+    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" class="layui-nav-title" href="../table.html" tppabs="http://www.layui.com/demo/table.html">简单数据表格</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="auto.html" tppabs="http://www.layui.com/demo/table/auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="data.html" tppabs="http://www.layui.com/demo/table/data.html">赋值已知数据</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="static.html" tppabs="http://www.layui.com/demo/table/static.html">转化静态表格</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="page.html" tppabs="http://www.layui.com/demo/table/page.html">开启分页</a>
			
 
				+      </li>     
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="resetPage.html" tppabs="http://www.layui.com/demo/table/resetPage.html">自定义分页</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="toolbar.html" tppabs="http://www.layui.com/demo/table/toolbar.html">开启头部工具栏<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a class="layui-nav-title" href="totalRow.html" tppabs="http://www.layui.com/demo/table/totalRow.html">开启合计行<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="checkbox.html" tppabs="http://www.layui.com/demo/table/checkbox.html">开启复选框</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="radio.html" tppabs="http://www.layui.com/demo/table/radio.html">开启单选框<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEdit.html" tppabs="http://www.layui.com/demo/table/cellEdit.html">开启单元格编辑</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="form.html" tppabs="http://www.layui.com/demo/table/form.html">加入表单元素</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="style.html" tppabs="http://www.layui.com/demo/table/style.html">设置单元格样式</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="fixed.html" tppabs="http://www.layui.com/demo/table/fixed.html">固定列</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="operate.html" tppabs="http://www.layui.com/demo/table/operate.html">数据操作</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="parseData.html" tppabs="http://www.layui.com/demo/table/parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="onrow.html" tppabs="http://www.layui.com/demo/table/onrow.html">行事件<span class="layui-badge-dot"></span></a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="reload.html" tppabs="http://www.layui.com/demo/table/reload.html">数据表格的重载</a>
			
 
				+      </li>
			
 
				+      <hr>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="height.html" tppabs="http://www.layui.com/demo/table/height.html">高度最大化适应</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="initSort.html" tppabs="http://www.layui.com/demo/table/initSort.html">设置初始排序</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="cellEvent.html" tppabs="http://www.layui.com/demo/table/cellEvent.html">单元格事件</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a class="layui-nav-title" href="thead.html" tppabs="http://www.layui.com/demo/table/thead.html">复杂表头</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <hr>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a class="layui-nav-title" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">更多用法见文档</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+ 
			
 
				+<table class="layui-hide" id="test" lay-filter="test"></table>
			
 
				+ 
			
 
				+<script type="text/html" id="toolbarDemo">
			
 
				+  <div class="layui-btn-container">
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
			
 
				+    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
			
 
				+  </div>
			
 
				+</script>
			
 
				+<script type="text/html" id="barDemo">
			
 
				+  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			
 
				+  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			
 
				+</script>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../../doc/modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html" target="_blank">表格模块文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs"> 
			
 
				+ 
			
 
				+<script>
			
 
				+layui.use('table', function(){
			
 
				+  var table = layui.table;
			
 
				+  
			
 
				+  //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
			
 
				+  //详见：https://www.layui.com/doc/modules/table.html#totalRow
			
 
				+  table.render({
			
 
				+    elem: '#test'
			
 
				+    ,url:'../../test/table/demo1.json.js'/*tpa=http://www.layui.com/test/table/demo1.json*/
			
 
				+    ,toolbar: '#toolbarDemo'
			
 
				+    ,title: '用户数据表'
			
 
				+    ,totalRow: true
			
 
				+    ,cols: [[
			
 
				+      {type: 'checkbox', fixed: 'left'}
			
 
				+      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
			
 
				+      ,{field:'username', title:'用户名', width:120, edit: 'text'}
			
 
				+      ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
			
 
				+        return '<em>'+ res.email +'</em>'
			
 
				+      }}
			
 
				+      ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
			
 
				+      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
			
 
				+      ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
			
 
				+      ,{field:'sign', title:'签名'}
			
 
				+      ,{field:'city', title:'城市', width:100}
			
 
				+      ,{field:'ip', title:'IP', width:120}
			
 
				+      ,{field:'joinTime', title:'加入时间', width:120}
			
 
				+      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
			
 
				+    ]]
			
 
				+    ,page: true
			
 
				+  });
			
 
				+  
			
 
				+  //工具栏事件
			
 
				+  table.on('toolbar(test)', function(obj){
			
 
				+    var checkStatus = table.checkStatus(obj.config.id);
			
 
				+    switch(obj.event){
			
 
				+      case 'getCheckData':
			
 
				+        var data = checkStatus.data;
			
 
				+        layer.alert(JSON.stringify(data));
			
 
				+      break;
			
 
				+      case 'getCheckLength':
			
 
				+        var data = checkStatus.data;
			
 
				+        layer.msg('选中了：'+ data.length + ' 个');
			
 
				+      break;
			
 
				+      case 'isAll':
			
 
				+        layer.msg(checkStatus.isAll ? '全选': '未全选')
			
 
				+      break;
			
 
				+    };
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/table/user/-page=1&limit=20.js
+++ b/demo/table/user/-page=1&limit=20.js
--- a/demo/table/user/-page=1&limit=30.js
+++ b/demo/table/user/-page=1&limit=30.js
--- a/demo/timeline.html
+++ b/demo/timeline.html
@@ -0,0 +1,427 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@时间线 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>常规时间线</legend>
			
 
				+</fieldset>
			
 
				+<ul class="layui-timeline">
			
 
				+  <li class="layui-timeline-item">
			
 
				+    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+    <div class="layui-timeline-content layui-text">
			
 
				+      <h3 class="layui-timeline-title">8月18日</h3>
			
 
				+      <p>
			
 
				+        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
			
 
				+        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
			
 
				+        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon">&#xe650;</i>
			
 
				+      </p>
			
 
				+    </div>
			
 
				+  </li>
			
 
				+  <li class="layui-timeline-item">
			
 
				+    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+    <div class="layui-timeline-content layui-text">
			
 
				+      <h3 class="layui-timeline-title">8月16日</h3>
			
 
				+      <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
			
 
				+      <ul>
			
 
				+        <li>《登高》</li>
			
 
				+        <li>《茅屋为秋风所破歌》</li>
			
 
				+      </ul>
			
 
				+    </div>
			
 
				+  </li>
			
 
				+  <li class="layui-timeline-item">
			
 
				+    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+    <div class="layui-timeline-content layui-text">
			
 
				+      <h3 class="layui-timeline-title">8月15日</h3>
			
 
				+      <p>
			
 
				+        中国人民抗日战争胜利日
			
 
				+        <br>铭记、感恩
			
 
				+        <br>所有为中华民族浴血奋战的英雄将士
			
 
				+        <br>永垂不朽
			
 
				+      </p>
			
 
				+    </div>
			
 
				+  </li>
			
 
				+  <li class="layui-timeline-item">
			
 
				+    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+    <div class="layui-timeline-content layui-text">
			
 
				+      <div class="layui-timeline-title">过去</div>
			
 
				+    </div>
			
 
				+  </li>
			
 
				+</ul>  
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>简约时间线：大事记</legend>
			
 
				+</fieldset> 
			
 
				+<ul class="layui-timeline">
			
 
				+  <li class="layui-timeline-item">
			
 
				+    <i class="layui-icon layui-timeline-axis">&#xe756;</i>
			
 
				+    <div class="layui-timeline-content layui-text">
			
 
				+      <div class="layui-timeline-title">2018年，layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架（期望）</div>
			
 
				+    </div>
			
 
				+  </li>
			
 
				+  <li class="layui-timeline-item">
			
 
				+    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+    <div class="layui-timeline-content layui-text">
			
 
				+      <div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 发布</div>
			
 
				+    </div>
			
 
				+  </li>
			
 
				+  <li class="layui-timeline-item">
			
 
				+    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+    <div class="layui-timeline-content layui-text">
			
 
				+      <div class="layui-timeline-title">2016年，layui 首个版本发布</div>
			
 
				+    </div>
			
 
				+  </li>
			
 
				+  <li class="layui-timeline-item">
			
 
				+    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+    <div class="layui-timeline-content layui-text">
			
 
				+      <div class="layui-timeline-title">2015年，layui 孵化</div>
			
 
				+    </div>
			
 
				+  </li>
			
 
				+  <li class="layui-timeline-item">
			
 
				+    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis">&#xe63e;</i>
			
 
				+    <div class="layui-timeline-content layui-text">
			
 
				+      <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
			
 
				+    </div>
			
 
				+  </li>
			
 
				+</ul>
			
 
				+               
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html" target="_blank">时间线文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/transfer.html
+++ b/demo/transfer.html
@@ -0,0 +1,509 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@ 穿梭框- 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+<style>
			
 
				+.demo-transfer{margin: 10px 30px;}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>基础效果</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test1" class="demo-transfer"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>定义标题及数据源</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test2" class="demo-transfer"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>初始右侧数据集合</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test3" class="demo-transfer"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>显示搜索框</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test4" class="demo-transfer"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>数据格式解析</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test5" class="demo-transfer"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>穿梭时的回调</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test6" class="demo-transfer"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>实例调用</legend>
			
 
				+</fieldset>
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn" lay-demoTransferActive="getData">获取右侧数据</button>
			
 
				+  <button type="button" class="layui-btn" lay-demoTransferActive="reload">重载实例</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<div id="test7" class="demo-transfer"></div>
			
 
				+ 
			
 
				+            
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html" target="_blank">穿梭框文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['transfer', 'layer', 'util'], function(){
			
 
				+  var $ = layui.$
			
 
				+  ,transfer = layui.transfer
			
 
				+  ,layer = layui.layer
			
 
				+  ,util = layui.util;
			
 
				+  
			
 
				+  //模拟数据
			
 
				+  var data1 = [
			
 
				+    {"value": "1", "title": "李白"}
			
 
				+    ,{"value": "2", "title": "杜甫"}
			
 
				+    ,{"value": "3", "title": "苏轼"}
			
 
				+    ,{"value": "4", "title": "李清照"}
			
 
				+    ,{"value": "5", "title": "鲁迅", "disabled": true}
			
 
				+    ,{"value": "6", "title": "巴金"}
			
 
				+    ,{"value": "7", "title": "冰心"}
			
 
				+    ,{"value": "8", "title": "矛盾"}
			
 
				+    ,{"value": "9", "title": "贤心"}
			
 
				+  ]
			
 
				+  
			
 
				+  ,data2 = [
			
 
				+    {"value": "1", "title": "瓦罐汤"}
			
 
				+    ,{"value": "2", "title": "油酥饼"}
			
 
				+    ,{"value": "3", "title": "炸酱面"}
			
 
				+    ,{"value": "4", "title": "串串香", "disabled": true}
			
 
				+    ,{"value": "5", "title": "豆腐脑"}
			
 
				+    ,{"value": "6", "title": "驴打滚"}
			
 
				+    ,{"value": "7", "title": "北京烤鸭"}
			
 
				+    ,{"value": "8", "title": "烤冷面"}
			
 
				+    ,{"value": "9", "title": "毛血旺", "disabled": true}
			
 
				+    ,{"value": "10", "title": "肉夹馍"}
			
 
				+    ,{"value": "11", "title": "臊子面"}
			
 
				+    ,{"value": "12", "title": "凉皮"}
			
 
				+    ,{"value": "13", "title": "羊肉泡馍"}
			
 
				+    ,{"value": "14", "title": "冰糖葫芦", "disabled": true}
			
 
				+    ,{"value": "15", "title": "狼牙土豆"}
			
 
				+  ]
			
 
				+ 
			
 
				+  //基础效果
			
 
				+  transfer.render({
			
 
				+    elem: '#test1'
			
 
				+    ,data: data1
			
 
				+  })
			
 
				+ 
			
 
				+  //定义标题及数据源
			
 
				+  transfer.render({
			
 
				+    elem: '#test2'
			
 
				+    ,title: ['候选文人', '获奖文人']  //自定义标题
			
 
				+    ,data: data1
			
 
				+    //,width: 150 //定义宽度
			
 
				+    ,height: 210 //定义高度
			
 
				+  })
			
 
				+ 
			
 
				+  //初始右侧数据
			
 
				+  transfer.render({
			
 
				+    elem: '#test3'
			
 
				+    ,data: data2
			
 
				+    ,value: ["1", "3", "5", "7", "9", "11"]
			
 
				+  })
			
 
				+ 
			
 
				+  //显示搜索框
			
 
				+  transfer.render({
			
 
				+    elem: '#test4'
			
 
				+    ,data: data1
			
 
				+    ,title: ['文本墨客', '获奖文人']
			
 
				+    ,showSearch: true
			
 
				+  })
			
 
				+ 
			
 
				+  //数据格式解析
			
 
				+  transfer.render({
			
 
				+    elem: '#test5'
			
 
				+    ,parseData: function(res){
			
 
				+      return {
			
 
				+        "value": res.id //数据值
			
 
				+        ,"title": res.name //数据标题
			
 
				+        ,"disabled": res.disabled  //是否禁用
			
 
				+        ,"checked": res.checked //是否选中
			
 
				+      }
			
 
				+    }
			
 
				+    ,data: [
			
 
				+      {"id": "1", "name": "李白"}
			
 
				+      ,{"id": "2", "name": "杜甫"}
			
 
				+      ,{"id": "3", "name": "贤心"}
			
 
				+    ]
			
 
				+    ,height: 150
			
 
				+  })
			
 
				+ 
			
 
				+  //穿梭时的回调
			
 
				+  transfer.render({
			
 
				+    elem: '#test6'
			
 
				+    ,data: data1
			
 
				+    ,onchange: function(obj, index){
			
 
				+      var arr = ['左边', '右边'];
			
 
				+      layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
			
 
				+    }
			
 
				+  })
			
 
				+ 
			
 
				+  //实例调用
			
 
				+  transfer.render({
			
 
				+    elem: '#test7'
			
 
				+    ,data: data1
			
 
				+    ,id: 'key123' //定义唯一索引
			
 
				+  })
			
 
				+  //批量办法定事件
			
 
				+  util.event('lay-demoTransferActive', {
			
 
				+    getData: function(othis){
			
 
				+      var getData = transfer.getData('key123'); //获取右侧数据
			
 
				+      layer.alert(JSON.stringify(getData)); 
			
 
				+    }
			
 
				+    ,reload:function(){
			
 
				+      //实例重载
			
 
				+      transfer.reload('key123', {
			
 
				+        title: ['文人', '喜欢的文人']
			
 
				+        ,value: ['2', '5', '9']
			
 
				+        ,showSearch: true
			
 
				+      })
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/tree.html
+++ b/demo/tree.html
@@ -0,0 +1,753 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@ 树形组件- 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+<style>
			
 
				+.demo-tree{margin: 10px 20px;}
			
 
				+.demo-tree-more{margin: 20px;}
			
 
				+.demo-tree-box{width: 200px; padding: 10px; border: 1px solid #ddd; overflow: auto;}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="layui-this">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>基本演示</legend>
			
 
				+</fieldset>
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<div id="test12" class="demo-tree-more"></div>
			
 
				+         
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>常规用法</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test1" class="demo-tree demo-tree-box"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>无连接线风格</legend>
			
 
				+</fieldset>
			
 
				+<div id="test13" class="demo-tree-more"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>仅节点左侧图标控制收缩</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test2" class="demo-tree"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>手风琴模式</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test4" class="demo-tree"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>点击节点新窗口跳转</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test5" class="demo-tree"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>开启复选框</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test7" class="demo-tree"></div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>开启节点操作图标</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div id="test9" class="demo-tree demo-tree-box" style="width: 200px; height: 300px; overflow: scroll;"></div>
			
 
				+        </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p></p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html" target="_blank">树形组件文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['tree', 'util'], function(){
			
 
				+  var tree = layui.tree
			
 
				+  ,layer = layui.layer
			
 
				+  ,util = layui.util
			
 
				+  
			
 
				+  //模拟数据
			
 
				+  ,data = [{
			
 
				+    title: '一级1'
			
 
				+    ,id: 1
			
 
				+    ,field: 'name1'
			
 
				+    ,checked: true
			
 
				+    ,spread: true
			
 
				+    ,children: [{
			
 
				+      title: '二级1-1 可允许跳转'
			
 
				+      ,id: 3
			
 
				+      ,field: 'name11'
			
 
				+      ,href: 'https://www.layui.com/'
			
 
				+      ,children: [{
			
 
				+        title: '三级1-1-3'
			
 
				+        ,id: 23
			
 
				+        ,field: ''
			
 
				+        ,children: [{
			
 
				+          title: '四级1-1-3-1'
			
 
				+          ,id: 24
			
 
				+          ,field: ''
			
 
				+          ,children: [{
			
 
				+            title: '五级1-1-3-1-1'
			
 
				+            ,id: 30
			
 
				+            ,field: ''
			
 
				+          },{
			
 
				+            title: '五级1-1-3-1-2'
			
 
				+            ,id: 31
			
 
				+            ,field: ''
			
 
				+          }]
			
 
				+        }]
			
 
				+      },{
			
 
				+        title: '三级1-1-1'
			
 
				+        ,id: 7
			
 
				+        ,field: ''
			
 
				+        ,children: [{
			
 
				+          title: '四级1-1-1-1 可允许跳转'
			
 
				+          ,id: 15
			
 
				+          ,field: ''
			
 
				+          ,href: 'https://www.layui.com/doc/'
			
 
				+        }]
			
 
				+      },{
			
 
				+        title: '三级1-1-2'
			
 
				+        ,id: 8
			
 
				+        ,field: ''
			
 
				+        ,children: [{
			
 
				+          title: '四级1-1-2-1'
			
 
				+          ,id: 32
			
 
				+          ,field: ''
			
 
				+        }]
			
 
				+      }]
			
 
				+    },{
			
 
				+      title: '二级1-2'
			
 
				+      ,id: 4
			
 
				+      ,spread: true
			
 
				+      ,children: [{
			
 
				+        title: '三级1-2-1'
			
 
				+        ,id: 9
			
 
				+        ,field: ''
			
 
				+        ,disabled: true
			
 
				+      },{
			
 
				+        title: '三级1-2-2'
			
 
				+        ,id: 10
			
 
				+        ,field: ''
			
 
				+      }]
			
 
				+    },{
			
 
				+      title: '二级1-3'
			
 
				+      ,id: 20
			
 
				+      ,field: ''
			
 
				+      ,children: [{
			
 
				+        title: '三级1-3-1'
			
 
				+        ,id: 21
			
 
				+        ,field: ''
			
 
				+      },{
			
 
				+        title: '三级1-3-2'
			
 
				+        ,id: 22
			
 
				+        ,field: ''
			
 
				+      }]
			
 
				+    }]
			
 
				+  },{
			
 
				+    title: '一级2'
			
 
				+    ,id: 2
			
 
				+    ,field: ''
			
 
				+    ,spread: true
			
 
				+    ,children: [{
			
 
				+      title: '二级2-1'
			
 
				+      ,id: 5
			
 
				+      ,field: ''
			
 
				+      ,spread: true
			
 
				+      ,children: [{
			
 
				+        title: '三级2-1-1'
			
 
				+        ,id: 11
			
 
				+        ,field: ''
			
 
				+      },{
			
 
				+        title: '三级2-1-2'
			
 
				+        ,id: 12
			
 
				+        ,field: ''
			
 
				+      }]
			
 
				+    },{
			
 
				+      title: '二级2-2'
			
 
				+      ,id: 6
			
 
				+      ,field: ''
			
 
				+      ,children: [{
			
 
				+        title: '三级2-2-1'
			
 
				+        ,id: 13
			
 
				+        ,field: ''
			
 
				+      },{
			
 
				+        title: '三级2-2-2'
			
 
				+        ,id: 14
			
 
				+        ,field: ''
			
 
				+        ,disabled: true
			
 
				+      }]
			
 
				+    }]
			
 
				+  },{
			
 
				+    title: '一级3'
			
 
				+    ,id: 16
			
 
				+    ,field: ''
			
 
				+    ,children: [{
			
 
				+      title: '二级3-1'
			
 
				+      ,id: 17
			
 
				+      ,field: ''
			
 
				+      ,fixed: true
			
 
				+      ,children: [{
			
 
				+        title: '三级3-1-1'
			
 
				+        ,id: 18
			
 
				+        ,field: ''
			
 
				+      },{
			
 
				+        title: '三级3-1-2'
			
 
				+        ,id: 19
			
 
				+        ,field: ''
			
 
				+      }]
			
 
				+    },{
			
 
				+      title: '二级3-2'
			
 
				+      ,id: 27
			
 
				+      ,field: ''
			
 
				+      ,children: [{
			
 
				+        title: '三级3-2-1'
			
 
				+        ,id: 28
			
 
				+        ,field: ''
			
 
				+      },{
			
 
				+        title: '三级3-2-2'
			
 
				+        ,id: 29
			
 
				+        ,field: ''
			
 
				+      }]
			
 
				+    }]
			
 
				+  }]
			
 
				+  
			
 
				+  //模拟数据1
			
 
				+  ,data1 = [{
			
 
				+    title: '江西'
			
 
				+    ,id: 1
			
 
				+    ,children: [{
			
 
				+      title: '南昌'
			
 
				+      ,id: 1000
			
 
				+      ,children: [{
			
 
				+        title: '青山湖区'
			
 
				+        ,id: 10001
			
 
				+      },{
			
 
				+        title: '高新区'
			
 
				+        ,id: 10002
			
 
				+      }]
			
 
				+    },{
			
 
				+      title: '九江'
			
 
				+      ,id: 1001
			
 
				+    },{
			
 
				+      title: '赣州'
			
 
				+      ,id: 1002
			
 
				+    }]
			
 
				+  },{
			
 
				+    title: '广西'
			
 
				+    ,id: 2
			
 
				+    ,children: [{
			
 
				+      title: '南宁'
			
 
				+      ,id: 2000
			
 
				+    },{
			
 
				+      title: '桂林'
			
 
				+      ,id: 2001
			
 
				+    }]
			
 
				+  },{
			
 
				+    title: '陕西'
			
 
				+    ,id: 3
			
 
				+    ,children: [{
			
 
				+      title: '西安'
			
 
				+      ,id: 3000
			
 
				+    },{
			
 
				+      title: '延安'
			
 
				+      ,id: 3001
			
 
				+    }]
			
 
				+  }]
			
 
				+  
			
 
				+  //模拟数据2
			
 
				+  ,data2 = [{
			
 
				+    title: '早餐'
			
 
				+    ,id: 1
			
 
				+    ,children: [{
			
 
				+      title: '油条'
			
 
				+      ,id: 5
			
 
				+    },{
			
 
				+      title: '包子'
			
 
				+      ,id: 6
			
 
				+    },{
			
 
				+      title: '豆浆'
			
 
				+      ,id: 7
			
 
				+    }]
			
 
				+  },{
			
 
				+    title: '午餐'
			
 
				+    ,id: 2
			
 
				+    ,checked: true
			
 
				+    ,children: [{
			
 
				+      title: '藜蒿炒腊肉'
			
 
				+      ,id: 8
			
 
				+    },{
			
 
				+      title: '西湖醋鱼'
			
 
				+      ,id: 9
			
 
				+    },{
			
 
				+      title: '小白菜'
			
 
				+      ,id: 10
			
 
				+    },{
			
 
				+      title: '海带排骨汤'
			
 
				+      ,id: 11
			
 
				+    }]
			
 
				+  },{
			
 
				+    title: '晚餐'
			
 
				+    ,id: 3
			
 
				+    ,children: [{
			
 
				+      title: '红烧肉'
			
 
				+      ,id: 12
			
 
				+      ,fixed: true
			
 
				+    },{
			
 
				+      title: '番茄炒蛋'
			
 
				+      ,id: 13
			
 
				+    }]
			
 
				+  },{
			
 
				+    title: '夜宵'
			
 
				+    ,id: 4
			
 
				+    ,children: [{
			
 
				+      title: '小龙虾'
			
 
				+      ,id: 14
			
 
				+      ,checked: true
			
 
				+    },{
			
 
				+      title: '香辣蟹'
			
 
				+      ,id: 15
			
 
				+      ,disabled: true
			
 
				+    },{
			
 
				+      title: '烤鱿鱼'
			
 
				+      ,id: 16
			
 
				+    }]
			
 
				+  }];
			
 
				+ 
			
 
				+  //基本演示
			
 
				+  tree.render({
			
 
				+    elem: '#test12'
			
 
				+    ,data: data
			
 
				+    ,showCheckbox: true  //是否显示复选框
			
 
				+    ,id: 'demoId1'
			
 
				+    ,isJump: true //是否允许点击节点时弹出新窗口跳转
			
 
				+    ,click: function(obj){
			
 
				+      var data = obj.data;  //获取当前点击的节点数据
			
 
				+      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //按钮事件
			
 
				+  util.event('lay-demo', {
			
 
				+    getChecked: function(othis){
			
 
				+      var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
			
 
				+      
			
 
				+      layer.alert(JSON.stringify(checkedData), {shade:0});
			
 
				+      console.log(checkedData);
			
 
				+    }
			
 
				+    ,setChecked: function(){
			
 
				+      tree.setChecked('demoId1', [12, 16]); //勾选指定节点
			
 
				+    }
			
 
				+    ,reload: function(){
			
 
				+      //重载实例
			
 
				+      tree.reload('demoId1', {
			
 
				+        
			
 
				+      });
			
 
				+      
			
 
				+    }
			
 
				+  });
			
 
				+ 
			
 
				+  //常规用法
			
 
				+  tree.render({
			
 
				+    elem: '#test1' //默认是点击节点可进行收缩
			
 
				+    ,data: data1
			
 
				+  });
			
 
				+  
			
 
				+  //无连接线风格
			
 
				+  tree.render({
			
 
				+    elem: '#test13'
			
 
				+    ,data: data1
			
 
				+    ,showLine: false  //是否开启连接线
			
 
				+  });
			
 
				+ 
			
 
				+  //仅节点左侧图标控制收缩
			
 
				+  tree.render({
			
 
				+    elem: '#test2'
			
 
				+    ,data: data1
			
 
				+    ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
			
 
				+    ,click: function(obj){
			
 
				+      layer.msg(JSON.stringify(obj.data));
			
 
				+    }
			
 
				+  });
			
 
				+  //手风琴模式
			
 
				+  tree.render({
			
 
				+    elem: '#test4'
			
 
				+    ,data: [{
			
 
				+      title: '优秀'
			
 
				+      ,children: [{
			
 
				+        title: '80 ~ 90'
			
 
				+      },{
			
 
				+        title: '90 ~ 100'
			
 
				+      }]
			
 
				+    },{
			
 
				+      title: '良好'
			
 
				+      ,children: [{
			
 
				+        title: '70 ~ 80'
			
 
				+      },{
			
 
				+        title: '60 ~ 70'
			
 
				+      }]
			
 
				+    },{
			
 
				+      title: '要努力奥'
			
 
				+      ,children: [{
			
 
				+        title: '0 ~ 60'
			
 
				+      }]
			
 
				+    }]
			
 
				+    ,accordion: true 
			
 
				+  });
			
 
				+ 
			
 
				+  //点击节点新窗口跳转
			
 
				+  tree.render({
			
 
				+    elem: '#test5'
			
 
				+    ,data: data
			
 
				+    ,isJump: true  //link 为参数匹配
			
 
				+  });
			
 
				+ 
			
 
				+  //开启复选框
			
 
				+  tree.render({
			
 
				+    elem: '#test7'
			
 
				+    ,data: data2
			
 
				+    ,showCheckbox: true
			
 
				+  });
			
 
				+ 
			
 
				+  //开启节点操作图标
			
 
				+  tree.render({
			
 
				+    elem: '#test9'
			
 
				+    ,data: data1
			
 
				+    ,edit: ['add', 'update', 'del'] //操作节点的图标
			
 
				+    ,click: function(obj){
			
 
				+      layer.msg(JSON.stringify(obj.data));
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/upload.html
+++ b/demo/upload.html
@@ -0,0 +1,696 @@
 
				+ 
			
 
				+ <!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@文件/图片上传组件 - 在线演示 - Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+  <style>
			
 
				+  .layui-upload-img{width: 92px; height: 92px;}
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote layui-text">
			
 
				+  提示：以下示例的部分上传接口由第三方网站 <em>http://httpbin.org</em> 提供，它可以模拟各类 HTTP 请求。
			
 
				+  <br>其他示例未配置上传接口，所以每次上传都会报「请求上传接口出现异常」的提示，这属于正常现象。
			
 
				+</blockquote>   
			
 
				+          
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>常规使用：普通图片上传</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-upload">
			
 
				+  <button type="button" class="layui-btn" id="test1">上传图片</button>
			
 
				+  <div class="layui-upload-list">
			
 
				+    <img class="layui-upload-img" id="demo1">
			
 
				+    <p id="demoText"></p>
			
 
				+  </div>
			
 
				+  <div style="width: 95px;">
			
 
				+    <div class="layui-progress layui-progress-big" lay-showPercent="yes"  lay-filter="demo">
			
 
				+      <div class="layui-progress-bar" lay-percent=""></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>   
			
 
				+ 
			
 
				+<a name="list-progress"> </a>
			
 
				+  
			
 
				+<div style="margin-top: 10px;">
			
 
				+   
			
 
				+<!-- 示例-970 -->
			
 
				+
			
 
				+  
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>高级应用：制作一个多文件列表</legend>
			
 
				+</fieldset> 
			
 
				+ 
			
 
				+<div class="layui-upload">
			
 
				+  <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> 
			
 
				+  <div class="layui-upload-list" style="max-width: 1000px;">
			
 
				+    <table class="layui-table">
			
 
				+      <colgroup>
			
 
				+        <col>
			
 
				+        <col width="150">
			
 
				+        <col width="260">
			
 
				+        <col width="150">
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <th>文件名</th>
			
 
				+        <th>大小</th>
			
 
				+        <th>上传进度</th>
			
 
				+        <th>操作</th>
			
 
				+      </thead>
			
 
				+      <tbody id="demoList"></tbody>
			
 
				+    </table>
			
 
				+  </div>
			
 
				+  <button type="button" class="layui-btn" id="testListAction">开始上传</button>
			
 
				+</div> 
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>上传多张图片</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-upload">
			
 
				+  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
			
 
				+  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			
 
				+    预览图：
			
 
				+    <div class="layui-upload-list" id="demo2"></div>
			
 
				+ </blockquote>
			
 
				+</div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>指定允许上传的文件类型</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn" id="test3"><i class="layui-icon">&#xe67c;</i>上传文件</button>
			
 
				+  <button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon">&#xe67c;</i>只允许压缩文件</button>
			
 
				+  <button type="button" class="layui-btn" id="test5"><i class="layui-icon">&#xe67c;</i>上传视频</button>
			
 
				+  <button type="button" class="layui-btn" id="test6"><i class="layui-icon">&#xe67c;</i>上传音频</button>
			
 
				+</div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>设定文件大小限制</legend>
			
 
				+</fieldset> 
			
 
				+ 
			
 
				+<button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon">&#xe67c;</i>上传图片</button>
			
 
				+<div class="layui-inline layui-word-aux">
			
 
				+  这里以限制 60KB 为例
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>同时绑定多个元素，并将属性设定在元素上</legend>
			
 
				+</fieldset> 
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button class="layui-btn demoMore" lay-data="{url: '/a/'}">上传A</button>
			
 
				+  <button class="layui-btn demoMore" lay-data="{url: '/b/', size:5}">上传B</button>
			
 
				+  <button class="layui-btn demoMore" lay-data="{url: '/c/', accept: 'file',size:10}">上传C</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>选完文件后不自动上传</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<div class="layui-btn-container">
			
 
				+  <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
			
 
				+  <button type="button" class="layui-btn" id="test9">开始上传</button>
			
 
				+</div>
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>拖拽上传</legend>
			
 
				+</fieldset> 
			
 
				+ 
			
 
				+<div class="layui-upload-drag" id="test10">
			
 
				+  <i class="layui-icon">&#xe67c;</i>
			
 
				+  <p>点击上传，或将文件拖拽到此处</p>
			
 
				+  <div class="layui-hide" id="uploadDemoView">
			
 
				+    <hr>
			
 
				+    <img src="" alt="上传成功后渲染" style="max-width: 196px">
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>绑定原始文件域</legend>
			
 
				+</fieldset> 
			
 
				+ 
			
 
				+<input type="file" name="file" id="test20">
			
 
				+ 
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">
			
 
				+          <p>目前暂不支持批量上传（即同时上传多个），但支持添加多个文件（即一个一个上传）</p>
			
 
				+          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html" target="_blank">文件上传文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['upload', 'element', 'layer'], function(){
			
 
				+  var $ = layui.jquery
			
 
				+  ,upload = layui.upload
			
 
				+  ,element = layui.element
			
 
				+  ,layer = layui.layer;
			
 
				+  
			
 
				+  //常规使用 - 普通图片上传
			
 
				+  var uploadInst = upload.render({
			
 
				+    elem: '#test1'
			
 
				+    ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
			
 
				+    ,before: function(obj){
			
 
				+      //预读本地文件示例，不支持ie8
			
 
				+      obj.preview(function(index, file, result){
			
 
				+        $('#demo1').attr('src', result); //图片链接（base64）
			
 
				+      });
			
 
				+      
			
 
				+      element.progress('demo', '0%'); //进度条复位
			
 
				+      layer.msg('上传中', {icon: 16, time: 0});
			
 
				+    }
			
 
				+    ,done: function(res){
			
 
				+      //如果上传失败
			
 
				+      if(res.code > 0){
			
 
				+        return layer.msg('上传失败');
			
 
				+      }
			
 
				+      //上传成功的一些操作
			
 
				+      //……
			
 
				+      $('#demoText').html(''); //置空上传失败的状态
			
 
				+    }
			
 
				+    ,error: function(){
			
 
				+      //演示失败状态，并实现重传
			
 
				+      var demoText = $('#demoText');
			
 
				+      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			
 
				+      demoText.find('.demo-reload').on('click', function(){
			
 
				+        uploadInst.upload();
			
 
				+      });
			
 
				+    }
			
 
				+    //进度条
			
 
				+    ,progress: function(n, elem, e){
			
 
				+      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
			
 
				+      if(n == 100){
			
 
				+        layer.msg('上传完毕', {icon: 1});
			
 
				+      }
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //演示多文件列表
			
 
				+  var uploadListIns = upload.render({
			
 
				+    elem: '#testList'
			
 
				+    ,elemList: $('#demoList') //列表元素对象
			
 
				+    ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
			
 
				+    ,accept: 'file'
			
 
				+    ,multiple: true
			
 
				+    ,number: 3
			
 
				+    ,auto: false
			
 
				+    ,bindAction: '#testListAction'
			
 
				+    ,choose: function(obj){   
			
 
				+      var that = this;
			
 
				+      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
			
 
				+      //读取本地文件
			
 
				+      obj.preview(function(index, file, result){
			
 
				+        var tr = $(['<tr id="upload-'+ index +'">'
			
 
				+          ,'<td>'+ file.name +'</td>'
			
 
				+          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
			
 
				+          ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
			
 
				+          ,'<td>'
			
 
				+            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
			
 
				+            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
			
 
				+          ,'</td>'
			
 
				+        ,'</tr>'].join(''));
			
 
				+        
			
 
				+        //单个重传
			
 
				+        tr.find('.demo-reload').on('click', function(){
			
 
				+          obj.upload(index, file);
			
 
				+        });
			
 
				+        
			
 
				+        //删除
			
 
				+        tr.find('.demo-delete').on('click', function(){
			
 
				+          delete files[index]; //删除对应的文件
			
 
				+          tr.remove();
			
 
				+          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
			
 
				+        });
			
 
				+        
			
 
				+        that.elemList.append(tr);
			
 
				+        element.render('progress'); //渲染新加的进度条组件
			
 
				+      });
			
 
				+    }
			
 
				+    ,done: function(res, index, upload){ //成功的回调
			
 
				+      var that = this;
			
 
				+      //if(res.code == 0){ //上传成功
			
 
				+        var tr = that.elemList.find('tr#upload-'+ index)
			
 
				+        ,tds = tr.children();
			
 
				+        tds.eq(3).html(''); //清空操作
			
 
				+        delete this.files[index]; //删除文件队列已经上传成功的文件
			
 
				+        return;
			
 
				+      //}
			
 
				+      this.error(index, upload);
			
 
				+    }
			
 
				+    ,allDone: function(obj){ //多文件上传完毕后的状态回调
			
 
				+      console.log(obj)
			
 
				+    }
			
 
				+    ,error: function(index, upload){ //错误回调
			
 
				+      var that = this;
			
 
				+      var tr = that.elemList.find('tr#upload-'+ index)
			
 
				+      ,tds = tr.children();
			
 
				+      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
			
 
				+    }
			
 
				+    ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
			
 
				+      element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //多图片上传
			
 
				+  upload.render({
			
 
				+    elem: '#test2'
			
 
				+    ,url: '' //此处配置你自己的上传接口即可
			
 
				+    ,multiple: true
			
 
				+    ,before: function(obj){
			
 
				+      //预读本地文件示例，不支持ie8
			
 
				+      obj.preview(function(index, file, result){
			
 
				+        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
			
 
				+      });
			
 
				+    }
			
 
				+    ,done: function(res){
			
 
				+      //上传完毕
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //指定允许上传的文件类型
			
 
				+  upload.render({
			
 
				+    elem: '#test3'
			
 
				+    ,url: '' //此处配置你自己的上传接口即可
			
 
				+    ,accept: 'file' //普通文件
			
 
				+    ,done: function(res){
			
 
				+      layer.msg('上传成功');
			
 
				+      console.log(res);
			
 
				+    }
			
 
				+  });
			
 
				+  upload.render({ //允许上传的文件后缀
			
 
				+    elem: '#test4'
			
 
				+    ,url: '' //此处配置你自己的上传接口即可
			
 
				+    ,accept: 'file' //普通文件
			
 
				+    ,exts: 'zip|rar|7z' //只允许上传压缩文件
			
 
				+    ,done: function(res){
			
 
				+      layer.msg('上传成功');
			
 
				+      console.log(res)
			
 
				+    }
			
 
				+  });
			
 
				+  upload.render({
			
 
				+    elem: '#test5'
			
 
				+    ,url: '' //此处配置你自己的上传接口即可
			
 
				+    ,accept: 'video' //视频
			
 
				+    ,done: function(res){
			
 
				+      layer.msg('上传成功');
			
 
				+      console.log(res)
			
 
				+    }
			
 
				+  });
			
 
				+  upload.render({
			
 
				+    elem: '#test6'
			
 
				+    ,url: '' //此处配置你自己的上传接口即可
			
 
				+    ,accept: 'audio' //音频
			
 
				+    ,done: function(res){
			
 
				+      layer.msg('上传成功');
			
 
				+      console.log(res)
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //设定文件大小限制
			
 
				+  upload.render({
			
 
				+    elem: '#test7'
			
 
				+    ,url: '' //此处配置你自己的上传接口即可
			
 
				+    ,size: 60 //限制文件大小，单位 KB
			
 
				+    ,done: function(res){
			
 
				+      layer.msg('上传成功');
			
 
				+      console.log(res)
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //同时绑定多个元素，并将属性设定在元素上
			
 
				+  upload.render({
			
 
				+    elem: '.demoMore'
			
 
				+    ,before: function(){
			
 
				+      layer.tips('接口地址：'+ this.url, this.item, {tips: 1});
			
 
				+    }
			
 
				+    ,done: function(res, index, upload){
			
 
				+      var item = this.item;
			
 
				+      console.log(item); //获取当前触发上传的元素，layui 2.1.0 新增
			
 
				+    }
			
 
				+  })
			
 
				+  
			
 
				+  //选完文件后不自动上传
			
 
				+  upload.render({
			
 
				+    elem: '#test8'
			
 
				+    ,url: '' //此处配置你自己的上传接口即可
			
 
				+    ,auto: false
			
 
				+    //,multiple: true
			
 
				+    ,bindAction: '#test9'
			
 
				+    ,done: function(res){
			
 
				+      layer.msg('上传成功');
			
 
				+      console.log(res)
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //拖拽上传
			
 
				+  upload.render({
			
 
				+    elem: '#test10'
			
 
				+    ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
			
 
				+    ,done: function(res){
			
 
				+      layer.msg('上传成功');
			
 
				+      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
			
 
				+      console.log(res)
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //绑定原始文件域
			
 
				+  upload.render({
			
 
				+    elem: '#test20'
			
 
				+    ,url: '' //此处配置你自己的上传接口即可
			
 
				+    ,done: function(res){
			
 
				+      layer.msg('上传成功');
			
 
				+      console.log(res)
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/demo/util.html
+++ b/demo/util.html
@@ -0,0 +1,489 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@工具集 - 在线演示 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="layui-layout layui-layout-admin">
			
 
				+  
			
 
				+
			
 
				+<div class="layui-header header header-demo" autumn>
			
 
				+  <div class="layui-fluid">
			
 
				+    <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../doc/index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+  <div class="layui-side layui-bg-black">
			
 
				+    <div class="layui-side-scroll">
			
 
				+      
			
 
				+<ul class="layui-nav layui-nav-tree site-demo-nav">
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">演示</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd>
			
 
				+        <a href="index.html" tppabs="http://www.layui.com/demo/">调试预览</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">布局</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="grid.html" tppabs="http://www.layui.com/demo/grid.html">栅格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="admin.html" tppabs="http://www.layui.com/demo/admin.html">框架</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">基本元素</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="button.html" tppabs="http://www.layui.com/demo/button.html">按钮</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="form.html" tppabs="http://www.layui.com/demo/form.html">表单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="nav.html" tppabs="http://www.layui.com/demo/nav.html">导航 / 面包屑</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="menu.html" tppabs="http://www.layui.com/demo/menu.html">基础菜单</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="tab.html" tppabs="http://www.layui.com/demo/tab.html">选项卡</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="panel.html" tppabs="http://www.layui.com/demo/panel.html">面板</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="badge.html" tppabs="http://www.layui.com/demo/badge.html">徽章</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="timeline.html" tppabs="http://www.layui.com/demo/timeline.html">时间线</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table-element.html" tppabs="http://www.layui.com/demo/table-element.html">静态表格</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="anim.html" tppabs="http://www.layui.com/demo/anim.html">动画</a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="auxiliar.html" tppabs="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item layui-nav-itemed">
			
 
				+    <a class="javascript:;" href="javascript:;">组件示例</a>
			
 
				+    <dl class="layui-nav-child">
			
 
				+      <dd class="">
			
 
				+        <a href="layer.html" tppabs="http://www.layui.com/demo/layer.html">
			
 
				+          弹出层
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laydate.html" tppabs="http://www.layui.com/demo/laydate.html">
			
 
				+          日期与时间选择
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="table.html" tppabs="http://www.layui.com/demo/table.html">
			
 
				+          数据表格
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+       <dd class="">
			
 
				+        <a href="laypage.html" tppabs="http://www.layui.com/demo/laypage.html">
			
 
				+          分页
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html">
			
 
				+          下拉菜单
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="upload.html" tppabs="http://www.layui.com/demo/upload.html">
			
 
				+          文件上传
			
 
				+        </a>
			
 
				+      </dd>  
			
 
				+      <dd class="">
			
 
				+        <a href="transfer.html" tppabs="http://www.layui.com/demo/transfer.html">
			
 
				+          穿梭框
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      
			
 
				+       <dd class="">
			
 
				+        <a href="tree.html" tppabs="http://www.layui.com/demo/tree.html">
			
 
				+          树形组件
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="colorpicker.html" tppabs="http://www.layui.com/demo/colorpicker.html">
			
 
				+          颜色选择器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="slider.html" tppabs="http://www.layui.com/demo/slider.html">
			
 
				+          滑块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="rate.html" tppabs="http://www.layui.com/demo/rate.html">
			
 
				+          评分
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="carousel.html" tppabs="http://www.layui.com/demo/carousel.html">
			
 
				+          轮播
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html">
			
 
				+          模板引擎
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="layedit.html" tppabs="http://www.layui.com/demo/layedit.html">
			
 
				+          富文本编辑器
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="flow.html" tppabs="http://www.layui.com/demo/flow.html">
			
 
				+          流加载
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="layui-this">
			
 
				+        <a href="util.html" tppabs="http://www.layui.com/demo/util.html">
			
 
				+          工具模块
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+      <dd class="">
			
 
				+        <a href="code.html" tppabs="http://www.layui.com/demo/code.html">
			
 
				+          文本行修饰
			
 
				+        </a>
			
 
				+      </dd>
			
 
				+    </dl>
			
 
				+  </li>
			
 
				+  
			
 
				+  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
			
 
				+</ul>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
			
 
				+    <ul class="layui-tab-title site-demo-title">
			
 
				+      <li class="layui-this">预览</li>
			
 
				+      <li>查看代码</li>
			
 
				+      <li>帮助</li>
			
 
				+    </ul>
			
 
				+    <div class="layui-body layui-tab-content site-demo site-demo-body">
			
 
				+    
			
 
				+    
			
 
				+      <div class="layui-tab-item layui-show">
			
 
				+        <div class="layui-main">
			
 
				+          <div id="LAY_preview">
			
 
				+            
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			
 
				+  <legend>固定块</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+<p>囖，就页面右下角的那个。</p>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>倒计时</legend>
			
 
				+</fieldset>
			
 
				+请选择要计算的日期：
			
 
				+<div class="layui-inline">
			
 
				+  <input type="text" class="layui-input" id="test1" value="2099-01-01 00:00:00">
			
 
				+</div>
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 10px;">
			
 
				+  <div id="test2"></div>
			
 
				+</blockquote>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>某个时间在当前时间的多久前</legend>
			
 
				+</fieldset>
			
 
				+ 
			
 
				+请选择要计算的日期：
			
 
				+<div class="layui-inline">
			
 
				+  <input type="text" class="layui-input" id="test3">
			
 
				+</div>
			
 
				+<span class="layui-word-aux" id="test4"></span>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>转换日期格式</legend>
			
 
				+</fieldset>
			
 
				+请编辑格式：
			
 
				+<div class="layui-inline">
			
 
				+  <input type="text" value="yyyy-MM-dd HH:mm:ss" class="layui-input" id="test5">
			
 
				+</div>
			
 
				+<span class="layui-word-aux" id="test6"></span>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>批量处理事件</legend>
			
 
				+</fieldset>
			
 
				+<div class="layui-btn-container">
			
 
				+  <button class="layui-btn" lay-active="e1">事件1</button>
			
 
				+  <button class="layui-btn" lay-active="e2">事件2</button>
			
 
				+  <button class="layui-btn" lay-active="e3">事件3</button>
			
 
				+</div>
			
 
				+ 
			
 
				+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+  <legend>XSS 过滤</legend>
			
 
				+</fieldset>
			
 
				+<div class="layui-form layui-inline" style="width: 300px;">
			
 
				+  <textarea class="layui-textarea" id="test7">
			
 
				+<script>
			
 
				+  alert(0);
			
 
				+</script>
			
 
				+  </textarea>
			
 
				+</div>
			
 
				+<div class="layui-btn-container" style="margin-top: 10px;">
			
 
				+  <button class="layui-btn" id="test8">执行过滤</button>
			
 
				+</div>
			
 
				+              
			
 
				+          </div>
			
 
				+          
			
 
				+<blockquote class="layui-elem-quote" style="margin-top: 30px;">
			
 
				+  更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
			
 
				+</blockquote>
			
 
				+<div style="margin: 15px 0 100px; padding-bottom: 100px;">
			
 
				+
			
 
				+</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>镜像站@Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
			
 
				+</head>
			
 
				+</textarea>
			
 
				+      </div>
			
 
				+      
			
 
				+      
			
 
				+      <div class="layui-tab-item">
			
 
				+        <div class="layui-main">          
			
 
				+          
			
 
				+          
			
 
				+          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			
 
				+            <legend>相关</legend>
			
 
				+          </fieldset>
			
 
				+          <a class="layui-btn layui-btn-normal" href="../doc/modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html" target="_blank">util 文档</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+        
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  
			
 
				+<div class="layui-footer footer footer-demo">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'demo'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+<div id="LAY_democodejs">
			
 
				+<script>
			
 
				+layui.use(['util', 'laydate', 'layer'], function(){
			
 
				+  var util = layui.util
			
 
				+  ,laydate = layui.laydate
			
 
				+  ,$ = layui.$
			
 
				+  ,layer = layui.layer;
			
 
				+  //固定块
			
 
				+  util.fixbar({
			
 
				+    bar1: true
			
 
				+    ,bar2: true
			
 
				+    ,css: {right: 50, bottom: 100}
			
 
				+    ,bgcolor: '#393D49'
			
 
				+    ,click: function(type){
			
 
				+      if(type === 'bar1'){
			
 
				+        layer.msg('icon 是可以随便换的')
			
 
				+      } else if(type === 'bar2') {
			
 
				+        layer.msg('两个 bar 都可以设定是否开启')
			
 
				+      }
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //倒计时
			
 
				+  var thisTimer, setCountdown = function(y, M, d, H, m, s){
			
 
				+    var endTime = new Date(y, M||0, d||1, H||0, m||0, s||0) //结束日期
			
 
				+    ,serverTime = new Date(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
			
 
				+     
			
 
				+    clearTimeout(thisTimer);
			
 
				+    util.countdown(endTime, serverTime, function(date, serverTime, timer){
			
 
				+      var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
			
 
				+      lay('#test2').html(str);
			
 
				+      thisTimer = timer;
			
 
				+    });
			
 
				+  };
			
 
				+  setCountdown(2099,1,1);
			
 
				+  
			
 
				+  laydate.render({
			
 
				+    elem: '#test1'
			
 
				+    ,type: 'datetime'
			
 
				+    ,done: function(value, date){
			
 
				+      setCountdown(date.year, date.month - 1, date.date, date.hours, date.minutes, date.seconds);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  
			
 
				+  //某个时间在当前时间的多久前
			
 
				+  var setTimeAgo = function(y, M, d, H, m, s){
			
 
				+    var str = util.timeAgo(new Date(y, M||0, d||1, H||0, m||0, s||0));
			
 
				+    lay('#test4').html(str);
			
 
				+  };
			
 
				+  laydate.render({
			
 
				+    elem: '#test3'
			
 
				+    ,type: 'datetime'
			
 
				+    ,done: function(value, date){
			
 
				+      setTimeAgo(date.year, date.month - 1, date.date, date.hours, date.minutes, date.seconds);
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //转换日期格式
			
 
				+  var toDateString = function(format){
			
 
				+    var dateString = util.toDateString(new Date(), format); //执行转换日期格式的方法
			
 
				+    $('#test6').html(dateString);
			
 
				+  };
			
 
				+  toDateString($('#test5').val());
			
 
				+  //监听输入框事件
			
 
				+  $('#test5').on('keyup', function(){
			
 
				+    toDateString(this.value);
			
 
				+  });
			
 
				+  
			
 
				+  //处理属性 为 lay-active 的所有元素事件
			
 
				+  util.event('lay-active', {
			
 
				+    e1: function(){
			
 
				+      layer.msg('触发了事件1');
			
 
				+    }
			
 
				+    ,e2: function(){
			
 
				+      layer.msg('触发了事件2');
			
 
				+    }
			
 
				+    ,e3: function(){
			
 
				+      layer.msg('触发了事件3');
			
 
				+    }
			
 
				+  });
			
 
				+  
			
 
				+  //XSS 过滤
			
 
				+  $('#test8').on('click', function(){ //监听按钮事件
			
 
				+    var str = util.escape($('#test7').val()); //执行 xss 过滤方法
			
 
				+    alert(str);
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/base/changelog.html
+++ b/doc/base/changelog.html
--- a/doc/base/element.html
+++ b/doc/base/element.html
@@ -0,0 +1,728 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui 页面元素规范与说明</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#css"><cite>CSS规范</cite></a></li>
			
 
				+  <li><a href="#html"><cite>HTML规范</cite></a></li>
			
 
				+  <li><a href="#attr"><cite>常用公共属性</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">页面元素规范与说明</h1>
			
 
				+    <blockquote class="layui-elem-quote">layui 提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要小小遵循一定的规范。</p>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="css">CSS内置公共基础类</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <table class="layui-table">
			
 
				+      <colgroup>
			
 
				+        <col width="150">
			
 
				+        <col>
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <tr>
			
 
				+          <th>类名（class）</th>
			
 
				+          <th>说明</th>
			
 
				+        </tr> 
			
 
				+      </thead>
			
 
				+      <tbody>
			
 
				+        <tr>
			
 
				+          <td colspan="2" style="text-align: center">布局 / 容器</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-main</td>
			
 
				+          <td>用于设置一个宽度为 1140px 的水平居中块（无响应式）</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-inline</td>
			
 
				+          <td>用于将标签设为内联块状元素</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-box</td>
			
 
				+          <td>用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-clear</td>
			
 
				+          <td>用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动）</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-btn-container</td>
			
 
				+          <td>用于定义按钮的父容器。（layui 2.2.5 新增）</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-btn-fluid</td>
			
 
				+          <td>用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增）</td>
			
 
				+        </tr>
			
 
				+        
			
 
				+        <tr>
			
 
				+          <td colspan="2" style="text-align: center">辅助</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-icon</td>
			
 
				+          <td>用于图标</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-elip</td>
			
 
				+          <td>用于单行文本溢出省略</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-unselect</td>
			
 
				+          <td>用于屏蔽选中</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-disabled</td>
			
 
				+          <td>用于设置元素不可点击状态</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-circle</td>
			
 
				+          <td>用于设置元素为圆形</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-show</td>
			
 
				+          <td>用于显示块状元素</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-hide</td>
			
 
				+          <td>用于隐藏元素</td>
			
 
				+        </tr>
			
 
				+        
			
 
				+        <tr>
			
 
				+          <td colspan="2" style="text-align: center">文本</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-text</td>
			
 
				+          <td>定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-word-aux</td>
			
 
				+          <td>灰色标注性文字，左右会有间隔</td>
			
 
				+        </tr>
			
 
				+        
			
 
				+        <tr>
			
 
				+          <td colspan="2" style="text-align: center">背景色</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-bg-red</td>
			
 
				+          <td>用于设置元素赤色背景</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-bg-orange</td>
			
 
				+          <td>用于设置元素橙色背景</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-bg-green</td>
			
 
				+          <td>用于设置元素墨绿色背景（主色调）</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-bg-cyan</td>
			
 
				+          <td>用于设置元素藏青色背景</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-bg-blue</td>
			
 
				+          <td>用于设置元素蓝色背景</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-bg-black</td>
			
 
				+          <td> 用于设置元素经典黑色背景</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>layui-bg-gray</td>
			
 
				+          <td>用于设置元素经典灰色背景</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td colspan="2" style="text-align: center">字体大小及颜色 <a name="font"></a></td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td colspan="2">
			
 
				+            <pre class="layui-code">
			
 
				+layui-font-12 （12px 的字体）
			
 
				+layui-font-14 （14px 的字体）
			
 
				+layui-font-16 （16px 的字体）
			
 
				+layui-font-18 （18px 的字体）
			
 
				+layui-font-20 （20px 的字体）
			
 
				+layui-font-red （红色字体）
			
 
				+layui-font-orange （橙色字体）
			
 
				+layui-font-green （绿色字体）
			
 
				+layui-font-cyan （青色字体）
			
 
				+layui-font-blue （蓝色字体）
			
 
				+layui-font-black （黑色字体）
			
 
				+layui-font-gray （灰色字体）
			
 
				+            </pre>
			
 
				+          </td>
			
 
				+        </tr>
			
 
				+      </tbody>
			
 
				+    </table>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="css">CSS命名规范</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>class命名前缀：<em>layui</em>，连接符：<em>-</em>，如：<em>class="layui-form"</em></p>
			
 
				+      <p>命名格式一般分为两种：一：<em>layui-模块名-状态或类型</em>，二：<em>layui-状态或类型</em>。因为有些类并非是某个模块所特有，他们通常会是一些公共类。如：一（定义按钮的原始风格）：<em>class="layui-btn layui-btn-primary"</em>、二（定义内联块状元素）：<em>class="layui-inline"</em></p>
			
 
				+      <p>大致记住这些简单的规则，会让你在填充HTML的时候显得更加得心应手。另外，如果你是开发Layui拓展（模块），你最好也要遵循于类似的规则，并且请勿占用Layui已经命名好的类，假设你是在帮Layui开发一个markdown编辑器，你的css书写规则应该如下：</p>
			
 
				+      <pre class="layui-code" lay-title="CSS">
			
 
				+.layui-markdown{border: 1px solid #e2e2e2;}
			
 
				+.layui-markdown-tools{}
			
 
				+.layui-markdown-text{}
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+     
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="html">HTML规范：结构</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>Layui在解析HTML元素时，必须充分确保其结构是被支持的。以Tab选项卡为例：</p>
			
 
				+      <pre class="layui-code" lay-title="HTML">
			
 
				+&lt;div class=&quot;layui-tab&quot;&gt;
			
 
				+  &lt;ul class=&quot;layui-tab-title&quot;&gt;
			
 
				+    &lt;li class=&quot;layui-this&quot;&gt;标题一&lt;/li&gt;
			
 
				+    &lt;li&gt;标题二&lt;/li&gt;
			
 
				+    &lt;li&gt;标题三&lt;/li&gt;
			
 
				+  &lt;/ul&gt;
			
 
				+  &lt;div class=&quot;layui-tab-content&quot;&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item layui-show&quot;&gt;内容1&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;内容2&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;内容3&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+      </pre>
			
 
				+      <p>你如果改变了结构，极有可能会导致Tab功能失效。所以在嵌套HTML的时候，你应该细读各个元素模块的相关文档（如果你不是拿来主义）</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="attr">HTML规范：常用公共属性</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>很多时候，元素的基本交互行为，都是由模块自动开启。但不同的区域可能需要触发不同的动作，这就需要你设定我们所支持的自定义属性来作为区分。如下面的 <em>lay-submit</em>、<em>lay-filter</em>即为公共属性（即以 <em>lay-</em> 作为前缀的自定义属性）：</p>
			
 
				+      <pre class="layui-code">
			
 
				+&lt;button class="layui-btn" lay-submit lay-filter="login">登入&lt;/button>      
			
 
				+      </pre>
			
 
				+      <p>目前我们的公共属性如下所示（即普遍运用于所有元素上的属性）</p>
			
 
				+      <table class="layui-table">
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th style="width: 100px;">属性</th>
			
 
				+            <th>描述</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>lay-skin=" "</td>
			
 
				+            <td>定义相同元素的不同风格，如checkbox的开关风格</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>lay-filter=" "</td>
			
 
				+            <td>事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>lay-submit</td>
			
 
				+            <td>定义一个触发表单提交的button，不用填写值</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+      <p>额，好像有点少的样子（反正你也基本不会看文档。。(づ╥﹏╥)づ）。其它的自定义属性基本都在各自模块的文档中有所介绍。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="other">结语</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>其实很多时候并不想陈列条条框框（除了一些特定需要的），所以你会发现本篇的篇幅较短。（哈哈哈哈哈，其实是写文档写得想吐了）</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/base/faq.html
+++ b/doc/base/faq.html
@@ -0,0 +1,566 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@常见问题 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#compress"><cite>如何获取未压缩源代码</cite></a></li>
			
 
				+  <li><a href="#use"><cite>应该如何加载模块</cite></a></li>
			
 
				+  <li><a href="#form"><cite>为什么表单不显示</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">常见问题</h1>
			
 
				+    
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      本篇将主要讲解使用过程中普遍遇到的“问题”，并非是 BUG，通常是需要我们自己去注意的一些点。（持续补充）
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="compress">哪里有 layui 未压缩源代码？</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text layui-text">  
			
 
				+      <p>之所以在下载包里没有提供未压缩的源代码，是为了方便直接用于生产环境。layui 源代码可通过以下平台获取：
			
 
				+      </p>
			
 
				+    </div>
			
 
				+    <div  class="layui-btn-container">
			
 
				+      <a class="layui-btn layui-btn-normal" href="https://github.com/sentsin/layui/" target="_blank" rel="nofollow" style="background-color: #24292E">GitHub</a>
			
 
				+      <a class="layui-btn layui-btn-normal" href="https://gitee.com/sentsin/layui/" target="_blank" rel="nofollow" style="background-color: #C71D23">Gitee</a>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">应该如何加载模块？</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">  
			
 
				+      <pre class="layui-code" lay-title="JS">
			
 
				+layui.use(['layer', 'form', 'element'], function(){
			
 
				+  var layer = layui.layer
			
 
				+  ,form = layui.form
			
 
				+  ,element = layui.element
			
 
				+ 
			
 
				+  //……
			
 
				+  //你的代码都应该写在这里面
			
 
				+});  
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="form">为什么表单不显示？</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">  
			
 
				+      <p>
			
 
				+        当你使用表单时，layui 会对 select、checkbox、radio 等原始元素隐藏，从而进行美化修饰处理。但如果您的表单元素是动态添加的，那么在组件初始加载的时候是无法读取到的，这是你只需执行一个视图渲染的实例即可。<a href="../modules/form.html#render" tppabs="http://www.layui.com/doc/modules/form.html#render" target="_blank">#详见说明</a>
			
 
				+      </p>
			
 
				+      <pre class="layui-code" lay-title="JavaScript">
			
 
				+layui.use('form', function(){
			
 
				+  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
			
 
				+  
			
 
				+  //……
			
 
				+  
			
 
				+  //如果你的 HTML 是动态生成的，自动渲染就会失效
			
 
				+  //因此你需要在相应的地方，执行下述方法来进行渲染
			
 
				+  form.render();
			
 
				+});      
			
 
				+      </pre>
			
 
				+      <p>同理的还有 <a href="../modules/element.html#render" tppabs="http://www.layui.com/doc/modules/element.html#render" target="_blank">element 模块</a></p>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="other">遇到各种问题怎么办？</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="layui-text">  
			
 
				+      <p style="margin-bottom: 5px;">求助 Gitee 开发者社区，抱团取暖</p>
			
 
				+      <p>
			
 
				+        <a class="layui-btn layui-btn-lg" href="https://gitee.com/sentsin/layui/issues" rel="nofollow" target="_blank">Issues</a>
			
 
				+      </p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <br><br>
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/base/infrastructure.html
+++ b/doc/base/infrastructure.html
--- a/doc/base/modules.html
+++ b/doc/base/modules.html
--- a/doc/element/anim.html
+++ b/doc/element/anim.html
@@ -0,0 +1,611 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@CSS3动画类文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+<style>
			
 
				+.site-doc-icon li{width: 50%;}
			
 
				+.site-doc-icon li .layui-anim{width: 125px; height: 125px; line-height: 125px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
			
 
				+.site-doc-icon li .code{white-space: nowrap;}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">CSS3动画类</h1>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持 ie8 和部分不支持 ie9。
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">使用方式</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：</p>
			
 
				+      <pre class="layui-code">
			
 
				+其中 layui-anim 是必须的，后面跟着的即是不同的动画类
			
 
				+&lt;div class="layui-anim layui-anim-up">&lt;/div&gt;
			
 
				+ 
			
 
				+循环动画，追加：layui-anim-loop
			
 
				+&lt;div class="layui-anim layui-anim-up layui-anim-loop">&lt;/div&gt;
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+  
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">内置CSS3动画一览表</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>下面是不同的动画类名，点击下述绿色块，可直接预览动画</p>
			
 
				+    </div>
			
 
				+    <ul class="layui-border-box site-doc-icon site-doc-anim">
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-down">顶部往下滑入</div>
			
 
				+        <div class="code">layui-anim-down</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-downbit">微微往下滑入</div>
			
 
				+        <div class="code">layui-anim-downbit</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-up">底部往上滑入</div>
			
 
				+        <div class="code">layui-anim-up</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
			
 
				+        <div class="code">layui-anim-upbit</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
			
 
				+        <div class="code">layui-anim-scale</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
			
 
				+        <div class="code">layui-anim-scaleSpring</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-scalesmall">平滑放小</div>
			
 
				+        <div class="code">layui-anim-scalesmall</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-scalesmall-spring">弹簧式放小</div>
			
 
				+        <div class="code">layui-anim-scalesmall-spring</div>
			
 
				+      </li>
			
 
				+      
			
 
				+      
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
			
 
				+        <div class="code">layui-anim-fadein</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
			
 
				+        <div class="code">layui-anim-fadeout</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
			
 
				+        <div class="code">layui-anim-rotate</div>
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
			
 
				+        <div class="code">追加：layui-anim-loop</div>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+ 
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="docend">结语</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>物不在多，有用则精。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+layui.use('jquery', function(){
			
 
				+  var $ = layui.$;
			
 
				+  
			
 
				+  //演示动画
			
 
				+  $('.site-doc-icon .layui-anim').on('click', function(){
			
 
				+    var othis = $(this), anim = othis.data('anim');
			
 
				+ 
			
 
				+    //停止循环
			
 
				+    if(othis.hasClass('layui-anim-loop')){
			
 
				+      return othis.removeClass(anim);
			
 
				+    }
			
 
				+    
			
 
				+    othis.removeClass(anim);
			
 
				+    
			
 
				+    setTimeout(function(){
			
 
				+      othis.addClass(anim);
			
 
				+    });
			
 
				+    //恢复渐隐
			
 
				+    if(anim === 'layui-anim-fadeout'){
			
 
				+      setTimeout(function(){
			
 
				+        othis.removeClass(anim);
			
 
				+      }, 1300);
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/element/auxiliar.html
+++ b/doc/element/auxiliar.html
@@ -0,0 +1,595 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@简单辅助元素 - 页面元素 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#blockquote"><cite>引用区块</cite></a></li>
			
 
				+  <li><a href="#fieldset"><cite>字段集区块</cite></a></li>
			
 
				+  <li><a href="#hr"><cite>横线/分割线</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">简单辅助元素 - 页面元素</h1>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+        本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块
			
 
				+      </p>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="blockquote">引用区块</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+      <blockquote class="layui-elem-quote">引用区域的文字</blockquote>
			
 
				+      <blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>
			
 
				+      <p>目前内置了上述两种风格</p>
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;blockquote class="layui-elem-quote">引用区域的文字&lt;/blockquote>
			
 
				+&lt;blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字&lt;/blockquote>
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="fieldset">字段集区块</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+      <fieldset class="layui-elem-field">
			
 
				+        <legend>字段集区块 - 默认风格</legend>
			
 
				+        <div class="layui-field-box">
			
 
				+          内容区域。
			
 
				+        </div>
			
 
				+      </fieldset>
			
 
				+      <p>同样内置了两种风格，另一种风格即该文档的标题横线：字段集一行</p>
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;fieldset class="layui-elem-field">
			
 
				+  &lt;legend>字段集区块 - 默认风格&lt;/legend>
			
 
				+  &lt;div class="layui-field-box">
			
 
				+    内容区域
			
 
				+  &lt;/div>
			
 
				+&lt;/fieldset>
			
 
				+ 
			
 
				+&lt;fieldset class="layui-elem-field layui-field-title">
			
 
				+  &lt;legend>字段集区块 - 横线风格&lt;/legend>
			
 
				+  &lt;div class="layui-field-box">
			
 
				+    内容区域
			
 
				+  &lt;/div>
			
 
				+&lt;/fieldset>
			
 
				+你可以把它看作是一个有标题的横线
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="hr">横线</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+      默认分割线
			
 
				+      <hr>
			
 
				+      
			
 
				+      赤色分割线
			
 
				+      <hr class="layui-border-red">
			
 
				+      
			
 
				+      橙色分割线
			
 
				+      <hr class="layui-border-orange">
			
 
				+      
			
 
				+      墨绿分割线
			
 
				+      <hr class="layui-border-green">
			
 
				+      
			
 
				+      青色分割线
			
 
				+      <hr class="layui-border-cyan">
			
 
				+      
			
 
				+      蓝色分割线
			
 
				+      <hr class="layui-border-blue">
			
 
				+      
			
 
				+      黑色分割线
			
 
				+      <hr class="layui-border-black">
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+默认分割线
			
 
				+&lt;hr>
			
 
				+ 
			
 
				+赤色分割线
			
 
				+&lt;hr class="layui-border-red">
			
 
				+ 
			
 
				+橙色分割线
			
 
				+&lt;hr class="layui-border-orange">
			
 
				+ 
			
 
				+墨绿分割线
			
 
				+&lt;hr class="layui-border-green">
			
 
				+ 
			
 
				+青色分割线
			
 
				+&lt;hr class="layui-border-cyan">
			
 
				+ 
			
 
				+蓝色分割线
			
 
				+&lt;hr class="layui-border-blue">
			
 
				+ 
			
 
				+黑色分割线
			
 
				+&lt;hr class="layui-border-black">
			
 
				+ 
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/element/badge.html
+++ b/doc/element/badge.html
@@ -0,0 +1,627 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui 徽章文档</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>快速使用</cite></a></li>
			
 
				+  <li><a href="#mod"><cite>与其它元素的搭配</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">徽章</h1>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">快速使用</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>不妨先来看看 徽章 这个小小的大家族吧：</p>
			
 
				+      <blockquote class="layui-elem-quote layui-quote-nm">
			
 
				+        <span class="layui-badge-dot"></span>
			
 
				+        <span class="layui-badge-dot layui-bg-orange"></span>
			
 
				+        <span class="layui-badge-dot layui-bg-green"></span>
			
 
				+        <span class="layui-badge-dot layui-bg-cyan"></span>
			
 
				+        <span class="layui-badge-dot layui-bg-blue"></span>
			
 
				+        <span class="layui-badge-dot layui-bg-black"></span>
			
 
				+        <span class="layui-badge-dot layui-bg-gray"></span>
			
 
				+        <span class="layui-badge">6</span>
			
 
				+        <span class="layui-badge">99</span>
			
 
				+        <span class="layui-badge">61728</span>
			
 
				+        <span class="layui-badge">赤</span>
			
 
				+        <span class="layui-badge layui-bg-orange">橙</span>
			
 
				+        <span class="layui-badge layui-bg-green">绿</span>
			
 
				+        <span class="layui-badge layui-bg-cyan">青</span>
			
 
				+        <span class="layui-badge layui-bg-blue">蓝</span>
			
 
				+        <span class="layui-badge layui-bg-black">黑</span>
			
 
				+        <span class="layui-badge layui-bg-gray">灰</span>
			
 
				+        
			
 
				+        <span class="layui-badge-rim">6</span>
			
 
				+        <span class="layui-badge-rim">Hot</span>
			
 
				+      </blockquote>
			
 
				+      <br>
			
 
				+      <p>你可能已经敏锐地发现，除去花枝招展的七种颜色，徽章具有三种不同的风格类型：<em >小圆点</em>、<em>椭圆体</em>、<em>边框体</em></p>
			
 
				+      <pre class="layui-code">
			
 
				+      
			
 
				+小圆点，通过 <span class="layui-badge-rim">layui-badge-dot</span> 来定义，里面不能加文字
			
 
				+&lt;span class=&quot;layui-badge-dot&quot;&gt;&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge-dot layui-bg-orange&quot;&gt;&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge-dot layui-bg-green&quot;&gt;&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge-dot layui-bg-cyan&quot;&gt;&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge-dot layui-bg-blue&quot;&gt;&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge-dot layui-bg-black&quot;&gt;&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge-dot layui-bg-gray&quot;&gt;&lt;/span&gt;
			
 
				+ 
			
 
				+椭圆体，通过 <span class="layui-badge-rim">layui-badge</span> 来定义。事实上我们把这个视作为主要使用方式
			
 
				+&lt;span class=&quot;layui-badge&quot;&gt;6&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge&quot;&gt;99&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge&quot;&gt;61728&lt;/span&gt;
			
 
				+ 
			
 
				+&lt;span class=&quot;layui-badge&quot;&gt;赤&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge layui-bg-orange&quot;&gt;橙&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge layui-bg-green&quot;&gt;绿&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge layui-bg-cyan&quot;&gt;青&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge layui-bg-blue&quot;&gt;蓝&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge layui-bg-black&quot;&gt;黑&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge layui-bg-gray&quot;&gt;灰&lt;/span&gt;
			
 
				+ 
			
 
				+边框体，通过 <span class="layui-badge-rim">layui-badge-rim</span> 来定义
			
 
				+&lt;span class=&quot;layui-badge-rim&quot;&gt;6&lt;/span&gt;
			
 
				+&lt;span class=&quot;layui-badge-rim&quot;&gt;Hot&lt;/span&gt;
			
 
				+      </pre>
			
 
				+      <p></p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="mod">与其它元素的搭配</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>徽章主要是修饰作用，因此必不可少要与几乎所有的元素搭配。我们目前对以下元素内置了徽章的排版支持：</p>
			
 
				+      <br><p>按钮</p><hr>
			
 
				+      <p>
			
 
				+        <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">6</span></button>
			
 
				+        <button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
			
 
				+        <em> ← 快看！这颜色屎黄屎黄的。。。</em>
			
 
				+      </p>
			
 
				+      <pre class="layui-code">
			
 
				+&lt;button class=&quot;layui-btn&quot;&gt;查看消息&lt;span class=&quot;layui-badge layui-bg-gray&quot;&gt;1&lt;/span&gt;&lt;/button&gt;
			
 
				+&lt;button class=&quot;layui-btn&quot;&gt;动态&lt;span class=&quot;layui-badge-dot layui-bg-orange&quot;&gt;&lt;/span&gt;&lt;/button&gt;
			
 
				+      </pre>
			
 
				+      <br><p>导航</p><hr>
			
 
				+      <ul class="layui-nav" style="text-align: right;">
			
 
				+        <li class="layui-nav-item">
			
 
				+          <a href="">控制台<span class="layui-badge">9</span></a>
			
 
				+        </li>
			
 
				+        <li class="layui-nav-item">
			
 
				+          <a href="">个人中心<span class="layui-badge-dot"></span></a>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+      <pre class="layui-code">
			
 
				+&lt;ul class=&quot;layui-nav&quot; style="text-align: right;&quot;&gt; &lt;-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 --&gt;
			
 
				+  &lt;li class=&quot;layui-nav-item&quot;&gt;
			
 
				+    &lt;a href=&quot;&quot;&gt;控制台&lt;span class=&quot;layui-badge&quot;&gt;9&lt;/span&gt;&lt;/a&gt;
			
 
				+  &lt;/li&gt;
			
 
				+  &lt;li class=&quot;layui-nav-item&quot;&gt;
			
 
				+    &lt;a href=&quot;&quot;&gt;个人中心&lt;span class=&quot;layui-badge-dot&quot;&gt;&lt;/span&gt;&lt;/a&gt;
			
 
				+  &lt;/li&gt;
			
 
				+&lt;/ul&gt;
			
 
				+      </pre>
			
 
				+      <br><p>选项卡（所有风格都支持，这里以简约风格为例）</p><hr>
			
 
				+      <div class="layui-tab layui-tab-brief">
			
 
				+        <ul class="layui-tab-title">
			
 
				+          <li class="layui-this">网站设置</li>
			
 
				+          <li>用户管理<span class="layui-badge-dot"></span></li>
			
 
				+          <li>最新邮件<span class="layui-badge">99+</span></li>
			
 
				+        </ul>
			
 
				+        <div class="layui-tab-content"></div>
			
 
				+      </div>
			
 
				+      <pre class="layui-code">
			
 
				+&lt;div class=&quot;layui-tab layui-tab-brief&quot;&gt;
			
 
				+  &lt;ul class=&quot;layui-tab-title&quot;&gt;
			
 
				+    &lt;li class=&quot;layui-this&quot;&gt;网站设置&lt;/li&gt;
			
 
				+    &lt;li&gt;用户管理&lt;span class=&quot;layui-badge-dot&quot;&gt;&lt;/span&gt;&lt;/li&gt;
			
 
				+    &lt;li&gt;最新邮件&lt;span class=&quot;layui-badge&quot;&gt;99+&lt;/span&gt;&lt;/li&gt;
			
 
				+  &lt;/ul&gt;
			
 
				+  &lt;div class=&quot;layui-tab-content&quot;&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+      </pre>
			
 
				+      <p><br>而至于与其它更多元素的搭配，就由你自由把控吧！</p>
			
 
				+    </div>
			
 
				+ 
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="docend">结语</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>其实，在与其它元素的搭配中，你要做的，无非就是合理运用这几点：<span class="layui-badge-rim">边距</span> <span class="layui-badge-rim">背景色</span>，徽章必然大显神威！</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/element/button.html
+++ b/doc/element/button.html
--- a/doc/element/color.html
+++ b/doc/element/color.html
@@ -0,0 +1,647 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@layui 颜色参考 - 页面元素 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#color-design"><cite>颜色参考</cite></a></li>
			
 
				+  <li><a href="#bgcolor"><cite>内置的背景色类</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">layui 颜色设计感</h1>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="color-design">主色调</a></legend>
			
 
				+    </fieldset>
			
 
				+    <ul class="layui-row layui-col-space15 site-doc-color">
			
 
				+      <li class="layui-col-sm3">
			
 
				+        <div style="background-color: #009688;">
			
 
				+          <p>#009688<p>
			
 
				+          <p tips>主色调之一</p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-sm3">
			
 
				+        <div style="background-color: #5FB878;">
			
 
				+          <p>#5FB878<p>
			
 
				+          <p tips>一般用于选中状态</p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-sm3">
			
 
				+        <div style="background-color: #393D49;">
			
 
				+          <p>#393D49<p>
			
 
				+          <p tips>通常用于导航</p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-sm3">
			
 
				+        <div style="background-color: #1E9FFF;">
			
 
				+          <p>#1E9FFF<p>
			
 
				+          <p tips>经典蓝</p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    <div class="site-text">
			
 
				+      <p>layui 主要是以象征包容的墨绿作为主色调，由于它给人以深沉感，所以通常会以浅黑色的作为其陪衬，又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳，整体让人清新自然，愈发耐看。【取色意义】：我们执着于务实，不盲目攀比，又始终不忘绽放活力。这正是 layui 所追求的价值。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="scene">次色调</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <ul class="layui-row layui-col-space15 site-doc-color">
			
 
				+      <li class="layui-col-sm3">
			
 
				+        <div style="background-color: #FFB800;">
			
 
				+          <p>#FFB800<p>
			
 
				+          <p tips>暖色系</p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-sm3">
			
 
				+        <div style="background-color: #FF5722;">
			
 
				+          <p>#FF5722<p>
			
 
				+          <p tips>比较引人注意的颜色</p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-sm3">
			
 
				+        <div style="background-color: #01AAED;">
			
 
				+          <p>#01AAED<p>
			
 
				+          <p tips>文本链接着色</p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-sm3">
			
 
				+        <div style="background-color: #2F4056;">
			
 
				+          <p>#2F4056<p>
			
 
				+          <p tips>侧边色</p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    <div class="site-text">
			
 
				+      <p>事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。他们一般会出现在 layui 的按钮、提示和修饰性元素，以及一些侧边元素上。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="neutral">中性色</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <p>他们一般用于背景、边框等</p>
			
 
				+    
			
 
				+    <ul class="layui-row site-doc-color site-doc-necolor">
			
 
				+      <li class="layui-col-md6">
			
 
				+        <div style="background-color: #FAFAFA;">
			
 
				+          <p>#FAFAFA<p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-md6">
			
 
				+        <div style="background-color: #f6f6f6;"><p>#F6F6F6<p></div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-md2">
			
 
				+        <div style="background-color: #eeeeee;"><p>#eeeeee<p></div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-md2">
			
 
				+        <div style="background-color: #e2e2e2;"><p>#e2e2e2<p></div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-md2">
			
 
				+        <div style="background-color: #dddddd;"><p>#dddddd<p></div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-md2">
			
 
				+        <div style="background-color: #d2d2d2;"><p>#d2d2d2<p></div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-md2">
			
 
				+        <div style="background-color: #cccccc;"><p>#cccccc<p></div>
			
 
				+      </li>
			
 
				+      <li class="layui-col-md2">
			
 
				+        <div style="background-color: #c2c2c2;"><p>#c2c2c2<p></div>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    <div class="site-text">
			
 
				+      <p>layui 认为灰色系代表极简，因为这是一种神奇的颜色，几乎可以与任何元素搭配，不易形成视觉疲劳，且永远不会过时。低调而优雅！</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="bgcolor">七种色</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>layui 内置了七种背景色，以便你用于各种元素中，如：徽章、分割线、导航等等</p>
			
 
				+    </div>
			
 
				+    <ul class="site-doc-bgcolor">
			
 
				+      <li class="layui-bg-red">
			
 
				+        赤色：class="layui-bg-red"
			
 
				+      </li>
			
 
				+      <li class="layui-bg-orange">
			
 
				+        橙色：class="layui-bg-orange"
			
 
				+      </li>
			
 
				+      <li class="layui-bg-green">
			
 
				+        墨绿：class="layui-bg-green"
			
 
				+      </li>
			
 
				+      <li class="layui-bg-cyan">
			
 
				+        藏青：class="layui-bg-cyan"
			
 
				+      </li>
			
 
				+      <li class="layui-bg-blue">
			
 
				+        蓝色：class="layui-bg-blue"
			
 
				+      </li>
			
 
				+      <li class="layui-bg-black">
			
 
				+        雅黑：class="layui-bg-black"
			
 
				+      </li>
			
 
				+      <li class="layui-bg-gray">
			
 
				+        银灰：class="layui-bg-gray"
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="other">结语</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>“不热衷于视觉设计的程序猿不是一个好作家！” ——贤心</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/element/form.html
+++ b/doc/element/form.html
--- a/doc/element/icon.html
+++ b/doc/element/icon.html
--- a/doc/element/layout.html
+++ b/doc/element/layout.html
--- a/doc/element/menu.html
+++ b/doc/element/menu.html
--- a/doc/element/nav.html
+++ b/doc/element/nav.html
@@ -0,0 +1,874 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@导航相关 - 页面元素 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#nav"><cite>水平导航</cite></a></li>
			
 
				+  <li><a href="#nav-theme"><cite>导航主题</cite></a></li>
			
 
				+  <li><a href="#navtree"><cite>垂直与侧边导航</cite></a></li>
			
 
				+  <li><a href="#attr"><cite>导航基础属性</cite> <span class="layui-badge-dot"></span></a></li>
			
 
				+  <li><a href="#breadcrumb"><cite>面包屑</cite></a></li>
			
 
				+  <li><a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html"><cite>相关动态操作</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">导航相关 - 页面元素</h1>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 <em>element</em>模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情
			
 
				+    </blockquote>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      依赖加载模块：<a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">element</a>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="nav">水平导航</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+      <ul class="layui-nav">
			
 
				+        <li class="layui-nav-item"><a href="">最新活动</a></li>
			
 
				+        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
			
 
				+        <li class="layui-nav-item"><a href="">大数据</a></li>
			
 
				+        <li class="layui-nav-item">
			
 
				+          <a href="javascript:;">解决方案</a>
			
 
				+          <dl class="layui-nav-child">
			
 
				+            <dd><a href="">移动模块</a></dd>
			
 
				+            <dd><a href="">后台模版</a></dd>
			
 
				+            <dd><a href="">电商平台</a></dd>
			
 
				+          </dl>
			
 
				+        </li>
			
 
				+        <li class="layui-nav-item"><a href="">社区</a></li>
			
 
				+      </ul>
			
 
				+      <br>
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;ul class="layui-nav" lay-filter="">
			
 
				+  &lt;li class="layui-nav-item">&lt;a href="">最新活动&lt;/a>&lt;/li>
			
 
				+  &lt;li class="layui-nav-item layui-this">&lt;a href="">产品&lt;/a>&lt;/li>
			
 
				+  &lt;li class="layui-nav-item">&lt;a href="">大数据&lt;/a>&lt;/li>
			
 
				+  &lt;li class="layui-nav-item">
			
 
				+    &lt;a href="javascript:;">解决方案&lt;/a>
			
 
				+    &lt;dl class="layui-nav-child"> &lt;!-- 二级菜单 --&gt;
			
 
				+      &lt;dd>&lt;a href="">移动模块&lt;/a>&lt;/dd>
			
 
				+      &lt;dd>&lt;a href="">后台模版&lt;/a>&lt;/dd>
			
 
				+      &lt;dd>&lt;a href="">电商平台&lt;/a>&lt;/dd>
			
 
				+    &lt;/dl>
			
 
				+  &lt;/li>
			
 
				+  &lt;li class="layui-nav-item">&lt;a href="">社区&lt;/a>&lt;/li>
			
 
				+&lt;/ul>
			
 
				+ 
			
 
				+&lt;script&gt;
			
 
				+//注意：导航 依赖 element 模块，否则无法进行功能性操作
			
 
				+layui.use('element', function(){
			
 
				+  var element = layui.element;
			
 
				+  
			
 
				+  //…
			
 
				+});
			
 
				+&lt;/script&gt;
			
 
				+      </pre>
			
 
				+      <p>设定<em>layui-this</em>来指向当前页面分类。</p>
			
 
				+      
			
 
				+      <br>
			
 
				+      <p>导航中的其它元素</p>
			
 
				+      <hr>
			
 
				+      <p>除了一般的文字导航，我们还内置了图片和徽章的支持，如：</p>
			
 
				+      <ul class="layui-nav">
			
 
				+        <li class="layui-nav-item">
			
 
				+          <a href="">控制台<span class="layui-badge">9</span></a>
			
 
				+        </li>
			
 
				+        <li class="layui-nav-item">
			
 
				+          <a href="">个人中心<span class="layui-badge-dot"></span></a>
			
 
				+        </li>
			
 
				+        <li class="layui-nav-item">
			
 
				+          <a href=""><img src="../../../other/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
			
 
				+          <dl class="layui-nav-child">
			
 
				+            <dd><a href="javascript:;">修改信息</a></dd>
			
 
				+            <dd><a href="javascript:;">安全管理</a></dd>
			
 
				+            <dd><a href="javascript:;">退了</a></dd>
			
 
				+          </dl>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;ul class=&quot;layui-nav&quot;&gt;
			
 
				+  &lt;li class=&quot;layui-nav-item&quot;&gt;
			
 
				+    &lt;a href=&quot;&quot;&gt;控制台&lt;span class=&quot;layui-badge&quot;&gt;9&lt;/span&gt;&lt;/a&gt;
			
 
				+  &lt;/li&gt;
			
 
				+  &lt;li class=&quot;layui-nav-item&quot;&gt;
			
 
				+    &lt;a href=&quot;&quot;&gt;个人中心&lt;span class=&quot;layui-badge-dot&quot;&gt;&lt;/span&gt;&lt;/a&gt;
			
 
				+  &lt;/li&gt;
			
 
				+  &lt;li class=&quot;layui-nav-item&quot;&gt;
			
 
				+    &lt;a href=&quot;&quot;&gt;&lt;img src=&quot;//t.cn/RCzsdCq&quot; class=&quot;layui-nav-img&quot;&gt;我&lt;/a&gt;
			
 
				+    &lt;dl class=&quot;layui-nav-child&quot;&gt;
			
 
				+      &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;修改信息&lt;/a&gt;&lt;/dd&gt;
			
 
				+      &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;安全管理&lt;/a&gt;&lt;/dd&gt;
			
 
				+      &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;退了&lt;/a&gt;&lt;/dd&gt;
			
 
				+    &lt;/dl&gt;
			
 
				+  &lt;/li&gt;
			
 
				+&lt;/ul&gt;
			
 
				+      </pre>
			
 
				+      <p>是否瞬间上了个档次呢？</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="nav-theme">导航主题</a></legend>
			
 
				+    </fieldset>
			
 
				+    <ul class="layui-nav layui-bg-cyan">
			
 
				+      <li class="layui-nav-item"><a href="">藏青导航</a></li>
			
 
				+      <li class="layui-nav-item layui-this"><a href="">产品</a></li>
			
 
				+      <li class="layui-nav-item"><a href="">大数据</a></li>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">解决方案</a>
			
 
				+        <dl class="layui-nav-child">
			
 
				+          <dd><a href="">移动模块</a></dd>
			
 
				+          <dd><a href="">后台模版</a></dd>
			
 
				+          <dd><a href="">电商平台</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item"><a href="">社区</a></li>
			
 
				+    </ul>
			
 
				+    <br>
			
 
				+    <ul class="layui-nav layui-bg-green">
			
 
				+      <li class="layui-nav-item"><a href="">墨绿导航</a></li>
			
 
				+      <li class="layui-nav-item layui-this"><a href="">产品</a></li>
			
 
				+      <li class="layui-nav-item"><a href="">大数据</a></li>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">解决方案</a>
			
 
				+        <dl class="layui-nav-child">
			
 
				+          <dd><a href="">移动模块</a></dd>
			
 
				+          <dd><a href="">后台模版</a></dd>
			
 
				+          <dd><a href="">电商平台</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item"><a href="">社区</a></li>
			
 
				+    </ul>
			
 
				+    <br>
			
 
				+    <ul class="layui-nav layui-bg-blue">
			
 
				+      <li class="layui-nav-item"><a href="">艳蓝导航</a></li>
			
 
				+      <li class="layui-nav-item layui-this"><a href="">产品</a></li>
			
 
				+      <li class="layui-nav-item"><a href="">大数据</a></li>
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">解决方案</a>
			
 
				+        <dl class="layui-nav-child">
			
 
				+          <dd><a href="">移动模块</a></dd>
			
 
				+          <dd><a href="">后台模版</a></dd>
			
 
				+          <dd><a href="">电商平台</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item"><a href="">社区</a></li>
			
 
				+    </ul>
			
 
				+    <br>
			
 
				+    <div class="site-text">
			
 
				+      <p>通过对导航追加CSS背景类，让导航呈现不同的主题色</p>
			
 
				+      <pre class="layui-code">
			
 
				+//如定义一个墨绿背景色的导航
			
 
				+&lt;ul class="layui-nav layui-bg-green" lay-filter="">
			
 
				+  …
			
 
				+&lt;/ul>      
			
 
				+      </pre>
			
 
				+      <p>
			
 
				+        水平导航支持的其它背景主题有：<em>layui-bg-cyan</em>（藏青）、<em>layui-bg-molv</em>（墨绿）、<em>layui-bg-blue</em>（艳蓝）
			
 
				+        <br>垂直导航支持的其它背景主题有：<em>layui-bg-cyan</em>（藏青）
			
 
				+      </p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="navtree">垂直/侧边导航</a></legend>
			
 
				+    </fieldset> 
			
 
				+    <div class="site-text">
			
 
				+      <ul class="layui-nav layui-nav-tree" id="L_demoNav" lay-filter="test">
			
 
				+        <li class="layui-nav-item layui-nav-itemed">
			
 
				+          <a href="javascript:;">默认展开</a>
			
 
				+          <dl class="layui-nav-child">
			
 
				+            <dd><a href="javascript:;">选项1</a></dd>
			
 
				+            <dd><a href="javascript:;">选项2</a></dd>
			
 
				+            <dd><a href="">跳转项</a></dd>
			
 
				+          </dl>
			
 
				+        </li>
			
 
				+        <li class="layui-nav-item">
			
 
				+          <a href="javascript:;">解决方案</a>
			
 
				+          <dl class="layui-nav-child">
			
 
				+            <dd><a href="">移动模块</a></dd>
			
 
				+            <dd><a href="">后台模版</a></dd>
			
 
				+            <dd><a href="">电商平台</a></dd>
			
 
				+          </dl>
			
 
				+        </li>
			
 
				+        <li class="layui-nav-item">
			
 
				+          <a href="">产品</a>
			
 
				+        </li>
			
 
				+        <li class="layui-nav-item"><a href="">大数据</a></li>
			
 
				+        <li class="layui-nav-item layui-hide" id="L_demoNavReset"><a href="javascript:;" onclick="L_demoNav.className='layui-nav layui-nav-tree';L_demoNavReset.className='layui-nav-item layui-hide';">还原该导航演示</a></li>
			
 
				+      </ul>
			
 
				+      <p style="margin-top: 20px;">
			
 
				+        <button class="layui-btn layui-btn-normal" onclick="L_demoNav.className='layui-nav layui-nav-tree layui-nav-side'; L_demoNavReset.className='layui-nav-item layui-this';">显示侧边导航示例</button>
			
 
				+      </p>
			
 
				+      <pre class="layui-code" lay-title="垂直导航HTML结构">
			
 
				+&lt;ul class="layui-nav layui-nav-tree" lay-filter="test">
			
 
				+&lt;!-- 侧边导航: &lt;ul class=&quot;layui-nav layui-nav-tree layui-nav-side&quot;&gt; --&gt;
			
 
				+  &lt;li class=&quot;layui-nav-item layui-nav-itemed&quot;&gt;
			
 
				+    &lt;a href=&quot;javascript:;&quot;&gt;默认展开&lt;/a&gt;
			
 
				+    &lt;dl class=&quot;layui-nav-child&quot;&gt;
			
 
				+      &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;选项1&lt;/a&gt;&lt;/dd&gt;
			
 
				+      &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;选项2&lt;/a&gt;&lt;/dd&gt;
			
 
				+      &lt;dd&gt;&lt;a href=&quot;&quot;&gt;跳转&lt;/a&gt;&lt;/dd&gt;
			
 
				+    &lt;/dl&gt;
			
 
				+  &lt;/li&gt;
			
 
				+  &lt;li class=&quot;layui-nav-item&quot;&gt;
			
 
				+    &lt;a href=&quot;javascript:;&quot;&gt;解决方案&lt;/a&gt;
			
 
				+    &lt;dl class=&quot;layui-nav-child&quot;&gt;
			
 
				+      &lt;dd&gt;&lt;a href=&quot;&quot;&gt;移动模块&lt;/a&gt;&lt;/dd&gt;
			
 
				+      &lt;dd&gt;&lt;a href=&quot;&quot;&gt;后台模版&lt;/a&gt;&lt;/dd&gt;
			
 
				+      &lt;dd&gt;&lt;a href=&quot;&quot;&gt;电商平台&lt;/a&gt;&lt;/dd&gt;
			
 
				+    &lt;/dl&gt;
			
 
				+  &lt;/li&gt;
			
 
				+  &lt;li class=&quot;layui-nav-item&quot;&gt;&lt;a href=&quot;&quot;&gt;产品&lt;/a&gt;&lt;/li&gt;
			
 
				+  &lt;li class=&quot;layui-nav-item&quot;&gt;&lt;a href=&quot;&quot;&gt;大数据&lt;/a&gt;&lt;/li&gt;
			
 
				+&lt;/ul>
			
 
				+      </pre>
			
 
				+      <p>水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：</p>
			
 
				+      <p class="site-tips">
			
 
				+        垂直导航需要追加class：<em>layui-nav-tree</em>
			
 
				+        <br>侧边导航需要追加class：<em>layui-nav-tree layui-nav-side</em>
			
 
				+      </p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="attr">导航可选属性/类</a></legend>
			
 
				+    </fieldset> 
			
 
				+    <div class="site-text">
			
 
				+      <p>对导航元素结构设定可选属性和 CSS 类名，可让导航菜单项达到不同效果。目前支持的属性如下：</p>
			
 
				+      <table class="layui-table">
			
 
				+        <colgroup>
			
 
				+          <col width="150">
			
 
				+          <col width="200">
			
 
				+          <col>
			
 
				+        </colgroup>
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>属性名</th>
			
 
				+            <th>可选值</th>
			
 
				+            <th>说明</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>lay-shrink</td>
			
 
				+            <td class="layui-text">
			
 
				+              <ul>
			
 
				+                <li><em>空值</em>（默认）<br>不收缩兄弟菜单子菜单</li>
			
 
				+                <li><em>all</em><br>收缩全部兄弟菜单子菜单</li>
			
 
				+              </ul>
			
 
				+            </td>
			
 
				+            <td>
			
 
				+              展开子菜单时，是否收缩兄弟节点已展开的子菜单
			
 
				+              （<span style="color: #FF5722;">注：layui 2.2.6 开始新增</span>）
			
 
				+              <br>如：<em>&lt;ul class=&quot;layui-nav layui-nav-tree&quot; lay-shrink=&quot;all&quot;&gt; … &lt;/ul&gt;</em> 
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>lay-unselect</td>
			
 
				+            <td>无需填值</td>
			
 
				+            <td>
			
 
				+              点击指定导航菜单时，不会出现选中效果（<span style="color: #FF5722;">注：layui 2.2.0 开始新增</span>）
			
 
				+              <br>如：<em>&lt;li class=&quot;layui-nav-item&quot; lay-unselect&gt;刷新&lt;/li&gt;</em> 
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>lay-bar</td>
			
 
				+            <td class="layui-text">
			
 
				+              <ul>
			
 
				+                <li><em>disabled</em><br>禁用滑块跟随功能</li>
			
 
				+              </ul>
			
 
				+            </td>
			
 
				+            <td>
			
 
				+              在导航菜单主容器中配置，如：<br>
			
 
				+              &lt;div class=&quot;layui-nav&quot; lay-bar=&quot;disabled&quot;&gt; &lt;/div&gt; 
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>CSS 类</td>
			
 
				+            <td class="layui-text">
			
 
				+              <ul>
			
 
				+                <li>layui-nav-child-c <br>子菜单居中对齐</li>
			
 
				+                <li>layui-nav-child-r <br>子菜单向右对齐</li>
			
 
				+              </ul>
			
 
				+            </td>
			
 
				+            <td>
			
 
				+              直接在子菜单标签配置即可，如：
			
 
				+              <pre class="layui-code">
			
 
				+&lt;dl class=&quot;layui-nav-child layui-nav-child-c&quot;&gt;
			
 
				+  …
			
 
				+&lt;/dl&gt;             
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td colspan="3">
			
 
				+              <blockquote class="layui-text layui-font-red">
			
 
				+                上述两项为 layui 2.6.6 开始新增
			
 
				+              </blockquote>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="breadcrumb">面包屑</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+      <p>
			
 
				+        <span class="layui-breadcrumb">
			
 
				+          <a href="">首页</a>
			
 
				+          <a href="">国际新闻</a>
			
 
				+          <a href="">亚太地区</a>
			
 
				+          <a><cite>正文</cite></a>
			
 
				+        </span>
			
 
				+      </p>
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;span class=&quot;layui-breadcrumb&quot;&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;首页&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;国际新闻&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;亚太地区&lt;/a&gt;
			
 
				+  &lt;a&gt;&lt;cite&gt;正文&lt;/cite&gt;&lt;/a&gt;
			
 
				+&lt;/span&gt;
			
 
				+      </pre>
			
 
				+      <p>
			
 
				+        你还可以通过设置属性 <em>lay-separator="-"</em> 来自定义分隔符。如：
			
 
				+        <span class="layui-breadcrumb" lay-separator="-" style="padding-left: 20px;">
			
 
				+          <a href="">首页</a>
			
 
				+          <a href="">国际新闻</a>
			
 
				+          <a href="">亚太地区</a>
			
 
				+          <a><cite>正文</cite></a>
			
 
				+        </span>
			
 
				+      </p>
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;span class=&quot;layui-breadcrumb&quot lay-separator="-"&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;首页&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;国际新闻&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;亚太地区&lt;/a&gt;
			
 
				+  &lt;a&gt;&lt;cite&gt;正文&lt;/cite&gt;&lt;/a&gt;
			
 
				+&lt;/span&gt;
			
 
				+      </pre>
			
 
				+      <p class="site-tips">当然，你还可以作为小导航来用，如：</p>
			
 
				+      <p>
			
 
				+        <span class="layui-breadcrumb" lay-separator="|">
			
 
				+          <a href="">娱乐</a>
			
 
				+          <a href="">八卦</a>
			
 
				+          <a href="">体育</a>
			
 
				+          <a href="">搞笑</a>
			
 
				+          <a href="">视频</a>
			
 
				+          <a href="">游戏</a>
			
 
				+          <a href="">综艺</a>
			
 
				+        </span>
			
 
				+      </p>
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;span class=&quot;layui-breadcrumb&quot; lay-separator=&quot;|&quot;&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;娱乐&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;八卦&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;体育&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;搞笑&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;视频&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;游戏&lt;/a&gt;
			
 
				+  &lt;a href=&quot;&quot;&gt;综艺&lt;/a&gt;
			
 
				+&lt;/span&gt;
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+layui.use(['element', 'layer'], function(){
			
 
				+  var element = layui.element
			
 
				+  ,layer = layui.layer;
			
 
				+  
			
 
				+  element.on('tab(docDemoTabBrief)', function(data){
			
 
				+    layer.msg('切到到了'+ data.index + '：' + this.innerHTML);
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/element/panel.html
+++ b/doc/element/panel.html
@@ -0,0 +1,704 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@面板 - 页面元素 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#panel"><cite>常规面板</cite></a></li>
			
 
				+  <li><a href="#card"><cite>卡片面板</cite></a></li>
			
 
				+  <li><a href="#collapse"><cite>折叠面板</cite></a></li>
			
 
				+  <li><a href="#accordion"><cite>开启手风琴</cite></a></li>
			
 
				+  <li><a href="../modules/element.html#collapse" tppabs="http://www.layui.com/doc/modules/element.html#collapse"><cite>相关动态操作</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">面板 - 页面元素</h1>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等
			
 
				+    </blockquote>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      依赖加载组件：<a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">element</a>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+     <div class="site-title">
			
 
				+      <fieldset><legend><a name="panel">常规面板</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="layui-tab layui-tab-brief layui-code-demo">
			
 
				+      <ul class="layui-tab-title">
			
 
				+        <li class="layui-this">效果</li>
			
 
				+        <li>代码</li>
			
 
				+      </ul>
			
 
				+      <div class="layui-tab-content layui-border layui-bg-gray">
			
 
				+        <div class="layui-tab-item layui-show" id="docDemoView1">
			
 
				+       
			
 
				+        </div>
			
 
				+        <div class="layui-tab-item">
			
 
				+          <pre class="layui-code" id="docDemoCode1" lay-lang="HTML" lay-encode="1" lay-height="360px">
			
 
				+<div class="layui-row layui-col-space15">
			
 
				+  <div class="layui-col-md6">
			
 
				+    <div class="layui-panel">
			
 
				+      <div style="padding: 30px;">一个面板</div>
			
 
				+    </div>   
			
 
				+  </div>
			
 
				+  <div class="layui-col-md6">
			
 
				+    <div class="layui-panel">
			
 
				+      <div style="padding: 30px;">一个面板</div>
			
 
				+    </div>   
			
 
				+  </div>
			
 
				+</div>    
			
 
				+          </pre>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-text">
			
 
				+      <p class="layui-font-red">
			
 
				+        提示：该功能为 layui 2.6.0 新增
			
 
				+      </p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="card">卡片面板</a></legend></fieldset>
			
 
				+    </div> 
			
 
				+    
			
 
				+    <div style="padding: 20px; background-color: #F2F2F2;">
			
 
				+      <div class="layui-row layui-col-space15">
			
 
				+        <div class="layui-col-md6">
			
 
				+          <div class="layui-card">
			
 
				+            <div class="layui-card-header">卡片面板</div>
			
 
				+            <div class="layui-card-body">
			
 
				+              卡片式面板面板通常用于非白色背景色的主体内<br>
			
 
				+              从而映衬出边框投影
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="layui-col-md6">
			
 
				+          <div class="layui-card">
			
 
				+            <div class="layui-card-header">卡片面板</div>
			
 
				+            <div class="layui-card-body">
			
 
				+              结合 layui 的栅格系统<br>
			
 
				+              轻松实现响应式布局
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <pre class="layui-code" lay-title="对应的HTML结构">
			
 
				+&lt;div class=&quot;layui-card&quot;&gt;
			
 
				+  &lt;div class=&quot;layui-card-header&quot;&gt;卡片面板&lt;/div&gt;
			
 
				+  &lt;div class=&quot;layui-card-body&quot;&gt;
			
 
				+    卡片式面板面板通常用于非白色背景色的主体内&lt;br&gt;
			
 
				+    从而映衬出边框投影
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+    </pre>
			
 
				+    
			
 
				+    <p>如果你的网页采用的是默认的白色背景，不建议使用卡片面板。</p>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="collapse">折叠面板</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+    
			
 
				+      <div class="layui-collapse">
			
 
				+        <div class="layui-colla-item">
			
 
				+          <h2 class="layui-colla-title">杜甫</h2>
			
 
				+          <div class="layui-colla-content layui-show">
			
 
				+            <p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="layui-colla-item">
			
 
				+          <h2 class="layui-colla-title">李清照</h2>
			
 
				+          <div class="layui-colla-content">
			
 
				+            <p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="layui-colla-item">
			
 
				+          <h2 class="layui-colla-title">鲁迅</h2>
			
 
				+          <div class="layui-colla-content">
			
 
				+            <p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      <p style="margin-top: 10px;">通过对内容元素设置class为 <em>layui-show</em> 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。</p>
			
 
				+      
			
 
				+      <pre class="layui-code" lay-title="对应的HTML结构">
			
 
				+&lt;div class=&quot;layui-collapse&quot;&gt;
			
 
				+  &lt;div class=&quot;layui-colla-item&quot;&gt;
			
 
				+    &lt;h2 class=&quot;layui-colla-title&quot;&gt;杜甫&lt;/h2&gt;
			
 
				+    &lt;div class=&quot;layui-colla-content layui-show&quot;&gt;内容区域&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+  &lt;div class=&quot;layui-colla-item&quot;&gt;
			
 
				+    &lt;h2 class=&quot;layui-colla-title&quot;&gt;李清照&lt;/h2&gt;
			
 
				+    &lt;div class=&quot;layui-colla-content layui-show&quot;&gt;内容区域&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+  &lt;div class=&quot;layui-colla-item&quot;&gt;
			
 
				+    &lt;h2 class=&quot;layui-colla-title&quot;&gt;鲁迅&lt;/h2&gt;
			
 
				+    &lt;div class=&quot;layui-colla-content layui-show&quot;&gt;内容区域&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+ 
			
 
				+&lt;script&gt;
			
 
				+//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
			
 
				+layui.use('element', function(){
			
 
				+  var element = layui.element;
			
 
				+  
			
 
				+  //…
			
 
				+});
			
 
				+&lt;/script&gt;
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="accordion">开启手风琴</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+    
			
 
				+      <div class="layui-collapse" lay-accordion>
			
 
				+        <div class="layui-colla-item">
			
 
				+          <h2 class="layui-colla-title">杜甫</h2>
			
 
				+          <div class="layui-colla-content layui-show">
			
 
				+            <p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="layui-colla-item">
			
 
				+          <h2 class="layui-colla-title">李清照</h2>
			
 
				+          <div class="layui-colla-content">
			
 
				+            <p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="layui-colla-item">
			
 
				+          <h2 class="layui-colla-title">鲁迅</h2>
			
 
				+          <div class="layui-colla-content">
			
 
				+            <p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      
			
 
				+      <p style="margin-top: 10px;">在折叠面板的父容器设置属性 <em>lay-accordion</em> 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。</p>
			
 
				+      
			
 
				+      <pre class="layui-code" lay-title="对应的HTML结构">
			
 
				+&lt;div class=&quot;layui-collapse&quot; <a>lay-accordion</a>&gt;
			
 
				+  &lt;div class=&quot;layui-colla-item&quot;&gt;
			
 
				+    &lt;h2 class=&quot;layui-colla-title&quot;&gt;杜甫&lt;/h2&gt;
			
 
				+    &lt;div class=&quot;layui-colla-content layui-show&quot;&gt;内容区域&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+  &lt;div class=&quot;layui-colla-item&quot;&gt;
			
 
				+    &lt;h2 class=&quot;layui-colla-title&quot;&gt;李清照&lt;/h2&gt;
			
 
				+    &lt;div class=&quot;layui-colla-content layui-show&quot;&gt;内容区域&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+  &lt;div class=&quot;layui-colla-item&quot;&gt;
			
 
				+    &lt;h2 class=&quot;layui-colla-title&quot;&gt;鲁迅&lt;/h2&gt;
			
 
				+    &lt;div class=&quot;layui-colla-content layui-show&quot;&gt;内容区域&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+global.docDemoCode1 = document.getElementById('docDemoCode1').innerHTML;
			
 
				+layui.use(['element', 'layer', 'util'], function(){
			
 
				+  var element = layui.element
			
 
				+  ,layer = layui.layer
			
 
				+  ,$ = layui.jquery
			
 
				+  ,util = layui.util;
			
 
				+  
			
 
				+  element.on('tab(docDemoTabBrief)', function(data){
			
 
				+    layer.msg('切到到了'+ data.index + '：' + this.innerHTML);
			
 
				+  });
			
 
				+  
			
 
				+  $('#docDemoView1').html(util.unescape(global.docDemoCode1));
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/element/progress.html
+++ b/doc/element/progress.html
@@ -0,0 +1,635 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@进度条 - 页面元素 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#default"><cite>常规用法</cite></a></li>
			
 
				+  <li><a href="#showPercent"><cite>显示进度比文本</cite></a></li>
			
 
				+  <li><a href="#big"><cite>大号进度条</cite></a></li>
			
 
				+  <li><a href="../modules/element.html#progress" tppabs="http://www.layui.com/doc/modules/element.html#progress"><cite>相关动态操作</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">进度条 - 页面元素</h1>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      依赖加载组件：<a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">element</a>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="default">常规用法</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+      
			
 
				+      <div class="layui-progress">
			
 
				+        <div class="layui-progress-bar" lay-percent="20%"></div>
			
 
				+      </div>
			
 
				+      <br>
			
 
				+      <div class="layui-progress">
			
 
				+        <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
			
 
				+      </div>
			
 
				+      <br>
			
 
				+      <div class="layui-progress" lay-showPercent="true">
			
 
				+        <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
			
 
				+      </div>
			
 
				+      <br>
			
 
				+      <div class="layui-progress layui-progress-big" lay-showPercent="true">
			
 
				+        <div class="layui-progress-bar layui-bg-cyan" lay-percent="30%"></div>
			
 
				+      </div>
			
 
				+      
			
 
				+      <br>
			
 
				+      <p>我们进度条提供了两种尺寸及多种颜色的显示风格，其中颜色的选值可参考：<a href="../base/element.html#css" tppabs="http://www.layui.com/doc/base/element.html#css">背景色公共类</a>。基本元素结构如下</p>
			
 
				+      
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;div class=&quot;layui-progress&quot;&gt;
			
 
				+  &lt;div class=&quot;layui-progress-bar&quot; <a>lay-percent=&quot;10%&quot;</a>&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+ 
			
 
				+&lt;script&gt;
			
 
				+//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
			
 
				+layui.use('element', function(){
			
 
				+  var element = layui.element;
			
 
				+});
			
 
				+&lt;/script&gt;
			
 
				+      </pre>
			
 
				+      
			
 
				+      <p>
			
 
				+        属性 <em>lay-percent</em> ：代表进度条的初始百分比，你也可以动态改变进度，详见：<a href="../modules/element.html#progress" tppabs="http://www.layui.com/doc/modules/element.html#progress">进度条的动态操作</a>
			
 
				+      </p>
			
 
				+      <p>正如上述你见到的，当对元素设置了class为 <em>layui-progress-big</em> 时，即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="showPercent">显示进度比文本</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+      <div class="layui-progress" lay-showPercent="true">
			
 
				+        <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
			
 
				+      </div>
			
 
				+      <br><br>
			
 
				+      <div class="layui-progress" lay-showPercent="true">
			
 
				+        <div class="layui-progress-bar layui-bg-red" lay-percent="80%"></div>
			
 
				+      </div>
			
 
				+      <br>
			
 
				+      <div class="layui-progress layui-progress-big" lay-showPercent="true">
			
 
				+        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
			
 
				+      </div>
			
 
				+      
			
 
				+      <br>
			
 
				+      <p>通过对父级元素设置属性 <em>lay-showPercent="yes"</em> 来开启进度比的文本显示，支持：<em>普通数字</em>、<em>百分数</em>、<em>分数</em>（layui 2.1.7 新增）</p>
			
 
				+      
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;div class=&quot;layui-progress&quot; lay-showPercent=&quot;true&quot;&gt;
			
 
				+  &lt;div class=&quot;layui-progress-bar layui-bg-red&quot; lay-percent=&quot;1/3&quot;&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+       
			
 
				+&lt;div class=&quot;layui-progress&quot; <a>lay-showPercent=&quot;yes&quot;</a>&gt;
			
 
				+  &lt;div class=&quot;layui-progress-bar layui-bg-red&quot; lay-percent=&quot;30%&quot;&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+ 
			
 
				+&lt;div class=&quot;layui-progress layui-progress-big&quot; <a>lay-showPercent=&quot;yes&quot;</a>&gt;
			
 
				+  &lt;div class=&quot;layui-progress-bar layui-bg-green&quot; lay-percent=&quot;50%&quot;&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+      </pre>
			
 
				+      <p>注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="big">大号进度条</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+      
			
 
				+      <div class="layui-progress layui-progress-big">
			
 
				+        <div class="layui-progress-bar" lay-percent="20%"></div>
			
 
				+      </div>
			
 
				+      <br>
			
 
				+      <div class="layui-progress layui-progress-big">
			
 
				+        <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
			
 
				+      </div>
			
 
				+      <br>
			
 
				+      <div class="layui-progress layui-progress-big" lay-showPercent="true">
			
 
				+        <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
			
 
				+      </div>
			
 
				+      
			
 
				+      <br>
			
 
				+      <p>和世界上许多客观存在的事物一样，进度条也不仅是只有短小细长的尺寸，当然也有大而粗，这是我们认为相对合适的大尺寸。</p>
			
 
				+      
			
 
				+      <pre class="layui-code" lay-title="HTML结构">
			
 
				+&lt;div class=&quot;layui-progress <a>layui-progress-big</a>&quot;&gt;
			
 
				+  &lt;div class=&quot;layui-progress-bar&quot; lay-percent=&quot;20%&quot;&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+ 
			
 
				+&lt;div class=&quot;layui-progress <a>layui-progress-big</a>&quot;&gt;
			
 
				+  &lt;div class=&quot;layui-progress-bar layui-bg-orange&quot; lay-percent=&quot;50%&quot;&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+ 
			
 
				+&lt;div class=&quot;layui-progress <a>layui-progress-big</a>&quot; lay-showPercent=&quot;true&quot;&gt;
			
 
				+  &lt;div class=&quot;layui-progress-bar layui-bg-blue&quot; lay-percent=&quot;80%&quot;&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+      </pre>
			
 
				+      <p>正如上述你见到的，当对元素设置了class为 layui-progress-big 时，即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。</p>
			
 
				+      <p>如果你需要对进度条进行动态操作，如动态改变进度，那么你需要阅读：<a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">element模块</a></p>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+layui.use(['element', 'layer'], function(){
			
 
				+  var element = layui.element
			
 
				+  ,layer = layui.layer;
			
 
				+  
			
 
				+  element.on('tab(docDemoTabBrief)', function(data){
			
 
				+    layer.msg('切到到了'+ data.index + '：' + this.innerHTML);
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/element/tab.html
+++ b/doc/element/tab.html
@@ -0,0 +1,769 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Tab选项卡 - 页面元素 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#default"><cite>常规用法</cite></a></li>
			
 
				+  <li><a href="#brief"><cite>Tab简约风格</cite></a></li>
			
 
				+  <li><a href="#card"><cite>Tab卡片风格</cite></a></li>
			
 
				+  <li><a href="#rwd"><cite>Tab响应式</cite></a></li>
			
 
				+  <li><a href="#del"><cite>带删除的Tab</cite></a></li>
			
 
				+  <li><a href="#layid"><cite>ID焦点定位</cite></a></li>
			
 
				+  <li><a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html"><cite>相关动态操作</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">Tab选项卡 - 页面元素</h1>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      依赖加载组件：<a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">element</a>
			
 
				+      <span>（请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）</span></blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="default">默认Tab选项卡</a></legend></fieldset>
			
 
				+    </div>    
			
 
				+    <div class="site-text">
			
 
				+      <p>
			
 
				+        Tab广泛应用于Web页面，因此我们也对其进行了良好的支持。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。
			
 
				+        <br>这是一个最基本的例子：
			
 
				+      </p>
			
 
				+      <div class="layui-tab" style="margin: 30px 0;">
			
 
				+        <ul class="layui-tab-title">
			
 
				+          <li class="layui-this">网站设置</li>
			
 
				+          <li>用户管理</li>
			
 
				+          <li>权限分配</li>
			
 
				+          <li>商品管理</li>
			
 
				+          <li>订单管理</li>
			
 
				+        </ul>
			
 
				+        <div class="layui-tab-content">
			
 
				+          <div class="layui-tab-item layui-show"> 
			
 
				+            <blockquote class="layui-elem-quote">如果需要对Tab进行外部新增、删除、切换等操作，请移步到“内置组件-常用元素操作”页面中查阅：基础方法</blockquote>
			
 
				+          </div>
			
 
				+          <div class="layui-tab-item">内容2</div>
			
 
				+          <div class="layui-tab-item">内容3</div>
			
 
				+          <div class="layui-tab-item">内容4</div>
			
 
				+          <div class="layui-tab-item">内容5</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <pre class="layui-code" lay-title="对应的HTML结构">
			
 
				+&lt;div class=&quot;layui-tab&quot;&gt;
			
 
				+  &lt;ul class=&quot;layui-tab-title&quot;&gt;
			
 
				+    &lt;li class=&quot;layui-this&quot;&gt;网站设置&lt;/li&gt;
			
 
				+    &lt;li&gt;用户管理&lt;/li&gt;
			
 
				+    &lt;li&gt;权限分配&lt;/li&gt;
			
 
				+    &lt;li&gt;商品管理&lt;/li&gt;
			
 
				+    &lt;li&gt;订单管理&lt;/li&gt;
			
 
				+  &lt;/ul&gt;
			
 
				+  &lt;div class=&quot;layui-tab-content&quot;&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item layui-show&quot;&gt;内容1&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;内容2&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;内容3&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;内容4&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;内容5&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+ 
			
 
				+&lt;script&gt;
			
 
				+//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
			
 
				+layui.use('element', function(){
			
 
				+  var element = layui.element;
			
 
				+  
			
 
				+  //…
			
 
				+});
			
 
				+&lt;/script&gt;
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="brief">Tab简洁风格</a></legend></fieldset>
			
 
				+    </div>  
			
 
				+    <div class="site-text">
			
 
				+      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0 0 20px;">
			
 
				+        <ul class="layui-tab-title">
			
 
				+          <li class="layui-this">网站设置</li>
			
 
				+          <li>用户管理</li>
			
 
				+          <li>权限分配</li>
			
 
				+          <li>商品管理</li>
			
 
				+          <li>订单管理</li>
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+      <pre class="layui-code" lay-title="对应的HTML结构">
			
 
				+&lt;div class=&quot;layui-tab layui-tab-brief&quot; lay-filter=&quot;docDemoTabBrief&quot;&gt;
			
 
				+  &lt;ul class=&quot;layui-tab-title&quot;&gt;
			
 
				+    &lt;li class=&quot;layui-this&quot;&gt;网站设置&lt;/li&gt;
			
 
				+    &lt;li&gt;用户管理&lt;/li&gt;
			
 
				+    &lt;li&gt;权限分配&lt;/li&gt;
			
 
				+    &lt;li&gt;商品管理&lt;/li&gt;
			
 
				+    &lt;li&gt;订单管理&lt;/li&gt;
			
 
				+  &lt;/ul&gt;
			
 
				+  &lt;div class=&quot;layui-tab-content&quot;&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;      
			
 
				+      </pre>
			
 
				+      <p>通过追加class：<em>layui-tab-brief</em> 来设定简洁风格。<br>值得注意的是，如果存在 <em>layui-tab-item</em> 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 <em>element</em>模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="card">Tab卡片风格</a></legend></fieldset>
			
 
				+    </div>  
			
 
				+    <div class="site-text">
			
 
				+      <div class="layui-tab layui-tab-card">
			
 
				+        <ul class="layui-tab-title">
			
 
				+          <li class="layui-this">网站设置</li>
			
 
				+          <li>用户管理</li>
			
 
				+          <li>权限分配</li>
			
 
				+          <li>商品管理</li>
			
 
				+          <li>订单管理</li>
			
 
				+        </ul>
			
 
				+        <div class="layui-tab-content" style="height: 100px;">
			
 
				+          <div class="layui-tab-item layui-show">1</div>
			
 
				+          <div class="layui-tab-item">2</div>
			
 
				+          <div class="layui-tab-item">3</div>
			
 
				+          <div class="layui-tab-item">4</div>
			
 
				+          <div class="layui-tab-item">5</div>
			
 
				+          <div class="layui-tab-item">6</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <pre class="layui-code" lay-title="对应的HTML结构">
			
 
				+&lt;div class=&quot;layui-tab layui-tab-card&quot;&gt;
			
 
				+  &lt;ul class=&quot;layui-tab-title&quot;&gt;
			
 
				+    &lt;li class=&quot;layui-this&quot;&gt;网站设置&lt;/li&gt;
			
 
				+    &lt;li&gt;用户管理&lt;/li&gt;
			
 
				+    &lt;li&gt;权限分配&lt;/li&gt;
			
 
				+    &lt;li&gt;商品管理&lt;/li&gt;
			
 
				+    &lt;li&gt;订单管理&lt;/li&gt;
			
 
				+  &lt;/ul&gt;
			
 
				+  &lt;div class=&quot;layui-tab-content&quot; style=&quot;height: 100px;&quot;&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item layui-show&quot;&gt;1&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;2&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;3&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;4&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;5&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;6&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+      </pre>
			
 
				+      <p>通过追加class：<em>layui-tab-card</em>来设定卡片风格</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="rwd">Tab响应式</a></legend></fieldset>
			
 
				+    </div>  
			
 
				+    <div class="site-text">
			
 
				+      <p>当容器的宽度不足以显示全部的选项时，即会自动出现展开图标，如下以卡片风格为例（注意：所有Tab风格都支持响应式）：</p>
			
 
				+      <div style="text-align: center;">
			
 
				+        <div class="layui-tab layui-tab-card layui-inline" style="margin-left: 20px; width: 363px;">
			
 
				+          <ul class="layui-tab-title">
			
 
				+            <li class="layui-this">网站设置</li>
			
 
				+            <li>用户管理</li>
			
 
				+            <li>权限分配</li>
			
 
				+            <li>商品管理</li>
			
 
				+            <li>订单管理</li>
			
 
				+          </ul>
			
 
				+          <div class="layui-tab-content" style="height: 100px;">
			
 
				+            <div class="layui-tab-item layui-show">1</div>
			
 
				+            <div class="layui-tab-item">2</div>
			
 
				+            <div class="layui-tab-item">3</div>
			
 
				+            <div class="layui-tab-item">4</div>
			
 
				+            <div class="layui-tab-item">5</div>
			
 
				+            <div class="layui-tab-item">6</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>  
			
 
				+      <p>额，感觉像是打了个小酱油。而事实上在自适应的页面中（不固宽），它的意义才会呈现。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="del">带删除的Tab</a></legend></fieldset>
			
 
				+    </div>  
			
 
				+    <div class="site-text">
			
 
				+      <p>你可以对父层容器设置属性 <em>lay-allowClose="true"</em> 来允许Tab选项卡被删除</p>
			
 
				+      <div class="layui-tab" lay-allowClose="true" style="margin: 20px 0;">
			
 
				+        <ul class="layui-tab-title">
			
 
				+          <li class="layui-this">网站设置</li>
			
 
				+          <li>用户基本管理</li>
			
 
				+          <li>权限分配</li>
			
 
				+          <li>全部历史商品管理文字长一点试试</li>
			
 
				+          <li>订单管理</li>
			
 
				+        </ul>
			
 
				+        <div class="layui-tab-content">
			
 
				+          <div class="layui-tab-item layui-show">1</div>
			
 
				+          <div class="layui-tab-item">2</div>
			
 
				+          <div class="layui-tab-item">3</div>
			
 
				+          <div class="layui-tab-item">4</div>
			
 
				+          <div class="layui-tab-item">5</div>
			
 
				+          <div class="layui-tab-item">6</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <pre class="layui-code" lay-title="对应的HTML结构">
			
 
				+&lt;div class=&quot;layui-tab&quot; lay-allowClose=&quot;true&quot;&gt;
			
 
				+  &lt;ul class=&quot;layui-tab-title&quot;&gt;
			
 
				+    &lt;li class=&quot;layui-this&quot;&gt;网站设置&lt;/li&gt;
			
 
				+    &lt;li&gt;用户基本管理&lt;/li&gt;
			
 
				+    &lt;li&gt;权限分配&lt;/li&gt;
			
 
				+    &lt;li&gt;全部历史商品管理文字长一点试试&lt;/li&gt;
			
 
				+    &lt;li&gt;订单管理&lt;/li&gt;
			
 
				+  &lt;/ul&gt;
			
 
				+  &lt;div class=&quot;layui-tab-content&quot;&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item layui-show&quot;&gt;1&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;2&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;3&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;4&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;5&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;6&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+      </pre>
			
 
				+      <p>与默认相比没有什么特别的结构，就是多了个属性 <em>lay-allowClose="true"</em></p>      
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="layid">ID焦点定位</a></legend></fieldset>
			
 
				+    </div>  
			
 
				+    <div class="site-text">
			
 
				+      <p>你可以通过对选项卡设置属性 <em>lay-id="xxx"</em> 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配。</p>
			
 
				+      <pre class="layui-code" lay-title="对应的HTML结构">
			
 
				+&lt;div class=&quot;layui-tab&quot; lay-filter=&quot;test1&quot;&gt;
			
 
				+  &lt;ul class=&quot;layui-tab-title&quot;&gt;
			
 
				+    &lt;li class=&quot;layui-this&quot; <a>lay-id="111"</a> &gt;文章列表&lt;/li&gt;
			
 
				+    &lt;li <a>lay-id="222"</a>&gt;发送信息&lt;/li&gt;
			
 
				+    &lt;li <a>lay-id="333"</a>&gt;权限分配&lt;/li&gt;
			
 
				+    &lt;li <a>lay-id="444"</a>&gt;审核&lt;/li&gt;
			
 
				+    &lt;li <a>lay-id="555"</a>&gt;订单管理&lt;/li&gt;
			
 
				+  &lt;/ul&gt;
			
 
				+  &lt;div class=&quot;layui-tab-content&quot;&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item layui-show&quot;&gt;1&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;2&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;3&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;4&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;5&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+      </pre>
			
 
				+      <p>属性 lay-id 是扮演这项功能的主要角色，它是动态操作的重要凭据，如：</p>  
			
 
				+      <pre class="layui-code">
			
 
				+&lt;script&gt;
			
 
				+layui.use('element', function(){
			
 
				+  var element = layui.element;
			
 
				+  
			
 
				+  //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
			
 
				+  var layid = location.hash.replace(/^#test1=/, '');
			
 
				+  element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项
			
 
				+  
			
 
				+  //监听Tab切换，以改变地址hash值
			
 
				+  element.on('tab(test1)', function(){
			
 
				+    location.hash = 'test1='+ this.getAttribute('lay-id');
			
 
				+  });
			
 
				+});
			
 
				+&lt;/script&gt;      
			
 
				+      </pre>
			
 
				+      <p>同样的还有增加选项卡和删除选项卡，都需要用到 lay-id，更多动态操作请阅读：<a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">element模块</a></p>  
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="other">提示</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>无论是导航、还是Tab，都需依赖 <em>element</em>模块，大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如Tab事件监听等，需按照场景选择性使用。你可以移步文档左侧【内置组件 - 基本元素操作 element】了解详情 </p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+layui.use(['element', 'layer'], function(){
			
 
				+  var element = layui.element
			
 
				+  ,layer = layui.layer;
			
 
				+  
			
 
				+  element.on('tab(docDemoTabBrief)', function(data){
			
 
				+    layer.msg('切到到了'+ data.index + '：' + this.innerHTML);
			
 
				+  });
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/element/table.html
+++ b/doc/element/table.html
@@ -0,0 +1,843 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@表格 - 页面元素 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#default"><cite>常规用法</cite></a></li>
			
 
				+  <li><a href="#attr"><cite>基础属性</cite></a></li>
			
 
				+  <li><a href="#skin"><cite>风格</cite></a></li>
			
 
				+  <li><a href="#size"><cite>尺寸</cite></a></li>
			
 
				+  <li><a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html"><cite>表格动态操作</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">表格 - 页面元素</h1>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      本篇为你介绍表格的HTML使用，你将通过内置的自定义属性对其进行风格的多样化设定。<em>请注意：</em>这仅仅局限于呈现基础表格，如果你急切需要的是数据表格（<em>datatable</em>），那么你应该详细阅读：<a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">table模块</a>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="default">常规用法</a></legend>
			
 
				+    </fieldset>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <table class="layui-table">
			
 
				+      <colgroup>
			
 
				+        <col width="150">
			
 
				+        <col width="200">
			
 
				+        <col>
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <tr>
			
 
				+          <th>昵称</th>
			
 
				+          <th>加入时间</th>
			
 
				+          <th>签名</th>
			
 
				+        </tr> 
			
 
				+      </thead>
			
 
				+      <tbody>
			
 
				+        <tr>
			
 
				+          <td>贤心</td>
			
 
				+          <td>2016-11-29</td>
			
 
				+          <td>人生就像是一场修行</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>许闲心</td>
			
 
				+          <td>2016-11-28</td>
			
 
				+          <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>sentsin</td>
			
 
				+          <td>2016-11-27</td>
			
 
				+          <td> Life is either a daring adventure or nothing.</td>
			
 
				+        </tr>
			
 
				+      </tbody>
			
 
				+    </table>
			
 
				+    
			
 
				+    <div class="site-text">
			
 
				+      <pre class="layui-code" lay-title="HTML">
			
 
				+&lt;table class=&quot;layui-table&quot;&gt;
			
 
				+  &lt;colgroup&gt;
			
 
				+    &lt;col width=&quot;150&quot;&gt;
			
 
				+    &lt;col width=&quot;200&quot;&gt;
			
 
				+    &lt;col&gt;
			
 
				+  &lt;/colgroup&gt;
			
 
				+  &lt;thead&gt;
			
 
				+    &lt;tr&gt;
			
 
				+      &lt;th&gt;昵称&lt;/th&gt;
			
 
				+      &lt;th&gt;加入时间&lt;/th&gt;
			
 
				+      &lt;th&gt;签名&lt;/th&gt;
			
 
				+    &lt;/tr&gt; 
			
 
				+  &lt;/thead&gt;
			
 
				+  &lt;tbody&gt;
			
 
				+    &lt;tr&gt;
			
 
				+      &lt;td&gt;贤心&lt;/td&gt;
			
 
				+      &lt;td&gt;2016-11-29&lt;/td&gt;
			
 
				+      &lt;td&gt;人生就像是一场修行&lt;/td&gt;
			
 
				+    &lt;/tr&gt;
			
 
				+    &lt;tr&gt;
			
 
				+      &lt;td&gt;许闲心&lt;/td&gt;
			
 
				+      &lt;td&gt;2016-11-28&lt;/td&gt;
			
 
				+      &lt;td&gt;于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…&lt;/td&gt;
			
 
				+    &lt;/tr&gt;
			
 
				+  &lt;/tbody&gt;
			
 
				+&lt;/table&gt;
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="attr">基础属性</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：</p>
			
 
				+    </div>
			
 
				+    <table class="layui-table">
			
 
				+      <colgroup>
			
 
				+        <col width="150">
			
 
				+        <col width="200">
			
 
				+        <col>
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <tr>
			
 
				+          <th>属性名</th>
			
 
				+          <th>属性值</th>
			
 
				+          <th>备注</th>
			
 
				+        </tr> 
			
 
				+      </thead>
			
 
				+      <tbody>
			
 
				+        <tr>
			
 
				+          <td>lay-even</td>
			
 
				+          <td>无</td>
			
 
				+          <td>用于开启 <em>隔行</em> 背景，可与其它属性一起使用</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>lay-skin="属性值"</td>
			
 
				+          <td>
			
 
				+            line （行边框风格）
			
 
				+            <br>row （列边框风格）
			
 
				+            <br>nob （无边框风格）
			
 
				+          </td>
			
 
				+          <td>
			
 
				+            若使用默认风格不设置该属性即可
			
 
				+          </td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>lay-size="属性值"</td>
			
 
				+          <td>
			
 
				+            sm （小尺寸）
			
 
				+            <br>lg （大尺寸）
			
 
				+          </td>
			
 
				+          <td>
			
 
				+            若使用默认尺寸不设置该属性即可
			
 
				+          </td>
			
 
				+        </tr>
			
 
				+      </tbody>
			
 
				+    </table>
			
 
				+    <div class="site-text">
			
 
				+      <p>将你所需要的基础属性写在table标签上即可，如（一个带有隔行背景，且行边框风格的大尺寸表格）：</p>
			
 
				+    </div>
			
 
				+    <pre class="layui-code" lay-title="HTML">
			
 
				+&lt;table lay-even lay-skin="line" lay-size="lg"&gt;
			
 
				+…
			
 
				+&lt;/table&gt;
			
 
				+    </pre>
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="skin">表格其它风格</a></legend>
			
 
				+    </fieldset>
			
 
				+    
			
 
				+    <div class="site-text">
			
 
				+      <p>除了默认的表格风格外，我们还提供了其它几种风格，你可以按照实际需求自由设定</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <table class="layui-table" lay-skin="line">
			
 
				+      <colgroup>
			
 
				+        <col width="150">
			
 
				+        <col width="200">
			
 
				+        <col>
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <tr>
			
 
				+          <th>昵称</th>
			
 
				+          <th>加入时间</th>
			
 
				+          <th>签名</th>
			
 
				+        </tr> 
			
 
				+      </thead>
			
 
				+      <tbody>
			
 
				+        <tr>
			
 
				+          <td>贤心</td>
			
 
				+          <td>2016-11-29</td>
			
 
				+          <td>人生就像是一场修行</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>许闲心</td>
			
 
				+          <td>2016-11-28</td>
			
 
				+          <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>sentsin</td>
			
 
				+          <td>2016-11-27</td>
			
 
				+          <td> Life is either a daring adventure or nothing.</td>
			
 
				+        </tr>
			
 
				+      </tbody>
			
 
				+    </table>
			
 
				+    <table class="layui-table" lay-skin="row">
			
 
				+      <colgroup>
			
 
				+        <col width="150">
			
 
				+        <col width="200">
			
 
				+        <col>
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <tr>
			
 
				+          <th>昵称</th>
			
 
				+          <th>加入时间</th>
			
 
				+          <th>签名</th>
			
 
				+        </tr> 
			
 
				+      </thead>
			
 
				+      <tbody>
			
 
				+        <tr>
			
 
				+          <td>贤心</td>
			
 
				+          <td>2016-11-29</td>
			
 
				+          <td>人生就像是一场修行</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>许闲心</td>
			
 
				+          <td>2016-11-28</td>
			
 
				+          <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>sentsin</td>
			
 
				+          <td>2016-11-27</td>
			
 
				+          <td> Life is either a daring adventure or nothing.</td>
			
 
				+        </tr>
			
 
				+      </tbody>
			
 
				+    </table>
			
 
				+    
			
 
				+    <table class="layui-table" lay-even lay-skin="nob">
			
 
				+      <colgroup>
			
 
				+        <col width="150">
			
 
				+        <col width="200">
			
 
				+        <col>
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <tr>
			
 
				+          <th>昵称</th>
			
 
				+          <th>加入时间</th>
			
 
				+          <th>签名</th>
			
 
				+        </tr> 
			
 
				+      </thead>
			
 
				+      <tbody>
			
 
				+        <tr>
			
 
				+          <td>贤心</td>
			
 
				+          <td>2016-11-29</td>
			
 
				+          <td>人生就像是一场修行</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>许闲心</td>
			
 
				+          <td>2016-11-28</td>
			
 
				+          <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>sentsin</td>
			
 
				+          <td>2016-11-27</td>
			
 
				+          <td> Life is either a daring adventure or nothing.</td>
			
 
				+        </tr>
			
 
				+      </tbody>
			
 
				+    </table>
			
 
				+    
			
 
				+    <div class="site-text">
			
 
				+      <pre class="layui-code" lay-title="HTML">
			
 
				+&lt;table class=&quot;layui-table&quot; <em>lay-skin="line"</em>&gt;
			
 
				+  行边框表格（内部结构参见右侧目录“常规用法”）
			
 
				+&lt;/table&gt;
			
 
				+ 
			
 
				+&lt;table class=&quot;layui-table&quot; <em>lay-skin="row"</em>&gt;
			
 
				+  列边框表格（内部结构参见右侧目录“常规用法”）
			
 
				+&lt;/table&gt;
			
 
				+ 
			
 
				+&lt;table class=&quot;layui-table&quot; lay-even <em>lay-skin="nob"</em>&gt;
			
 
				+  无边框表格（内部结构参见右侧目录“常规用法”）
			
 
				+&lt;/table&gt;
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="size">表格其它尺寸</a></legend>
			
 
				+    </fieldset>
			
 
				+    
			
 
				+    <div class="site-text">
			
 
				+      <p>除了默认的表格尺寸外，我们还提供了其它几种尺寸，你可以按照实际需求自由设定</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <table class="layui-table" lay-size="sm">
			
 
				+      <colgroup>
			
 
				+        <col width="150">
			
 
				+        <col width="200">
			
 
				+        <col>
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <tr>
			
 
				+          <th>昵称</th>
			
 
				+          <th>加入时间</th>
			
 
				+          <th>签名</th>
			
 
				+        </tr> 
			
 
				+      </thead>
			
 
				+      <tbody>
			
 
				+        <tr>
			
 
				+          <td>贤心</td>
			
 
				+          <td>2016-11-29</td>
			
 
				+          <td>人生就像是一场修行</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>许闲心</td>
			
 
				+          <td>2016-11-28</td>
			
 
				+          <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>sentsin</td>
			
 
				+          <td>2016-11-27</td>
			
 
				+          <td> Life is either a daring adventure or nothing.</td>
			
 
				+        </tr>
			
 
				+      </tbody>
			
 
				+    </table>
			
 
				+    
			
 
				+    <table class="layui-table" lay-size="lg">
			
 
				+      <colgroup>
			
 
				+        <col width="150">
			
 
				+        <col width="200">
			
 
				+        <col>
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <tr>
			
 
				+          <th>昵称</th>
			
 
				+          <th>加入时间</th>
			
 
				+          <th>签名</th>
			
 
				+        </tr> 
			
 
				+      </thead>
			
 
				+      <tbody>
			
 
				+        <tr>
			
 
				+          <td>贤心</td>
			
 
				+          <td>2016-11-29</td>
			
 
				+          <td>人生就像是一场修行</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>许闲心</td>
			
 
				+          <td>2016-11-28</td>
			
 
				+          <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>sentsin</td>
			
 
				+          <td>2016-11-27</td>
			
 
				+          <td> Life is either a daring adventure or nothing.</td>
			
 
				+        </tr>
			
 
				+      </tbody>
			
 
				+    </table>
			
 
				+    
			
 
				+    <div class="site-text">
			
 
				+      <pre class="layui-code" lay-title="HTML">
			
 
				+&lt;table class=&quot;layui-table&quot; <em>lay-size="sm"</em>&gt;
			
 
				+  小尺寸表格（内部结构参见右侧目录“常规用法”）
			
 
				+&lt;/table&gt;
			
 
				+ 
			
 
				+&lt;table class=&quot;layui-table&quot; <em>lay-size="lg"</em>&gt;
			
 
				+  大尺寸表格（内部结构参见右侧目录“常规用法”）
			
 
				+&lt;/table&gt;
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend>结语</legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>再次温馨提醒：如果你需要对表格进行排序、数据交互等一系列功能性操作，你需要进一步阅读 layui 的重要组成：<a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">table模块</a></p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/element/timeline.html
+++ b/doc/element/timeline.html
@@ -0,0 +1,611 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@Layui 时间线文档</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>用法</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../modules/code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">时间线</h1>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      将时间抽象到二维平面，垂直呈现一段从过去到现在的故事。
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">快速使用</a></legend>
			
 
				+    </fieldset>
			
 
				+    <ul class="layui-timeline">
			
 
				+      <li class="layui-timeline-item">
			
 
				+        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+        <div class="layui-timeline-content layui-text">
			
 
				+          <h3 class="layui-timeline-title">8月18日</h3>
			
 
				+          <p>
			
 
				+            layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
			
 
				+            <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
			
 
				+            <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon">&#xe650;</i>
			
 
				+          </p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-timeline-item">
			
 
				+        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+        <div class="layui-timeline-content layui-text">
			
 
				+          <h3 class="layui-timeline-title">8月16日</h3>
			
 
				+          <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
			
 
				+          <ul>
			
 
				+            <li>《登高》</li>
			
 
				+            <li>《茅屋为秋风所破歌》</li>
			
 
				+          </ul>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-timeline-item">
			
 
				+        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+        <div class="layui-timeline-content layui-text">
			
 
				+          <h3 class="layui-timeline-title">8月15日</h3>
			
 
				+          <p>
			
 
				+            中国人民抗日战争胜利日
			
 
				+            <br>铭记、感恩
			
 
				+            <br>所有为中华民族浴血奋战的英雄将士
			
 
				+            <br>永垂不朽
			
 
				+          </p>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+      <li class="layui-timeline-item">
			
 
				+        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
			
 
				+        <div class="layui-timeline-content layui-text">
			
 
				+          <div class="layui-timeline-title">过去</div>
			
 
				+        </div>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    <div class="site-text">
			
 
				+      <pre class="layui-code" lay-title="对应的代码">
			
 
				+&lt;ul class=&quot;layui-timeline&quot;&gt;
			
 
				+  &lt;li class=&quot;layui-timeline-item&quot;&gt;
			
 
				+    &lt;i class=&quot;layui-icon layui-timeline-axis&quot;&gt;&amp;#xe63f;&lt;/i&gt;
			
 
				+    &lt;div class=&quot;layui-timeline-content layui-text&quot;&gt;
			
 
				+      &lt;h3 class=&quot;layui-timeline-title&quot;&gt;8月18日&lt;/h3&gt;
			
 
				+      &lt;p&gt;
			
 
				+        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
			
 
				+        &lt;br&gt;不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
			
 
				+        &lt;br&gt;无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 &lt;i class="layui-icon">&#xe650;&lt;/i&gt;
			
 
				+      &lt;/p&gt;
			
 
				+    &lt;/div&gt;
			
 
				+  &lt;/li&gt;
			
 
				+  &lt;li class=&quot;layui-timeline-item&quot;&gt;
			
 
				+    &lt;i class=&quot;layui-icon layui-timeline-axis&quot;&gt;&amp;#xe63f;&lt;/i&gt;
			
 
				+    &lt;div class=&quot;layui-timeline-content layui-text&quot;&gt;
			
 
				+      &lt;h3 class=&quot;layui-timeline-title&quot;&gt;8月16日&lt;/h3&gt;
			
 
				+      &lt;p&gt;杜甫的思想核心是儒家的仁政思想，他有“&lt;em&gt;致君尧舜上，再使风俗淳&lt;/em&gt;”的宏伟抱负。个人最爱的名篇有：&lt;/p&gt;
			
 
				+      &lt;ul&gt;
			
 
				+        &lt;li&gt;《登高》&lt;/li&gt;
			
 
				+        &lt;li&gt;《茅屋为秋风所破歌》&lt;/li&gt;
			
 
				+      &lt;/ul&gt;
			
 
				+    &lt;/div&gt;
			
 
				+  &lt;/li&gt;
			
 
				+  &lt;li class=&quot;layui-timeline-item&quot;&gt;
			
 
				+    &lt;i class=&quot;layui-icon layui-timeline-axis&quot;&gt;&amp;#xe63f;&lt;/i&gt;
			
 
				+    &lt;div class=&quot;layui-timeline-content layui-text&quot;&gt;
			
 
				+      &lt;h3 class=&quot;layui-timeline-title&quot;&gt;8月15日&lt;/h3&gt;
			
 
				+      &lt;p&gt;
			
 
				+        中国人民抗日战争胜利72周年
			
 
				+        &lt;br&gt;常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
			
 
				+        &lt;br&gt;铭记、感恩
			
 
				+        &lt;br&gt;所有为中华民族浴血奋战的英雄将士
			
 
				+        &lt;br&gt;永垂不朽
			
 
				+      &lt;/p&gt;
			
 
				+    &lt;/div&gt;
			
 
				+  &lt;/li&gt;
			
 
				+  &lt;li class=&quot;layui-timeline-item&quot;&gt;
			
 
				+    &lt;i class=&quot;layui-icon layui-timeline-axis&quot;&gt;&amp;#xe63f;&lt;/i&gt;
			
 
				+    &lt;div class=&quot;layui-timeline-content layui-text&quot;&gt;
			
 
				+      &lt;div class=&quot;layui-timeline-title&quot;&gt;过去&lt;/div&gt;
			
 
				+    &lt;/div&gt;
			
 
				+  &lt;/li&gt;
			
 
				+&lt;/ul&gt;
			
 
				+      </pre>
			
 
				+      <p>关于时间线，似乎也没有什么太多可介绍的东西。你需要留意的是以下几点</p>
			
 
				+      <div class="layui-text">
			
 
				+        <ul>
			
 
				+          <li>图标可以任意定义（但并不推荐更改）</li>
			
 
				+          <li>标题区域并不意味着一定要加粗</li>
			
 
				+          <li>内容区域可自由填充。</li>
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+    </div> 
			
 
				+ 
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="docend">结语</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>授之以鱼不如授之以渔，时间线怎么用，就看你的了。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/index.html
+++ b/doc/index.html
--- a/doc/modules/carousel.html
+++ b/doc/modules/carousel.html
@@ -0,0 +1,743 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@通用轮播组件文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>快速使用</cite></a></li>
			
 
				+  <li><a href="#options"><cite>基础参数选项</cite></a></li>
			
 
				+  <li><a href="#onchange"><cite>切换事件</cite></a></li>
			
 
				+  <li><a href="#reload"><cite>重置轮播</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1"><i class="layui-icon">&#xe634;</i> 通用轮播组件文档 - layui.carousel</h1>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      carousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      <p>模块加载名称：<em>carousel</em></p>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">快速使用</a></legend>
			
 
				+    </fieldset>
			
 
				+    
			
 
				+   <div class="site-text">
			
 
				+      <p>如下是几个常用的轮播示例，其中背景色是为了区分条目单独加的，在layui框架中并不会包含。条目区域可以放上文字列表、图片等任意内容</p>
			
 
				+    </div>
			
 
				+    <style>
			
 
				+      /* 为了区分效果 */
			
 
				+      div[carousel-item]>*{text-align: center; line-height: 280px; color: #fff;}
			
 
				+      div[carousel-item]>*:nth-child(2n){background-color: #5FB878;}
			
 
				+      div[carousel-item]>*:nth-child(2n+1){background-color: #009688;}
			
 
				+      #test2 div[carousel-item]>*{line-height: 120px;}
			
 
				+    </style>
			
 
				+    
			
 
				+    <div class="layui-carousel" id="test1">
			
 
				+      <div carousel-item>
			
 
				+        <div>条目1</div>
			
 
				+        <div>条目2</div>
			
 
				+        <div>条目3</div>
			
 
				+        <div>条目4</div>
			
 
				+        <div>条目5</div>
			
 
				+      </div>
			
 
				+    </div>  
			
 
				+    <div class="site-text">
			
 
				+      <p></p>
			
 
				+<pre class="layui-code" lay-title="对应的代码">
			
 
				+&lt;!DOCTYPE html&gt;
			
 
				+&lt;html&gt;
			
 
				+&lt;head&gt;
			
 
				+  &lt;meta charset=&quot;utf-8&quot;&gt;
			
 
				+  &lt;title&gt;carousel模块快速使用&lt;/title&gt;
			
 
				+  &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/build/layui.css&quot; media=&quot;all&quot;&gt;
			
 
				+&lt;/head&gt;
			
 
				+&lt;body&gt;
			
 
				+ 
			
 
				+&lt;div class=&quot;layui-carousel&quot; id=&quot;test1&quot;&gt;
			
 
				+  &lt;div carousel-item&gt;
			
 
				+    &lt;div&gt;条目1&lt;/div&gt;
			
 
				+    &lt;div&gt;条目2&lt;/div&gt;
			
 
				+    &lt;div&gt;条目3&lt;/div&gt;
			
 
				+    &lt;div&gt;条目4&lt;/div&gt;
			
 
				+    &lt;div&gt;条目5&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+&lt;!-- 条目中可以是任意内容，如：&lt;img src=""&gt; --&gt;
			
 
				+ 
			
 
				+&lt;script src=&quot;/static/build/layui.js&quot;&gt;&lt;/script&gt;
			
 
				+&lt;script&gt;
			
 
				+layui.use(&#x27;carousel&#x27;, function(){
			
 
				+  var carousel = layui.carousel;
			
 
				+  //建造实例
			
 
				+  carousel.render({
			
 
				+    elem: '#test1'
			
 
				+    ,width: '100%' //设置容器宽度
			
 
				+    ,arrow: 'always' //始终显示箭头
			
 
				+    //,anim: 'updown' //切换动画方式
			
 
				+  });
			
 
				+});
			
 
				+&lt;/script&gt;
			
 
				+&lt;/body&gt;
			
 
				+&lt;/html&gt;</pre>
			
 
				+      <p>
			
 
				+        在HTML结构中，只需要简单地注意这两项：
			
 
				+        <br>1) 外层元素的 <em>class="layui-carousel"</em> 用来标识为一个轮播容器
			
 
				+        <br>2) 内层元素的属性 <em>carousel-item</em> 用来标识条目
			
 
				+      </p>
			
 
				+      <p>而 <em>id</em> 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。</p>
			
 
				+    </div> 
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="options">基础参数选项</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>通过核心方法：<em>carousel.render(options)</em> 来对轮播设置基础参数，也可以通过方法：<em>carousel.set(options)</em> 来设定全局基础参数.</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <table class="layui-table">
			
 
				+      <colgroup>
			
 
				+        <col width="120">
			
 
				+        <col>
			
 
				+        <col width="120">
			
 
				+        <col width="200">
			
 
				+      </colgroup>
			
 
				+      <thead>
			
 
				+        <tr>
			
 
				+          <th>可选项</th>
			
 
				+          <th>说明</th>
			
 
				+          <th>类型</th>
			
 
				+          <th>默认值</th>
			
 
				+        </tr> 
			
 
				+      </thead>
			
 
				+      <tbody>
			
 
				+        <tr>
			
 
				+          <td>elem</td>
			
 
				+          <td>指向容器选择器，如：elem: '#id'。也可以是DOM对象</td>
			
 
				+          <td>string/object</td>
			
 
				+          <td>无</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>width</td>
			
 
				+          <td>设定轮播容器宽度，支持像素和百分比</td>
			
 
				+          <td>string</td>
			
 
				+          <td>'600px'</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>height</td>
			
 
				+          <td>设定轮播容器高度，支持像素和百分比</td>
			
 
				+          <td>string</td>
			
 
				+          <td>'280px'</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>full</td>
			
 
				+          <td>是否全屏轮播</td>
			
 
				+          <td>boolean</td>
			
 
				+          <td>false</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>anim</td>
			
 
				+          <td class="layui-text">
			
 
				+            轮播切换动画方式，可选值为：
			
 
				+            <ul>
			
 
				+              <li>default（左右切换）</li>
			
 
				+              <li>updown（上下切换）</li>
			
 
				+              <li>fade（渐隐渐显切换）</li>
			
 
				+            </ul>
			
 
				+          </td>
			
 
				+          <td>string</td>
			
 
				+          <td>'default'</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>autoplay</td>
			
 
				+          <td>是否自动切换</td>
			
 
				+          <td>boolean</td>
			
 
				+          <td>true</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>interval</td>
			
 
				+          <td>自动切换的时间间隔，单位：ms（毫秒），不能低于800</td>
			
 
				+          <td>number</td>
			
 
				+          <td>3000</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>index</td>
			
 
				+          <td>初始开始的条目索引</td>
			
 
				+          <td>number</td>
			
 
				+          <td>0</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>arrow</td>
			
 
				+          <td class="layui-text">
			
 
				+            切换箭头默认显示状态，可选值为：
			
 
				+            <ul>
			
 
				+              <li>hover（悬停显示）</li>
			
 
				+              <li>always（始终显示）</li>
			
 
				+              <li>none（始终不显示）</li>
			
 
				+            </ul>
			
 
				+          </td>
			
 
				+          <td>string</td>
			
 
				+          <td>'hover'</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>indicator</td>
			
 
				+          <td class="layui-text">
			
 
				+            指示器位置，可选值为：
			
 
				+            <ul>
			
 
				+              <li>inside（容器内部）</li>
			
 
				+              <li>outside（容器外部）</li>
			
 
				+              <li>none（不显示）</li>
			
 
				+            </ul>
			
 
				+            <br>注意：如果设定了 <em>anim:'updown'</em>，该参数将无效
			
 
				+          </td>
			
 
				+          <td>string</td>
			
 
				+          <td>'inside'</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+          <td>trigger</td>
			
 
				+          <td class="layui-text">
			
 
				+            指示器的触发事件
			
 
				+          </td>
			
 
				+          <td>string</td>
			
 
				+          <td>'click'</td>
			
 
				+        </tr>
			
 
				+      </tbody>
			
 
				+    </table>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="onchange">切换事件</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：</p>
			
 
				+      <pre class="layui-code">
			
 
				+var carousel = layui.carousel;
			
 
				+ 
			
 
				+//触发轮播切换事件
			
 
				+carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 <em>lay-filter="test1"</em> 属性值
			
 
				+  console.log(obj.index); //当前条目的索引
			
 
				+  console.log(obj.prevIndex); //上一个条目的索引
			
 
				+  console.log(obj.item); //当前条目的元素对象
			
 
				+});     
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="reload">重置轮播</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>事实上，在执行 <em>carousel.render(options)</em> 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。</p>
			
 
				+      <pre class="layui-code">
			
 
				+var ins = carousel.render(options);
			
 
				+ 
			
 
				+//重置轮播
			
 
				+ins.reload(options);
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="docend">结语</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>由于轮播的使用非常简单，所以本篇不做过于详细的讲解，核心在于基础参数选项的设置。你也可以前往示例页面进行更为直观的了解。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+layui.use('carousel', function(){
			
 
				+  var carousel = layui.carousel;
			
 
				+  //建造实例
			
 
				+  carousel.render({
			
 
				+    elem: '#test1'
			
 
				+    ,width: '100%'
			
 
				+    ,arrow: 'always'
			
 
				+  });
			
 
				+  
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/code.html
+++ b/doc/modules/code.html
@@ -0,0 +1,683 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@代码高亮文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>使用</cite></a></li>
			
 
				+  <li><a href="#params"><cite>基础参数</cite></a></li>
			
 
				+  <li><a href="#elem"><cite>指定元素</cite></a></li>
			
 
				+  <li><a href="#title"><cite>设置标题</cite></a></li>
			
 
				+  <li><a href="#height"><cite>设置最大高度</cite></a></li>
			
 
				+  <li><a href="#encode"><cite>转义html标签</cite></a></li>
			
 
				+  <li><a href="#skin"><cite>风格选择</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1"><i class="layui-icon">&#xe635;</i> 代码高亮文档 - layui.code</h1>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      该组件暂时只对你的 <em>pre</em> 元素进行一个修饰，从而保证你展现的代码更具可读性。目前它没有对不同的语言进行颜色高亮（后续逐步强化），但这丝毫不会影响它对你带来的便捷。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      <p>模块加载名称：<em>code</em></p>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="use"></a>
			
 
				+      <fieldset><legend>使用</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>code模块的使用非常简单，请直接看代码，假设你在页面有这样一段pre标签：</p>
			
 
				+      <pre class="layui-code" lay-title="html">
			
 
				+&lt;pre class="layui-code">
			
 
				+//代码区域
			
 
				+var a = 'hello layui';
			
 
				+&lt;/pre>      
			
 
				+      </pre>
			
 
				+      <p>那么你只需要经过下面的方式：</p>
			
 
				+      <pre class="layui-code" lay-title="JavaScript">
			
 
				+layui.use('code', function(){ //加载code模块
			
 
				+  layui.code(); //引用code方法
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p>就可以将那段pre区块显示成你现在看到的这个样子：</p>
			
 
				+      <pre class="layui-code">
			
 
				+//代码区域
			
 
				+var a = 'hello layui';
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="params"></a>
			
 
				+      <fieldset><legend>基础参数</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>方法：<a>layui.code(options)</a><br>它接受一个对象参数options，支持以下key的设定</p>
			
 
				+      <table class="site-table">
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数</th>
			
 
				+            <th>类型</th>
			
 
				+            <th>描述</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>elem</td>
			
 
				+            <td>string</td>
			
 
				+            <td>指定元素的选择器</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>title</td>
			
 
				+            <td>string</td>
			
 
				+            <td>设定标题</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>height</td>
			
 
				+            <td>string</td>
			
 
				+            <td>设置最大高度</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>encode</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>是否转义html标签，默认false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>skin</td>
			
 
				+            <td>string</td>
			
 
				+            <td>风格选择（值见下文）</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>about</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>是否剔除右上关于</td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+      <p><a>特别提示：</a><em>除了上述方式的设置，我们还允许你直接在pre标签上设置属性来替代，如：</em></p>
			
 
				+      <pre class="layui-code">
			
 
				+&lt;pre class="layui-code" lay-title="" lay-height="" lay-skin="" lay-encode="">
			
 
				+这样有木有觉得更方便些
			
 
				+&lt;/pre>     
			
 
				+      </pre>
			
 
				+      <p>下面将针对每一个参数做进一步讲解。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="elem"></a>
			
 
				+      <fieldset><legend>指定元素</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>code模块会去自动查找class为<a>layui-code</a>的类，如果你初始给的不是该类，仅仅只是一个pre标签，那么需要通过elem设置选择器来指向元素：</p>
			
 
				+      <pre class="layui-code" lay-title="JavaScript">
			
 
				+layui.code({
			
 
				+  elem: 'pre' //默认值为<a>.layui-code</a>
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="title"></a>
			
 
				+      <fieldset><legend>设置标题</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>即左上角显示的文本，默认值为code</p>
			
 
				+      <pre class="layui-code" lay-title="JavaScript">
			
 
				+layui.code({
			
 
				+  title: 'JavaScript'
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p>或者直接在pre标签上设置属性<a>&lt;pre lay-title="JavaScript">&lt;/pre></a></p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="height"></a>
			
 
				+      <fieldset><legend>设置最大高度</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>你可以设置以下key来控制修饰器的最大高度。如果内容低于该高度，则会自适应内容高度；如果内容超过了该高度，则会自动出现滚动条。</p>
			
 
				+      <pre class="layui-code" lay-title="JavaScript" lay-height="100px">
			
 
				+layui.code({
			
 
				+  height: '100px' //请注意必须加px。如果该key不设定，则会自适应高度，且不会出现滚动条。
			
 
				+});
			
 
				+ 
			
 
				+ 
			
 
				+ 
			
 
				+ 
			
 
				+ Hi，我是充数的 ^_^
			
 
				+ 
			
 
				+      </pre>
			
 
				+      <p>或者直接在pre标签上设置属性<a>&lt;pre lay-height="100px">&lt;/pre></a></p>
			
 
				+    </div>
			
 
				+    <div class="site-title">
			
 
				+      <a name="encode"></a>
			
 
				+      <fieldset><legend>转义html标签</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>事实上很多时候你都需要在pre标签中展现html标签，而不希望它被浏览器解析。那么code模块允许你这么做，只需要开启encode即可，如：</p>
			
 
				+      <pre class="layui-code" lay-title="JavaScript">
			
 
				+layui.code({
			
 
				+  encode: true //是否转义html标签。默认不开启
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p>开启了encode后的效果如下：</p>
			
 
				+      <pre class="layui-code" lay-title="显示html" lay-encode="true">
			
 
				+<ul>
			
 
				+  <li>HTML将不会被解析</li>
			
 
				+  <li>有木有感觉非常方便</li>
			
 
				+</ul>
			
 
				+<script>
			
 
				+!function(){
			
 
				+  var a = 123;
			
 
				+}();
			
 
				+</script>
			
 
				+      </pre>
			
 
				+      <p>或者直接在pre标签上设置属性<a>&lt;pre lay-encode="true">&lt;/pre></a></p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="skin"></a>
			
 
				+      <fieldset><legend>风格选择</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>你肯定不会满足于code的某一种显示风格，而skin参数则允许你设定许多种显示风格，我们目前内置了两种，分别为默认和notepad</p>
			
 
				+      <pre class="layui-code" lay-title="JavaScript">
			
 
				+layui.code({
			
 
				+  title: 'NotePad++的风格'
			
 
				+  ,skin: 'notepad' //如果要默认风格，不用设定该key。
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p>上述的设定后，你会看到下面的样子</p>
			
 
				+      <pre class="layui-code" lay-title="NotePad++的风格" lay-skin="notepad">
			
 
				+i'm code.
			
 
				+i'm code too.     
			
 
				+      </pre>
			
 
				+      <p>或者直接在pre标签上设置属性<a>&lt;pre lay-skin="notepad">&lt;/pre></a></p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/colorpicker.html
+++ b/doc/modules/colorpicker.html
@@ -0,0 +1,676 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@颜色选择器文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>使用</cite></a></li>
			
 
				+  <li><a href="#options"><cite>基础参数</cite></a></li>
			
 
				+  <li><a href="#change"><cite>颜色被改变的回调</cite></a></li>
			
 
				+  <li><a href="#done"><cite>颜色选择后的回调</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1"><i class="layui-icon">&#xe66a;</i> 颜色选择器文档 - layui.colorpicker</h1>
			
 
				+    <blockquote class="layui-elem-quote layui-text">
			
 
				+      在主题定制的应用场景中，自然离不开颜色的自定义。而你往往需要的是关于它的直观选择，于是 colorpicker 模块姗姗来迟，它支持 hex、rgb、rgba 三类色彩模式，在代码中简单的调用后，便可在你的网页系统中自由拖拽去选择你中意的颜色。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      模块加载名称：<em>colorpicker</em>
			
 
				+      <p class="layui-text" style="margin-top: 10px;">注意：<em>colorpicker 为 layui 2.4.0 新增模块，不支持 ie10 以下版本，其它高级浏览器均支持。</em></p>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">使用</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>colorpicker 是一款颜色选择器，如下是一个最基本的用法：</p>
			
 
				+      <pre class="layui-code" lay-title="小例子">
			
 
				+&lt;!DOCTYPE html>
			
 
				+&lt;html>
			
 
				+&lt;head>
			
 
				+  &lt;meta charset="utf-8">
			
 
				+  &lt;title>颜色选择器&lt;/title>
			
 
				+  &lt;link rel="stylesheet" href="../src/css/layui.css">
			
 
				+&lt;/head>
			
 
				+&lt;body>
			
 
				+&lt;div id="test1">&lt;/div>
			
 
				+&lt;script src="../src/layui.js">&lt;/script>
			
 
				+&lt;script>
			
 
				+layui.use('colorpicker', function(){
			
 
				+  var colorpicker = layui.colorpicker;
			
 
				+  //渲染
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test1'  //绑定元素
			
 
				+  });
			
 
				+});
			
 
				+&lt;/script>
			
 
				+&lt;/body>
			
 
				+&lt;/html>
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+ 
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="options">基础参数</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>colorpicker 组件目前支持以下参数</p>
			
 
				+      <table class="layui-table">
			
 
				+        <colgroup>
			
 
				+          <col width="120">
			
 
				+          <col>
			
 
				+          <col width="120">
			
 
				+          <col width="200">
			
 
				+        </colgroup>
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数选项</th>
			
 
				+            <th>说明</th>
			
 
				+            <th>类型</th>
			
 
				+            <th>默认值</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>elem</td>
			
 
				+            <td>指向容器选择器</td>
			
 
				+            <td>string/object</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>color</td>
			
 
				+            <td>默认颜色，不管你是使用 hex、rgb 还是 rgba 的格式输入，最终会以指定的格式显示。</td>
			
 
				+            <td>string</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>format</td>
			
 
				+            <td>颜色显示/输入格式，可选值： <em>hex</em>、<em>rgb</em>
			
 
				+              <br>若在 rgb 格式下开启了透明度，格式会自动变成 rgba。在没有输入颜色的前提下，组件会默认为 #000 也就是黑色。
			
 
				+            </td>
			
 
				+            <td>string</td>
			
 
				+            <td>hex（即 16 进制色值）</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>alpha</td>
			
 
				+            <td class="layui-text">是否开启透明度，若不开启，则不会显示透明框。开启了透明度选项时，当你的默认颜色为 hex 或 rgb 格式，组件会默认加上值为 1 的透明度。相同的，当你没有开启透明度，却以 rgba 格式设置默认颜色时，组件会默认没有透明度。<br>注意：<em>该参数必须配合 rgba 颜色值使用</em></td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>predefine</td>
			
 
				+            <td>预定义颜色是否开启</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>colors</td>
			
 
				+            <td>预定义颜色，此参数需配合 <em>predefine: true</em> 使用。</td>
			
 
				+            <td>Array</td>
			
 
				+            <td>此处列举一部分：['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>size</td>
			
 
				+            <td>下拉框大小，可以选择：lg、sm、xs。</td>
			
 
				+            <td>string</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div> 
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="options">预定义颜色</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>预定义颜色，可以被认为是提供的参考色，因此除了我们默认的预定义颜色之外，你还可以自己定义</p>
			
 
				+      <pre class="layui-code" lay-title="小例子">
			
 
				+layui.use('colorpicker', function(){
			
 
				+  var colorpicker = layui.colorpicker;、
			
 
				+   
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test1'
			
 
				+    ,predefine: true
			
 
				+    ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
			
 
				+  });
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="change">颜色被改变的回调</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>
			
 
				+        回调名：<em>change</em>
			
 
				+        <br>当颜色在选择器中发生选择改变时，会进入 change 回调，你可以通过它来进行所需操作，下面的例子就是实时的输出当前选择器的颜色
			
 
				+      </p>
			
 
				+      <pre class="layui-code" lay-title="小例子">
			
 
				+layui.use('colorpicker', function(){
			
 
				+  var colorpicker = layui.colorpicker;
			
 
				+   
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test1'
			
 
				+    ,change: function(color){
			
 
				+      console.log(color)
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="done">颜色选择后的回调</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>
			
 
				+        回调名：<em>done</em>
			
 
				+        <br>点击颜色选择器的“确认”和“清除”按钮，均会触发 done 回调，回调返回当前选择的色值。
			
 
				+      </p>
			
 
				+      <pre class="layui-code" lay-title="小例子">
			
 
				+layui.use('colorpicker', function(){
			
 
				+  var colorpicker = layui.colorpicker;
			
 
				+   
			
 
				+  colorpicker.render({
			
 
				+    elem: '#test1'
			
 
				+    ,done: function(color){
			
 
				+      console.log(color)
			
 
				+      //譬如你可以在回调中把得到的 color 赋值给表单
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="docend">结语</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>颜色选择器不仅仅是独立使用，它更多情况可能是跟表单结合使用。</p>
			
 
				+    </div>
			
 
				+ 
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/dropdown.html
+++ b/doc/modules/dropdown.html
@@ -0,0 +1,976 @@
 
				+ 
			
 
				+ <!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@下拉菜单组件文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>快速使用</cite></a></li>
			
 
				+  <li><a href="#options"><cite>基础参数</cite></a></li>
			
 
				+  <li><a href="#data"><cite>菜单项参数</cite></a></li>
			
 
				+  <li><a href="#onclick"><cite>菜单被点击的回调</cite></a></li>
			
 
				+  <li><a href="#templet"><cite>自定义菜单项模板</cite></a></li>
			
 
				+  <li><a href="#contextmenu"><cite>右键菜单</cite></a></li>
			
 
				+  <li><a href="../../demo/dropdown.html" tppabs="http://www.layui.com/demo/dropdown.html" target="_blank"><cite>查看组件示例</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1">下拉菜单组件文档 - layui.dropdown</h1>
			
 
				+    <blockquote class="layui-elem-quote layui-text">
			
 
				+      dropdown 是基于 layui「基础菜单」结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的「下拉菜单」，更可用于「右键菜单」来实现更多的交互可能。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="layui-elem-quote layui-text">
			
 
				+      模块加载名称：<em>dropdown</em>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">快速使用</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <div class="layui-tab layui-tab-brief layui-code-demo">
			
 
				+        <ul class="layui-tab-title">
			
 
				+          <li class="layui-this">代码</li>
			
 
				+          <li>演示效果</li>
			
 
				+        </ul>
			
 
				+        <div class="layui-tab-content layui-border layui-bg-gray">
			
 
				+          <div class="layui-tab-item layui-show">
			
 
				+            <pre class="layui-code" id="docDemoCode1" lay-height="300px">
			
 
				+&lt;button class=&quot;layui-btn&quot; id=&quot;demo1&quot;&gt;
			
 
				+  下拉菜单
			
 
				+  &lt;i class=&quot;layui-icon layui-icon-down layui-font-12&quot;&gt;&lt;/i&gt;
			
 
				+&lt;/button&gt;
			
 
				+ 
			
 
				+&lt;script&gt;
			
 
				+layui.use('dropdown', function(){
			
 
				+  var dropdown = layui.dropdown
			
 
				+  dropdown.render({
			
 
				+    elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
			
 
				+    ,data: [{
			
 
				+      title: 'menu item 1'
			
 
				+      ,id: 100
			
 
				+      ,href: '#'
			
 
				+    },{
			
 
				+      title: 'menu item 2'
			
 
				+      ,id: 101
			
 
				+      ,href: 'https://www.layui.com/' //开启超链接
			
 
				+      ,target: '_blank' //新窗口方式打开
			
 
				+    },{type: '-'},{
			
 
				+      title: 'menu item 3'
			
 
				+      ,id: 102
			
 
				+      ,type: 'group'  //菜单类型，支持：normal/group/parent/-
			
 
				+      ,child: [{
			
 
				+        title: 'menu item 3-1'
			
 
				+        ,id: 103
			
 
				+      },{
			
 
				+        title: 'menu item 3-2'
			
 
				+        ,id: 104
			
 
				+        ,child: [{
			
 
				+          title: 'menu item 3-2-1'
			
 
				+          ,id: 105
			
 
				+        },{
			
 
				+          title: 'menu item 3-2-2'
			
 
				+          ,id: 106
			
 
				+        }]
			
 
				+      },{
			
 
				+        title: 'menu item 3-3'
			
 
				+        ,id: 107
			
 
				+      }]
			
 
				+    },{type: '-'},{
			
 
				+      title: 'menu item 4'
			
 
				+      ,id: 108
			
 
				+    },{
			
 
				+      title: 'menu item 5'
			
 
				+      ,id: 109
			
 
				+      ,child: [{
			
 
				+        title: 'menu item 5-1'
			
 
				+        ,id: 11111
			
 
				+        ,child: [{
			
 
				+          title: 'menu item 5-1-1'
			
 
				+          ,id: 2111
			
 
				+        },{
			
 
				+          title: 'menu item 5-1-2'
			
 
				+          ,id: 3111
			
 
				+        }]
			
 
				+      },{
			
 
				+        title: 'menu item 5-2'
			
 
				+        ,id: 52
			
 
				+      }]
			
 
				+    },{type:'-'},{
			
 
				+      title: 'menu item 6'
			
 
				+      ,id: 6
			
 
				+      ,type: 'group'
			
 
				+      ,isSpreadItem: false
			
 
				+      ,child: [{
			
 
				+        title: 'menu item 6-1'
			
 
				+        ,id: 61
			
 
				+      },{
			
 
				+        title: 'menu item 6-2'
			
 
				+        ,id: 62
			
 
				+      }]
			
 
				+    }]
			
 
				+    ,id: 'demo1'
			
 
				+    //菜单被点击的事件
			
 
				+    ,click: function(obj){
			
 
				+      console.log(obj);
			
 
				+      layer.msg('回调返回的参数已显示再控制台');
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+&lt;/script&gt;
			
 
				+            </pre>
			
 
				+          </div>
			
 
				+          <div class="layui-tab-item" id="docDemoView1" style="height:311px;"></div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <blockquote class="layui-elem-quote layui-text">菜单列表核心的数据来自于 data 参数，详细可参加右边目录「菜单列参数」</blockquote>
			
 
				+    </div> 
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="options">基础参数</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>即核心方法 <code>dropdown.render(options)</code> 中的 options 对应的参数：</p>
			
 
				+      
			
 
				+      <table class="layui-table">
			
 
				+        <colgroup>
			
 
				+          <col width="100">
			
 
				+          <col>
			
 
				+          <col width="100">
			
 
				+          <col width="100">
			
 
				+        </colgroup>
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数</th>
			
 
				+            <th>说明</th>
			
 
				+            <th>类型</th>
			
 
				+            <th>默认值</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>elem</td>
			
 
				+            <td>绑定触发组件的元素。必填项</td>
			
 
				+            <td>String/DOM</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>data</td>
			
 
				+            <td>菜单列数据项，其参数详见下文。必填项</td>
			
 
				+            <td>Array</td>
			
 
				+            <td>[]</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>trigger</td>
			
 
				+            <td>触发组件的事件类型。支持所有事件，如：click/hover/mousedown/contextmenu 等</td>
			
 
				+            <td>String</td>
			
 
				+            <td>click</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>show</td>
			
 
				+            <td>是否初始即显示组件面板</td>
			
 
				+            <td>Boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>align</td>
			
 
				+            <td>
			
 
				+              下拉面板相对绑定元素的水平对齐方式（支持: left/center/right）
			
 
				+              <span class="layui-font-red">v2.6.8 新增</span>
			
 
				+            </td>
			
 
				+            <td>String</td>
			
 
				+            <td>left</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>isAllowSpread</td>
			
 
				+            <td>是否允许菜单组展开收缩</td>
			
 
				+            <td>Boolean</td>
			
 
				+            <td>true</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>isSpreadItem</td>
			
 
				+            <td>是否初始展开子菜单</td>
			
 
				+            <td>Boolean</td>
			
 
				+            <td>true</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>delay</td>
			
 
				+            <td>延迟关闭的毫秒数。当 trigger 为 hover 时才生效</td>
			
 
				+            <td>Number</td>
			
 
				+            <td>300</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>className</td>
			
 
				+            <td>自定义组件的样式类名</td>
			
 
				+            <td>String</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>style</td>
			
 
				+            <td>设置组件的 style 属性，从而定义新的样式</td>
			
 
				+            <td>String</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>templet</td>
			
 
				+            <td>全局定义菜单的列表模板，添加任意 html 字符，模版将被 laytpl 组件所转义，因此可通过 {{ d.title }} 的方式得到当前菜单配置的数据。<a href="#templet">#详见</a></td>
			
 
				+            <td>String</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>content</td>
			
 
				+            <td>自定义组件内容，从而替代默认的菜单结构</td>
			
 
				+            <td>String</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>ready</td>
			
 
				+            <td>
			
 
				+              组件成功弹出后的回调，并返回两个参数，如：
			
 
				+              <pre class="layui-code" lay-lang="JS">
			
 
				+ready: function(elemPanel, elem){
			
 
				+  console.log(elemPanel); 得到组件面板的 DOM 对象
			
 
				+  console.log(elem); 得到基础参数 elem 所绑定的元素 DOM 对象
			
 
				+}              
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+            <td>Function</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>click</td>
			
 
				+            <td>
			
 
				+              菜单项被点击时的回调，并返回两个参数，如：
			
 
				+              <pre class="layui-code" lay-lang="JS">
			
 
				+click: function(data, othis){
			
 
				+  console.log(data); 得到当前所点击的菜单项对应的数据
			
 
				+  console.log(othis); 得到当前所点击的菜单项 DOM 对象
			
 
				+  console.log(this.elem); //得到当前组件绑定的原始 DOM 对象，批量绑定中常用。
			
 
				+}              
			
 
				+              </pre>
			
 
				+              <a href="#onclick">#详细使用参见下文</a>
			
 
				+            </td>
			
 
				+            <td>Function</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="data">菜单项参数</a></legend>
			
 
				+    </fieldset>
			
 
				+    
			
 
				+    <div class="site-text">
			
 
				+      <p>即上述基础参数 <code>data</code> 对应的参数，格式为：<code>data: [{title: 'menu item 1', id: 1}, {}, {}]</code></p>
			
 
				+      <table class="layui-table">
			
 
				+        <colgroup>
			
 
				+          <col width="100">
			
 
				+          <col>
			
 
				+          <col width="100">
			
 
				+          <col width="200">
			
 
				+        </colgroup>
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数</th>
			
 
				+            <th>说明</th>
			
 
				+            <th>类型</th>
			
 
				+            <th>默认值</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>title</td>
			
 
				+            <td>菜单标题</td>
			
 
				+            <td>String</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>id</td>
			
 
				+            <td>菜单 ID。用户菜单项唯一索引</td>
			
 
				+            <td>Number/String</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>href</td>
			
 
				+            <td>菜单项的超链接地址。若填写，点击菜单将直接发生跳转。</td>
			
 
				+            <td>String</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>target</td>
			
 
				+            <td>
			
 
				+              菜单项超链接的打开方式，需 href 填写才生效。
			
 
				+              <br>一般可设为 _blank 或 _self 等
			
 
				+            </td>
			
 
				+            <td>String</td>
			
 
				+            <td>_self</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>type</td>
			
 
				+            <td>菜单项的类型，当前支持的值如下：
			
 
				+              <blockquote class="layui-elem-quote layui-text" style="margin-top: 10px;">
			
 
				+                <em>normal</em>（默认）
			
 
				+                <br><em>group</em>（垂直菜单组）
			
 
				+                <br><em>parent</em>（横向父子菜单）
			
 
				+                <br><em>-</em>（分割线）
			
 
				+              </blockquote>
			
 
				+            </td>
			
 
				+            <td>String</td>
			
 
				+            <td>normal 或 不填</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>child</td>
			
 
				+            <td>子级菜单数据项。参数同父级，可无限嵌套。</td>
			
 
				+            <td>Array</td>
			
 
				+            <td>[]</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>templet</td>
			
 
				+            <td>自定义当前菜单项模板，优先级高于全局设定的 templet。详见下文。</td>
			
 
				+            <td>String</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="onclick">菜单项被点击的回调</a></legend>
			
 
				+    </fieldset>
			
 
				+    
			
 
				+    <div class="site-text">
			
 
				+      <div class="layui-tab layui-tab-brief layui-code-demo">
			
 
				+        <ul class="layui-tab-title">
			
 
				+          <li class="layui-this">代码</li>
			
 
				+          <li>演示效果</li>
			
 
				+        </ul>
			
 
				+        <div class="layui-tab-content layui-border layui-bg-gray">
			
 
				+          <div class="layui-tab-item layui-show">
			
 
				+            <pre class="layui-code" id="docDemoCode2" lay-height="300px" lay-encode="true">
			
 
				+<table class="layui-table">   
			
 
				+  <tbody>
			
 
				+    <tr>
			
 
				+      <td>列表 1</td>
			
 
				+      <td><button class="layui-btn layui-btn-sm demolist" data-id="111">更多操作</button></td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>列表 2</td>
			
 
				+      <td><button class="layui-btn layui-btn-sm demolist" data-id="222">更多操作</button></td>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+      <td>列表 3</td>
			
 
				+      <td><button class="layui-btn layui-btn-sm demolist" data-id="333">更多操作</button></td>
			
 
				+    </tr>
			
 
				+  </tbody>
			
 
				+</table>
			
 
				+&lt;script&gt;
			
 
				+layui.use('dropdown', function(){
			
 
				+  var dropdown = layui.dropdown
			
 
				+  ,$ = layui.jquery;
			
 
				+  
			
 
				+  dropdown.render({
			
 
				+    elem: '.demolist'
			
 
				+    ,data: [{
			
 
				+      title: 'item 1'
			
 
				+      ,id: 'aaa'
			
 
				+    }, {
			
 
				+      title: 'item 2'
			
 
				+      ,id: 'bbb'
			
 
				+    }]
			
 
				+    ,click: function(data, othis){
			
 
				+      var elem = $(this.elem)
			
 
				+      ,listId = elem.data('id'); //表格列表的预埋数据
			
 
				+      layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id);
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+&lt;/script&gt;
			
 
				+            </pre>
			
 
				+          </div>
			
 
				+          <div class="layui-tab-item" id="docDemoView2"></div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="templet">自定义菜单项模板</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>通过 templet 参数即可自定义菜单项模板，其字符将被 laytpl 组件所转义，因此可通过 undefined 的方式得到当前菜单配置的数据。</p>
			
 
				+      <pre class="layui-code" lay-lang="JS">
			
 
				+var dropdown = layui.dropdown;
			
 
				+ 
			
 
				+//执行菜单
			
 
				+dropdown.render({
			
 
				+  elem: '#id'
			
 
				+  ,data: [{
			
 
				+    title: '刷新'
			
 
				+    //当设定了模板时，菜单项将优先显示模板结构；否则将默认显示标题
			
 
				+    ,templet: '&lt;i class=&quot;layui-icon layui-icon-refresh&quot;&gt;&lt;/i&gt; {{d.title}}'
			
 
				+    ,id: 100
			
 
				+  },{
			
 
				+    title: 'menu item 2'
			
 
				+    //该模板由「图片+标题+徽章」组成
			
 
				+    ,templet: '&lt;img src=&quot;1.jpg&quot; style=&quot;width: 16px;&quot;&gt; {{d.title}} &lt;span class=&quot;layui-badge-dot&quot;&gt;&lt;/span&gt;'
			
 
				+    ,id: 101
			
 
				+    ,href: 'https://www.layui.com/'
			
 
				+    ,target: '_blank'
			
 
				+  },{
			
 
				+    title: 'menu item 3' //未开启模板时，默认直接显示标题
			
 
				+    ,id: 103
			
 
				+  }]
			
 
				+})  
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="contextmenu">右键菜单</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>当参数设定为 <code>trigger: 'contextmenu'</code>时，即会在所绑定的元素中屏蔽默认的右键菜单，从而呈现 dropdown 组件配置的菜单。</p>
			
 
				+      <pre class="layui-code" lay-height="300px" lay-lang="JS">
			
 
				+var dropdown = layui.dropdown;
			
 
				+ 
			
 
				+//执行菜单
			
 
				+dropdown.render({
			
 
				+  elem: '#demo' //在 id="demo" 的元素中触发事件。也可以直接设置为 document，从而重置整个右键菜单
			
 
				+  ,trigger: 'contextmenu' //右键事件
			
 
				+  ,data: [{
			
 
				+    title: 'menu item 1'
			
 
				+    ,id: 1
			
 
				+  },{
			
 
				+    title: 'menu item 2'
			
 
				+    ,id: 'reload'
			
 
				+  },{type:'-'},{
			
 
				+    title: 'menu item 3'
			
 
				+    ,id: 3
			
 
				+    ,child: [{
			
 
				+      title: 'menu item 3-1'
			
 
				+      ,id: 31
			
 
				+    },{
			
 
				+      title: 'menu item 3-2'
			
 
				+      ,id: 32
			
 
				+    },{
			
 
				+      title: 'menu item 3-3'
			
 
				+      ,id: 33
			
 
				+    }]
			
 
				+  },{type:'-'},{
			
 
				+    title: 'menu item 4'
			
 
				+    ,id: 111
			
 
				+  },{
			
 
				+    title: 'menu item 5'
			
 
				+    ,id: 555
			
 
				+  },{
			
 
				+    title: 'menu item 6'
			
 
				+    ,id: 666
			
 
				+  }]
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="docend">结语</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>该组件使用非常灵活，且弹出的面板进行了坐标的科学判断（基于内部的 lay.js 模块），能始终吸附显示在最佳的位置。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+global.docDemoCode1 = document.getElementById('docDemoCode1').innerHTML;
			
 
				+global.docDemoCode2 = document.getElementById('docDemoCode2').innerHTML;
			
 
				+layui.use(['dropdown', 'util', 'layer'], function(){
			
 
				+  var dropdown = layui.dropdown
			
 
				+  ,util = layui.util
			
 
				+  ,layer = layui.layer
			
 
				+  ,$ = layui.jquery;
			
 
				+  
			
 
				+  //临时写法
			
 
				+  $('#docDemoView1').html(util.unescape(global.docDemoCode1));
			
 
				+  $('#docDemoView2').html(util.unescape(global.docDemoCode2));
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/element.html
+++ b/doc/modules/element.html
@@ -0,0 +1,872 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@element模块元素操作文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>使用</cite></a></li>
			
 
				+  <li><a href="#attr"><cite>预设元素属性</cite></a></li>
			
 
				+  <li><a href="#base"><cite>基础方法</cite> <span class="layui-badge-dot" style=""></span></a></li>
			
 
				+  <li><a href="#render"><cite>初始动态元素</cite> <span class="layui-badge-dot" style=""></span></a></a></li>
			
 
				+  <li><a href="#on"><cite>事件触发</cite></a></li>
			
 
				+  <ul style="margin-left: 15px;">
			
 
				+    <li><a href="#ontab"><cite>触发Tab切换</cite></a></li>
			
 
				+    <li><a href="#ontabDelete"><cite>触发Tab删除</cite></a></li>
			
 
				+    <li><a href="#onnav"><cite>触发导航点击</cite></a></li>
			
 
				+    <li><a href="#collapse"><cite>触发折叠面板</cite></a></li>
			
 
				+  </ul>
			
 
				+  <li><a href="#progress"><cite>操作进度条</cite></a></li>
			
 
				+  
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1"><i class="layui-icon">&#xe62a;</i> 常用元素操作 - layui.element</h1>
			
 
				+    <blockquote class="site-text layui-elem-quote">页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab 的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为 element 组件。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      模块加载名称：<em>element</em>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="use">使用</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素，如你的页面存在一个 Tab元素块，那么element模块会自动赋予她该有的功能。</p>
			
 
				+      <pre class="layui-code" lay-title="HTML">
			
 
				+&lt;div class=&quot;layui-tab&quot; lay-filter="demo"&gt;
			
 
				+  &lt;ul class=&quot;layui-tab-title&quot;&gt;
			
 
				+    &lt;li class=&quot;layui-this&quot;&gt;网站设置&lt;/li&gt;
			
 
				+    &lt;li&gt;商品管理&lt;/li&gt;
			
 
				+    &lt;li&gt;订单管理&lt;/li&gt;
			
 
				+  &lt;/ul&gt;
			
 
				+  &lt;div class=&quot;layui-tab-content&quot;&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item layui-show&quot;&gt;内容1&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;内容2&lt;/div&gt;
			
 
				+    &lt;div class=&quot;layui-tab-item&quot;&gt;内容3&lt;/div&gt;
			
 
				+  &lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+      </pre>
			
 
				+      <p>前提是你要加载element模块</p>
			
 
				+      <pre class="layui-code" lay-title="JavaScript">
			
 
				+layui.use('element', function(){
			
 
				+  var element = layui.element;
			
 
				+  
			
 
				+  //一些事件触发
			
 
				+  element.on('tab(demo)', function(data){
			
 
				+    console.log(data);
			
 
				+  });
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div> 
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="attr">预设元素属性</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>我们通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层，如：</p>
			
 
				+      <pre class="layui-code">
			
 
				+&lt;div class="layui-tab" lay-allowClose="true" lay-filter="demo">…&lt;/div>      
			
 
				+&lt;span class="layui-breadcrumb" lay-separator="|">&lt;/span>
			
 
				+ 
			
 
				+ And So On
			
 
				+      </pre>
			
 
				+      <p>element 模块支持的元素如下表：</p>
			
 
				+      <table class="layui-table">
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th style="width: 100px;">属性名</th>
			
 
				+            <th style="width: 150px;">可选值</th>
			
 
				+            <th>说明</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>lay-filter</td>
			
 
				+            <td>任意字符</td>
			
 
				+            <td>
			
 
				+              事件过滤器（公用属性），主要用于事件的精确匹配，跟选择器是比较类似的。
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>lay-allowClose</td>
			
 
				+            <td>
			
 
				+              true
			
 
				+            </td>
			
 
				+            <td>
			
 
				+              针对于Tab容器，是否允许选项卡关闭。默认不允许，即不用设置该属性
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>lay-separator</td>
			
 
				+            <td>任意分隔符</td>
			
 
				+            <td>针对于面包屑容器</td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="base">基础方法</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>基础方法允许你在外部主动对元素发起一起操作，目前element模块提供的方法如下：</p>
			
 
				+      <table class="layui-table">
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>方法名</th>
			
 
				+            <th>描述</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>var element = layui.element;</td>
			
 
				+            <td>
			
 
				+              element模块的实例
			
 
				+              <br>返回的<em>element</em>变量为该实例的对象，携带一些用于元素操作的基础方法
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>element.on(filter, callback);</td>
			
 
				+            <td>
			
 
				+              用于元素的一些事件触发
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>element.tabAdd(filter, options);</td>
			
 
				+            <td>
			
 
				+              用于新增一个Tab选项
			
 
				+              <br>参数<em>filter</em>：tab元素的 lay-filter="value" 过滤器的值（value）
			
 
				+              <br>参数<em>options</em>：设定可选值的对象，目前支持的选项如下述示例：
			
 
				+              <pre class="layui-code">
			
 
				+element.tabAdd('demo', {
			
 
				+  title: '选项卡的标题'
			
 
				+  ,content: '选项卡的内容' //支持传入html
			
 
				+  ,id: '选项卡标题的lay-id属性值'
			
 
				+});             
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>element.tabDelete(filter, layid);</td>
			
 
				+            <td>
			
 
				+              用于删除指定的Tab选项
			
 
				+              <br>参数<em>filter</em>：tab元素的 lay-filter="value" 过滤器的值（value）
			
 
				+              <br>参数<em>layid</em>：选项卡标题列表的 属性 lay-id 的值
			
 
				+              <pre class="layui-code" lay-title="示例">
			
 
				+element.tabDelete('demo', 'xxx'); //删除 lay-id="xxx" 的这一项  
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>element.tabChange(filter, layid);</td>
			
 
				+            <td>
			
 
				+              用于外部切换到指定的Tab项上，参数同上，如：
			
 
				+              <br>element.tabChange('demo', 'layid'); //切换到 lay-id="yyy" 的这一项  
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>element.tab(options);</td>
			
 
				+            <td>
			
 
				+              用于绑定自定义 Tab 元素（即非 layui 自带的 tab 结构）。<em>该方法为 layui 2.1.6 新增</em>  
			
 
				+              <br>参数<em>options</em>：设定可选值的对象，目前支持的选项如下述示例：
			
 
				+              <pre class="layui-code">
			
 
				+//HTML
			
 
				+&lt;ul id=&quot;tabHeader&quot;&gt;
			
 
				+  &lt;li&gt;标题1&lt;/li&gt;
			
 
				+  &lt;li&gt;标题2&lt;/li&gt;
			
 
				+  &lt;li&gt;标题3&lt;/li&gt;
			
 
				+&lt;/ul&gt;
			
 
				+&lt;div id=&quot;tabBody&quot;&gt;
			
 
				+  &lt;div class=&quot;xxx&quot;&gt;内容1&lt;/div&gt;
			
 
				+  &lt;div class=&quot;xxx&quot;&gt;内容2&lt;/div&gt;
			
 
				+  &lt;div class=&quot;xxx&quot;&gt;内容4&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+              
			
 
				+//JavaScript              
			
 
				+element.tab({
			
 
				+  headerElem: '#tabHeader>li' //指定tab头元素项
			
 
				+  ,bodyElem: '#tabBody>.xxx' //指定tab主体元素项
			
 
				+});             
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>element.progress(filter, percent);</td>
			
 
				+            <td>
			
 
				+              用于动态改变进度条百分比：
			
 
				+              <br>element.progress('demo', '30%');
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div>
			
 
				+    
			
 
				+    <a name="init">更新渲染</a>
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="render">更新渲染</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 <em>element.init(type, filter)</em> 方法即可。注意：2.1.6 开始，可以用 <em>element.render(type, filter);</em> 方法替代</p>
			
 
				+      <p>第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：</p>
			
 
				+      <table class="layui-table">
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数（type）值</th>
			
 
				+            <th>描述</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>tab</td>
			
 
				+            <td>重新对tab选项卡进行初始化渲染</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>nav</td>
			
 
				+            <td>重新对导航进行渲染</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>breadcrumb</td>
			
 
				+            <td>重新对面包屑进行渲染</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>progress</td>
			
 
				+            <td>重新对进度条进行渲染</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>collapse</td>
			
 
				+            <td>重新对折叠面板进行渲染</td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+      
			
 
				+      <pre class="layui-code" lay-title="例子">
			
 
				+element.init(); //更新全部  2.1.6 可用 element.render() 方法替代
			
 
				+element.render('nav'); //重新对导航进行渲染。注：layui 2.1.6 版本新增
			
 
				+//……
			
 
				+      </pre>
			
 
				+      
			
 
				+      <p>第二个参数：filter，为元素的 lay-filter="" 的值。你可以借助该参数，完成指定元素的局部更新。</p>
			
 
				+      <pre class="layui-code">
			
 
				+【HTML】
			
 
				+&lt;div class=&quot;layui-nav&quot; lay-filter=&quot;test1&quot;&gt;
			
 
				+  …
			
 
				+&lt;/div&gt;
			
 
				+ 
			
 
				+&lt;div class=&quot;layui-nav&quot; lay-filter=&quot;test2&quot;&gt;
			
 
				+  …
			
 
				+&lt;/div&gt;
			
 
				+      
			
 
				+【JavaScript】
			
 
				+//比如当你对导航动态插入了二级菜单，这时你需要重新去对它进行渲染
			
 
				+element.render('nav', 'test1'); //对 lay-filter="test1" 所在导航重新渲染。注：layui 2.1.6 版本新增
			
 
				+//……      
			
 
				+      </pre>
			
 
				+      
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="on">事件触发</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>语法：<em>element.on('event(过滤器值)', callback);</em></p>
			
 
				+      <p>element 模块在 layui 事件机制中注册了element 模块事件，所以当你使用 layui.onevent() 自定义模块事件时，请勿占用 element 名。目前 element 模块所支持的事件如下表：</p>
			
 
				+      <table class="site-table">
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>event</th>
			
 
				+            <th>描述</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>tab</td>
			
 
				+            <td>触发 Tab 选项卡切换事件</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>tabDelete</td>
			
 
				+            <td>触发 Tab 选项卡删除事件</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>nav</td>
			
 
				+            <td>触发导航菜单的点击事件</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>collapse</td>
			
 
				+            <td>触发折叠面板展开或收缩事件</td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+      <p>默认情况下，事件所触发的是全部的元素，但如果你只想触发某一个元素，使用事件过滤器即可。<br>如：<em>&lt;div class="layui-tab" lay-filter="test">&lt;/div></em></p>
			
 
				+      <pre class="layui-code">
			
 
				+element.on('tab(test)', function(data){
			
 
				+  console.log(data);
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="ontab">触发选项卡切换</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>Tab选项卡点击切换时触发，回调函数返回一个object参数，携带两个成员：</p>
			
 
				+      <pre class="layui-code">
			
 
				+element.on('tab(filter)', function(data){
			
 
				+  console.log(this); //当前Tab标题所在的原始DOM元素
			
 
				+  console.log(data.index); //得到当前Tab的所在下标
			
 
				+  console.log(data.elem); //得到当前的Tab大容器
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="ontabDelete">触发选项卡删除</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>Tab选项卡被删除时触发，回调函数返回一个object参数，携带两个成员：</p>
			
 
				+      <pre class="layui-code">
			
 
				+element.on('tabDelete(filter)', function(data){
			
 
				+  console.log(this); //当前Tab标题所在的原始DOM元素
			
 
				+  console.log(data.index); //得到当前Tab的所在下标
			
 
				+  console.log(data.elem); //得到当前的Tab大容器
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p><em>注：该事件为 layui 2.1.6 新增</em></p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="onnav">触发导航菜单的点击</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>当点击导航父级菜单和二级菜单时触发，回调函数返回所点击的菜单DOM对象：</p>
			
 
				+      <pre class="layui-code">
			
 
				+element.on('nav(filter)', function(elem){
			
 
				+  console.log(elem); //得到当前点击的DOM对象
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="collapse">触发折叠面板</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>当折叠面板点击展开或收缩时触发，回调函数返回一个object参数，携带三个成员：</p>
			
 
				+      <pre class="layui-code">
			
 
				+element.on('collapse(filter)', function(data){
			
 
				+  console.log(data.show); //得到当前面板的展开状态，true或者false
			
 
				+  console.log(data.title); //得到当前点击面板的标题区域DOM对象
			
 
				+  console.log(data.content); //得到当前点击面板的内容区域DOM对象
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="progress">动态操作进度条</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>你肯定不仅仅是满足于进度条的初始化显示，通常情况下你需要动态改变它的进度值，element模块提供了这样的基础方法：<em>element.progress(filter, percent);</em>。</p>
			
 
				+      <pre class="layui-code" lay-title="例子">
			
 
				+&lt;div class=&quot;layui-progress layui-progress-big&quot; lay-filter=&quot;demo&quot; lay-showPercent=&quot;true&quot;&gt;
			
 
				+  &lt;div class=&quot;layui-progress-bar&quot; lay-percent=&quot;0%&quot;&gt;&lt;/div&gt;
			
 
				+&lt;/div&gt;
			
 
				+ 
			
 
				+上述是一个已经设置了过滤器（lay-filter=&quot;demo&quot;）的进度条
			
 
				+现在你只需要在某个事件或者语句中执行方法：element.progress(&#x27;demo&#x27;, &#x27;50%&#x27;);
			
 
				+即可改变进度
			
 
				+      </pre>
			
 
				+      <p>如果你需要进度条更直观的例子，建议浏览：<a href="../../demo/progress.html" tppabs="http://www.layui.com/demo/progress.html">进度条演示页面</a></p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <fieldset><legend><a name="other">结语</a></legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>事实上元素模块的大部分操作都是内部自动完成的，所以目前你发现他的接口很少呢。当然，我们也会不断增加element模块所支持的页面元素。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/flow.html
+++ b/doc/modules/flow.html
@@ -0,0 +1,690 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@流加载文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>使用</cite></a></li>
			
 
				+  <li><a href="#load"><cite>信息流</cite></a></li>
			
 
				+  <li><a href="#lazyimg"><cite>图片懒加载</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1"><i class="layui-icon">&#xe636;</i> 流加载文档 - layui.flow</h1>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      该模块包含<em>信息流加载</em>和<em>图片懒加载</em>两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了，但不妨现在开始，体验一下Layui更为简单和高效的Flow吧。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="site-text layui-elem-quote">
			
 
				+      <p>模块加载名称：<em>flow</em></p>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="use"></a>
			
 
				+      <fieldset><legend>使用</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>flow模块包含两个核心方法，如下所示：</p>
			
 
				+      <pre class="layui-code">
			
 
				+layui.use('flow', function(){
			
 
				+  var flow = layui.flow;
			
 
				+  //信息流
			
 
				+  flow.load(options);
			
 
				+  
			
 
				+  //图片懒加载
			
 
				+  flow.lazyimg(options);
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p>下面将对她们进行详细介绍。</p>
			
 
				+    </div> 
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="load"></a>
			
 
				+      <fieldset><legend>信息流</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>信息流即异步逐页渲染列表元素，这是你页面已经存在的一段列表，你页面初始时只显示了6个</p>
			
 
				+      <pre class="layui-code" lay-title="HTML" lay-encode="true">
			
 
				+<ul id="demo">
			
 
				+  &lt;li>1&lt;/li>
			
 
				+  &lt;li>2&lt;/li>
			
 
				+  ……
			
 
				+  &lt;li>6&lt;/li>
			
 
				+</ul>
			
 
				+      </pre>
			
 
				+      <p>你想通过加载更多来显示余下列表，那么你只需要执行方法：<a>flow.load(options)</a> 即可</p>
			
 
				+      <pre class="layui-code" lay-title="JavaScript" lay-encode="true">
			
 
				+layui.use('flow', function(){
			
 
				+  var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
			
 
				+  var flow = layui.flow;
			
 
				+  flow.load({
			
 
				+    elem: '#demo' //指定列表容器
			
 
				+    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
			
 
				+      var lis = [];
			
 
				+      //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
			
 
				+      $.get('/api/list?page='+page, function(res){
			
 
				+        //假设你的列表返回在data集合中
			
 
				+        layui.each(res.data, function(index, item){
			
 
				+          lis.push('<li>'+ item.title +'</li>');
			
 
				+        }); 
			
 
				+        
			
 
				+        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
			
 
				+        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
			
 
				+        next(lis.join(''), page < res.pages);    
			
 
				+      });
			
 
				+    }
			
 
				+  });
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p>上述是一个比较简单的例子，以下是信息流完整的参数支撑（即options对象），它们将有助于你更灵活地应对各种场景</p>
			
 
				+      <table class="layui-table">
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数</th>
			
 
				+            <th>类型</th>
			
 
				+            <th>描述</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>elem</td>
			
 
				+            <td>string</td>
			
 
				+            <td>指定列表容器的选择器</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>scrollElem</td>
			
 
				+            <td>string</td>
			
 
				+            <td>滚动条所在元素选择器，默认document。如果你不是通过窗口滚动来触发流加载，而是页面中的某一个容器的滚动条，那么通过该参数指定即可。</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>isAuto</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>是否自动加载。默认true。如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据。</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>end</td>
			
 
				+            <td>string</td>
			
 
				+            <td>用于显示末页内容，可传入任意HTML字符。默认为：没有更多了</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>isLazyimg</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>是否开启图片懒加载。默认false。如果设为true，则只会对在可视区域的图片进行按需加载。但与此同时，在拼接列表字符的时候，你不能给列表中的img元素赋值src，必须要用lay-src取代，如：
			
 
				+            <pre class="layui-code" lay-title="JavaScript片段">     
			
 
				+layui.each(res.data, function(index, item){
			
 
				+  lis.push('&lt;li>&lt;img lay-src="'+ item.src +'">&lt;/li>');
			
 
				+});   
			
 
				+            </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>mb</td>
			
 
				+            <td>number</td>
			
 
				+            <td>与底部的临界距离，默认50。即当滚动条与底部产生该距离时，触发加载。注意：只有在isAuto为true时有效。<br>额，等等。。mb=margin-bottom，可不是骂人的呀。</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>done</td>
			
 
				+            <td>function</td>
			
 
				+            <td>到达临界点触发加载的回调。信息流最重要的一个存在。携带两个参数：
			
 
				+            <pre class="layui-code" lay-title="JavaScript片段">
			
 
				+done: function(page, next){
			
 
				+  //请注意：layui 1.0.5 之前的版本是从第2页开始返回，也就是说你的第一页数据并非done来触发加载
			
 
				+  （为之前这个愚蠢的设计表示抱歉）
			
 
				+  //从 layui 1.0.5 的版本开始，page是从1开始返回，初始时即会执行一次done回调。
			
 
				+  //console.log(page) //获得当前页
			
 
				+  
			
 
				+  //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
			
 
				+  //只有当前页小于总页数的情况下，才会继续出现加载更多
			
 
				+  next('列表HTML片段', page < res.pages); 
			
 
				+}
			
 
				+            </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="lazyimg"></a>
			
 
				+      <fieldset><legend>图片懒加载</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>应该说比当前市面上任何一个懒加载的实现都更为强劲和轻量，她用不足80行代码巧妙地提供了一个始终加载当前屏图片的高性能方案（无论上滑还是下滑）。对你的网站因为图片可能带来的压力，可做出很好的应对。</p>
			
 
				+      <p>语法：<em>flow.lazyimg(options)</em></p>
			
 
				+      <pre class="layui-code">
			
 
				+layui.use('flow', function(){
			
 
				+  var flow = layui.flow;
			
 
				+  //当你执行这样一个方法时，即对页面中的全部带有 lay-src 的 img 元素开启了懒加载（当然你也可以指定相关 img）
			
 
				+  flow.lazyimg(); 
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p>如上所述，它只会针对以下 img 元素有效：</p>
			
 
				+      <pre class="layui-code" lay-title="HTML">
			
 
				+&lt;img src="占位图地址" lay-src="预加载图地址"> 
			
 
				+&lt;img src="" src="bbb.jpg">
			
 
				+&lt;img src="" lay-src="ccc.jpg">       
			
 
				+      </pre>
			
 
				+      <blockquote class="layui-elem-quote layui-text">
			
 
				+        <span class=" layui-font-red">占位图功能为 layui 2.6.6 开始新增。</span>
			
 
				+        这本应在 1.0 就该支持，但由于重心在其他组件，导致姗姗来迟。
			
 
				+      </blockquote>
			
 
				+      
			
 
				+      <p>如你所见，图片懒加载的使用极其简单，其参数（options 对象）可支持的 key 如下表所示：</p>
			
 
				+      <table class="layui-table">
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数</th>
			
 
				+            <th>类型</th>
			
 
				+            <th>描述</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>elem</td>
			
 
				+            <td>string</td>
			
 
				+            <td>指定开启懒加载的img元素选择器，如 elem: '.demo img' 或 elem: 'img.load'</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>scrollElem</td>
			
 
				+            <td>string</td>
			
 
				+            <td>滚动条所在元素选择器，默认document。如果你不是通过窗口滚动来触发流加载，而是页面中的某一个容器的滚动条，那么通过该参数指定即可。</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+        </tbody>
			
 
				+      </table>   
			
 
				+    </div> 
			
 
				+    
			
 
				+    <div class="site-title">
			
 
				+      <a name="other"></a>
			
 
				+      <fieldset><legend>结语</legend></fieldset>
			
 
				+    </div>
			
 
				+    <div class="site-text">
			
 
				+      <p>如果还有各种流行的流加载，你可以给我们提供建议，我们会在layui后续版本中选择性加入。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '..//public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/form.html
+++ b/doc/modules/form.html
--- a/doc/modules/laydate.html
+++ b/doc/modules/laydate.html
--- a/doc/modules/layedit.html
+++ b/doc/modules/layedit.html
--- a/doc/modules/layer.html
+++ b/doc/modules/layer.html
--- a/doc/modules/laypage.html
+++ b/doc/modules/laypage.html
@@ -0,0 +1,696 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@分页组件文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>快速使用</cite></a></li>
			
 
				+  <li><a href="#options"><cite>基础参数选项</cite> <span class="layui-badge-dot"></span></a></li>
			
 
				+  <li><a href="#jump"><cite>分页的回调</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1"><i class="layui-icon">&#xe633;</i> 分页模块文档 - layui.laypage</h1>
			
 
				+    
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的 UI、灵活的排版，极简的调用方式，这一切的优质元素，都将毫无违和感地镶嵌在你的页面之中。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="layui-elem-quote site-text">
			
 
				+      模块加载名称：<em>laypage</em>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">快速使用</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染：</p>
			
 
				+      <pre class="layui-code" lay-title="在 layui 模块中使用">
			
 
				+&lt;!DOCTYPE html&gt;
			
 
				+&lt;html&gt;
			
 
				+&lt;head&gt;
			
 
				+  &lt;meta charset=&quot;utf-8&quot;&gt;
			
 
				+  &lt;title&gt;layPage快速使用&lt;/title&gt;
			
 
				+  &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/build/layui.css&quot; media=&quot;all&quot;&gt;
			
 
				+&lt;/head&gt;
			
 
				+&lt;body&gt;
			
 
				+ 
			
 
				+&lt;div id="test1">&lt;/div>
			
 
				+ 
			
 
				+&lt;script src=&quot;/static/build/layui.js&quot;&gt;&lt;/script&gt;
			
 
				+&lt;script&gt;
			
 
				+layui.use(&#x27;laypage&#x27;, function(){
			
 
				+  var laypage = layui.laypage;
			
 
				+  
			
 
				+  //执行一个laypage实例
			
 
				+  laypage.render({
			
 
				+    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
			
 
				+    ,count: 50 //数据总数，从服务端得到
			
 
				+  });
			
 
				+});
			
 
				+&lt;/script&gt;
			
 
				+&lt;/body&gt;
			
 
				+&lt;/html&gt;
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="options">基础参数选项</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>通过核心方法：<em>laypage.render(options)</em> 来设置基础参数。由于使用非常简单，本篇直接罗列核心接口的参数选项</p>
			
 
				+      <table class="layui-table">
			
 
				+        <colgroup>
			
 
				+          <col width="120">
			
 
				+          <col>
			
 
				+          <col width="120">
			
 
				+          <col width="200">
			
 
				+        </colgroup>
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数选项</th>
			
 
				+            <th>说明</th>
			
 
				+            <th>类型</th>
			
 
				+            <th>默认值</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>elem</td>
			
 
				+            <td>
			
 
				+              指向存放分页的容器，值可以是容器ID、DOM对象。如：
			
 
				+              <br>1. elem: 'id' <em>注意：这里不能加 # 号</em>
			
 
				+              <br>2. elem: document.getElementById('id')
			
 
				+            </td>
			
 
				+            <td>String/Object</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>count</td>
			
 
				+            <td>数据总数。一般通过服务端得到</td>
			
 
				+            <td>Number</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>limit</td>
			
 
				+            <td>每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。</td>
			
 
				+            <td>Number</td>
			
 
				+            <td>10</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>limits</td>
			
 
				+            <td>每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框</td>
			
 
				+            <td>Array</td>
			
 
				+            <td>[10, 20, 30, 40, 50]</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>curr</td>
			
 
				+            <td>
			
 
				+              起始页。一般用于刷新类型的跳页以及HASH跳页。如：
			
 
				+              <pre class="layui-code">
			
 
				+//开启location.hash的记录
			
 
				+laypage.render({
			
 
				+  elem: 'test1'
			
 
				+  ,count: 500
			
 
				+  ,curr: location.hash.replace('#!fenye=', '') //获取起始页
			
 
				+  ,hash: 'fenye' //自定义hash值
			
 
				+});          
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+            <td>Number</td>
			
 
				+            <td>1</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>groups</td>
			
 
				+            <td>连续出现的页码个数</td>
			
 
				+            <td>Number</td>
			
 
				+            <td>5</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>prev</td>
			
 
				+            <td>自定义“上一页”的内容，支持传入普通文本和HTML</td>
			
 
				+            <td>String</td>
			
 
				+            <td>上一页</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>next</td>
			
 
				+            <td>自定义“下一页”的内容，同上</td>
			
 
				+            <td>String</td>
			
 
				+            <td>下一页</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>first</td>
			
 
				+            <td>自定义“首页”的内容，同上</td>
			
 
				+            <td>String</td>
			
 
				+            <td>1</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>last</td>
			
 
				+            <td>自定义“尾页”的内容，同上</td>
			
 
				+            <td>String</td>
			
 
				+            <td>总页数值</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>layout</td>
			
 
				+            <td>自定义排版。可选值有：<em>count</em>（总条目输区域）、<em>prev</em>（上一页区域）、<em>page</em>（分页区域）、<em>next</em>（下一页区域）、<em>limit</em>（条目选项区域）、<em>refresh</em>（页面刷新区域。注意：layui 2.3.0 新增） 、<em>skip</em>（快捷跳页区域）</td>
			
 
				+            <td>Array</td>
			
 
				+            <td>['prev', 'page', 'next']</td>
			
 
				+          </tr>
			
 
				+           <tr>
			
 
				+            <td>theme</td>
			
 
				+            <td>
			
 
				+              自定义主题。支持传入：<em>颜色值</em>，或<em>任意普通字符</em>。如：
			
 
				+              <br>1. theme: '#c00'
			
 
				+              <br>2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类，以便自定义主题
			
 
				+            </td>
			
 
				+            <td>String</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>hash</td>
			
 
				+            <td>开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：<em>#!hash值={curr}</em> 利用这个，可以在页面载入时就定位到指定页</td>
			
 
				+            <td>String/Boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="jump">jump - 切换分页的回调</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>当分页被切换时触发，函数返回两个参数：<em>obj</em>（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）</p>
			
 
				+      <pre class="layui-code">
			
 
				+laypage.render({
			
 
				+  elem: 'test1'
			
 
				+  ,count: 70 //数据总数，从服务端得到
			
 
				+  ,jump: function(obj, first){
			
 
				+    //obj包含了当前分页的所有参数，比如：
			
 
				+    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
			
 
				+    console.log(obj.limit); //得到每页显示的条数
			
 
				+    
			
 
				+    //首次不执行
			
 
				+    if(!first){
			
 
				+      //do something
			
 
				+    }
			
 
				+  }
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="">结束</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>laypage 只负责分页本身的逻辑，具体的数据请求与渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现。其中大家使用最多的 table 组件就是采用的 laypage 作为分页依赖。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/laytpl.html
+++ b/doc/modules/laytpl.html
@@ -0,0 +1,669 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@模板引擎文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>快速使用</cite></a></li>
			
 
				+  <li><a href="#syntax"><cite>模板语法</cite></a></li>
			
 
				+  <li><a href="#delimiters"><cite>分隔符</cite></a></li>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1"><i class="layui-icon">&#xe628;</i> 模板引擎文档 - layui.laytpl</h1>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      <p>laytpl 是 JavScript 模板引擎，在字符解析上有着比较出色的表现，欠缺之处在于异常调试上。由于传统意义的前端模板引擎已经变得不再流行，<em>所以 laytpl 后续可能会进行重写</em>，目前方向暂时还没有想好，预计会在layui比较稳定后开始实施。</p>
			
 
				+    </blockquote>
			
 
				+    <blockquote class="layui-elem-quote site-text">
			
 
				+      <p>模块加载名称：<em>laytpl</em>，在线调试：<a href="../../demo/laytpl.html" tppabs="http://www.layui.com/demo/laytpl.html" target="_blank">http://www.layui.com/demo/laytpl.html</a></p>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">快速使用</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>laytpl 模板可与数据共存，这意味着可直接在模板中处理逻辑。</p>
			
 
				+      <pre class="layui-code">
			
 
				+layui.use('laytpl', function(){
			
 
				+  var laytpl = layui.laytpl;
			
 
				+  
			
 
				+  //直接解析字符
			
 
				+  laytpl('{{ d.name }}是一位公猿').render({
			
 
				+    name: '贤心'
			
 
				+  }, function(string){
			
 
				+    console.log(string); //贤心是一位公猿
			
 
				+  });
			
 
				+  
			
 
				+  //你也可以采用下述同步写法，将 render 方法的回调函数剔除，可直接返回渲染好的字符
			
 
				+  var string =  laytpl('{{ d.name }}是一位公猿').render({
			
 
				+    name: '贤心'
			
 
				+  });
			
 
				+  console.log(string);  //贤心是一位公猿
			
 
				+  
			
 
				+  //如果模板较大，你也可以采用数据的写法，这样会比较直观一些
			
 
				+  laytpl([
			
 
				+    '{{ d.name }}是一位公猿'
			
 
				+    ,'其它字符 {{ d.content }}  其它字符'
			
 
				+  ].join(''))
			
 
				+}); 
			
 
				+      </pre>
			
 
				+      <p>你也可以将模板存储在页面或其它任意位置：</p>
			
 
				+      <pre class="layui-code">
			
 
				+//第一步：编写模版。你可以使用一个script标签存放模板，如：
			
 
				+&lt;script id="demo" type="text/html"&gt;
			
 
				+  &lt;h3&gt;{{ d.title }}&lt;/h3&gt;
			
 
				+  &lt;ul&gt;
			
 
				+  {{#  layui.each(d.list, function(index, item){ }}
			
 
				+    &lt;li>
			
 
				+      &lt;span&gt;{{ item.modname }}&lt;/span&gt;
			
 
				+      &lt;span&gt;{{ item.alias }}：&lt;/span&gt;
			
 
				+      &lt;span&gt;{{ item.site || '' }}&lt;/span&gt;
			
 
				+    &lt;/li&gt;
			
 
				+  {{#  }); }}
			
 
				+  {{#  if(d.list.length === 0){ }}
			
 
				+    无数据
			
 
				+  {{#  } }} 
			
 
				+  &lt;/ul&gt;
			
 
				+&lt;/script&gt;
			
 
				+ 
			
 
				+//第二步：建立视图。用于呈现渲染结果。
			
 
				+&lt;div id="view"&gt;&lt;/div&gt;
			
 
				+ 
			
 
				+//第三步：渲染模版
			
 
				+var data = { //数据
			
 
				+  "title":"Layui常用模块"
			
 
				+  ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
			
 
				+}
			
 
				+var getTpl = demo.innerHTML
			
 
				+,view = document.getElementById('view');
			
 
				+laytpl(getTpl).render(data, function(html){
			
 
				+  view.innerHTML = html;
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div> 
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="syntax">模版语法</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <table class="layui-table">
			
 
				+        <colgroup>
			
 
				+          <col width="200">
			
 
				+          <col>
			
 
				+          <col width="450">
			
 
				+        </colgroup>
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>语法</th>
			
 
				+            <th>说明</th>
			
 
				+            <th>示例</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>{{ d.field }}</td>
			
 
				+            <td>输出一个普通字段，不转义html</td>
			
 
				+            <td>
			
 
				+              <pre class="layui-code">
			
 
				+&lt;div>{{ d.content }}&lt;/div>
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>{{= d.field }}</td>
			
 
				+            <td>输出一个普通字段，并转义html</td>
			
 
				+            <td>
			
 
				+              <pre class="layui-code">
			
 
				+&lt;h2>{{= d.title }}&lt;/h2>
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>{{#  JavaScript表达式 }}</td>
			
 
				+            <td>JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。<br><br>注意：如果你是想输出一个函数，正确的写法是：{{ fn() }}，而不是：{{#  fn() }}</td>
			
 
				+            <td>
			
 
				+              <pre class="layui-code">
			
 
				+{{#  
			
 
				+  var fn = function(){
			
 
				+    return '2017-08-18';
			
 
				+  }; 
			
 
				+}}
			
 
				+ 
			
 
				+{{#  if(true){ }}
			
 
				+  开始日期：{{ fn() }}
			
 
				+{{#  } else { }}
			
 
				+  已截止
			
 
				+{{#  } }}           
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td> {{! template  !}}</td>
			
 
				+            <td>对一段指定的模板区域进行过滤，即不解析该区域的模板。注：layui 2.1.6 新增</td>
			
 
				+            <td>
			
 
				+              <pre class="layui-code">
			
 
				+&lt;div> {{! 这里面的模板不会被解析  !}}&lt;/div>
			
 
				+              </pre>
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="delimiters">分隔符</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>如果模版默认的  {{ }}  分隔符与你的其它模板（一般是服务端模板）存在冲突，你也可以重新定义分隔符：</p>
			
 
				+      <pre class="layui-code">
			
 
				+laytpl.config({
			
 
				+  open: '&lt;%',
			
 
				+  close: '%&gt;'
			
 
				+});
			
 
				+ 
			
 
				+//分割符将必须采用上述定义的
			
 
				+laytpl([
			
 
				+  '<%# var type = "公"; %>' //JS 表达式
			
 
				+  ,'<% d.name %>是一位<% type %>猿。'
			
 
				+].join('')).render({
			
 
				+  name: '贤心'
			
 
				+}, function(string){
			
 
				+  console.log(string); //贤心是一位公猿
			
 
				+});   
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="other">结语</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>laytpl 应用在 layui 的很多模块中，如：layim、table 等。尽管传统意义的前端模板引擎已经变得不再流行，但 laytpl 仍然可以发挥一定作用，不妨尝试一下吧。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/rate.html
+++ b/doc/modules/rate.html
@@ -0,0 +1,672 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@评分组件文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>使用</cite></a></li>
			
 
				+  <li><a href="#options"><cite>基础参数</cite></a></li>
			
 
				+  <li><a href="#score"><cite>分数设置</cite></a></li>
			
 
				+  <li>回调</li>
			
 
				+  <ul style="margin-left: 15px;">
			
 
				+    <li><a href="#onself">自定义文本的回调</a></li>
			
 
				+    <li><a href="#onclick">点击产生的回调</a></li>
			
 
				+  </ul>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1"><i class="layui-icon">&#xe67b;</i> 评分组件文档 - layui.rate</h1>
			
 
				+    <blockquote class="layui-elem-quote layui-text">
			
 
				+      rate 评分组件在电商和 O2O 平台尤为常见，一般用于对商家进行服务满意度评价。外形依然小巧自然，功能依旧灵活实用。其中评分对应的自定义内容功能，可让它有更多的发挥空间。该组件为 2.3.0 版本新增
			
 
				+    </blockquote>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      模块加载名称：<em>rate</em>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">使用</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>rate 组件可以用来进行展示或评价，你只需要通过更改参数设定来开启你想要的功能，如下是一个最基本的例子：</p>
			
 
				+      <pre class="layui-code" lay-title="layui.rate小例子">
			
 
				+&lt;!DOCTYPE html>
			
 
				+&lt;html>
			
 
				+&lt;head>
			
 
				+  &lt;meta charset="utf-8">
			
 
				+  &lt;title>评分组件&lt;/title>
			
 
				+  &lt;link rel="stylesheet" href="../src/css/layui.css">
			
 
				+&lt;/head>
			
 
				+&lt;body>
			
 
				+  &lt;div id="test1">&lt;/div>
			
 
				+  &lt;script src="../src/layui.js">&lt;/script>
			
 
				+  &lt;script>
			
 
				+  layui.use('rate', function(){
			
 
				+    var rate = layui.rate;
			
 
				+   
			
 
				+    //渲染
			
 
				+    var ins1 = rate.render({
			
 
				+      elem: '#test1'  //绑定元素
			
 
				+    });
			
 
				+  });
			
 
				+  &lt;/script>
			
 
				+&lt;/body>
			
 
				+&lt;/html>
			
 
				+      </pre>
			
 
				+      <p>这真的就是个小例子，所以下文对组件的参数进行了说明，请仔细阅读奥</p>
			
 
				+    </div> 
			
 
				+ 
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="options">基础参数</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>目前 rate 组件提供了以下基础参数，你可根据实际场景进行相应的设置</p>
			
 
				+      <table class="layui-table">
			
 
				+        <colgroup>
			
 
				+          <col width="120">
			
 
				+          <col>
			
 
				+          <col width="120">
			
 
				+          <col width="120">
			
 
				+        </colgroup>
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数选项</th>
			
 
				+            <th>说明</th>
			
 
				+            <th>类型</th>
			
 
				+            <th>默认值</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>elem</td>
			
 
				+            <td>指向容器选择器</td>
			
 
				+            <td>string/object</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>length</td>
			
 
				+            <td>评分组件中具体星星的个数。个数当然是整数啦，残缺的星星很可怜的，所以设置了小数点的组件我们会默认向下取整</td>
			
 
				+            <td>number</td>
			
 
				+            <td>5</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>value</td>
			
 
				+            <td>评分的初始值</td>
			
 
				+            <td>number</td>
			
 
				+            <td>0</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>theme</td>
			
 
				+            <td>主题颜色。我们默认的组件颜色是<em>#FFB800</em>，你可以根据自身喜好来更改组件的颜色，以适用不同场景</td>
			
 
				+            <td>string</td>
			
 
				+            <td>#FFB800</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>half</td>
			
 
				+            <td>设定组件是否可以选择半星</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>text</td>
			
 
				+            <td>是否显示评分对应的内容</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>readonly</td>
			
 
				+            <td>是否只读，即只用于展示而不可点</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div>   
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="score">分数设置</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text layui-text">
			
 
				+      <p>如若你设置分数，我们会根据你是否开启半星功能，来做一个具体的规范：
			
 
				+      
			
 
				+      <h4><strong>关闭半星功能:</strong></h4>
			
 
				+        <ul>
			
 
				+          <li><em>小数值大于 0.5 ：分数向上取整，如 3.6 分，则系统自动更改为 4 分 </em></li>
			
 
				+          <li><em>小数值小于等于 0.5 ：分数向下取整，如 3.2 分，则系统自动更改为 3 分 </em></li>
			
 
				+          <li><em>如果在关闭半星功能的情况下开启了文本，你会发现你的分数也相应的变成了整数</em></li>
			
 
				+        </ul>
			
 
				+      
			
 
				+      <h4><strong>开启半星功能:</strong></h4>
			
 
				+        <ul>
			
 
				+          <li><em>不论你的小数值是 0.1 还是 0.9，都统一规划为 0.5，在文本开启的情况下，你可以看见你的分数并没有发生变化</em></li>
			
 
				+        </ul>
			
 
				+      </p>
			
 
				+    </div>
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="onself">自定义文本的回调</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>通过 setText 函数，在组件初次渲染和点击后时产生回调。我们默认文本以星级显示，你可以根据自己设定的文字来替换我们的默认文本，如 “讨厌” “喜欢” 。若用户选择分数而没有设定对应文字的情况下，系统会使用我们的默认文本</p>
			
 
				+      <pre class="layui-code" lay-title="例子"> 
			
 
				+rate.render({
			
 
				+  elem: '#test1'
			
 
				+  ,setText: function(value){
			
 
				+    var arrs = {
			
 
				+      '1': '极差'
			
 
				+      ,'2': '差'
			
 
				+      ,'3': '中等'
			
 
				+      ,'4': '好'
			
 
				+    };
			
 
				+    this.span.text(arrs[value] || ( value + "星"));
			
 
				+  }
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p>当你点击 3 星时，文本内容是中等，点击 5 星时，由于没有设定对应文字，所以文本会显示 5 星</p>
			
 
				+    </div>
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="onclick">点击产生的回调</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>通过 choose 实现函数，在组件被点击后触发，回调分数，用户可根据分数来设置效果，比如出现弹出层</p>
			
 
				+      <pre class="layui-code" lay-title="例子">
			
 
				+rate.render({
			
 
				+  elem: '#test1'
			
 
				+  ,choose: function(value){
			
 
				+    if(value > 4) alert( '么么哒' )
			
 
				+  }
			
 
				+});
			
 
				+      </pre>
			
 
				+      <p>那么当你点击 5 星或更高星级时，页面就会弹出“么么哒”啦，你可根据相应需求在 choose 里完善你的代码</p>
			
 
				+    </div>
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="docend">结语</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>评分组件非常简单，重点在于参数选项的设置，你可以前往示例页面进行更为直观的了解。</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048260'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/slider.html
+++ b/doc/modules/slider.html
@@ -0,0 +1,737 @@
 
				+ 
			
 
				+ 
			
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>镜像站@滑块文档 - Layui</title>
			
 
				+<meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
			
 
				+  <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+  <meta name="format-detection" content="telephone=no">
			
 
				+  <script>
			
 
				+  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
			
 
				+  </script>
			
 
				+  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355"  media="all">
			
 
				+  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048355-19" media="all">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+<div class="layui-header header header-doc" autumn>
			
 
				+  <div class="layui-container">
			
 
				+    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
			
 
				+      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
			
 
				+    </a>
			
 
				+    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
			
 
				+    <div class="layui-hide-xs site-notice"></div>
			
 
				+    
			
 
				+    <ul class="layui-nav" id="LAY_NAV_TOP">
			
 
				+      <li class="layui-nav-item layui-this">
			
 
				+        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
			
 
				+      </li>
			
 
				+      <li class="layui-nav-item ">
			
 
				+        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item">
			
 
				+        <a href="javascript:;">
			
 
				+          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
			
 
				+          周边
			
 
				+        </a>
			
 
				+        <dl class="layui-nav-child layui-nav-child-c">  
			
 
				+          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
			
 
				+            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
			
 
				+            <hr>
			
 
				+          </dd>
			
 
				+          
			
 
				+          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
			
 
				+          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
			
 
				+        </dl>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-nav-item layui-hide-xs">
			
 
				+        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</div>
			
 
				+ 
			
 
				+<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
			
 
				+<!--[if lt IE 9]>
			
 
				+  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			
 
				+  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			
 
				+<![endif]-->
			
 
				+ 
			
 
				+<ul class="site-dir">
			
 
				+  <li><a href="#use"><cite>使用</cite></a></li>
			
 
				+  <li><a href="#options"><cite>基础参数</cite></a></li>
			
 
				+  <li>回调函数</li>
			
 
				+  <ul style="margin-left: 15px;">
			
 
				+    <li><a href="#ontips"><cite>自定义提示文本</cite></a></li>
			
 
				+    <li><a href="#change"><cite>数值改变的回调</cite></a></li>
			
 
				+  </ul>
			
 
				+  <li>实例方法</li>
			
 
				+  <ul style="margin-left: 15px;">
			
 
				+    <li><a href="#setValue"><cite>动态改变滑块数值</cite></a></li>
			
 
				+  </ul>
			
 
				+</ul>
			
 
				+<div class="layui-container layui-row">
			
 
				+  
			
 
				+<div class="layui-col-md3">
			
 
				+  <div class="layui-panel site-menu">
			
 
				+    <ul class="layui-menu layui-menu-lg">
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          基础说明
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../index.html" tppabs="http://www.layui.com/doc/">
			
 
				+                <span>开始使用 </span> 
			
 
				+                <span class="layui-font-12 layui-font-gray">Getting Started</span>
			
 
				+              </a>
			
 
				+              
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
			
 
				+                <span>底层方法 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">基础支撑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
			
 
				+                <span>页面元素 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
			
 
				+                <span>模块规范 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
			
 
				+                <span>常见问题 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">FAQ</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
			
 
				+                <span>更新日志 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">changelog</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          页面元素
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
			
 
				+                <span>布局 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
			
 
				+                <span>颜色 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
			
 
				+                <span>图标 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
			
 
				+                <span>动画 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
			
 
				+                <span>按钮 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">button</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
			
 
				+                <span>导航 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
			
 
				+                <span>菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
			
 
				+                <span>选项卡 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
			
 
				+                <span>进度条 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">progress</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
			
 
				+                <span>面板 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
			
 
				+                <span>表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">静态 table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
			
 
				+                <span>徽章 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
			
 
				+                <span>时间线 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">timeline</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
			
 
				+                <span>辅助 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+      
			
 
				+      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
			
 
				+        <div class="layui-menu-body-title">
			
 
				+          内置模块
			
 
				+        </div>
			
 
				+        <hr>
			
 
				+        <ul>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
			
 
				+                <span>弹出层 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
			
 
				+                <span>日期与时间选择 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laydate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
			
 
				+                <span>分页 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laypage</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
			
 
				+                <span>模板引擎 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">laytpl</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
			
 
				+                <span>数据表格 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">table</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
			
 
				+                <span>表单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">form</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
			
 
				+                <span>文件上传 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">upload</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
			
 
				+                <span>下拉菜单 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">dropdown</span>
			
 
				+                
			
 
				+                  <span class="layui-badge-dot"></span>
			
 
				+                
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
			
 
				+                <span>穿梭框 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">transfer</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
			
 
				+                <span>树形组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">tree</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
			
 
				+                <span>颜色选择器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">colorpicker</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
			
 
				+                <span>常用元素操作 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">element</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="layui-menu-item-checked2">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
			
 
				+                <span>滑块 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">slider</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
			
 
				+                <span>评分 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">rate</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
			
 
				+                <span>轮播 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">carousel</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
			
 
				+                <span>富文本编辑器 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">layedit</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
			
 
				+                <span>流加载 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">flow</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
			
 
				+                <span>工具组件 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">util</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          <li class="">
			
 
				+            <div class="layui-menu-body-title">
			
 
				+              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
			
 
				+                <span>代码高亮显示 </span>
			
 
				+                <span class="layui-font-12 layui-font-gray">code</span>
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+  <div class="layui-hide-v"> - </div>
			
 
				+</div>
			
 
				+
			
 
				+  
			
 
				+  <div class="layui-col-md9 site-content">
			
 
				+    <h1 class="site-h1"><i class="layui-icon layui-icon-slider"></i> 滑块文档 - layui.slider</h1>
			
 
				+    <blockquote class="layui-elem-quote layui-text">
			
 
				+      作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。layui 深以为然，slider 模块包含了你能想到的大部分功能，尽管它可以作为一个独立的个体，但很多时候它往往会出现 form 元素中，想象一下吧。
			
 
				+    </blockquote>
			
 
				+    <blockquote class="layui-elem-quote">
			
 
				+      模块加载名称：<em>slider</em>
			
 
				+      <p class="layui-text" style="margin-top: 10px;">注意：<em>slider 为 layui 2.4.0 新增模块</em></p>
			
 
				+    </blockquote>
			
 
				+    
			
 
				+    
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="use">使用</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>通过对 slider 模块的使用，你可以在页面构建出可拖动的滑动元素，如下是一个最基本的用法：</p>
			
 
				+      <pre class="layui-code" lay-title="小例子">
			
 
				+&lt;!DOCTYPE html>
			
 
				+&lt;html>
			
 
				+&lt;head>
			
 
				+  &lt;meta charset="utf-8">
			
 
				+  &lt;title>滑块&lt;/title>
			
 
				+  &lt;link rel="stylesheet" href="../src/css/layui.css">
			
 
				+&lt;/head>
			
 
				+&lt;body>
			
 
				+&lt;div id="slideTest1">&lt;/div>
			
 
				+&lt;script src="../src/layui.js">&lt;/script>
			
 
				+&lt;script>
			
 
				+layui.use('slider', function(){
			
 
				+  var slider = layui.slider;
			
 
				+  
			
 
				+  //渲染
			
 
				+  slider.render({
			
 
				+    elem: '#slideTest1'  //绑定元素
			
 
				+  });
			
 
				+});
			
 
				+&lt;/script>
			
 
				+&lt;/body>
			
 
				+&lt;/html>
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+ 
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="options">基础参数</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>slider 组件支持以下参数</p>
			
 
				+      <table class="layui-table">
			
 
				+        <colgroup>
			
 
				+          <col width="120">
			
 
				+          <col>
			
 
				+          <col>
			
 
				+          <col width="100">
			
 
				+        </colgroup>
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th>参数选项</th>
			
 
				+            <th>说明</th>
			
 
				+            <th>类型</th>
			
 
				+            <th>默认值</th>
			
 
				+          </tr> 
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr>
			
 
				+            <td>elem</td>
			
 
				+            <td>指向容器选择器</td>
			
 
				+            <td>string/object</td>
			
 
				+            <td>-</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>type</td>
			
 
				+            <td>滑块类型，可选值有：<em>default</em>（水平滑块）、<em>vertical</em>（垂直滑块）</td>
			
 
				+            <td>string</td>
			
 
				+            <td>default</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>min</td>
			
 
				+            <td>滑动条最小值，正整数，默认为 0 </td>
			
 
				+            <td>number</td>
			
 
				+            <td>0</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>max</td>
			
 
				+            <td>滑动条最大值</td>
			
 
				+            <td>number</td>
			
 
				+            <td>100</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>range</td>
			
 
				+            <td>是否开启滑块的范围拖拽，若设为 true，则滑块将出现两个可拖拽的环</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>value</td>
			
 
				+            <td>滑块初始值，默认为数字，若开启了滑块为范围拖拽（即 range: true），则需赋值数组，异表示开始和结尾的区间，如：value: [30, 60]</td>
			
 
				+            <td>number/Array</td>
			
 
				+            <td>0</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>step</td>
			
 
				+            <td>拖动的步长</td>
			
 
				+            <td>number</td>
			
 
				+            <td>1</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>showstep</td>
			
 
				+            <td>是否显示间断点</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>tips</td>
			
 
				+            <td>是否显示文字提示</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>true</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>input</td>
			
 
				+            <td>
			
 
				+              是否显示输入框（注意：若 range 参数为 true 则强制无效）
			
 
				+              <br>点击输入框的上下按钮，以及输入任意数字后回车或失去焦点，均可动态改变滑块
			
 
				+            </td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>height</td>
			
 
				+            <td>滑动条高度，需配合 type:"vertical" 参数使用</td>
			
 
				+            <td>number</td>
			
 
				+            <td>200</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>disabled</td>
			
 
				+            <td>是否将滑块禁用拖拽</td>
			
 
				+            <td>boolean</td>
			
 
				+            <td>false</td>
			
 
				+          </tr>
			
 
				+          <tr>
			
 
				+            <td>theme</td>
			
 
				+            <td>主题颜色，以便用在不同的主题风格下</td>
			
 
				+            <td>string</td>
			
 
				+            <td>#009688</td>
			
 
				+          </tr>          
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </div> 
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="ontips">自定义提示文本</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>当鼠标放在圆点和滑块拖拽时均会触发提示层。其默认显示的文本是它的对应数值，你也可以自定义提示内容：</p>
			
 
				+      <pre class="layui-code" lay-title="例子">
			
 
				+slider.render({
			
 
				+  elem: '#slideTest1'
			
 
				+  ,setTips: function(value){ //自定义提示文本
			
 
				+    return value + '%';
			
 
				+  }
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="change">数值改变的回调</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>在滑块数值被改变时触发。该回调非常重要，可动态获得滑块当前的数值。你可以将得到的数值，赋值给隐藏域，或者进行一些其它操作。</p>
			
 
				+      <pre class="layui-code" lay-title="小例子">
			
 
				+//当滑块为普通模式，回调返回的 value 是一个数值
			
 
				+slider.render({
			
 
				+  elem: '#slideTest1'
			
 
				+  ,change: function(value){
			
 
				+    console.log(value) //动态获取滑块数值
			
 
				+    //do something
			
 
				+  }
			
 
				+});
			
 
				+ 
			
 
				+//当滑块为范围模式，回调返回的 value 是一个数组，包含开始和结尾
			
 
				+slider.render({
			
 
				+  elem: '#slideTest1'
			
 
				+  ,range: true
			
 
				+  ,change: function(value){
			
 
				+    console.log(value[0]) //得到开始值
			
 
				+    console.log(value[1]) //得到结尾值
			
 
				+    //do something
			
 
				+  }
			
 
				+});
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="method">实例方法</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>
			
 
				+        执行 slider 实例时，会返回一个当前实例的对象，里面包含针对当前实例的方法和属性。
			
 
				+        <br>语法：<em>var ins1 = slider.render(options);</em>
			
 
				+      </p>
			
 
				+      <pre class="layui-code" lay-title="实例方法和属性">
			
 
				+var ins1 = slider.render(options); //获得实例对象
			
 
				+ 
			
 
				+ins1.config //获得当前实例的配置项
			
 
				+ins1.setValue(nums); //动态给滑块赋值
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="setValue">动态改变滑块数值</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>你可以通过外部方法动态改变滑块数值，如：</p>
			
 
				+      <pre class="layui-code">
			
 
				+var ins1 = slider.render({
			
 
				+  elem: '#test1'
			
 
				+  //…
			
 
				+});      
			
 
				+ 
			
 
				+//改变指定滑块实例的数值
			
 
				+ins1.setValue(20)
			
 
				+ 
			
 
				+//若滑块开启了范围（range: true）
			
 
				+ins1.setValue(20, 0) //设置开始值
			
 
				+ins1.setValue(60, 1) //设置结尾值
			
 
				+      </pre>
			
 
				+    </div>
			
 
				+    
			
 
				+    <fieldset class="layui-elem-field layui-field-title site-title">
			
 
				+      <legend><a name="docend">结语</a></legend>
			
 
				+    </fieldset>
			
 
				+    <div class="site-text">
			
 
				+      <p>layui.slider 可以大幅度提升你 Web 应用中的很多操作体验，可尽情发挥。</p>
			
 
				+    </div>
			
 
				+ 
			
 
				+    <div class="layui-elem-quote">
			
 
				+  <p>layui - 在每一个细节中，用心与你沟通</p>
			
 
				+</div>
			
 
				+    
			
 
				+  </div>
			
 
				+</div>
			
 
				+  
			
 
				+
			
 
				+<div class="layui-footer footer footer-doc">
			
 
				+    <p>
			
 
				+      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
			
 
				+    <p>
			
 
				+      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
			
 
				+      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
			
 
				+      <a href="javascript:;"  site-event="weixinmp">公众号</a>
			
 
				+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=00000000000000"  rel="nofollow">
			
 
				+        <img src="/public/upload/2021_8/168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
			
 
				+        公网安备 00000000000000号
			
 
				+      </a>
			
 
				+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
			
 
				+    </p>
			
 
				+    <div class="site-union">
			
 
				+      <p class="site-union-desc">
			
 
				+        <span>
			
 
				+          感谢以下平台提供云加速支持
			
 
				+        </span>
			
 
				+      </p>
			
 
				+
			
 
				+    </div>
			
 
				+</div>
			
 
				+<script>
			
 
				+window.global = {
			
 
				+  pageType: 'doc'
			
 
				+  ,preview: function(){
			
 
				+    var preview = document.getElementById('LAY_preview');
			
 
				+    return preview ? preview.innerHTML : '';
			
 
				+  }()
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<div class="site-tree-mobile layui-hide">
			
 
				+  <i class="layui-icon layui-icon-spread-left"></i>
			
 
				+</div>
			
 
				+<div class="site-mobile-shade"></div>
			
 
				+ 
			
 
				+<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048355" charset="utf-8"></script>
			
 
				+<script>
			
 
				+layui.config({
			
 
				+  base: '/public/static/lay/modules/layui/'
			
 
				+  ,version: '1632428048355'
			
 
				+}).use('global');
			
 
				+</script>
			
 
				+ 
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/modules/table.html
+++ b/doc/modules/table.html