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:02 UTC

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

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/22906b6f/content/references/modules/dom.html
----------------------------------------------------------------------
diff --git a/content/references/modules/dom.html b/content/references/modules/dom.html
index edb0f7a..f84436d 100644
--- a/content/references/modules/dom.html
+++ b/content/references/modules/dom.html
@@ -5,56 +5,13 @@
   
   <title>dom | 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="domSummaryA series of dom apis that sending virtual-dom\u2019s messages to the native renderer to update the dom tree. The only API for developers to use in a .we file is scrollToElement which you can use">
 <meta property="og:type" content="website">
 <meta property="og:title" content="dom">
 <meta property="og:url" content="https://weex.apache.org/references/modules/dom.html">
 <meta property="og:site_name" content="Weex">
 <meta property="og:description" content="domSummaryA series of dom apis that sending virtual-dom\u2019s messages to the native renderer to update the dom tree. The only API for developers to use in a .we file is scrollToElement which you can use">
-<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="dom">
 <meta name="twitter:description" content="domSummaryA series of dom apis that sending virtual-dom\u2019s messages to the native renderer to update the dom tree. The only API for developers to use in a .we file is scrollToElement which you can use">
@@ -115,13 +72,29 @@
         <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/modules/dom.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/modules/dom.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -138,7 +111,7 @@
     
       <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">
@@ -577,11 +550,11 @@
               </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>
@@ -697,12 +670,12 @@
       </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>
@@ -720,7 +693,7 @@
     
     
       <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>
@@ -1164,11 +1137,11 @@
               </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>
@@ -1284,12 +1257,12 @@
       </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>
@@ -1307,7 +1280,7 @@
     
     
       <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>
@@ -1325,7 +1298,7 @@
       </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="dom"><a href="#dom" class="headerlink" title="dom"></a>dom</h1><h2 id="Summary"><a href="#Summary" class="headerlink" title="Summary"></a>Summary</h2><p>A series of dom apis that sending virtual-dom\u2019s messages to the native renderer to update the dom tree. The only API for developers to use in a <code>.we</code> file is <code>scrollToElement</code> <del>which you can use by calling the <code>$scrollTo</code> method</del>. Other APIs mentioned on this page should only be used through the native renderer in the <code>callNative</code> process.</p>
 <h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="scrollToElement-node-options"><a href="#scrollToElement-node-options" class="headerlink" title="scrollToElement(node, options)"></a>scrollToElement(node, options)</h3><p>Scroll the page to the specified node. This API should only be used on the element in the <code>scroller</code> or <code>list</code> component.</p>
@@ -1338,14 +1311,14 @@
 </li>
 </ul>
 <h4 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h4><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="comment">/*justify-content: space-around;*/</span></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">wid
 th</span>: <span class="number">200px</span>;</div><div class="line">    <span class="attribute">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-co
 lor</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="tag">&lt;/<span class="name">style</span>&gt;</span></div></pre></td></tr></table></figure>
-<p><a href="../../examples/dom-scroll.html">try it</a></p>
+<p><a href="http://dotwe.org/vue/56e0d256cbb26facd958dbd6424f42b2" target="_blank" rel="external">try it</a></p>
 <h3 id="getComponentRect-ref-callback-v0-9-4"><a href="#getComponentRect-ref-callback-v0-9-4" class="headerlink" title="getComponentRect(ref,callback) v0.9.4+"></a>getComponentRect(ref,callback) <span class="api-version">v0.9.4+</span></h3><p>You can get the view rectangle information of named element.</p>
 <p>An example callback result maybe:</p>
 <figure class="highlight"><table><tr><td class="code"><pre><div class="line">&#123;</div><div class="line">  result: true,</div><div class="line">  size: &#123;</div><div class="line">    bottom: 60,</div><div class="line">    height: 15,</div><div class="line">    left: 0,</div><div class="line">    right: 353,</div><div class="line">    top: 45,</div><div class="line">    width: 353</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
 <p>If you want to get the rectangle information of \u2018weex view\u2019 container, you can specify the <code>ref=&#39;viewport&#39;</code>.</p>
 <p>Example Useage:</p>
 <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">div</span> <span class="attr">ref</span>=<span class="string">"box"</span> <span class="attr">class</span>=<span class="string">"box"</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>Width: &#123;&#123;size.width&#125;&#125;<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">class</span>=<span class="string">"info"</span>&gt;</span>Height: &#123;&#123;size.height&#125;&#125;<s
 pan 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">class</span>=<span class="string">"info"</span>&gt;</span>Top: &#123;&#123;size.top&#125;&#125;<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">class</span>=<span class="string">"info"</span>&gt;</span>Bottom: &#123;&#123;size.bottom&#125;&#125;<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">class</span>=<span class="string">"info"</span>&gt;</span>Left: &#123;&#123;size.left&#125;&#125;<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">class</span>=<span class="string">"info"</
 span>&gt;</span>Right: &#123;&#123;size.right&#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="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">size</span>: &#123;</div><div class="line">  
         <span class="attr">width</span>: <span class="number">0</span>,</div><div class="line">          <span class="attr">height</span>: <span class="number">0</span>,</div><div class="line">          <span class="attr">top</span>: <span class="number">0</span>,</div><div class="line">          <span class="attr">bottom</span>: <span class="number">0</span>,</div><div class="line">          <span class="attr">left</span>: <span class="number">0</span>,</div><div class="line">          <span class="attr">right</span>: <span class="number">0</span></div><div class="line">        &#125;</div><div class="line">      &#125;</div><div class="line">    &#125;,</div><div class="line">    mounted () &#123;</div><div class="line">      <span class="keyword">const</span> result = dom.getComponentRect(<span class="keyword">this</span>.$refs.box, option =&gt; &#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">'getComponentRect:'</span>, option)
 </div><div class="line">        <span class="keyword">this</span>.size = option.size</div><div class="line">      &#125;)</div><div class="line">      <span class="built_in">console</span>.log(<span class="string">'return value:'</span>, result)</div><div class="line">      <span class="built_in">console</span>.log(<span class="string">'viewport:'</span>, dom.getComponentRect(<span class="string">'viewport'</span>))</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">.box</span> &#123;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">200px</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <s
 pan class="number">150px</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">450px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">450px</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="number">#DDD</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">    <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">.info</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">40px</span>;</div><
 div class="line">    <span class="attribute">font-family</span>: Consolas, <span class="string">"Liberation Mono"</span>, Menlo, Courier, monospace;</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/dom-rect.html">try it</a></p>
+<p><a href="http://dotwe.org/vue/87d4ed571de129ab28052b06a5d65fc8" target="_blank" rel="external">try it</a></p>
 
   </div>
   
@@ -1367,7 +1340,7 @@
           <a href="/references/modules/dom.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/modules/dom.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/modules/dom.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/modules/globalevent.html
----------------------------------------------------------------------
diff --git a/content/references/modules/globalevent.html b/content/references/modules/globalevent.html
index 8184eaf..994e5a4 100644
--- a/content/references/modules/globalevent.html
+++ b/content/references/modules/globalevent.html
@@ -5,49 +5,6 @@
   
   <title>globalEvent | 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="globalEventv0.8+ (developing)
 SummaryglobalEvent are used to listen for persistent events, such as changes in positioning information, gyroscopes, and so on. A global event is a secondary API that req">
 <meta property="og:type" content="website">
@@ -56,7 +13,7 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
 <meta property="og:site_name" content="Weex">
 <meta property="og:description" content="globalEventv0.8+ (developing)
 SummaryglobalEvent are used to listen for persistent events, such as changes in positioning information, gyroscopes, and so on. A global event is a secondary API that req">
-<meta property="og:updated_time" content="2017-02-26T06:06:13.000Z">
+<meta property="og:updated_time" content="2017-03-02T03:28:11.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="globalEvent">
 <meta name="twitter:description" content="globalEventv0.8+ (developing)
@@ -118,13 +75,29 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
         <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/modules/globalevent.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/modules/globalevent.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -141,7 +114,7 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
     
       <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 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
               </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 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
       </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 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
     
     
       <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 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
               </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 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
       </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 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
     
     
       <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 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
       </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:28:11.000Z">Updated time: 02/03/2017</time>
 </header>
     <h1 id="globalEvent"><a href="#globalEvent" class="headerlink" title="globalEvent"></a>globalEvent</h1><p><span class="weex-version">v0.8+ (developing)</span></p>
 <h2 id="Summary"><a href="#Summary" class="headerlink" title="Summary"></a>Summary</h2><p><code>globalEvent</code> are used to listen for persistent events, such as changes in positioning information, gyroscopes, and so on. A global event is a secondary API that requires additional APIs to work with.</p>
@@ -1375,7 +1348,7 @@ SummaryglobalEvent are used to listen for persistent events, such as changes in
           <a href="/references/modules/globalevent.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/modules/globalevent.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/modules/globalevent.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/modules/index.html
----------------------------------------------------------------------
diff --git a/content/references/modules/index.html b/content/references/modules/index.html
index 847fe51..e01f5b0 100644
--- a/content/references/modules/index.html
+++ b/content/references/modules/index.html
@@ -5,62 +5,49 @@
   
   <title>Built-in Modules | 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="Built-in ModulesHow to useYou can use a simply way like requireModule(&amp;#39;name&amp;#39;) to access the apis of module. e.g.
-&amp;lt;script&amp;gt;  const modal = weex.requireModule(&apos;modal&apos;)  module.exports = &amp;#1">
+  <meta name="description" content="Built-in Modules
+animation
+WebSocket
+picker
+clipboard
+dom
+modal
+navigator
+storage
+stream
+webview
+globalEvent">
 <meta property="og:type" content="website">
 <meta property="og:title" content="Built-in Modules">
 <meta property="og:url" content="https://weex.apache.org/references/modules/index.html">
 <meta property="og:site_name" content="Weex">
-<meta property="og:description" content="Built-in ModulesHow to useYou can use a simply way like requireModule(&amp;#39;name&amp;#39;) to access the apis of module. e.g.
-&amp;lt;script&amp;gt;  const modal = weex.requireModule(&apos;modal&apos;)  module.exports = &amp;#1">
-<meta property="og:updated_time" content="2017-02-17T02:09:41.000Z">
+<meta property="og:description" content="Built-in Modules
+animation
+WebSocket
+picker
+clipboard
+dom
+modal
+navigator
+storage
+stream
+webview
+globalEvent">
+<meta property="og:updated_time" content="2017-03-02T03:29:33.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="Built-in Modules">
-<meta name="twitter:description" content="Built-in ModulesHow to useYou can use a simply way like requireModule(&amp;#39;name&amp;#39;) to access the apis of module. e.g.
-&amp;lt;script&amp;gt;  const modal = weex.requireModule(&apos;modal&apos;)  module.exports = &amp;#1">
+<meta name="twitter:description" content="Built-in Modules
+animation
+WebSocket
+picker
+clipboard
+dom
+modal
+navigator
+storage
+stream
+webview
+globalEvent">
   
     <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
   
@@ -118,13 +105,29 @@
         <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/modules/index.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/modules/index.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -141,7 +144,7 @@
     
       <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 +583,11 @@
               </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 +703,12 @@
       </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 +726,7 @@
     
     
       <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 +1170,11 @@
               </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 +1290,12 @@
       </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 +1313,7 @@
     
     
       <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,10 +1331,22 @@
       </h1>
     
   
-  <time class="article-date" datetime="2017-02-17T02:09:41.000Z">Updated time: 17/02/2017</time>
+  <time class="article-date" datetime="2017-03-02T03:29:33.000Z">Updated time: 02/03/2017</time>
 </header>
-    <h1 id="Built-in-Modules"><a href="#Built-in-Modules" class="headerlink" title="Built-in Modules"></a>Built-in Modules</h1><h2 id="How-to-use"><a href="#How-to-use" class="headerlink" title="How to use"></a>How to use</h2><p>You can use a simply way like <code>requireModule(&#39;name&#39;)</code> to access the apis of module. e.g.</p>
-<figure class="highlight html"><table><tr><td class="code"><pre><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="built_in">module</span>.exports = &#123;</div><div class="line">    <span class="attr">data</span>: &#123;&#125;,</div><div class="line">    <span class="attr">methods</span>: &#123;</div><div class="line">      <span class="attr">toast</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">        modal.toast(&#123;</div><div class="line">          <span class="attr">message</span>: <span class="string">'props: '</span> + event.data.join(<span class="string">', '</span>)</div><div class="line">        &#125;)</div><div class="line">      &#12
 5;</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>
+    <h1 id="Built-in-Modules"><a href="#Built-in-Modules" class="headerlink" title="Built-in Modules"></a>Built-in Modules</h1><ul>
+<li><a href="./animation.html">animation</a></li>
+<li><a href="./websocket.html">WebSocket</a></li>
+<li><a href="./picker.html">picker</a></li>
+<li><a href="./clipboard.html">clipboard</a></li>
+<li><a href="./dom.html">dom</a></li>
+<li><a href="./modal.html">modal</a></li>
+<li><a href="./navigator.html">navigator</a></li>
+<li><a href="./storage.html">storage</a></li>
+<li><a href="./stream.html">stream</a></li>
+<li><a href="./webview.html">webview</a></li>
+<li><a href="./globalevent.html">globalEvent</a></li>
+</ul>
+
   </div>
   
 </article>
@@ -1352,7 +1367,7 @@
           <a href="/references/modules/index.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/modules/index.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/modules/index.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/modules/modal.html
----------------------------------------------------------------------
diff --git a/content/references/modules/modal.html b/content/references/modules/modal.html
index a1155b2..ef77832 100644
--- a/content/references/modules/modal.html
+++ b/content/references/modules/modal.html
@@ -5,49 +5,6 @@
   
   <title>modal | 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="modalWeex provides a series of message boxes: toast, alert, confirm and prompt.    
 APItoast(options)A toast provides simple feedback about an operation in a small popup. For example, navigating away">
 <meta property="og:type" content="website">
@@ -56,7 +13,7 @@ APItoast(options)A toast provides simple feedback about an operation in a small
 <meta property="og:site_name" content="Weex">
 <meta property="og:description" content="modalWeex provides a series of message boxes: toast, alert, confirm and prompt.    
 APItoast(options)A toast provides simple feedback about an operation in a small popup. For example, navigating away">
-<meta property="og:updated_time" content="2017-02-17T02:09:41.000Z">
+<meta property="og:updated_time" content="2017-03-02T03:29:33.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="modal">
 <meta name="twitter:description" content="modalWeex provides a series of message boxes: toast, alert, confirm and prompt.    
@@ -118,13 +75,29 @@ APItoast(options)A toast provides simple feedback about an operation in a small
         <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/modules/modal.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/modules/modal.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -141,7 +114,7 @@ APItoast(options)A toast provides simple feedback about an operation in a small
     
       <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 @@ APItoast(options)A toast provides simple feedback about an operation in a small
               </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 @@ APItoast(options)A toast provides simple feedback about an operation in a small
       </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 @@ APItoast(options)A toast provides simple feedback about an operation in a small
     
     
       <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 @@ APItoast(options)A toast provides simple feedback about an operation in a small
               </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 @@ APItoast(options)A toast provides simple feedback about an operation in a small
       </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 @@ APItoast(options)A toast provides simple feedback about an operation in a small
     
     
       <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 @@ APItoast(options)A toast provides simple feedback about an operation in a small
       </h1>
     
   
-  <time class="article-date" datetime="2017-02-17T02:09:41.000Z">Updated time: 17/02/2017</time>
+  <time class="article-date" datetime="2017-03-02T03:29:33.000Z">Updated time: 02/03/2017</time>
 </header>
     <h1 id="modal"><a href="#modal" class="headerlink" title="modal"></a>modal</h1><p>Weex provides a series of message boxes: <code>toast</code>, <code>alert</code>, <code>confirm</code> and <code>prompt</code>.    </p>
 <h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><h3 id="toast-options"><a href="#toast-options" class="headerlink" title="toast(options)"></a>toast(options)</h3><p>A toast provides simple feedback about an operation in a small popup. For example, navigating away from an email before you send it triggers a \u201cDraft saved\u201d toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.    </p>
@@ -1380,7 +1353,7 @@ APItoast(options)A toast provides simple feedback about an operation in a small
 </li>
 </ul>
 <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">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"showToast"</span>&gt;</span>Toast<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">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"showAlert"</span>&gt;</span>Alert<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">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"showConfirm"</span>&gt;</span>Confirm<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">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"showPrompt"</span>&gt;</span>Prompt<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">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">var</span> m
 odal = 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">    <span class="attr">methods</span>: &#123;</div><div class="line">      showToast (event) &#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">'will show toast'</span>)</div><div class="line">        modal.toast(&#123;</div><div class="line">          <span class="attr">message</span>: <span class="string">'This is a toast'</span>,</div><div class="line">          <span class="attr">duration</span>: <span class="number">0.3</span></div><div class="line">        &#125;)</div><div class="line">      &#125;,</div><div class="line">      showAlert (event) &#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">'will show alert'</span>)</div><div class="line">        modal.alert(&#1
 23;</div><div class="line">          <span class="attr">message</span>: <span class="string">'This is a alert'</span>,</div><div class="line">          <span class="attr">duration</span>: <span class="number">0.3</span></div><div class="line">        &#125;, <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</div><div class="line">          <span class="built_in">console</span>.log(<span class="string">'alert callback'</span>, value)</div><div class="line">        &#125;)</div><div class="line">      &#125;,</div><div class="line">      showConfirm (event) &#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">'will show confirm'</span>)</div><div class="line">        modal.confirm(&#123;</div><div class="line">          <span class="attr">message</span>: <span class="string">'Do you confirm ?'</span>,</div><div class="line">          <span class="attr">duration</span>: <span cl
 ass="number">0.3</span></div><div class="line">        &#125;, <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</div><div class="line">          <span class="built_in">console</span>.log(<span class="string">'confirm callback'</span>, value)</div><div class="line">        &#125;)</div><div class="line">      &#125;,</div><div class="line">      showPrompt (event) &#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">'will show prompt'</span>)</div><div class="line">        modal.prompt(&#123;</div><div class="line">          <span class="attr">message</span>: <span class="string">'This is a prompt'</span>,</div><div class="line">          <span class="attr">duration</span>: <span class="number">0.3</span></div><div class="line">        &#125;, <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</div><div class="line">
           <span class="built_in">console</span>.log(<span class="string">'prompt callback'</span>, value)</div><div class="line">        &#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">.wrapper</span> &#123;</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">  &#125;</div><div class="line">  <span class="selector-class">.button</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">60px</span>;</div><div class="line">    <span cla
 ss="attribute">width</span>: <span class="number">450px</span>;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">150px</span>;</div><div class="line">    <span class="attribute">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">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">color</span>: <span class="number">#666666</span>;</div><div class="line">    <span class="attribute">border-color</span>: <span class="number">#DDDDDD</span>;</div><div class="line">    <span clas
 s="attribute">background-color</span>: <span class="number">#F5F5F5</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/modal.html">try it</a></p>
+<p><a href="http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d" target="_blank" rel="external">try it</a></p>
 
   </div>
   
@@ -1402,7 +1375,7 @@ APItoast(options)A toast provides simple feedback about an operation in a small
           <a href="/references/modules/modal.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/modules/modal.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/modules/modal.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/modules/navigator.html
----------------------------------------------------------------------
diff --git a/content/references/modules/navigator.html b/content/references/modules/navigator.html
index 4d76f93..92e0e3d 100644
--- a/content/references/modules/navigator.html
+++ b/content/references/modules/navigator.html
@@ -5,49 +5,6 @@
   
   <title>navigator | 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="Navigatorv0.6.1+
 As it\u2019s known to all that, we can navigate back and forth in the web browser using the navigation bar.And The navigator module mimics the same behaviors in the iOS/Android application">
 <meta property="og:type" content="website">
@@ -56,7 +13,7 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
 <meta property="og:site_name" content="Weex">
 <meta property="og:description" content="Navigatorv0.6.1+
 As it\u2019s known to all that, we can navigate back and forth in the web browser using the navigation bar.And The navigator module mimics the same behaviors in the iOS/Android application">
-<meta property="og:updated_time" content="2017-02-17T02:09:41.000Z">
+<meta property="og:updated_time" content="2017-03-02T03:29:33.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="navigator">
 <meta name="twitter:description" content="Navigatorv0.6.1+
@@ -118,13 +75,29 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
         <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/modules/navigator.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/modules/navigator.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -141,7 +114,7 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
     
       <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 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
               </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 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
       </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 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
     
     
       <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 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
               </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 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
       </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 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
     
     
       <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 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
       </h1>
     
   
-  <time class="article-date" datetime="2017-02-17T02:09:41.000Z">Updated time: 17/02/2017</time>
+  <time class="article-date" datetime="2017-03-02T03:29:33.000Z">Updated time: 02/03/2017</time>
 </header>
     <h1 id="Navigator"><a href="#Navigator" class="headerlink" title="Navigator"></a>Navigator</h1><p><span class="weex-version">v0.6.1+</span></p>
 <p>As it\u2019s known to all that, we can navigate back and forth in the web browser using the navigation bar.<br>And The navigator module mimics the same behaviors in the iOS/Android application. Without such an ability, We will have to stay in the same page forever, so it is very important. Besides the navigation, the module can let us to specify whether to apply animation or not during the transition.</p>
@@ -1354,7 +1327,7 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
 <li>callback(object): the callback function after executing this action.</li>
 </ul>
 <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">text</span> <span class="attr">class</span>=<span class="string">"button"</span> @<span class="attr">click</span>=<span class="string">"jump"</span>&gt;</span>Jump<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">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">var</span> navigator = weex.requireModule(<span class="string">'navigator'</span>)</div><div class="line">  <span class="keyword">var</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">    <span class="attr">methods</span>: &#123;</div><div class="line">      jump (event) &#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">'will jump'</span>)</div><div class="line">        navigator.push(&#123;</div><div class="line">          <span class="attr">url</span>: <span class="string">'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js'</span>,</div><div class="line">          <span class="attr">animated</span>: <span class="string">"true"</span></div><div class="line">        &#125;, event =&gt;
  &#123;</div><div class="line">          modal.toast(&#123; <span class="attr">message</span>: <span class="string">'callback: '</span> + event &#125;)</div><div class="line">        &#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">.wrapper</span> &#123;</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">  &#125;</div><div class="line">  <span class="selector-class">.button</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">60p
 x</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">450px</span>;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">150px</span>;</div><div class="line">    <span class="attribute">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">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">color</span>: <span class="number">#666666</span>;</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="tag">&lt;/<span class="name">style</span>&gt;</span></div></pre></td></tr></table></figure>
-<p><a href="../../examples/navigator.html">try it</a></p>
+<p><a href="http://dotwe.org/vue/5c670b07735ee6d08de5c8eb93f91f11" target="_blank" rel="external">try it</a></p>
 
   </div>
   
@@ -1376,7 +1349,7 @@ As it\u2019s known to all that, we can navigate back and forth in the web browser u
           <a href="/references/modules/navigator.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/modules/navigator.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/modules/navigator.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/modules/picker.html
----------------------------------------------------------------------
diff --git a/content/references/modules/picker.html b/content/references/modules/picker.html
index b71ccf7..88e4813 100644
--- a/content/references/modules/picker.html
+++ b/content/references/modules/picker.html
@@ -5,49 +5,6 @@
   
   <title>picker | 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="pickerv0.9+
 SummaryA series of stream api. It provides function: pick data,pick date,pick time
 APIpick(options, callback[options])pick data(single column)
@@ -66,7 +23,7 @@ Arguments
 options {Object}:pick options
 
 inde">
-<meta property="og:updated_time" content="2017-02-17T02:09:41.000Z">
+<meta property="og:updated_time" content="2017-03-01T06:05:27.000Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="picker">
 <meta name="twitter:description" content="pickerv0.9+
@@ -133,13 +90,29 @@ inde">
         <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/modules/picker.html" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="/cn/references/modules/picker.html" data-lang="zh-cn">\u4e2d\u6587</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
@@ -156,7 +129,7 @@ inde">
     
       <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">
@@ -595,11 +568,11 @@ inde">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link current ">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 current ">picker</a>
               </li>
             
               <li>
@@ -715,12 +688,12 @@ inde">
       </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>
@@ -738,7 +711,7 @@ inde">
     
     
       <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>
@@ -1182,11 +1155,11 @@ inde">
               </li>
             
               <li>
-                <a href="/references/modules/picker.html" class="sidebar-link current ">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 current ">picker</a>
               </li>
             
               <li>
@@ -1302,12 +1275,12 @@ inde">
       </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>
@@ -1325,7 +1298,7 @@ inde">
     
     
       <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>
@@ -1343,7 +1316,7 @@ inde">
       </h1>
     
   
-  <time class="article-date" datetime="2017-02-17T02:09:41.000Z">Updated time: 17/02/2017</time>
+  <time class="article-date" datetime="2017-03-01T06:05:27.000Z">Updated time: 01/03/2017</time>
 </header>
     <h1 id="picker"><a href="#picker" class="headerlink" title="picker"></a>picker</h1><p><span class="weex-version">v0.9+</span></p>
 <h2 id="Summary"><a href="#Summary" class="headerlink" title="Summary"></a>Summary</h2><p>A series of stream api. It provides function: pick data,pick date,pick time</p>
@@ -1413,7 +1386,7 @@ inde">
           <a href="/references/modules/picker.html" data-lang="en">English</a>
         </li>
         <li>
-          <a href="/cn/references/modules/picker.html" data-lang="cn">\u4e2d\u6587</a>
+          <a href="/cn/references/modules/picker.html" data-lang="zh-cn">\u4e2d\u6587</a>
         </li>
       </ul>
     </div>