Merge branch 'layui:2.x' into 2.x

2023-05-03 19:05:45 +08:00 · 2023-05-03 19:05:45 +08:00 · 9219b53e5b
commit 9219b53e5b
parent f1a060671b 0fbfed9860
116 changed files with 466 additions and 188 deletions
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 <p align="center">
-  <a href="https://layui.github.io/">
-    <img src="https://unpkg.com/outeres@0.0.6/img/layui/icon-1.png" width="81" alt="Layui">
+  <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>
 <h1 align="center">Layui</h1>
@ -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/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
@ -87,6 +87,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/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/radio.md
+++ b/docs/form/radio.md
@ -71,6 +71,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
@ -184,6 +184,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>
@ -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,12 @@ 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
@ -221,6 +221,8 @@ toc: true

 ```
 <div id="test"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
@ -269,6 +271,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;
--- a/docs/panel/index.md
+++ b/docs/panel/index.md
@ -259,6 +259,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
@ -138,6 +138,8 @@ toc: true

 ```
 <div id="test"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var element = layui.element;
@ -186,7 +188,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/docs/table/examples/templet.md
+++ b/docs/table/examples/templet.md
@ -17,7 +17,8 @@
  <span class="layui-badge-rim">序号：{{= d.LAY_NUM }}</span>
  -->
 !}}</script>
- 
+
+<!-- import layui -->
 <script>
 layui.use(['table'], function(){
  var table = layui.table;
--- a/docs/table/examples/theads.md
+++ b/docs/table/examples/theads.md
@ -48,4 +48,6 @@
    <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>
  </div>
-</script>
+</script>
+
+<!-- import layui -->
--- a/docs/table/index.md
+++ b/docs/table/index.md
@ -54,9 +54,10 @@ table 提供了以下三种渲染模式，在实际使用时，一般按情况

 该方法返回当前实例对象，包含可操作当前表格的一些成员方法。

-```
+```html
 <table id="test"></table>
 
+<!-- import layui -->
 <script>
 layui.use(function(){
  var table = layui.table;
@ -105,13 +106,14 @@ layui.use(function(){
 - 参数 `filter` :  `<table>` 元素对应的 `lay-filter` 属性值
 - 参数 `options` : 基础属性配置项。[#详见属性](#options)

-该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件。[#参考相关示例](demo-init)
+该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件。[#参考相关示例](#demo-init)

-```
+```html
 <table lay-filter="test">
  表格内容
 </table>
 
+<!-- import layui -->
 <script>
 layui.use(function(){
  var table = layui.table;
@ -491,7 +493,7 @@ table.hideCol('test', false); // `true` or `false`
 | [row / rowDouble](#on-row) | 行单击和双击事件 |
 | [rowContextmenu](#on-rowContextmenu) <sup>2.8+</sup> | 行右键菜单事件 |
 | [edit](#on-edit) | 单元格编辑事件 |
-| [tool](#on-tool) 🔥 | 单元格工具事件。可在该事件中实现行的更新与删除操作。 |
+| [tool / toolDouble](#on-tool) 🔥 | 单元格工具事件。可在该事件中实现行的更新与删除操作。 |
 | [checkbox](#on-checkbox) | 复选框事件 |
 | [radio](#on-radio) | 单选框事件 |
 | [pagebar](#on-pagebar) <sup>2.7+</sup> | 尾部分页栏事件 |
@ -516,6 +518,7 @@ table.hideCol('test', false); // `true` or `false`
  </div>
 </script>
 
+<!-- import layui -->
 <script>
 layui.use(function(){
  var table = layui.table;
@ -738,6 +741,7 @@ table.on('edit(test)', function(obj){
 
 <table id="test" lay-filter="test"></table> 
 
+<!-- import layui -->
 <script>
 layui.use(function(){
  var table = layui.table;
--- a/docs/transfer/detail/demo.md
+++ b/docs/transfer/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-transfer-demo"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var transfer = layui.transfer;
@ -33,6 +35,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-transfer-demo-title"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var transfer = layui.transfer;
@ -68,6 +72,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-transfer-demo-value"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var transfer = layui.transfer;
@ -107,6 +113,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-transfer-demo-showSearch"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var transfer = layui.transfer;
@ -141,6 +149,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-transfer-demo-parseData"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var transfer = layui.transfer;
@ -173,6 +183,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-transfer-demo-onchange"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var transfer = layui.transfer;
@ -215,6 +227,8 @@ layui.use(function(){
  <button type="button" class="layui-btn" lay-on="reload">重载实例</button>
 </div>
 <div id="ID-transfer-demo-inst"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var transfer = layui.transfer;
--- a/docs/tree/detail/demo.md
+++ b/docs/tree/detail/demo.md
@ -11,6 +11,7 @@
 
 <div id="ID-tree-demo"></div>

+<!-- import layui -->
 <script>
 layui.use(function(){
  var tree = layui.tree;
@ -59,6 +60,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-tree-demo-showLine"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var tree = layui.tree;
@ -82,6 +85,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-tree-demo-onlyIconControl"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var tree = layui.tree;
@ -110,6 +115,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-tree-demo-accordion"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var tree = layui.tree;
@ -149,6 +156,8 @@ layui.use(function(){
 <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
 <div id="ID-tree-demo-showCheckbox"></div>
+
+<!-- import layui -->
 <script>
 layui.use(function(){
  var tree = layui.tree;
--- a/docs/treeTable/detail/options.md
+++ b/docs/treeTable/detail/options.md
@ -58,8 +58,8 @@ treeTable.render({
 | isParent | 自定义「是否属于父节点」的属性名 | string | `isParent` |
 | name | 自定义「节点」属性名 | string | `name` |
 | id | 自定义「节点索引」属性名 | string | `id` |
-| pid | 自定义「父节点索引」属性名 | string | `pid` |
-| rootIid | 自定义「根节点索引」属性名 | string | - |
+| pid | 自定义「父节点索引」属性名 | string | `parentId` |
+| rootId | 自定义「根节点索引」属性名 | string | - |

 </td>
    </tr>
@ -121,8 +121,8 @@ treeTable.render({
 | type | 请求的接口类型，设置可缺省同上 | string | - |
 | contentType | 提交参数的数据类型，设置可缺省同上 | string | - |
 | headers | 提交请求头，设置可缺省同上 | object | - |
-| where | 提交参数的数据，设置可缺省同 | object | - |
-| autoParam | 自动参数，可以根据配置项以及当前节点的数据传参，如： `['type', 'age=age', 'pId=id']` ，那么其请求参数将包含: `{type: '父节点 type', age: '父节点 age', pId: '父节点 id'}` | array | - | 
+| where | 提交参数的数据，设置可缺省同上 | object | - |
+| autoParam | 自动参数，可以根据配置项以及当前节点的数据传参，如： `['type', 'age=age', 'parentId=id']` ，那么其请求参数将包含: `{type: '父节点 type', age: '父节点 age', parentId: '父节点 id'}` | array | - |

 </td>
    </tr>
--- a/docs/treeTable/examples/demo.md
+++ b/docs/treeTable/examples/demo.md
@ -14,6 +14,7 @@
  </div>
 </script>

+<!-- import layui -->
 <script>
 layui.use(function(){
  var treeTable = layui.treeTable;
--- a/docs/treeTable/index.md
+++ b/docs/treeTable/index.md
@ -36,7 +36,7 @@ toc: true
 | [treeTable.expandAll(id, expandFlag)](#expandAll)  | 展开或关闭全部节点（目前只支持关闭全部）。 |
 | [treeTable.setRowChecked(id, opts)](#setRowChecked) | 设置行选中状态 |
 | [treeTable.checkAllNodes(id, checked)](#checkAllNodes) | 全选或取消全选 |
-| [treeTable.on('event(filter)', callback)](#on) | treeTable 相关事件 |
+| [treeTable.on(\'event(filter)\', callback)](#on) | treeTable 相关事件 |

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

@ -200,7 +200,7 @@ treeTable.addNodes('test', {
 | inherit | 子节点是否继承父节点的展开或关闭状态，`expandFlag` 属性必须为 `boolean` 型时才有效。 | boolean | `false` |
 | callbackFlag | 是否触发事件（`beforeExpand,onExpand`） | boolean | `false` |

-若操作的节点不是一个父节点，则返回 `null` ，否则返回操作之后的折叠状态。
+若操作的节点不是一个父节点，则返回 `null`，否则返回操作之后的折叠状态。

 ```js
 // 渲染
--- a/docs/upload/detail/options.md
+++ b/docs/upload/detail/options.md
@ -143,7 +143,9 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
 <td>

 <div id="options.exts" class="ws-anchor">
+
 允许上传的文件后缀。一般结合 `accept` 属性来设定。
+
 </div>  

 - 假设 `accept: 'file'` 类型时，那么设置 `exts: 'zip|rar|7z'` 即代表只允许上传压缩格式的文件。
@ -188,7 +190,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
  
 规定强制返回的数据格式。

- 若值为 'json'，则强制校验 JSON 数据格式
+- 若值为 `'json'`，则强制校验 JSON 数据格式

 </td>
 <td>string</td>
--- a/docs/upload/examples/accept.md
+++ b/docs/upload/examples/accept.md
@ -20,6 +20,7 @@
  </button>
 </div>

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