重新整理入门文档 1.7.x

imouou · Sep 2, 2022 · 8d217d1 · 8d217d1
1 parent e871f94
commit 8d217d1
Show file tree

Hide file tree

Showing 68 changed files with 560 additions and 1,041 deletions.
diff --git a/docs/chapter1/dev.html b/docs/chapter1/dev.html
@@ -0,0 +1,128 @@
+<html>
+      <head>
+        <meta charset="UTF-8">
+        <title>dev.md</title>
+      </head>
+      <body>
+        <h1 id="-">开发方式</h1>
+<h3 id="-">一、单页开发</h3>
+<p><a href="https://www.easybui.com/p/download.html">下载单页开发包</a></p>
+<ul>
+<li>优点：体验好，媲美app，操控强，按需加载或一次性加载；</li>
+<li>缺点：不支持后端语言输出展示，不支持seo；</li>
+</ul>
+<p>!&gt; 单页开发预览需要IIS部署，或者node工程的支持，默认需要3个文件。</p>
+<p><em>index.html</em></p>
+<pre><code class="lang-html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot; /&gt;
+        &lt;title&gt;BUI&lt;/title&gt;
+        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.css&quot; /&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;div id=&quot;bui-router&quot;&gt;&lt;/div&gt;
+
+        &lt;!-- content --&gt;
+        &lt;script src=&quot;https://cdn.jsdelivr.net/npm/buijs@latest/lib/zepto.js&quot;&gt;&lt;/script&gt;
+        &lt;script src=&quot;https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.js&quot;&gt;&lt;/script&gt;
+        &lt;script&gt;
+            // router init
+            window.router = bui.router();
+
+            bui.ready(function(global){
+                // router init, will find default page. pages/main/main.html pages/main/main.js 
+                router.init({
+                    id: &quot;#bui-router&quot;
+                })
+            })
+        &lt;/script&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+<p><em>pages/main/main.html</em></p>
+<pre><code class="lang-html">&lt;!-- BUI标准结构 --&gt;
+&lt;div class=&quot;bui-page bui-box-vertical&quot;&gt;
+    &lt;header&gt;
+        &lt;!-- 顶部固定内容 --&gt;
+        &lt;div class=&quot;bui-bar&quot;&gt;
+            &lt;div class=&quot;bui-bar-left&quot;&gt;
+                &lt;div class=&quot;bui-btn&quot;&gt;&lt;i class=&quot;icon-back&quot;&gt;&lt;/i&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;bui-bar-main&quot;&gt;BUI首页&lt;/div&gt;
+            &lt;div class=&quot;bui-bar-right&quot;&gt;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/header&gt;
+    &lt;main&gt;
+        &lt;!-- 中间滚动内容 --&gt;
+        &lt;div class=&quot;bui-btn warning&quot;&gt;中间按钮&lt;/div&gt;
+    &lt;/main&gt;
+    &lt;footer&gt;
+        &lt;!-- 底部固定内容 --&gt;
+        &lt;div class=&quot;bui-btn primary&quot;&gt;底部按钮&lt;/div&gt;
+    &lt;/footer&gt;
+&lt;/div&gt;
+</code></pre>
+<p><em>pages/main/main.js</em> 特定的模块包装</p>
+<pre><code class="lang-js">loader.define(function(requires,exports,module,global){
+    // requires: 加载模块
+    // module: 模块信息
+    // global: 获取全局方法
+    bui.alert(&quot;done&quot;);
+
+})
+</code></pre>
+<h3 id="-">二、多页开发</h3>
+<p><a href="http://easybui.com/downloads/source/bui/bui_router_dev_latest.zip">下载多页开发包</a></p>
+<ul>
+<li>优点：简单，支持后端语言输出展示，支持seo；</li>
+<li>缺点：体验较差，无法定制交互及路由操作；</li>
+</ul>
+<p><em>index.html</em></p>
+<pre><code class="lang-html">
+&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot; /&gt;
+        &lt;title&gt;BUI&lt;/title&gt;
+        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.css&quot; /&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;!-- BUI标准结构 --&gt;
+        &lt;div class=&quot;bui-page bui-box-vertical&quot;&gt;
+            &lt;header&gt;
+                &lt;!-- 顶部固定内容 --&gt;
+                &lt;div class=&quot;bui-bar&quot;&gt;
+                    &lt;div class=&quot;bui-bar-left&quot;&gt;
+                        &lt;div class=&quot;bui-btn&quot;&gt;&lt;i class=&quot;icon-back&quot;&gt;&lt;/i&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class=&quot;bui-bar-main&quot;&gt;BUI首页&lt;/div&gt;
+                    &lt;div class=&quot;bui-bar-right&quot;&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/header&gt;
+            &lt;main&gt;
+                &lt;!-- 中间滚动内容 --&gt;
+                &lt;div class=&quot;bui-btn warning&quot;&gt;中间按钮&lt;/div&gt;
+            &lt;/main&gt;
+            &lt;footer&gt;
+                &lt;!-- 底部固定内容 --&gt;
+                &lt;div class=&quot;bui-btn primary&quot;&gt;底部按钮&lt;/div&gt;
+            &lt;/footer&gt;
+        &lt;/div&gt;
+
+        &lt;script src=&quot;https://cdn.jsdelivr.net/npm/buijs@latest/lib/zepto.js&quot;&gt;&lt;/script&gt;
+        &lt;script src=&quot;https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.js&quot;&gt;&lt;/script&gt;
+        &lt;script&gt;
+            bui.ready(function(global){
+                // init
+                bui.alert(&quot;done&quot;)
+            })
+        &lt;/script&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+
+</code></pre>
+<p><a href="https://codesandbox.io/s/qnzgk?file=/doc-examples/createpage.html">点击在线预览</a></p>
+
+      </body>
+    </html>
diff --git a/docs/chapter1/dev.md b/docs/chapter1/dev.md
@@ -2,12 +2,12 @@
 
 ### 一、单页开发
 
-[下载单页开发包](http://easybui.com/downloads/source/bui/bui_router_dev_latest.zip)
+[下载单页开发包](https://www.easybui.com/p/download.html)
 
 * 优点：体验好，媲美app，操控强，按需加载或一次性加载；
 * 缺点：不支持后端语言输出展示，不支持seo；
 
-!> 单页开发预览需要部署，或者node工程的支持，默认需要3个文件，。
+!> 单页开发预览需要IIS部署，或者node工程的支持，默认需要3个文件。
 
 *index.html*
 

diff --git a/docs/chapter1/layout2.md b/docs/chapter1/layout2.md
@@ -1,7 +1,7 @@
 # 布局
 
 
-<iframe src="http://www.easybui.com/preview/?url=/guide/examples/chapter1/layout.html" width="100%" height="820px" frameborder="0"></iframe>
+<iframe src="//www.easybui.com/preview/?url=/guide/examples/chapter1/layout.html" width="100%" height="820px" frameborder="0"></iframe>
 
 
 ## 弹性布局