Merge branch 'dev'

moreluck1 · Nov 20, 2015 · 83c8ae3 · 83c8ae3
2 parents c546ec9 + 50fa714
commit 83c8ae3
Show file tree

Hide file tree

Showing 27 changed files with 752 additions and 665 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -56,6 +56,7 @@ module.exports = function(grunt) {
                   'js/template7.js',
                   'js/page.js',
                   'js/tabs.js',
+                  'js/bar-tab.js',
                   'js/modal.js',
                   'js/calendar.js',
                   'js/picker.js',

diff --git a/docs/_includes/_components/bar.html b/docs/_includes/_components/bar.html
@@ -138,8 +138,8 @@ <h3 class="component-title">带标签页</h3>
     <article class="component" id='toolbar'>
       <h2 class="component-title">工具栏</h2>
 
-      <div class="component-example component-example-fullbleed">
-      </div>
+      <p>工具栏一般会作为一级导航来切换几个主页面。这个时候你需要把它放到 <code>.page</code> 元素的同级。如果在某个页面中不需要显示工具栏，只需要在 <code>.page</code> 上增加一个 <code>.no-tabbar</code>即可，或者你可以通过调用 <code>$.showToolbar(true/false)</code> 来切换工具栏的显示状态。</p>
+      <p>注意如果你通过路由器进行切换，用来切换的几个页面一定要是内联页面，不然会造成重复加载的问题，具体用法参见 <a href="/examples/light7-mall/">light7商城</a>。</p>
 
 {% highlight html %}
 <nav class="bar bar-tab">
@@ -167,7 +167,6 @@ <h2 class="component-title">工具栏</h2>
 </nav>
 {% endhighlight %}
 
-    <p class="component-note touch-only"><strong>注意:</strong> 使用 push.js 加载新页面</p>
 </article>
 <article class="component">
     <h3 class="component-title">工具栏 (只有文案)</h3>
@@ -197,7 +196,6 @@ <h3 class="component-title">工具栏 (只有文案)</h3>
 </a>
   </nav>
   {% endhighlight %}
-    <p class="component-note touch-only"><strong>注意:</strong> 使用 push.js 加载新页面.</p>
 </article>
 <article class="component">
     <h3 class="component-title">二级标题栏</h3>

diff --git a/docs/_includes/_components/router.html b/docs/_includes/_components/router.html
@@ -4,6 +4,10 @@ <h2 class="component-title">路由</h2>
   <p>默认情况下，router 会自动拦截所有的链接点击事件，如果你希望一个链接通过浏览器原生跳转而不使用 router，你可以在连接上增加一个 <code>class="external"</code> 或者 <code>external</code></p>
   <p>你也可以通过 `$.config.router` 参数来全局关闭路由器，参见 <a href="#init">初始化</a>。即使关闭了路由器，也强烈建议通过 `pageInit` 事件来初始化页面，因为这样可以保证你随时可以打开路由器而不用修改任何JS代码。</p>
 
+  <p>默认情况下，加载新的页面会从右向左滑动，后退会从左向右滑动。如果你想关掉加载动画，只需要在链接上加上 <code>class="no-transition"</code> 即可</p>
+
+  <p>注意如果你希望点击工具栏切换页面，一定要用内联页面进行切换，不然会造成重复加载的问题，具体用法参见 <a href="/examples/light7-mall/">light7商城</a>。</p>
+
   <h3 class="component-title">内联页面</h3>
   <p class="component-description">你可以在同一个HTML文件中内联编写多个页面。每一个页面都是一个 <code>.page</code> 容器，如果有多个页面，则需要用 <code>.page-current</code> 标记出第一次进入的时候应该显示的页面。</p>
   <p>每一个 <code>.page</code> 容器都应该有一个全局唯一的id，路由器会使用这个id作为唯一标示，如果没有设置id，可能会导致路由出错。你只需要这样写一个链接就可以跳转到id对应的内联页面 <code>&lt;a href='#{page-id}'&gt;跳转&lt;/a&gt;</code>.</p>

diff --git a/docs/_includes/masthead.html b/docs/_includes/masthead.html
@@ -7,15 +7,15 @@ <h1 class="docs-title">
       <nav class="docs-nav clearfix">
         <a class="docs-nav-trigger icon icon-menu pull-right js-docs-nav-trigger" href="#"></a>
         <div class="docs-nav-group">
-          <a class="docs-nav-item" href="/" data-ignore="push">首页</a>
-          <a class="docs-nav-item" href="/getting-started" data-ignore="push">开始使用</a>
-          <a class="docs-nav-item" href="/components" data-ignore="push">基础组件</a>
-          <a class="docs-nav-item" href="/extends" data-ignore="push">拓展组件</a>
-          <a class="docs-nav-item" href="https://github.com/lihongxun945/light7/archive/build.zip" data-ignore="push" target="_blank">下载</a>
-          <a class="docs-nav-item" href="/demos" data-ignore="push">示例</a>
-          <a class="docs-nav-item" href="/changelog" data-ignore="push">更新日志</a>
-          <a class="docs-nav-item" href="/about" data-ignore="push">关于</a>
-          <a class="docs-nav-item" href="https://github.com/lihongxun945/light7" target="_blank" data-ignore="push">github</a>
+          <a class="docs-nav-item" href="/">首页</a>
+          <a class="docs-nav-item" href="/getting-started" >开始使用</a>
+          <a class="docs-nav-item" href="/components">基础组件</a>
+          <a class="docs-nav-item" href="/extends">拓展组件</a>
+          <a class="docs-nav-item" href="/examples">案例</a>
+          <a class="docs-nav-item" href="https://github.com/lihongxun945/light7/archive/build.zip" target="_blank">下载</a>
+          <a class="docs-nav-item" href="/changelog">更新日志</a>
+          <a class="docs-nav-item" href="https://github.com/lihongxun945/light7" target="_blank">github</a>
+          <a class="docs-nav-item" href="/about">关于</a>
         </div>
       </nav>
     </div>

diff --git a/docs/_layouts/examples.html b/docs/_layouts/examples.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>百川</title>
+    <title>Light7商城</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <link rel="shortcut icon" href="/favicon.ico">
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -14,14 +14,16 @@
     <link rel="apple-touch-icon" href="/assets/img/apple-touch-icon-114x114.png">
 
     <link rel="stylesheet" href="//at.alicdn.com/t/font_1433748561_0232708.css">
-    <link rel="stylesheet" href="/examples/baichuan/css/app.css">
+    <link rel="stylesheet" href="/examples/light7-mall/css/app.css">
   </head>
   <body>
+
     {{ content }}
+
     <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
     <script type='text/javascript' src='/dist/js/light7.js' charset='utf-8'></script>
     <script type='text/javascript' src='/dist/js/light7-extend.js' charset='utf-8'></script>
 
-    <script src="/examples/baichuan/js/app.js"></script>
+    <script src="/examples/light7-mall/js/app.js"></script>
   </body>
 </html>
diff --git a/docs/about.html b/docs/about.html
@@ -29,7 +29,7 @@ <h2>不重复造轮子</h2>
       <div class="docs-section">
         <h2>兼容性</h2>
         <p>兼容到 iOS 6+ 以及 Android 4.0+</p>
-        <p>因为安卓机型众多，我们无法对每一台机器进行测试，如果你发现在安卓 4.0以上的机器上有bug，可以在 <a href="https://github.com/sdc-alibaba/SUI-Mobile" target="_blank" data-ignore="push">github</a> 上给我们提 issue,或者直接联系我们（联系方式在下面）。</p>
+        <p>因为安卓机型众多，我们无法对每一台机器进行测试，如果你发现在安卓 4.0以上的机器上有bug，可以在 <a href="https://github.com/lihongxun945/light7" target="_blank" data-ignore="push">github</a> 上给我们提 issue,或者直接联系我们（联系方式在下面）。</p>
       </div>
 
       <div class="docs-section">

diff --git a/docs/assets/img/demos.png b/docs/assets/img/demos.png
diff --git a/docs/assets/img/light7-mall.png b/docs/assets/img/light7-mall.png
diff --git a/docs/changelog.html b/docs/changelog.html
@@ -32,6 +32,9 @@ <h3>V0.0.4</h3>
         <ul>
           <li>修复了 <a href='/extends/#swiper'>幻灯片</a> 中的一处代码错误，会导致幻灯片无法自动初始化。</li>
           <li>更新了 <a href='/components/#popup'>popup</a> 文档中代码的错误: 如果想自动打开 popup，需要加上 <code>open-popup</code> 类才可以。</li>
+          <li>更新了 <a href='/components/#router'>路由</a> : 现在你可以使用路由进行<a href="/components#toolbar">工具栏</a>切换了。修复了 <code>pageReinit</code> 的bug。 修复了当新页面只有一个 <code>.page</code> 容器时的错误。</li>
+          <li>现在你可以显示和隐藏<a href="/components#toolbar">工具栏</a>了。</li>
+          <li>增加了一个新的 <a href='/examples'>案例</a> 页面。
         </ul>
 
         <h3>V0.0.3 - 2015-11-03</h3>

diff --git a/docs/examples.html b/docs/examples.html
@@ -7,51 +7,41 @@
   {% include masthead.html %}
   <div class="container">
     <div class="docs-sub-content">
-      <h2 class="page-title">Examples</h2>
-      <p class="page-description">Take a look at some of these example apps built on Ratchet.</p>
+      <h2 class="page-title">示例</h2>
+      <p class="page-description">这里是一些用 Light7 搭建的应用，极具参考价值。你可以以这些应用为基础进行开发。</p>
     </div>
     {% include ad.html %}
   </div>
 </div>
 
 <div class="container">
-  <div class="column-group">
-    <div class="column lg-units-8 docs-examples docs-content">
+  <div class="docs-examples docs-content">
 
-      <p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
+    <p class="lead">请在手机浏览器或者桌面浏览器的手机模式下打开。</p>
+    <p>如果你有使用light7搭建的应用并且愿意分享，欢迎联系我放到这里。</p>
 
-      <div class="column-group">
-        <div class="column lg-units-4">
-          <div class="example-wrap">
-            <a class="example" href="/examples/app-movies" data-ignore="push">
-              <img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480">
-            </a>
-            <h4 class="example-title">Movie finder</h4>
-          </div>
+    <div class="column-group">
+      <div class="column lg-units-4">
+        <div class="example-wrap">
+          <a class="example" href="/demos" data-ignore="push">
+            <img src="/assets/img/demos.png" alt="Movie finder app example" width="640" height="480">
+          </a>
+          <h4 class="example-title">组件库</h4>
+          <p>包含了全部 light7 的组件。</p>
         </div>
-        <div class="column lg-units-4">
-          <div class="example-wrap">
-            <a class="example" href="/examples/app-ios-mail" data-ignore="push">
-              <img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
-            </a>
-            <h4 class="example-title">iOS mail app</h4>
-          </div>
+      </div>
+      <div class="column lg-units-4">
+        <div class="example-wrap">
+          <a class="example" href="/examples/light7-mall" data-ignore="push">
+            <img src="/assets/img/light7-mall.png" alt="iOS mail app example" width="640" height="480">
+          </a>
+          <h4 class="example-title">light7 商城</h4>
+          <p>这是一个商城应用的实例。</p>
         </div>
-        <div class="column lg-units-4">
-          <div class="example-wrap">
-            <a class="example" href="/examples/app-android-notes" data-ignore="push">
-              <img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
-            </a>
-            <h4 class="example-title">Android notes app</h4>
-          </div>
-        </div> <!-- .column-group -->
       </div>
     </div>
-
-    <div class="column lg-units-4">
-      {% include download-module.html %}
-    </div>
   </div>
+</div>
 
   <div class="column">
     <!-- Footer -->

diff --git a/docs/examples/baichuan/detail.html b/docs/examples/baichuan/detail.html