You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/03/02 03:54:05 UTC

[13/39] incubator-weex-site git commit: * update site

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/22906b6f/content/references/components/list.html
----------------------------------------------------------------------
diff --git a/content/references/components/list.html b/content/references/components/list.html
index 4f882f5..c6a6034 100644
--- a/content/references/components/list.html
+++ b/content/references/components/list.html
@@ -5,49 +5,6 @@
   
   <title>&lt;list&gt; | Weex</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <script>
-  ;(function(){
-    var currentOrigin = location.origin,
-        currentPathname = location.pathname,
-        currentLang = navigator.language,
-        selectedLang = '';
-
-    if (!currentLang) {
-      currentLang = navigator.browserLanguage;
-    }
-
-    if (window.sessionStorage) {
-      selectedLang = window.sessionStorage.getItem('lang')
-    }
-
-    if (!selectedLang) {
-      if (currentLang.indexOf('zh') >= 0 && currentPathname.indexOf('/cn/') != 0) {
-        location.href = getUrl('cn', currentOrigin, currentPathname);
-      } else if (currentLang.indexOf('en') >= 0 && currentPathname.indexOf('/cn/') == 0) {
-        location.href = getUrl('en', currentOrigin, currentPathname);
-      }
-    }
-
-    function getUrl (lang, origin, path) {
-      if (lang == 'en') {
-        if (path.indexOf('/cn/') == 0) {
-          return origin + path.substr(3)
-        } else {
-          return origin + path
-        }
-      } else {
-        var langPath = '/' + lang + '/'
-        var pathStart = path.indexOf(langPath)
-
-        if (pathStart == 0) {
-          return origin + path
-        } else {
-          return origin + langPath + path.substr(1)
-        }
-      }
-    }
-  })();
-  </script>
   <meta name="description" content="Listv0.6.1+
 The List component, which inherits from Scroller component, is a core component, and it provides the most popular features for using a list of items.
 It can provide excellent experience an">
@@ -58,7 +15,7 @@ It can provide excellent experience an">
 <meta property="og:description" content="Listv0.6.1+
 The List component, which inherits from Scroller component, is a core component, and it provides the most popular features for using a list of items.
 It can provide excellent experience an">
-<meta property="og:updated_time" content="2017-02-26T06:06:13.000Z">
+<meta property="og:updated_time" content="2017-03-02T03:29:33.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="<list>">
 <meta name="twitter:description" content="Listv0.6.1+
@@ -121,13 +78,29 @@ It can provide excellent experience an">
         <li>
           <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-header" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
   </div>
 </div>
         </li>
+        <li>
+          <div class="dropdown select-lang">
+            <a href="javascript:;" class="dropdown-toggle">
+              Language
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu pick-lang">
+              <li>
+                <a href="/references/components/list.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/components/list.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -144,7 +117,7 @@ It can provide excellent experience an">
     
       <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-sidebar" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
@@ -583,11 +556,11 @@ It can provide excellent experience an">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -703,12 +676,12 @@ It can provide excellent experience an">
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -726,7 +699,7 @@ It can provide excellent experience an">
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1170,11 +1143,11 @@ It can provide excellent experience an">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -1290,12 +1263,12 @@ It can provide excellent experience an">
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -1313,7 +1286,7 @@ It can provide excellent experience an">
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1331,7 +1304,7 @@ It can provide excellent experience an">
       </h1>
     
   
-  <time class="article-date" datetime="2017-02-26T06:06:13.000Z">Updated time: 26/02/2017</time>
+  <time class="article-date" datetime="2017-03-02T03:29:33.000Z">Updated time: 02/03/2017</time>
 </header>
     <h1 id="List"><a href="#List" class="headerlink" title="List"></a>List</h1><p><span class="weex-version">v0.6.1+</span></p>
 <p>The List component, which inherits from Scroller component, is a core component, and it provides the most popular features for using a list of items.</p>
@@ -1369,7 +1342,7 @@ It can provide excellent experience an">
 <h4 id="Difference-between-loading-child-component-and-onloadmore-event"><a href="#Difference-between-loading-child-component-and-onloadmore-event" class="headerlink" title="Difference between loading child component and onloadmore event"></a>Difference between loading child component and onloadmore event</h4><p>loading is a child component that can response to the onloading  event, and this event can only be triggered when the  scroller/list has been scrolled down to the bottom.<br>onloadmore is an event that will be triggered when the rest of the scroller/list is less than loadmoreoffset long.</p>
 <h3 id="Restrictions"><a href="#Restrictions" class="headerlink" title="Restrictions"></a>Restrictions</h3><p>Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.<br>For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.</p>
 <h3 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">list</span> <span class="attr">class</span>=<span class="string">"list"</span> @<span class="attr">loadmore</span>=<span class="string">"fetch"</span> <span class="attr">loadmoreoffset</span>=<span class="string">"10"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">cell</span> <span class="attr">class</span>=<span class="string">"cell"</span> <span class="attr">v-for</span>=<span class="string">"num in lists"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class=
 "name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>&gt;</span>&#123;&#123;num&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">cell</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">list</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line">  <span class="keyword">const</span> LOADMORE_COUNT = <span class="number">4</span></div><div class="line"></div><div class="line">  <span class="keyw
 ord">export</span> <span class="keyword">default</span> &#123;</div><div class="line">    data () &#123;</div><div class="line">      <span class="keyword">return</span> &#123;</div><div class="line">        <span class="attr">lists</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</div><div class="line">      &#125;</div><div class="line">    &#125;,</div><div class="line">    <span class="attr">methods</span>: &#123;</div><div class="line">      fetch (event) &#123;</div><div class="line">        modal.toast(&#123; <span class="attr">message</span>: <span class="string">'loadmore'</span>, <span class="attr">duration</span>: <span class="number">1</span> &#125;)</div><div class="line"></div><div class="line">        setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">          <span class="keyword">const</span> len
 gth = <span class="keyword">this</span>.lists.length</div><div class="line">          <span class="keyword">for</span> (<span class="keyword">let</span> i = length; i &lt; length + LOADMORE_COUNT; ++i) &#123;</div><div class="line">            <span class="keyword">this</span>.lists.push(i + <span class="number">1</span>)</div><div class="line">          &#125;</div><div class="line">        &#125;, <span class="number">800</span>)</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="css"></span></div><div class="line">  <span class="selector-class">.panel</span> &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line"> 
    <span class="attribute">height</span>: <span class="number">250px</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">75px</span>;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">35px</span>;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">35px</span>;</div><div class="line">    <span class="attribute">flex-direction</span>: column;</div><div class="line">    <span class="attribute">justify-content</span>: center;</div><div class="line">    <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line">    <span class="attribute">border-style</span>: solid;</div><div class="line">    <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(162, 217, 192, 0.2);</
 div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.text</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">50px</span>;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div></pre></td></tr></table></figure>
-<p><a href="../../examples/list.html">try it</a></p>
+<p><a href="http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38" target="_blank" rel="external">try it</a></p>
 
   </div>
   
@@ -1391,7 +1364,7 @@ It can provide excellent experience an">
           <a href="/references/components/list.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/components/list.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/components/list.html" data-lang="zh-cn">\u4e2d\u6587</a>
         </li>
       </ul>
     </div>

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/22906b6f/content/references/components/refresh.html
----------------------------------------------------------------------
diff --git a/content/references/components/refresh.html b/content/references/components/refresh.html
index 4ce4c0d..e6f7f00 100644
--- a/content/references/components/refresh.html
+++ b/content/references/components/refresh.html
@@ -5,49 +5,6 @@
   
   <title>&lt;refresh&gt; &amp; &lt;loading&gt; | Weex</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <script>
-  ;(function(){
-    var currentOrigin = location.origin,
-        currentPathname = location.pathname,
-        currentLang = navigator.language,
-        selectedLang = '';
-
-    if (!currentLang) {
-      currentLang = navigator.browserLanguage;
-    }
-
-    if (window.sessionStorage) {
-      selectedLang = window.sessionStorage.getItem('lang')
-    }
-
-    if (!selectedLang) {
-      if (currentLang.indexOf('zh') >= 0 && currentPathname.indexOf('/cn/') != 0) {
-        location.href = getUrl('cn', currentOrigin, currentPathname);
-      } else if (currentLang.indexOf('en') >= 0 && currentPathname.indexOf('/cn/') == 0) {
-        location.href = getUrl('en', currentOrigin, currentPathname);
-      }
-    }
-
-    function getUrl (lang, origin, path) {
-      if (lang == 'en') {
-        if (path.indexOf('/cn/') == 0) {
-          return origin + path.substr(3)
-        } else {
-          return origin + path
-        }
-      } else {
-        var langPath = '/' + lang + '/'
-        var pathStart = path.indexOf(langPath)
-
-        if (pathStart == 0) {
-          return origin + path
-        } else {
-          return origin + langPath + path.substr(1)
-        }
-      }
-    }
-  })();
-  </script>
   <meta name="description" content="refresh &amp;amp; loadingv0.6.1+
 Loading ComponentsTo be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
 Child ComponentsAny other compon">
@@ -58,7 +15,7 @@ Child ComponentsAny other compon">
 <meta property="og:description" content="refresh &amp;amp; loadingv0.6.1+
 Loading ComponentsTo be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
 Child ComponentsAny other compon">
-<meta property="og:updated_time" content="2017-02-26T06:06:13.000Z">
+<meta property="og:updated_time" content="2017-03-02T03:29:33.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="<refresh> & <loading>">
 <meta name="twitter:description" content="refresh &amp;amp; loadingv0.6.1+
@@ -121,13 +78,29 @@ Child ComponentsAny other compon">
         <li>
           <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-header" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
   </div>
 </div>
         </li>
+        <li>
+          <div class="dropdown select-lang">
+            <a href="javascript:;" class="dropdown-toggle">
+              Language
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu pick-lang">
+              <li>
+                <a href="/references/components/refresh.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/components/refresh.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -144,7 +117,7 @@ Child ComponentsAny other compon">
     
       <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-sidebar" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
@@ -583,11 +556,11 @@ Child ComponentsAny other compon">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -703,12 +676,12 @@ Child ComponentsAny other compon">
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -726,7 +699,7 @@ Child ComponentsAny other compon">
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1170,11 +1143,11 @@ Child ComponentsAny other compon">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -1290,12 +1263,12 @@ Child ComponentsAny other compon">
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -1313,7 +1286,7 @@ Child ComponentsAny other compon">
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1331,7 +1304,7 @@ Child ComponentsAny other compon">
       </h1>
     
   
-  <time class="article-date" datetime="2017-02-26T06:06:13.000Z">Updated time: 26/02/2017</time>
+  <time class="article-date" datetime="2017-03-02T03:29:33.000Z">Updated time: 02/03/2017</time>
 </header>
     <h1 id="refresh-amp-loading"><a href="#refresh-amp-loading" class="headerlink" title="refresh &amp; loading"></a>refresh &amp; loading</h1><p><span class="weex-version">v0.6.1+</span></p>
 <h2 id="Loading-Components"><a href="#Loading-Components" class="headerlink" title="Loading Components"></a>Loading Components</h2><p>To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.</p>
@@ -1372,7 +1345,7 @@ Child ComponentsAny other compon">
 <li>refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display=\u2019hide\u2019 when display=\u2019show\u2019 shows up in an event function, or your scroller may not response to user inputs.</li>
 </ul>
 <h3 id="example"><a href="#example" class="headerlink" title="example"></a>example</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">scroller</span> <span class="attr">class</span>=<span class="string">"scroller"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">refresh</span> <span class="attr">class</span>=<span class="string">"refresh"</span> @<span class="attr">refresh</span>=<span class="string">"onrefresh"</span> @<span class="attr">pullingdown</span>=<span class="string">"onpullingdown"</span> <span class="attr">:display</span>=<span class="string">"refreshing ? 'show' : 'hide'"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"indicator"</span>&gt;</span>Refreshing ...<s
 pan class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">refresh</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"cell"</span> <span class="attr">v-for</span>=<span class="string">"num in lists"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span>&gt;</span>&#123;&#123;num&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div 
 class="line">  <span class="tag">&lt;/<span class="name">scroller</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">const</span> modal = weex.requireModule(<span class="string">'modal'</span>)</div><div class="line"></div><div class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">    data () &#123;</div><div class="line">      <span class="keyword">return</span> &#123;</div><div class="line">        <span class="attr">refreshing</span>: <span class="literal">false</span>,</div><div class="line">        <span class="attr">lists</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="nu
 mber">5</span>]</div><div class="line">      &#125;</div><div class="line">    &#125;,</div><div class="line">    <span class="attr">methods</span>: &#123;</div><div class="line">      onrefresh (event) &#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">'is refreshing'</span>)</div><div class="line">        modal.toast(&#123; <span class="attr">message</span>: <span class="string">'refresh'</span>, <span class="attr">duration</span>: <span class="number">1</span> &#125;)</div><div class="line">        <span class="keyword">this</span>.refreshing = <span class="literal">true</span></div><div class="line">        setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">          <span class="keyword">this</span>.refreshing = <span class="literal">false</span></div><div class="line">        &#125;, <span class="number">2000</span>)</div><div class="line">      &#125;,</div><div class="l
 ine">      onpullingdown (event) &#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">'is onpulling down'</span>)</div><div class="line">        modal.toast(&#123; <span class="attr">message</span>: <span class="string">'pulling down'</span>, <span class="attr">duration</span>: <span class="number">1</span> &#125;)</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="css"></span></div><div class="line">  <span class="selector-class">.indicator</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#888888</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number"
 >42px</span>;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.panel</span> &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">250px</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">75px</span>;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">35px</span>;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">35px</span>;</div><div class="line">    <span class="attribute">flex-direction</span>: column;</div><div class="line">    <span class="attribute">justify-content</span>: center;</div><div class="line">    <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div c
 lass="line">    <span class="attribute">border-style</span>: solid;</div><div class="line">    <span class="attribute">border-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="number">#F5F5F5</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.text</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">50px</span>;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div></pre></td></tr></table></figure>
-<p><a href="../../examples/refresh.html">try it</a></p>
+<p><a href="http://dotwe.org/vue/d3db5f344220a6339de044a5e33c502b" target="_blank" rel="external">try it</a></p>
 
   </div>
   
@@ -1394,7 +1367,7 @@ Child ComponentsAny other compon">
           <a href="/references/components/refresh.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/components/refresh.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/components/refresh.html" data-lang="zh-cn">\u4e2d\u6587</a>
         </li>
       </ul>
     </div>

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/22906b6f/content/references/components/scroller.html
----------------------------------------------------------------------
diff --git a/content/references/components/scroller.html b/content/references/components/scroller.html
index a7b78ed..0d23f7d 100644
--- a/content/references/components/scroller.html
+++ b/content/references/components/scroller.html
@@ -5,49 +5,6 @@
   
   <title>&lt;scroller&gt; | Weex</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <script>
-  ;(function(){
-    var currentOrigin = location.origin,
-        currentPathname = location.pathname,
-        currentLang = navigator.language,
-        selectedLang = '';
-
-    if (!currentLang) {
-      currentLang = navigator.browserLanguage;
-    }
-
-    if (window.sessionStorage) {
-      selectedLang = window.sessionStorage.getItem('lang')
-    }
-
-    if (!selectedLang) {
-      if (currentLang.indexOf('zh') >= 0 && currentPathname.indexOf('/cn/') != 0) {
-        location.href = getUrl('cn', currentOrigin, currentPathname);
-      } else if (currentLang.indexOf('en') >= 0 && currentPathname.indexOf('/cn/') == 0) {
-        location.href = getUrl('en', currentOrigin, currentPathname);
-      }
-    }
-
-    function getUrl (lang, origin, path) {
-      if (lang == 'en') {
-        if (path.indexOf('/cn/') == 0) {
-          return origin + path.substr(3)
-        } else {
-          return origin + path
-        }
-      } else {
-        var langPath = '/' + lang + '/'
-        var pathStart = path.indexOf(langPath)
-
-        if (pathStart == 0) {
-          return origin + path
-        } else {
-          return origin + langPath + path.substr(1)
-        }
-      }
-    }
-  })();
-  </script>
   <meta name="description" content="&amp;lt;scroller&amp;gt;v0.6.1+
 A scroller is a component in vertical direction which can have multiple child components in one column. If total height of its child components exceed the height of the scrolle">
 <meta property="og:type" content="website">
@@ -56,7 +13,7 @@ A scroller is a component in vertical direction which can have multiple child co
 <meta property="og:site_name" content="Weex">
 <meta property="og:description" content="&amp;lt;scroller&amp;gt;v0.6.1+
 A scroller is a component in vertical direction which can have multiple child components in one column. If total height of its child components exceed the height of the scrolle">
-<meta property="og:updated_time" content="2017-02-26T06:06:13.000Z">
+<meta property="og:updated_time" content="2017-03-02T03:29:33.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="<scroller>">
 <meta name="twitter:description" content="&amp;lt;scroller&amp;gt;v0.6.1+
@@ -118,13 +75,29 @@ A scroller is a component in vertical direction which can have multiple child co
         <li>
           <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-header" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
   </div>
 </div>
         </li>
+        <li>
+          <div class="dropdown select-lang">
+            <a href="javascript:;" class="dropdown-toggle">
+              Language
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu pick-lang">
+              <li>
+                <a href="/references/components/scroller.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/components/scroller.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -141,7 +114,7 @@ A scroller is a component in vertical direction which can have multiple child co
     
       <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-sidebar" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
@@ -580,11 +553,11 @@ A scroller is a component in vertical direction which can have multiple child co
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -700,12 +673,12 @@ A scroller is a component in vertical direction which can have multiple child co
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -723,7 +696,7 @@ A scroller is a component in vertical direction which can have multiple child co
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1167,11 +1140,11 @@ A scroller is a component in vertical direction which can have multiple child co
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -1287,12 +1260,12 @@ A scroller is a component in vertical direction which can have multiple child co
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -1310,7 +1283,7 @@ A scroller is a component in vertical direction which can have multiple child co
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1328,7 +1301,7 @@ A scroller is a component in vertical direction which can have multiple child co
       </h1>
     
   
-  <time class="article-date" datetime="2017-02-26T06:06:13.000Z">Updated time: 26/02/2017</time>
+  <time class="article-date" datetime="2017-03-02T03:29:33.000Z">Updated time: 02/03/2017</time>
 </header>
     <h1 id="lt-scroller-gt"><a href="#lt-scroller-gt" class="headerlink" title="&lt;scroller&gt;"></a>&lt;scroller&gt;</h1><p><span class="weex-version">v0.6.1+</span></p>
 <p>A scroller is a component in vertical direction which can have multiple child components in one column. If total height of its child components exceed the height of the scroller, the whole child components will be scrollable.</p>
@@ -1359,7 +1332,7 @@ A scroller is a component in vertical direction which can have multiple child co
 </ul>
 <h2 id="Restrictions"><a href="#Restrictions" class="headerlink" title="Restrictions"></a>Restrictions</h2><p>Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.<br>For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal.</p>
 <h2 id="example"><a href="#example" class="headerlink" title="example"></a>example</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">scroller</span> <span class="attr">class</span>=<span class="string">"scroller"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span> <span class="attr">v-for</span>=<span class="string">"(name, index) in rows"</span> <span class="attr">:ref</span>=<span class="string">"'item'+index"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<spa
 n class="string">"text"</span> <span class="attr">:ref</span>=<span class="string">"'text'+index"</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">scroller</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"group"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">text</span> @<span class="attr">click</span>=<span class="string">"goto10"</span> <span class="attr">class</span>=<span class="string">"button"</span>&gt;</span>Go to 10<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">text</span> @<span class="attr">click</span>=<span class="string">"g
 oto20"</span> <span class="attr">class</span>=<span class="string">"button"</span>&gt;</span>Go to 20<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">const</span> dom = weex.requireModule(<span class="string">'dom'</span>)</div><div class="line"></div><div class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">    data () &#123;</div><div class="line">      <span class="keyword">return</span> &#123;</div><div class="line">        <span class="attr">r
 ows</span>: []</div><div class="line">      &#125;</div><div class="line">    &#125;,</div><div class="line">    created () &#123;</div><div class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">30</span>; i++) &#123;</div><div class="line">        <span class="keyword">this</span>.rows.push(<span class="string">'row '</span> + i)</div><div class="line">      &#125;</div><div class="line">    &#125;,</div><div class="line">    <span class="attr">methods</span>: &#123;</div><div class="line">      goto10 (count) &#123;</div><div class="line">        <span class="keyword">const</span> el = <span class="keyword">this</span>.$refs.item10[<span class="number">0</span>]</div><div class="line">        dom.scrollToElement(el, &#123;&#125;)</div><div class="line">      &#125;,</div><div class="line">      goto20 (count) &#123;</div><div class="line">        <span class="keyword">const</span> el = <
 span class="keyword">this</span>.$refs.item20[<span class="number">0</span>]</div><div class="line">        dom.scrollToElement(el, &#123; <span class="attr">offset</span>: <span class="number">0</span> &#125;)</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="css"></span></div><div class="line">  <span class="selector-class">.scroller</span> &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">700px</span>;</div><div class="line">    <span class="attribute">border-width</span>: <span class="number">3px</span>;</div><div class="line">    <span class="
 attribute">border-style</span>: solid;</div><div class="line">    <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">25px</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.row</span> &#123;</div><div class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</div><div class="line">    <span class="attribute">flex-direction</span>: column;</div><div class="line">    <span class="attribute">justify-content</span>: center;</div><div class="line">    <span class="attribute">padding-left</span>: <span class="number">30px</span>;</div><div class="line">    <span class="attribute">border-bottom-width</span>: <span class="number">2px</span>;</div><div class="line">    <span class="attribute">border-bottom-style</span>: solid;</div><div class="line">    <span class="attribute">borde
 r-bottom-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.text</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">45px</span>;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#666666</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.group</span> &#123;</div><div class="line">    <span class="attribute">flex-direction</span>: row;</div><div class="line">    <span class="attribute">justify-content</span>: center;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">60px</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.button</span> &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</div><div class="line">    <span class="attri
 bute">padding-top</span>: <span class="number">20px</span>;</div><div class="line">    <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">40px</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">30px</span>;</div><div class="line">    <span class="attribute">margin-right</span>: <span class="number">30px</span>;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#41B883</span>;</div><div class="line">    <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line">    <span class="attribute">border-style</span>: solid;</div><div class="line">    <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(162, 217, 192);</div><div class="line">    <s
 pan class="attribute">background-color</span>: <span class="built_in">rgba</span>(162, 217, 192, 0.2);</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div></pre></td></tr></table></figure>
-<p><a href="../../examples/scroller.html">try it</a></p>
+<p><a href="http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a" target="_blank" rel="external">try it</a></p>
 
   </div>
   
@@ -1381,7 +1354,7 @@ A scroller is a component in vertical direction which can have multiple child co
           <a href="/references/components/scroller.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/components/scroller.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/components/scroller.html" data-lang="zh-cn">\u4e2d\u6587</a>
         </li>
       </ul>
     </div>

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/22906b6f/content/references/components/slider.html
----------------------------------------------------------------------
diff --git a/content/references/components/slider.html b/content/references/components/slider.html
index 5c451bd..9be471b 100644
--- a/content/references/components/slider.html
+++ b/content/references/components/slider.html
@@ -5,49 +5,6 @@
   
   <title>&lt;slider&gt; | Weex</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <script>
-  ;(function(){
-    var currentOrigin = location.origin,
-        currentPathname = location.pathname,
-        currentLang = navigator.language,
-        selectedLang = '';
-
-    if (!currentLang) {
-      currentLang = navigator.browserLanguage;
-    }
-
-    if (window.sessionStorage) {
-      selectedLang = window.sessionStorage.getItem('lang')
-    }
-
-    if (!selectedLang) {
-      if (currentLang.indexOf('zh') >= 0 && currentPathname.indexOf('/cn/') != 0) {
-        location.href = getUrl('cn', currentOrigin, currentPathname);
-      } else if (currentLang.indexOf('en') >= 0 && currentPathname.indexOf('/cn/') == 0) {
-        location.href = getUrl('en', currentOrigin, currentPathname);
-      }
-    }
-
-    function getUrl (lang, origin, path) {
-      if (lang == 'en') {
-        if (path.indexOf('/cn/') == 0) {
-          return origin + path.substr(3)
-        } else {
-          return origin + path
-        }
-      } else {
-        var langPath = '/' + lang + '/'
-        var pathStart = path.indexOf(langPath)
-
-        if (pathStart == 0) {
-          return origin + path
-        } else {
-          return origin + langPath + path.substr(1)
-        }
-      }
-    }
-  })();
-  </script>
   <meta name="description" content="&amp;lt;slider&amp;gt;SummaryA slide\u2019s player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.
 Child ComponentsIt supports all kinds of weex compo">
 <meta property="og:type" content="website">
@@ -56,7 +13,7 @@ Child ComponentsIt supports all kinds of weex compo">
 <meta property="og:site_name" content="Weex">
 <meta property="og:description" content="&amp;lt;slider&amp;gt;SummaryA slide\u2019s player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.
 Child ComponentsIt supports all kinds of weex compo">
-<meta property="og:updated_time" content="2017-02-26T06:06:13.000Z">
+<meta property="og:updated_time" content="2017-03-02T03:29:33.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="<slider>">
 <meta name="twitter:description" content="&amp;lt;slider&amp;gt;SummaryA slide\u2019s player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.
@@ -118,13 +75,29 @@ Child ComponentsIt supports all kinds of weex compo">
         <li>
           <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-header" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
   </div>
 </div>
         </li>
+        <li>
+          <div class="dropdown select-lang">
+            <a href="javascript:;" class="dropdown-toggle">
+              Language
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu pick-lang">
+              <li>
+                <a href="/references/components/slider.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/components/slider.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -141,7 +114,7 @@ Child ComponentsIt supports all kinds of weex compo">
     
       <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-sidebar" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
@@ -580,11 +553,11 @@ Child ComponentsIt supports all kinds of weex compo">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -700,12 +673,12 @@ Child ComponentsIt supports all kinds of weex compo">
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -723,7 +696,7 @@ Child ComponentsIt supports all kinds of weex compo">
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1167,11 +1140,11 @@ Child ComponentsIt supports all kinds of weex compo">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -1287,12 +1260,12 @@ Child ComponentsIt supports all kinds of weex compo">
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -1310,7 +1283,7 @@ Child ComponentsIt supports all kinds of weex compo">
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1328,7 +1301,7 @@ Child ComponentsIt supports all kinds of weex compo">
       </h1>
     
   
-  <time class="article-date" datetime="2017-02-26T06:06:13.000Z">Updated time: 26/02/2017</time>
+  <time class="article-date" datetime="2017-03-02T03:29:33.000Z">Updated time: 02/03/2017</time>
 </header>
     <h1 id="lt-slider-gt"><a href="#lt-slider-gt" class="headerlink" title="&lt;slider&gt;"></a>&lt;slider&gt;</h1><h2 id="Summary"><a href="#Summary" class="headerlink" title="Summary"></a>Summary</h2><p>A slide\u2019s player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.</p>
 <h2 id="Child-Components"><a href="#Child-Components" class="headerlink" title="Child Components"></a>Child Components</h2><p>It supports all kinds of weex components as its slides, especially the <code>indicator</code> component which can be used only as a child component of <code>slider</code>.</p>
@@ -1353,7 +1326,7 @@ Child ComponentsIt supports all kinds of weex compo">
 <li>support <code>appear</code> / <code>disappear</code> event. Check out <a href="../common-event.html">common events</a></li>
 </ul>
 <h3 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h3><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">slider</span> <span class="attr">class</span>=<span class="string">"slider"</span> <span class="attr">interval</span>=<span class="string">"3000"</span> <span class="attr">auto-play</span>=<span class="string">"true"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"frame"</span> <span class="attr">v-for</span>=<span class="string">"img in imageList"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">image</span> <span class="attr">class</span>=<span class="
 string">"image"</span> <span class="attr">resize</span>=<span class="string">"cover"</span> <span class="attr">:src</span>=<span class="string">"img.src"</span>&gt;</span><span class="tag">&lt;/<span class="name">image</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">slider</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="css"></span></div><div class="line">  <span class="selector-class">.image</span> &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line">    <span class="attribu
 te">height</span>: <span class="number">700px</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.slider</span> &#123;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">25px</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">25px</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">700px</span>;</div><div class="line">    <span class="attribute">border-width</span>: <span class="number">2px</span>;</div><div class="line">    <span class="attribute">border-style</span>: solid;</div><div class="line">    <span class="attribute">border-color</span>: <span class="number">#41B883</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.frame</span> &#123;</div><div class="line">  
   <span class="attribute">width</span>: <span class="number">700px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">700px</span>;</div><div class="line">    <span class="attribute">position</span>: relative;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">    data () &#123;</div><div class="line">      <span class="keyword">return</span> &#123;</div><div class="line">        <span class="attr">imageList</span>: [</div><div class="line">          &#123; <span class="attr">src</span>: <span class="string">'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'</span>&#125;,</div>
 <div class="line">          &#123; <span class="attr">src</span>: <span class="string">'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'</span>&#125;,</div><div class="line">          &#123; <span class="attr">src</span>: <span class="string">'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'</span>&#125;</div><div class="line">        ]</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
-<p><a href="../../examples/slider.html">try it</a></p>
+<p><a href="http://dotwe.org/vue/0c43ffd743c90b3bd9f5371062652e60" target="_blank" rel="external">try it</a></p>
 
   </div>
   
@@ -1375,7 +1348,7 @@ Child ComponentsIt supports all kinds of weex compo">
           <a href="/references/components/slider.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/components/slider.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/components/slider.html" data-lang="zh-cn">\u4e2d\u6587</a>
         </li>
       </ul>
     </div>

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/22906b6f/content/references/components/switch.html
----------------------------------------------------------------------
diff --git a/content/references/components/switch.html b/content/references/components/switch.html
index eee9a38..f96c4b5 100644
--- a/content/references/components/switch.html
+++ b/content/references/components/switch.html
@@ -5,49 +5,6 @@
   
   <title>&lt;switch&gt; | Weex</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <script>
-  ;(function(){
-    var currentOrigin = location.origin,
-        currentPathname = location.pathname,
-        currentLang = navigator.language,
-        selectedLang = '';
-
-    if (!currentLang) {
-      currentLang = navigator.browserLanguage;
-    }
-
-    if (window.sessionStorage) {
-      selectedLang = window.sessionStorage.getItem('lang')
-    }
-
-    if (!selectedLang) {
-      if (currentLang.indexOf('zh') >= 0 && currentPathname.indexOf('/cn/') != 0) {
-        location.href = getUrl('cn', currentOrigin, currentPathname);
-      } else if (currentLang.indexOf('en') >= 0 && currentPathname.indexOf('/cn/') == 0) {
-        location.href = getUrl('en', currentOrigin, currentPathname);
-      }
-    }
-
-    function getUrl (lang, origin, path) {
-      if (lang == 'en') {
-        if (path.indexOf('/cn/') == 0) {
-          return origin + path.substr(3)
-        } else {
-          return origin + path
-        }
-      } else {
-        var langPath = '/' + lang + '/'
-        var pathStart = path.indexOf(langPath)
-
-        if (pathStart == 0) {
-          return origin + path
-        } else {
-          return origin + langPath + path.substr(1)
-        }
-      }
-    }
-  })();
-  </script>
   <meta name="description" content="&amp;lt;switch&amp;gt;v0.6.1+
 The weex builtin component switch is used to create and manage an IOS styled On/Off buttons, for example, the Airplane mode button in the Settings app is a switch button.
 Child C">
@@ -58,7 +15,7 @@ Child C">
 <meta property="og:description" content="&amp;lt;switch&amp;gt;v0.6.1+
 The weex builtin component switch is used to create and manage an IOS styled On/Off buttons, for example, the Airplane mode button in the Settings app is a switch button.
 Child C">
-<meta property="og:updated_time" content="2017-02-26T06:06:13.000Z">
+<meta property="og:updated_time" content="2017-03-02T03:29:33.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="<switch>">
 <meta name="twitter:description" content="&amp;lt;switch&amp;gt;v0.6.1+
@@ -121,13 +78,29 @@ Child C">
         <li>
           <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-header" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
   </div>
 </div>
         </li>
+        <li>
+          <div class="dropdown select-lang">
+            <a href="javascript:;" class="dropdown-toggle">
+              Language
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu pick-lang">
+              <li>
+                <a href="/references/components/switch.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/components/switch.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -144,7 +117,7 @@ Child C">
     
       <div class="search">
   <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
-    <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="search-input-sidebar" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
@@ -583,11 +556,11 @@ Child C">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -703,12 +676,12 @@ Child C">
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -726,7 +699,7 @@ Child C">
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1170,11 +1143,11 @@ Child C">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
+                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
               </li>
             
               <li>
-                <a href="/references/modules/websocket.html" class="sidebar-link  ">WebSocket</a>
+                <a href="/references/modules/picker.html" class="sidebar-link  ">picker</a>
               </li>
             
               <li>
@@ -1290,12 +1263,12 @@ Child C">
       </li>
     
       <li>
-        <h3 class="chapter-title"><a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a></h3>
+        <h3 class="chapter-title"><a href="/references/migration/index.html" class="sidebar-link  ">Migration</a></h3>
         
           <ul class="chapter">
             
               <li>
-                <a href="/references/migration/index.html" class="sidebar-link  ">Migration</a>
+                <a href="/references/platfrom-difference.html" class="sidebar-link  ">Platform Differences Between Weex and Web</a>
               </li>
             
               <li>
@@ -1313,7 +1286,7 @@ Child C">
     
     
       <li>
-        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Legacy</a></h3>
+        <h3 class="chapter-title"><a href="/v-0.10/references/index.html" class="sidebar-link">Old Syntax Doc</a></h3>
       </li>
     
   </ul>
@@ -1331,7 +1304,7 @@ Child C">
       </h1>
     
   
-  <time class="article-date" datetime="2017-02-26T06:06:13.000Z">Updated time: 26/02/2017</time>
+  <time class="article-date" datetime="2017-03-02T03:29:33.000Z">Updated time: 02/03/2017</time>
 </header>
     <h1 id="lt-switch-gt"><a href="#lt-switch-gt" class="headerlink" title="&lt;switch&gt;"></a>&lt;switch&gt;</h1><p><span class="weex-version">v0.6.1+</span></p>
 <p>The weex builtin component switch is used to create and manage an IOS styled On/Off buttons, for example, the Airplane mode button in the Settings app is a switch button.</p>
@@ -1362,7 +1335,7 @@ Child C">
 <li>timestamp: the time stamp of the event.</li>
 </ul>
 <h2 id="Examples"><a href="#Examples" class="headerlink" title="Examples"></a>Examples</h2><figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"label"</span>&gt;</span>normal<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">switch</span>&gt;</span><span class="tag">&lt;/<span class="name">switch</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  
   <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"label"</span>&gt;</span>checked<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">switch</span> <span class="attr">checked</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">switch</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"label"</span>
 &gt;</span>disabled<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">switch</span> <span class="attr">disabled</span>=<span class="string">"true"</span> <span class="attr">checked</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">switch</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">switch</span> <span class="attr">disabled</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">switch</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="stri
 ng">"label"</span>&gt;</span>onchange<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">switch</span> @<span class="attr">change</span>=<span class="string">"onchange"</span>&gt;</span><span class="tag">&lt;/<span class="name">switch</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"info"</span>&gt;</span>&#123;&#123;checked&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascrip
 t"></span></div><div class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">    data () &#123;</div><div class="line">      <span class="keyword">return</span> &#123;</div><div class="line">        <span class="attr">checked</span>: <span class="literal">false</span></div><div class="line">      &#125;</div><div class="line">    &#125;,</div><div class="line">    <span class="attr">methods</span>: &#123;</div><div class="line">      onchange (event) &#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">`onchage, value: <span class="subst">$&#123;event.value&#125;</span>`</span>)</div><div class="line">        <span class="keyword">this</span>.checked = event.value</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"
 ></div><div class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="css"></span></div><div class="line">  <span class="selector-class">.example</span> &#123;</div><div class="line">    <span class="attribute">flex-direction</span>: row;</div><div class="line">    <span class="attribute">justify-content</span>: flex-start;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">60px</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.label</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">40px</span>;</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">60px</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">350px</span>;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#
 666</span>;</div><div class="line">    <span class="attribute">text-align</span>: right;</div><div class="line">    <span class="attribute">margin-right</span>: <span class="number">20px</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.info</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">30px</span>;</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">60px</span>;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#BBB</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">10px</span>;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div></pre></td></tr></table></figure>
-<p><a href="../../examples/switch.html">try it</a></p>
+<p><a href="http://dotwe.org/vue/06b1d740fb69d04f9ebe9eaf730974d1" target="_blank" rel="external">try it</a></p>
 
   </div>
   
@@ -1384,7 +1357,7 @@ Child C">
           <a href="/references/components/switch.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/components/switch.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/components/switch.html" data-lang="zh-cn">\u4e2d\u6587</a>
         </li>
       </ul>
     </div>