Merge pull request #1249 from layui/2.x

release v2.8.2
2023-05-04 10:34:10 +08:00 · 2023-05-04 10:34:10 +08:00 · 30ed8acd41
parent 581900bfe7 2cfa294c3f
commit 30ed8acd41
140 changed files with 1094 additions and 560 deletions
--- a/README.md
+++ b/README.md
@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://layui.github.io/">
+  <a href="https://layui.dev">
    <img src="https://unpkg.com/outeres@0.1.0/img/layui/logo-icon.png" width="81" alt="Layui">
  </a>
 </p>
@ -67,7 +67,7 @@ Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化

 2016年10月14日，Layui 发布了 `1.0.0` 首版，此后多年被广泛应用在不计其数的 Web 平台。

-2021年10月13日，Layui 发布了原官网下线的公告（<a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png"  target="_blank">导读</a>），并将文档站点切换到了 Gitee Pages，社区及日常维护亦全面转移到了 Gitee 和 Github 平台，并顺带呼吁大家拥抱其他更好的主流框架，导致大家误以为 Layui 停更了。事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，从当时的 `2.6.8` 一直连续迭代到如今的最新版本。
+2021年10月13日，Layui 发布了原官网下线的公告（<a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png"  target="_blank">导读</a>），并将文档站点切换到了 Gitee Pages，社区及日常维护亦全面转移到了 Gitee 和 Github 平台，以此呼吁大家拥抱其他更好的主流框架，导致大家误以为 Layui 停更了。事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，从当时的 `2.6.8` 一直连续迭代到如今的最新版本。

 2023年4月24日，Layui 发布了 `2.8.0` 正式版，并上线了[新的文档站点](https://layui.dev)，这是一次朴实的回归，更是情怀的延续。 但我们仍然坚持两年前那则公告中的观点， _即仍然推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性_。 **而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙**。Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作。作为开源创作者，应该要为这些坚持者而守望。

--- a/dist/css/layui.css
+++ b/dist/css/layui.css
--- a/dist/font/iconfont.eot
+++ b/dist/font/iconfont.eot
--- a/dist/font/iconfont.svg
+++ b/dist/font/iconfont.svg
@ -14,6 +14,8 @@
    />
      <missing-glyph />
      
+      <glyph glyph-name="edge" unicode="&#59019;" d="M240.185509 821.062741C322.180562 871.479699 415.37494 897.48813 509.969233 895.934224 845.948962 895.934224 1023.938224 648.353161 1023.938224 456.964708c-0.199988-65.396055-25.998431-127.79229-71.795669-174.389479-45.797237-46.397201-107.993485-72.995596-173.389539-73.995536-150.390927 0-182.98896 46.197213-182.98896 63.996139 0 7.599542 2.399855 12.399252 9.599421 18.798866l1.99988 2.399855 0.799951 3.199807c20.998733 22.998612 31.798082 52.396839 31.798082 83.194981 0 157.390504-164.390082 285.382782-367.977799 285.382782-75.075471 0.599964-149.071006-17.798926-215.027027-53.796754 53.996742 115.03306 165.430019 195.188224 182.628981 207.627473 1.599903 1.099934 0.599964 1.679899 0.599964 1.679899z m31.198118-636.081624c-2.799831-59.99638 9.199445-119.992761 32.798021-174.389479 27.198359-52.796815 65.396055-101.993847 112.993183-138.591638-118.992821 22.998612-222.966548 87.794703-298.781974 178.589225C42.237452 143.383627 0 259.176641 0 380.169341c0 102.393822 124.792471 188.78861 271.983591 188.78861 73.195584 1.199928 144.791264-21.798685 203.587717-65.396054l-7.199566-2.399856c-102.993786-35.197876-196.988115-181.389056-196.988115-316.180924zM939.543315 95.986486l-1.399915-0.199987c-23.598576-37.597732-51.796875-70.195765-84.394908-98.994028-61.596284-55.996622-136.191783-90.99451-217.586873-99.793979-37.197756-0.599964-73.59556 6.399614-107.593509 22.798624-51.196911 20.598757-94.194317 59.99638-123.192567 105.993605-28.798263 47.797116-42.197454 103.393762-37.997708 159.190396-1.199928 40.197575 10.799348 80.595138 29.99819 116.392978 27.798323-66.196006 74.995475-122.592604 135.191844-161.590251 60.196368-38.997647 130.992097-58.996441 202.787766-57.196549 61.99626-0.599964 124.192507 13.399192 180.389116 40.997526l3.799771 1.799892c7.799529 4.599722 15.399071 7.799529 23.1986 0 8.999457-9.799409 3.599783-18.39889-2.399855-27.998311-0.399976-0.399976-0.599964-0.99994-0.799952-1.399916z"  horiz-adv-x="1024" />
+      
      <glyph glyph-name="leaf" unicode="&#59137;" d="M1017.948269 886.876437c-4.863707 5.785251-12.031275 9.113051-19.557222 9.113051l-26.110427 0c-258.032454 0.102394-461.847374 0.153591-611.905533-35.735447-80.635142-19.301237-142.992985-48.432282-190.606116-89.031436-51.401703-43.82456-86.420393-101.216302-107.155144-175.554223-13.77197-49.353826-20.222782-138.487656 6.96278-227.160714 10.034595-32.766026 25.700852-63.688963 46.589193-92.103251-62.255449-97.530124-116.063407-225.983185-116.063407-378.805977 0-14.130349 11.468109-25.598458 25.598458-25.598458s25.598458 11.468109 25.598458 25.598458c0 235.761795 139.665185 410.650458 222.91137 493.845446 59.7468 59.7468 127.275532 110.175762 195.367429 145.808815 63.381781 33.175601 123.947732 51.4529 170.536925 51.4529 14.130349 0 25.598458 11.468109 25.598458 25.598458s-11.468109 25.598458-25.598458 25.598458c-55.497456 0-122.667809-19.813206-194.241097-57.340545-72.597226-38.039308-144.477695-91.591282-207.80828-154.973063-26.72479-26.72479-58.876453-62.357843-90.823328-105.977615-12.389654 19.506025-22.014674 40.189579-28.619076 61.794677-25.598458 83.553366-16.178225 164.034917-6.604402 198.388047 73.211589 262.384191 351.313233 263.049751 855.858835 262.896161-60.156376-321.926204-172.328817-530.29765-333.599101-619.533873-149.597387-82.785412-297.966048-37.629733-354.845821-14.335136-11.980078 4.914904-24.06255 10.95614-35.786644 17.91892-12.133669 7.218765-27.851122 3.225406-35.069887-8.908263s-3.225406-27.851122 8.908263-35.069887c13.925561-8.2939 28.260697-15.461468 42.595834-21.349114 31.844481-13.004017 83.143791-29.694211 146.679163-35.172281 14.027955-1.228726 27.902319-1.791892 41.674289-1.791892 75.208269 0 145.860012 18.072511 210.675307 53.910352 82.375837 45.565255 153.641943 119.749585 211.904033 220.351524 68.296685 118.00889 119.698388 274.51786 152.720399 465.175173 1.279923 7.423553-0.767954 15.051893-5.631661 20.837145z"  horiz-adv-x="1025" />
      
      <glyph glyph-name="folder" unicode="&#60094;" d="M970.666667 682.666667H542.173333L429.793333 795.046667A52.986667 52.986667 0 0 1 392.08 810.666667H96a53.393333 53.393333 0 0 1-53.333333-53.333334v-704a53.393333 53.393333 0 0 1 53.333333-53.333333h874.666667a53.393333 53.393333 0 0 1 53.333333 53.333333V629.333333a53.393333 53.393333 0 0 1-53.333333 53.333334zM96 768h296.08a10.573333 10.573333 0 0 0 7.54-3.126667L481.826667 682.666667H96a53.546667 53.546667 0 0 1-10.666667-1.073334V757.333333a10.666667 10.666667 0 0 0 10.666667 10.666667z m885.333333-714.666667a10.666667 10.666667 0 0 0-10.666666-10.666666H96a10.666667 10.666667 0 0 0-10.666667 10.666666V629.333333a10.666667 10.666667 0 0 0 10.666667 10.666667h874.666667a10.666667 10.666667 0 0 0 10.666666-10.666667z"  horiz-adv-x="1024" />
@ -66,8 +68,6 @@
      
      <glyph glyph-name="chrome" unicode="&#59018;" d="M515.436 583.685H914.285C840.842 730.955 688.748 832.132 513 832.132c-141.284 0-267.274-65.395-349.42-167.546l151.66-262.682c8.535 102.325 95.704 181.781 200.196 181.781zM514.218 550.803c-91.476 0-165.631-74.155-165.631-165.631s74.155-165.631 165.631-165.631c52.7 0 99.615 24.642 129.95 62.999l1.428 2.474 0.355-0.205c21.252 27.852 33.898 62.624 33.898 100.363 0 84.774-63.702 154.626-145.841 164.413l-6.393 0.632c-4.424 0.354-8.882 0.586-13.397 0.586zM929.561 549.585H627.443c52.209-36.066 86.506-96.297 86.506-164.413 0-45.547-18.268-81.598-41.12-121.192L483.898-63.257c9.624-0.617 19.322-0.966 29.102-0.966 247.521 0 448.177 200.656 448.177 448.177 0 58.508-11.225 114.391-31.616 165.631zM514.218 185.441c-83.583 0-144.927 54.804-185.034 124.651l-0.235-0.136-187.482 324.727C93.081 563.124 64.823 476.84 64.823 383.954c0-225.02 165.839-411.288 381.958-443.298l152.278 263.752c-25.769-12.143-54.518-18.967-84.841-18.967z"  horiz-adv-x="1024" />
      
-      <glyph glyph-name="edge" unicode="&#59019;" d="M854.794 669.297C797.923 743.783 683.626 823.59 548.62 830.822 136.707 852.889 85.742 435.448 85.742 435.448c55.449 53.038 58.01 97.116 163.936 154.293C673.983 818.768 676.394 476.432 676.394 476.432H346.111c-7.232 65.092 62.681 137.417 62.681 137.417-202.509-98.844-216.974-284.477-216.974-284.477s-28.93-279.655 219.385-364.034 452.029 42.189 452.029 42.189V193.16c-59.065-32.546-102.292-54.405-153.087-63.887-361.623-67.503-364.034 188.044-364.034 188.044h585.83c0 0.001 39.075 199.761-77.147 351.98z"  horiz-adv-x="1024" />
-      
      <glyph glyph-name="heart" unicode="&#59020;" d="M512 4.100000000000023c-108.9 0-447.3 277.5-447.3 522.2 0 131 106.6 237.6 237.6 237.6 94.9 0 174.8-50.2 209.7-76.1 34.9 25.9 114.8 76.1 209.7 76.1 131 0 237.6-106.6 237.6-237.6 0-244.7-338.4-522.2-447.3-522.2zM302.3 708c-100.2 0-181.7-81.5-181.7-181.7 0-221 326.8-466.3 391.4-466.3s391.4 245.3 391.4 466.3c0 100.2-81.5 181.7-181.7 181.7-103.9 0-190.2-76-191.1-76.8-10.6-9.5-26.7-9.5-37.3 0-0.8 0.8-87.7 76.8-191 76.8z"  horiz-adv-x="1024" />
      
      <glyph glyph-name="key" unicode="&#59011;" d="M819.2 588.8c0-172.8-140.8-307.2-307.2-307.2-172.8 0-307.2 140.8-307.2 307.2C204.8 755.2 339.2 896 512 896S819.2 755.2 819.2 588.8L819.2 588.8zM512 838.4c-140.8 0-249.6-115.2-249.6-249.6 0-134.4 108.8-256 249.6-256s256 115.2 256 249.6S652.8 838.4 512 838.4L512 838.4zM480 300.79999999999995l64 0L544-128l-64 0L480 300.79999999999995 480 300.79999999999995zM512 192l192 0 0-64L512 128 512 192 512 192zM512 64l192 0 0-64L512 0 512 64 512 64z"  horiz-adv-x="1024" />
--- a/dist/font/iconfont.ttf
+++ b/dist/font/iconfont.ttf
--- a/dist/font/iconfont.woff
+++ b/dist/font/iconfont.woff
--- a/dist/font/iconfont.woff2
+++ b/dist/font/iconfont.woff2
--- a/dist/layui.js
+++ b/dist/layui.js
--- a/docs/.layui/DOCS_TEMPLATE_OPTIONS.md
+++ b/docs/.layui/DOCS_TEMPLATE_OPTIONS.md
--- a/docs/.layui/DOCS_TEMPLATE_DEMO.md
+++ b/docs/.layui/DOCS_TEMPLATE_DEMO.md
@ -1,6 +1,8 @@
 <pre class="layui-code" lay-options="{preview: true, text: {preview: '综合用法'}, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 AAA
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var MOD_NAME = layui.MOD_NAME;
@ -16,6 +18,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 AAA
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var MOD_NAME = layui.MOD_NAME;
--- a/docs/.layui/DOCS_TEMPLATE.md
+++ b/docs/.layui/DOCS_TEMPLATE.md
--- a/docs/@note/2.8/news.md
+++ b/docs/@note/2.8/news.md
@ -1,21 +1,34 @@
 ---
-title: 🚀 Layui 2.8.0 正式发布，朴实归来
+title: 🚀 Layui 2.8.0 正式发布，全新文档站朴实归来
 toc: false
 ---
 
-# 🚀 Layui 2.8.0 正式发布，朴实归来
+# 🚀 Layui 2.8.0 正式发布，全新文档站朴实归来
+
+<p style="text-align: center;">
+  <span class="layui-badge-rim">发布：2023-04-24</span>
+</p>

 我们终于迎来了 Layui `2.8.0` 的正式版本，以及全新的文档站。

 在 Layui 过往七年的开源历程中，从未用多达**二十个预览版**去为一个正式版而引路。 显然，`2.8.0` 是 Layui 一次朴实的回归，更是情怀的延续。但却并不是想以此呼吁人们重新去选择它，我们仍然坚持两年前那则《[Layui 原官网下线公告](https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png)》中的观点， _即仍然推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性_。 **而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙**。

-Layui 虽然并不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作，作为开源创作者的我们，应该要为这些坚持者而守望。
+Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作，作为开源创作者的我们，应该要为这些坚持者而守望。

 ### 新文档站

-在 2021 年 Layui 原官网下线后，互联网出现了许多第三方的 Layui 文档镜像站点，这在当时，给大家能继续阅读文档确实提供了便利，但原官网的下线，只是单纯一个网站自身生命周期的结束，它并不意味着 Layui 这样一个开源项目的停更，当时的公告其实也说的很清楚了，但或许是由于那则公告的用词过于「悲壮」，使得各大自媒体有所误读，从而让大家都以为是 Layui 停更了。 事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，甚至从 `2.6.9` 一直迭代到今天的 `2.8.0`，而现存的第三方文档镜像站点的内容却仍然定格在 Layui `2.6.8` 的版本，已严重滞后于 Layui 的当前版本，显然是不利于开发者们对 Layui 的应用。 两年来，Layui 始终处于没有中心文档的窘迫境地，虽然也一度以 **Gitee Pages** 为文档的承载，但似乎很难形成一个焦点和归属感。 随着 `2.8.0` 正式版本的发布，它所包含的上百项的更新内容，使得全新的文档站点呼之欲出。
+2021 年 Layui 原官网下线后，互联网出现了许多第三方的 Layui 文档镜像站，这在当时，给大家能继续阅读文档确实提供了便利，但原官网的下线，只是单纯一个网站自身生命周期的结束，它并不意味着 Layui 这样一个开源项目的停更，这在公告中也有清晰的阐述。但或许是由于那则公告的用词过于「悲壮」，使得各大自媒体有所误读，从而让大家都以为是 Layui 停更了。 事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，甚至从 `2.6.9` 一直迭代到今天的最新版本，而现存的第三方文档镜像站点的内容却仍然定格在 Layui `2.6.8` 的版本，已严重滞后于 Layui 的当前版本，显然是不利于开发者们对 Layui 的应用。 两年来，Layui 始终处于没有中心文档的窘迫境地，虽然也一度以 **Gitee Pages** 为文档的承载，但似乎很难形成一个焦点和归属感。 随着 `2.8.0` 正式版本的发布，它所包含的上百项的内容更新，使得全新的文档站呼之欲出。

 此次上线的新版文档站，旨在为朴实归来的 Layui 提供一个新的精神「基站」，它基于 laytpl 和 markdown 驱动，在版面上进行了大量优化，内容重新编写、力求精简，以辅助大家更好地使用 Layui。 同时，Layui 文档也已和 Layui 本身一同开源在项目中，以供大家在线和离线都能阅读以及协同维护。

 - **文档协作:** https://github.com/layui/layui/tree/main/docs
 - **文档阅读:** https://layui.dev
+
+---
+
+<div class="layui-btn-container">
+  <a class="layui-btn" href="https://gitee.com/layui/layui/issues/I6Y8EN" target="_blank">我要评论</a>
+  <a class="layui-btn layui-btn-primary" href="../../versions.html#2.8.x">
+    <i class="layui-icon layui-icon-left"></i> 更新日志
+  </a>
+</div>
--- a/docs/@note/2.8/upgrade-guide.md
+++ b/docs/@note/2.8/upgrade-guide.md
@ -1,9 +1,9 @@
 ---
-title: Layui 2.8 《升级指南》
+title: 📑 Layui 2.8 《升级指南》
 toc: false
 ---
 
-# Layui 2.8 《升级指南》
+# 📑 Layui 2.8 《升级指南》

 Layui `2.8` 总体向下兼容，但仍有以下变更需要注意：

@ -42,3 +42,13 @@ Layui `2.8` 总体向下兼容，但仍有以下变更需要注意：
 https://layui.dev/docs/versions.html

 或新建 `Issue` 进行详细反馈。
+
+---
+
+<div class="layui-btn-container">
+  <a class="layui-btn" href="https://gitee.com/layui/layui/issues/" target="_blank" style="word-spacing: normal;">前往 Issues</a>
+  <a class="layui-btn layui-btn-primary" href="../../versions.html#2.8.x">
+    <i class="layui-icon layui-icon-left"></i> 更新日志
+  </a>
+</div>
+
--- a/docs/README.md
+++ b/docs/README.md
@ -1,4 +1,24 @@
 # Docs

+## 文档预览
+
 - [最新文档](https://layui.dev)
- [2.7 文档](https://layui.dev/2.7/)
+- [2.7 文档](https://layui.dev/2.7/)
+
+## 目录规范
+
+文档的目录与文件命名，需与组件的命名对应。子目录可自由发挥，但一般可参考以下规则：
+
+- `index.md` 组件主文件
+- `detail/` 组件详情文件。一般在主文件内容过大时，可将内容碎片放置在该目录中，主文件只需引用即可。
+- `examples/` 组件示例文件。
+
+当创建新的组件文档时，可复制 `.layui/` 目录中放置好的文档模板，并填充对应的内容。
+
+## 书写规范
+
+文档采用 `HTML+Markdown+laytpl` 混合编写。 其中：
+
+- `HTML` 标签与 `Markdown` 混用时，必须换两行隔开
+- `laytpl` 标签语法可直接遵循 Layui 中的 laytpl 组件规则
+- 若需开启文档的右侧目录，可在对应锚点元素上添加 `lay-toc="{}"` 属性即可，具体可参考其他组件中的内容
--- a/docs/anim/index.md
+++ b/docs/anim/index.md
@ -16,7 +16,7 @@ toc: true

 <h2 id="usage" lay-toc="">示例</h2>

-<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'max-height: 350px;'}">
+<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 535px;'}">
  <textarea>
 <div class="layui-anim" id="example-anim-element" style="padding: 16px 0;">
  目标元素
@ -26,6 +26,8 @@ toc: true
 <button class="layui-btn">
  <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
 </button>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var $ = layui.$;
--- a/docs/carousel/detail/demo.md
+++ b/docs/carousel/detail/demo.md
@ -20,7 +20,8 @@
    <div>条目2</div>
  </div>
 </div>
- 
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var carousel = layui.carousel;
@ -126,6 +127,7 @@ layui.use(function(){
  </div>
 </div> 

+<!-- import layui -->
 <script>
 layui.use(function(){
  var carousel = layui.carousel;
@ -198,6 +200,7 @@ layui.use(function(){
  </div>
 </div>

+<!-- import layui -->
 <script>
 layui.use(function(){
  var carousel = layui.carousel;
--- a/docs/carousel/index.md
+++ b/docs/carousel/index.md
@ -64,7 +64,7 @@ inst.reload(options); // 轮播重载
 </div>


-<h3 id="goto" lay-toc="{level: 2}">切换</h3>
+<h3 id="goto" lay-toc="{level: 2}">切换 <sup>2.8+</sup></h3>

 `inst.goto(index);`

--- a/docs/class/index.md
+++ b/docs/class/index.md
@ -75,7 +75,7 @@ toc: true
 | layui-bg-orange | 橙 | <div class="layui-bg-orange">&nbsp;</div> |
 | layui-bg-green |  绿 | <div class="layui-bg-green">&nbsp;</div> |
 | layui-bg-blue |  蓝 | <div class="layui-bg-blue">&nbsp;</div> |
-| layui-bg-purple | 紫 | <div class="layui-bg-purple">&nbsp;</div> |
+| layui-bg-purple <sup>2.8+</sup> | 紫 | <div class="layui-bg-purple">&nbsp;</div> |
 | layui-bg-black | 深 | <div class="layui-bg-black">&nbsp;</div> |
 | layui-bg-gray |  浅 | <div class="layui-bg-gray">&nbsp;</div> |

@ -104,7 +104,7 @@ toc: true
 | layui-font-orange | <span class="layui-font-orange">橙</span> |
 | layui-font-green | <span class="layui-font-green">绿</span> |
 | layui-font-blue | <span class="layui-font-blue">蓝</span> |
-| layui-font-purple | <span class="layui-font-purple">紫</span> |
+| layui-font-purple <sup>2.8+</sup> | <span class="layui-font-purple">紫</span> |
 | layui-font-black | <span class="layui-font-black">深</span> |
 | layui-font-gray | <span class="layui-font-gray">浅</span> |

--- a/docs/code/index.md
+++ b/docs/code/index.md
@ -23,7 +23,8 @@ toc: true
 test
 test
 </pre>
-  
+
+<!-- import layui -->  
 <script>
 layui.use(function(){
  // code
--- a/docs/colorpicker/detail/demo.md
+++ b/docs/colorpicker/detail/demo.md
@ -2,6 +2,8 @@
  <textarea>
 <div id="ID-colorpicker-demo-1"></div>
 <div id="ID-colorpicker-demo-2" style="margin-left: 16px;"></div>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var colorpicker = layui.colorpicker;
@ -42,6 +44,8 @@ layui.use(function(){
    </div>
  </div>
 </form>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var colorpicker = layui.colorpicker;
@ -66,6 +70,8 @@ layui.use(function(){
  <textarea>
 <div id="ID-colorpicker-demo-rgb"></div>
 <div id="ID-colorpicker-demo-rgba" style="margin-left: 16px;"></div>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var colorpicker = layui.colorpicker;
@ -94,6 +100,8 @@ layui.use(function(){
 <div id="ID-colorpicker-demo-alpha-1"></div>
 <div id="ID-colorpicker-demo-alpha-2" style="margin-left: 16px;"></div>
 <div id="ID-colorpicker-demo-alpha-3" style="margin-left: 16px;"></div>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var colorpicker = layui.colorpicker;
@ -127,6 +135,8 @@ layui.use(function(){
  <textarea>
 <div id="ID-colorpicker-demo-predefine-1"></div>
 <div id="ID-colorpicker-demo-predefine-2" style="margin-left: 16px;"></div>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var colorpicker = layui.colorpicker;
@ -156,6 +166,8 @@ layui.use(function(){
 <hr>
 <div id="ID-colorpicker-demo-all"></div> 
 <span style="padding-left: 6px;">演示：选择颜色并确定，改变上方按钮背景色</span>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var colorpicker = layui.colorpicker;
@ -194,6 +206,8 @@ layui.use(function(){
 <div id="ID-colorpicker-demo-size-lg"></div>
 <div id="ID-colorpicker-demo-size-sm" style="margin-left: 16px;"></div>
 <div id="ID-colorpicker-demo-size-xs" style="margin-left: 16px;"></div>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var colorpicker = layui.colorpicker;
@ -223,6 +237,8 @@ layui.use(function(){
 <div class="demo-class-colorpicker" lay-options="{color: '#FF0000'}"></div>
 <div class="demo-class-colorpicker" lay-options="{color: '#008000'}"></div>
 <div class="demo-class-colorpicker" lay-options="{color: '#0000FF'}"></div>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var colorpicker = layui.colorpicker;
--- a/docs/colorpicker/index.md
+++ b/docs/colorpicker/index.md
@ -34,7 +34,8 @@ toc: true
 <div id="ID-test-colorpicker"></div>
 <div class="class-test-colorpicker" lay-options="{color: '#333'}"></div>
 <div class="class-test-colorpicker" lay-options="{color: '#777'}"></div>
- 
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var colorpicker = layui.colorpicker;
--- a/docs/dropdown/examples/align.md
+++ b/docs/dropdown/examples/align.md
@ -13,6 +13,7 @@
  </button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var dropdown = layui.dropdown;
--- a/docs/dropdown/examples/base.md
+++ b/docs/dropdown/examples/base.md
@ -20,6 +20,7 @@
  </a>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var dropdown = layui.dropdown;
--- a/docs/dropdown/examples/complex.md
+++ b/docs/dropdown/examples/complex.md
@ -2,6 +2,7 @@
  无限层级 + 跳转 + 事件 + 自定义模板
 </button>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var dropdown = layui.dropdown;
--- a/docs/dropdown/examples/content.md
+++ b/docs/dropdown/examples/content.md
@ -6,7 +6,8 @@
 <style>
 .demo-dropdown-tabs{padding: 0 16px;}
 </style>
- 
+
+<!-- import layui -->  
 <script>
 layui.use(function(){
  var dropdown = layui.dropdown;
--- a/docs/dropdown/examples/contextmenu.md
+++ b/docs/dropdown/examples/contextmenu.md
@ -6,6 +6,7 @@
  开启全局右键菜单
 </button>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var dropdown = layui.dropdown;
--- a/docs/dropdown/examples/on.md
+++ b/docs/dropdown/examples/on.md
@ -13,6 +13,7 @@
  </button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var dropdown = layui.dropdown;
--- a/docs/dropdown/examples/reload.md
+++ b/docs/dropdown/examples/reload.md
@ -3,6 +3,7 @@
  <i class="layui-icon layui-icon-down layui-font-12"></i>
 </button>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var dropdown = layui.dropdown;
--- a/docs/dropdown/examples/reloadData.md
+++ b/docs/dropdown/examples/reloadData.md
@ -7,6 +7,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var dropdown = layui.dropdown;
--- a/docs/dropdown/examples/table.md
+++ b/docs/dropdown/examples/table.md
@ -5,6 +5,7 @@
  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
 </script>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var table = layui.table;
--- a/docs/dropdown/index.md
+++ b/docs/dropdown/index.md
@ -40,7 +40,8 @@ toc: true
 <button class="layui-btn class-test-dropdown" lay-options="{
  data: [{title: 'item A', id: 'a'}, {title: 'item B', id: 'b'}]
 }">下拉菜单</button>
- 
+  
+<!-- import layui -->  
 <script>
 layui.use(function(){
  var dropdown = layui.dropdown;
--- a/docs/flow/detail/demo.md
+++ b/docs/flow/detail/demo.md
@ -3,6 +3,8 @@
 <pre class="layui-code" lay-options="{preview: true, text: {preview: '滚动加载'}, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div class="flow-demo" id="ID-flow-demo"></div>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var flow = layui.flow;
@ -35,6 +37,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div class="flow-demo" id="ID-flow-demo-manual"></div>
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var flow = layui.flow;
--- a/docs/flow/index.md
+++ b/docs/flow/index.md
@ -73,6 +73,8 @@ toc: true
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
 </div>
+
+<!-- import layui --> 
 <script>
 layui.use('flow', function(){
  var flow = layui.flow;
--- a/docs/form/checkbox.md
+++ b/docs/form/checkbox.md
@ -43,6 +43,8 @@ toc: true
  <input type="checkbox" name="BBB" title="选中" lay-skin="tag" checked> 
  <input type="checkbox" name="CCC" title="禁用" lay-skin="tag" disabled> 
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -59,6 +61,8 @@ toc: true
  <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch"> 
  <input type="checkbox" name="DDD" lay-skin="switch" disabled>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -87,6 +91,7 @@ toc: true
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var form = layui.form;
--- a/docs/form/examples/form.demo.md
+++ b/docs/form/examples/form.demo.md
@ -195,6 +195,7 @@
  </div>
 </form>

+<!-- import layui -->
 <script>
 layui.use(['form', 'laydate', 'util'], function(){
  var form = layui.form;
--- a/docs/form/examples/form.grid.md
+++ b/docs/form/examples/form.grid.md
@ -66,7 +66,8 @@
    <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
  </div>
 </form>
- 
+
+<!-- import layui -->  
 <script>
 layui.use(function(){
  var form = layui.form;
--- a/docs/form/examples/form.login.md
+++ b/docs/form/examples/form.login.md
@ -56,6 +56,7 @@
  </div>
 </form>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var form = layui.form;
--- a/docs/form/examples/form.pane.md
+++ b/docs/form/examples/form.pane.md
@ -77,7 +77,8 @@
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
 </form>
- 
+
+<!-- import layui --> 
 <script>
 layui.use(['form'], function(){
  var form = layui.form;
--- a/docs/form/examples/form.reg.md
+++ b/docs/form/examples/form.reg.md
@ -73,7 +73,8 @@
    </div>
  </div>
 </form>
- 
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var $ = layui.$;
--- a/docs/form/examples/form.val.md
+++ b/docs/form/examples/form.val.md
@ -71,6 +71,7 @@
  </div>
 </form>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var $ = layui.$;
--- a/docs/form/examples/form.validate.md
+++ b/docs/form/examples/form.validate.md
@ -20,7 +20,8 @@
    </div>
  </div>
 </div>
- 
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var $ = layui.$;
--- a/docs/form/examples/form.verify.md
+++ b/docs/form/examples/form.verify.md
@ -5,7 +5,8 @@
  <hr>
  <button class="layui-btn" lay-submit lay-filter="demo-verify">提交</button>
 </form>
- 
+
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var form = layui.form;
--- a/docs/form/examples/input.affix.custom.md
+++ b/docs/form/examples/input.affix.custom.md
@ -8,6 +8,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var form = layui.form;
--- a/docs/form/examples/input.group.md
+++ b/docs/form/examples/input.group.md
@ -79,4 +79,6 @@
      </div>
    </div>
  </div>
-</div>
+</div>
+
+<!-- import layui -->
--- a/docs/form/examples/input.pre.suf.md
+++ b/docs/form/examples/input.pre.suf.md
@ -91,4 +91,6 @@
      </div>
    </div>
  </div>
-</div>
+</div>
+
+<!-- import layui -->
--- a/docs/form/index.md
+++ b/docs/form/index.md
@ -137,6 +137,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
  动态插入的表单域
 </form>
  
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var form = layui.form;
@ -167,6 +168,7 @@ layui.use(function(){
  <!-- 其他表单元素 -->
 </div>
 
+<!-- import layui --> 
 <script> 
 layui.use('form', function(){
  var $ = layui.$;
@ -290,6 +292,7 @@ Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 `lay
  <button class="layui-btn" id="test-btn-other">普通按钮</button>
 </form>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var $ = layui.$;
@ -344,6 +347,7 @@ layui.use(function(){

 <button class="layui-btn" id="test-btn-submit">任意位置按钮</button>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var $ = layui.$;
--- a/docs/form/input.md
+++ b/docs/form/input.md
@ -134,6 +134,8 @@ input 放在前后缀容器中：
    <input type="password" lay-affix="eye" placeholder="请输入" class="layui-input">
  </div>
 </div> 
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -159,7 +161,9 @@ input 放在前后缀容器中：
  <div class="layui-input-wrap">
    <input type="text" value="只读状态时" lay-affix="clear" readonly class="layui-input">
  </div>
-</div> 
+</div>
+
+<!-- import layui -->
  </textarea>
 </pre>

--- a/docs/form/radio.md
+++ b/docs/form/radio.md
@ -18,6 +18,8 @@ toc: true
  <input type="radio" name="AAA" value="2" title="选中" checked> 
  <input type="radio" name="AAA" value="3" title="禁用" disabled> 
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -44,6 +46,8 @@ toc: true
    <span style="color: pink;">自定义模板 ♀</span>
  </div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -71,6 +75,7 @@ toc: true
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var form = layui.form;
--- a/docs/form/select.md
+++ b/docs/form/select.md
@ -48,6 +48,8 @@ toc: true
    </select>
  </div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -79,6 +81,8 @@ toc: true
    </optgroup>
  </select>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -158,6 +162,8 @@ toc: true
    </select>
  </div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -184,6 +190,7 @@ toc: true
  </select>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var form = layui.form;
--- a/docs/index.md
+++ b/docs/index.md
@ -71,7 +71,8 @@ npm i layui
 ```
 <!-- 引入 layui.css -->
 <link href="//unpkg.com/layui@{{= d.layui._v }}/dist/css/layui.css" rel="stylesheet">
- 
+```
+```
 <!-- 引入 layui.js -->
 <script src="//unpkg.com/layui@{{= d.layui._v }}/dist/layui.js">
 ```
--- a/docs/laydate/detail/options.md
+++ b/docs/laydate/detail/options.md
@ -89,7 +89,7 @@ range: ['#start', '#end']
 <td>rangeLinked <sup>2.8+</sup></td>
 <td>

-是否开启日期范围选择时的区间联动标注模式，该必须开启 `range` 属性后生效。日期范围默认采用的是*左右面板独立选择模式*，设置该属性后，将采用*左右面板联动选择模式*。
+是否开启日期范围选择时的区间联动标注模式，该模式必须开启 `range` 属性才能生效。日期范围默认采用的是*左右面板独立选择模式*，设置该属性后，将采用*左右面板联动选择模式*。
 <br>效果详见： [#示例](#demo-range)

 </td>
@ -171,13 +171,13 @@ format: '北京时间 H 点 m 分'
 初始值。值支持以下类型：
 </div> 

- 若为 `string` 类型，则必须和 `format` 属性的格式对应。
+- 若为 `string` 类型，则必须和 `format` 属性格式对应

 ```
 value: '2018-08-18'
 ```

- 若为 `date` 对象类型，则赋值 `new Date()` 的实例即可。
+- 若为 `date` 对象类型，则可直接赋值 `new Date()`

 ```
 value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的毫秒数
@ -356,7 +356,7 @@ max: 7 // 最大日期为 7 天后
 <td>zIndex</td>
 <td>
  
-设置组件面板的层叠顺序。一般用于解决与其它元素的互相被遮掩的问题。若 `positio: 'tatic'` 时，则该属性无效。
+设置组件面板的层叠顺序。一般用于解决与其它元素的互相被遮掩的问题。若 `position: 'static'` 时，则该属性无效。

 </td>
 <td>number</td>
@ -465,7 +465,7 @@ btns: ['clear', 'confirm']

 <div id="options.theme" class="ws-anchor">

-设置组件面板主题。除了默认主题，还内置主题： `molv` `grid` ，且支持直接传入自定义的主题色。
+设置组件面板主题。除了默认主题，还内置主题： `molv` `grid` `circle`<sup>2.8+</sup> ，且支持直接传入自定义的主题色。

 </div> 

@ -508,7 +508,9 @@ theme: ['grid', '#FF5722']
 <td>
  
 <div id="options.mark" class="ws-anchor">
+
 自定义日期标记。该属性是对 `calendar` 属性的进一步延伸，灵活度更高。属性可批量设置多个日期标记，如：
+
 </div>

 ```
--- a/docs/laydate/examples/elem.md
+++ b/docs/laydate/examples/elem.md
@ -12,6 +12,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/examples/format.md
+++ b/docs/laydate/examples/format.md
@ -39,6 +39,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/examples/limit.md
+++ b/docs/laydate/examples/limit.md
@ -24,6 +24,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/examples/mark.md
+++ b/docs/laydate/examples/mark.md
@ -21,6 +21,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/examples/more.md
+++ b/docs/laydate/examples/more.md
@ -93,6 +93,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/examples/normal.md
+++ b/docs/laydate/examples/normal.md
@ -15,6 +15,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/examples/range.md
+++ b/docs/laydate/examples/range.md
@ -62,6 +62,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/examples/shortcut.md
+++ b/docs/laydate/examples/shortcut.md
@ -70,6 +70,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/examples/static.md
+++ b/docs/laydate/examples/static.md
@ -5,6 +5,7 @@
  <div class="layui-inline" id="ID-laydate-static-4"></div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/examples/theme.md
+++ b/docs/laydate/examples/theme.md
@ -18,6 +18,12 @@
        <input type="text" class="layui-input" id="ID-laydate-theme-grid" 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="ID-laydate-theme-circle" placeholder="yyyy-MM-dd">
+      </div>
+    </div>-->
    <div class="layui-inline">
      <label class="layui-form-label">混合主题</label>
      <div class="layui-input-inline">
@ -27,6 +33,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
@ -49,6 +56,14 @@ layui.use(function(){
    theme: 'grid'
  });

+  // 圆圈高亮主题
+  /*
+  laydate.render({
+    elem: '#ID-laydate-theme-circle',
+    theme: 'circle' // 2.8+新增主题
+  });
+  */
+
  // 混合主题
  laydate.render({
    elem: '#ID-laydate-theme-multi',
--- a/docs/laydate/examples/type.md
+++ b/docs/laydate/examples/type.md
@ -39,6 +39,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
--- a/docs/laydate/index.md
+++ b/docs/laydate/index.md
@ -36,7 +36,7 @@ toc: true
 | [laydate.getInst(id)](#getInst) <sup>2.8+</sup> | 获取组件对应的渲染实例。 |
 | [laydate.unbind(id)](#close) <sup>2.8+</sup> | 对目标元素解除当前实例的绑定。 |
 | [laydate.close(id)](#close) <sup>2.7+</sup> | 关闭日期面板。 |
-| [laydate.getEndDate(month, year)](#getEndDate) | 获取某月的最后一天 |
+| [laydate.getEndDate(month, year)](#getEndDate) | 获取某月的最后一天。 |

 <h3 id="render" lay-toc="{level: 2}">渲染</h3>

@ -50,6 +50,7 @@ toc: true
 <input type="text" class="class-test-laydate" lay-options="{value: '2016-10-14'}">
 <input type="text" class="class-test-laydate" lay-options="{value: '2017-08-21'}">
 
+<!-- import layui --> 
 <script>
 layui.use(function(){
  var laydate = layui.laydate;
@ -105,7 +106,7 @@ laydate.hint('test', {

 - 参数 `id` : 组件渲染时定义的 `id` 属性值

-该方法用于在获取 laydate 对应 id 的渲染实例，以获得该实例对应的成员属性。
+该方法用于获取 laydate 对应 id 的渲染实例，以获得该实例对应的成员属性。

 ```
 var laydate = layui.laydate;
@ -127,7 +128,7 @@ console.log(inst); // 实例对象

 - 参数 `id` : 组件渲染时定义的 `id` 属性值

-该方法用于对目标元素对应的实例的完全解除，即触发元素事件时，不再执行组件渲染。
+该方法用于对目标元素对应的实例的绑定完全解除，即触发元素事件时，不再执行组件渲染。

 ```
 var laydate = layui.laydate;
--- a/docs/layer/examples/alert.md
+++ b/docs/layer/examples/alert.md
@ -7,6 +7,7 @@
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-count-down">关闭倒计时</button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layer/examples/direction.md
+++ b/docs/layer/examples/direction.md
@ -7,6 +7,7 @@
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-l">从左往右</button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layer/examples/iframe.md
+++ b/docs/layer/examples/iframe.md
@ -8,6 +8,7 @@
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-curl">弹出任意 URL 页面</button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var $ = layui.$;
--- a/docs/layer/examples/load.md
+++ b/docs/layer/examples/load.md
@ -5,6 +5,7 @@
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-4">风格4</button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layer/examples/more.md
+++ b/docs/layer/examples/more.md
@ -25,6 +25,7 @@
 .class-demo-layer-lockscreen .layui-input-suffix .layui-icon-right{cursor: pointer; color: #fff;}
 </style>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layer/examples/offset.md
+++ b/docs/layer/examples/offset.md
@ -11,6 +11,7 @@
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="">任意</button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layer/examples/other.md
+++ b/docs/layer/examples/other.md
@ -7,6 +7,7 @@
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-photos">photos - 多张相册层</button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layer/examples/page.md
+++ b/docs/layer/examples/page.md
@ -15,6 +15,7 @@
  </div>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var $ = layui.$;
--- a/docs/layer/examples/skin.md
+++ b/docs/layer/examples/skin.md
@ -19,6 +19,7 @@
 .class-layer-demo-custom .layui-layer-btn .layui-layer-btn0{border-color: #FA584D; background-color: #FA584D; color: #fff;}
 </style>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layer/examples/tips.md
+++ b/docs/layer/examples/tips.md
@ -7,6 +7,7 @@
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-more">允许多个 tips</button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layer/examples/type.md
+++ b/docs/layer/examples/type.md
@ -10,6 +10,7 @@
  <button type="button" class="layui-btn layui-btn-primary" lay-on="photots">Photots</button>
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layer/index.md
+++ b/docs/layer/index.md
@ -292,6 +292,7 @@ layer.photos({
  <img src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-pid="" alt="星空如此深邃">  
 </div>

+<!-- import layui --> 
 <script>
 layui.use(function(){
  var layer = layui.layer;
--- a/docs/layout/index.md
+++ b/docs/layout/index.md
@ -110,6 +110,7 @@ toc: true
    底部固定区域
  </div>
 </div>
+ 
 <script src="{{= d.layui.cdn.js }}"></script>
 <script>
 //JS 
--- a/docs/laypage/detail/demo.md
+++ b/docs/laypage/detail/demo.md
@ -2,6 +2,8 @@
  <textarea>
 <div id="demo-laypage-normal-1"></div>
 <div id="demo-laypage-normal-2"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
@ -27,6 +29,8 @@ layui.use(function(){
 <div id="demo-laypage-theme-1"></div>
 <div id="demo-laypage-theme-2"></div>
 <div id="demo-laypage-theme-3"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
@ -57,6 +61,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="demo-laypage-text"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
@ -80,6 +86,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="demo-laypage-pn-hide"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
@ -101,6 +109,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="demo-laypage-pn-show"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
@ -133,6 +143,8 @@ layui.use(function(){
 <div id="demo-laypage-layout-1"></div>
 <div id="demo-laypage-layout-2"></div>
 <div id="demo-laypage-layout-3"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
@ -163,6 +175,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="demo-laypage-limits"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
@ -185,6 +199,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="demo-laypage-all"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
@ -208,6 +224,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="demo-laypage-hash"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
@ -230,6 +248,8 @@ layui.use(function(){
  <textarea>
 <div id="demo-laypage-data"></div>
 <div id="demo-laypage-data-view"></div> 
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laypage = layui.laypage;
--- a/docs/laytpl/index.md
+++ b/docs/laytpl/index.md
@ -63,6 +63,7 @@ layui.use('laytpl', function(){
 
 <div id="view"></div>
 
+<!-- import layui -->
 <script>
 layui.use(function(){
  var laytpl = layui.laytpl;
--- a/docs/menu/index.md
+++ b/docs/menu/index.md
@ -43,7 +43,7 @@ toc: true
 | 属性 | 描述 |
 | --- | --- |
 | title | 设置菜单标题。默认读取标题容器内容中的文本。 |
-| type | 设置菜单类型。可选值如下：<ul><li>若不设定，则表示为常规菜单项</li><li>`type:'group` 菜单组，子菜单为纵向层级</li><li>`type:'parent'` 父级菜单，子菜单为横向层级</li></ul> |
+| type | 设置菜单类型。可选值如下：<ul><li>若不设定，则表示为常规菜单项</li><li>`type:'group'` 菜单组，子菜单为纵向层级</li><li>`type:'parent'` 父级菜单，子菜单为横向层级</li></ul> |
 | isAllowSpread | 子菜单是否允许展开收缩操作。默认 `true` |

 <h3 id="on" lay-toc="{}" class="ws-bold">事件</h3>
--- a/docs/nav/examples/side.md
+++ b/docs/nav/examples/side.md
@ -30,6 +30,7 @@
  <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单3</a></li>
 </ul>
+
 <script src="{{= d.layui.cdn.js }}"></script>
 <script>
 layui.use(function(){
--- a/docs/nav/index.md
+++ b/docs/nav/index.md
@ -48,6 +48,8 @@ toc: true
  </li>
  <li class="layui-nav-item"><a href="">演示</a></li>
 </ul>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -78,6 +80,8 @@ toc: true
    </dl>
  </li>
 </ul>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -154,6 +158,8 @@ toc: true
  </li>
  <li class="layui-nav-item"><a href="">菜单3</a></li>
 </ul>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -192,6 +198,8 @@ toc: true
  <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单3</a></li>
 </ul>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -221,6 +229,8 @@ toc: true

 ```
 <div id="test"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
@ -269,6 +279,8 @@ layui.use(function(){
  <li class="layui-nav-item"><a href="javascript:;">菜单1</a></li>
  <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
 </div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
@ -320,6 +332,8 @@ layui.use(function(){
  <a href="">游戏</a>
  <a href="">综艺</a>
 </span>
+
+<!-- import layui -->
  </textarea>
 </pre>

--- a/docs/panel/index.md
+++ b/docs/panel/index.md
@ -83,6 +83,8 @@ toc: true
    </div>
  </div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -122,6 +124,8 @@ toc: true
    </div>
  </div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>    

@ -201,6 +205,8 @@ toc: true
    </div>
  </div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -259,6 +265,7 @@ toc: true
  </div>
 </div>

+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
--- a/docs/progress/index.md
+++ b/docs/progress/index.md
@ -24,6 +24,8 @@ toc: true
    <div class="layui-progress-bar" lay-percent="50%"></div>
  </div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -63,6 +65,8 @@ toc: true
 <div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="70%"></div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -90,6 +94,8 @@ toc: true
 <div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="75%"></div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -115,6 +121,8 @@ toc: true
 <div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="70%"></div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -138,6 +146,8 @@ toc: true

 ```
 <div id="test"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
@ -186,7 +196,8 @@ layui.use(function(){
  <button class="layui-btn" lay-on="setPercent">设置 50%</button>
  <button class="layui-btn" lay-on="loading">模拟 loading</button>
 </div>
- 
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
--- a/docs/rate/detail/demo.md
+++ b/docs/rate/detail/demo.md
@ -1,6 +1,8 @@
 <pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-rate-demo"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var rate = layui.rate;
@ -19,6 +21,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-rate-demo-text"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var rate = layui.rate;
@ -42,6 +46,7 @@ layui.use(function(){
 <hr>
 <div id="ID-rate-demo-half-2"></div>

+<!-- import layui -->
 <script>
 layui.use(function(){
  var rate = layui.rate;
@ -70,6 +75,8 @@ layui.use(function(){
 <div id="ID-rate-demo-setText-1"></div>
 <hr>
 <div id="ID-rate-demo-setText-2"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var rate = layui.rate;
@ -111,6 +118,8 @@ layui.use(function(){
 <div id="ID-rate-demo-length-1"></div>
 <hr>
 <div id="ID-rate-demo-length-2"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var rate = layui.rate;
@ -135,6 +144,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-rate-demo-readonly"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var rate = layui.rate;
@ -159,6 +170,8 @@ layui.use(function(){
 <div class="class-rate-demo-theme" lay-options="{value: 3, theme: '#FE0000'}"></div>
 <hr>
 <div class="class-rate-demo-theme" lay-options="{value: 2.5, theme: '#1E9FFF', half: true}"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var rate = layui.rate;
--- a/docs/rate/index.md
+++ b/docs/rate/index.md
@ -34,6 +34,7 @@ toc: true
 <div class="class-test-rate" lay-options="{value: 3}"></div>
 <div class="class-test-rate" lay-options="{value: 5}"></div>
 
+<!-- import layui -->
 <script>
 layui.use(function(){
  var rate = layui.rate;
--- a/docs/slider/detail/demo.md
+++ b/docs/slider/detail/demo.md
@ -1,6 +1,8 @@
 <pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-slider-demo"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
@ -19,6 +21,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-slider-demo-value"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
@ -38,6 +42,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-slider-demo-maxmin"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
@ -60,6 +66,8 @@ layui.use(function(){
 <div id="ID-slider-demo-step-1"></div>
 <hr class="ws-space-16">
 <div id="ID-slider-demo-step-2"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
@ -88,6 +96,8 @@ layui.use(function(){
 <hr class="ws-space-16">
 <div id="ID-slider-demo-setTips-2"></div>
 <div id="ID-slider-demo-setTips-result"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
@ -119,6 +129,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-slider-demo-input"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
@ -140,6 +152,8 @@ layui.use(function(){
 <div id="ID-slider-demo-range-1"></div>
 <hr class="ws-space-16">
 <div id="ID-slider-demo-range-2"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
@ -173,6 +187,8 @@ layui.use(function(){
 <div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-2"></div>
 <div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-3"></div>
 <div class="layui-inline" id="ID-slider-demo-vertical-4"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
@ -213,6 +229,8 @@ layui.use(function(){
 <div id="ID-slider-demo-theme-2"></div>
 <hr class="ws-space-16">
 <div id="ID-slider-demo-theme-3"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
@ -243,6 +261,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-slider-demo-disabled"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
--- a/docs/slider/index.md
+++ b/docs/slider/index.md
@ -38,6 +38,7 @@ toc: true
 <div class="class-test-slider" lay-options="{value: 50}"></div>
 <div class="class-test-slider" lay-options="{value: 80}"></div>
 
+<!-- import layui -->
 <script>
 layui.use(function(){
  var slider = layui.slider;
--- a/docs/tab/detail/demo.md
+++ b/docs/tab/detail/demo.md
@ -1,4 +1,4 @@
-<pre class="layui-code" lay-options="{preview: true, text: {preview: '动态操作'}, layout: ['preview', 'code'], tools: ['full']}">
+<pre class="layui-code" lay-options="{preview: true, text: {preview: '动态操作'}, codeStyle: 'height: 535px', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
  <ul class="layui-tab-title">
@ -22,6 +22,8 @@
  <button class="layui-btn" lay-on="tabDelete">删除「标签4」</button>
  <button class="layui-btn" lay-on="tabChange">切换到「标签3」</button>
 </div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
@ -57,7 +59,7 @@ layui.use(function(){

 切换 tab 标签项后，地址栏同步 `hash` 值，当页面刷新时，tab 仍保持对应的切换状态。

-<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
+<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 535px', tools: ['full']}">
  <textarea>
 <div class="layui-tab" lay-filter="test-hash">
  <ul class="layui-tab-title">
@ -75,6 +77,8 @@ layui.use(function(){
    <div class="layui-tab-item">内容-5</div>
  </div>
 </div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
--- a/docs/tab/index.md
+++ b/docs/tab/index.md
@ -140,6 +140,8 @@ tab 组件提供了三种 UI 风格，分别为：
    <div class="layui-tab-item">内容-5</div>
  </div>
 </div>
+
+<!-- import layui -->
  </textarea>
 </pre>

@ -154,6 +156,8 @@ tab 组件会在元素加载完毕后，自动对 tab 元素完成一次渲染

 ```
 <div id="test"></div>
+ 
+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
@ -240,6 +244,7 @@ layui.use(function(){
  <div>内容-3</div>
 </div>

+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
--- a/docs/table/examples/autoRender.md
+++ b/docs/table/examples/autoRender.md
@ -11,4 +11,6 @@
      <th lay-data="{field:'classify'}">职业</th>
    </tr>
  </thead>
-</table>
+</table>
+
+<!-- import layui -->
--- a/docs/table/examples/data.md
+++ b/docs/table/examples/data.md
@ -1,5 +1,6 @@
 <table class="layui-hide" id="ID-table-demo-data"></table>
- 
+
+<!-- import layui -->
 <script>
 layui.use('table', function(){
  var table = layui.table;
--- a/docs/table/examples/editModes.md
+++ b/docs/table/examples/editModes.md
@ -35,7 +35,8 @@
  {{# var color = d.color || ['#16baaa','#16b777','#1E9FFF','#FF5722','#FFB800','#393D49'][Math.round(Math.random()*5)]; }}
  <div class="colorpicker-demo" lay-options="{color: '{{= color }}'}"></div>
 </script>!}}
- 
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var $ = layui.$;
--- a/docs/table/examples/editable.md
+++ b/docs/table/examples/editable.md
@ -1,5 +1,6 @@
 <table class="layui-hide" id="ID-table-demo-editable"></table>
- 
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var table = layui.table;
--- a/docs/table/examples/filter.md
+++ b/docs/table/examples/filter.md
@ -1,5 +1,6 @@
 <table class="layui-hide" id="ID-table-demo-filter"></table>
- 
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var $ = layui.$;
--- a/docs/table/examples/init.md
+++ b/docs/table/examples/init.md
@ -28,7 +28,8 @@
    </tr>
  </tbody>
 </table>
- 
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var table = layui.table;
--- a/docs/table/examples/onrowContextmenu.md
+++ b/docs/table/examples/onrowContextmenu.md
@ -1,5 +1,6 @@
 <table class="layui-hide" id="ID-table-onrowContextmenu"></table>

+<!-- import layui -->
 <script>
 layui.use(['table', 'dropdown', 'util'], function(){
  var table = layui.table;
--- a/docs/table/examples/page.md
+++ b/docs/table/examples/page.md
@ -5,7 +5,8 @@
    <button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn2">底部按钮2</button>
  </div>
 </script>
- 
+
+<!-- import layui -->
 <script>
 layui.use('table', function(){
  var table = layui.table;
--- a/docs/table/examples/parse.md
+++ b/docs/table/examples/parse.md
@ -3,6 +3,7 @@

 <table class="layui-hide" id="ID-table-demo-parse"></table>

+<!-- import layui -->
 <script>
 layui.use('table', function(){
  var table = layui.table;
--- a/docs/table/examples/search.md
+++ b/docs/table/examples/search.md
@ -27,7 +27,8 @@
 </form>

 <table class="layui-hide" id="ID-table-demo-search"></table>
- 
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var table = layui.table;
--- a/docs/table/examples/setRowChecked.md
+++ b/docs/table/examples/setRowChecked.md
@ -5,6 +5,7 @@
  </div>
 </script>

+<!-- import layui -->
 <script>
 layui.use('table', function(){
  var table = layui.table;
--- a/Show More
+++ b/Show More