You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2017/10/13 13:04:33 UTC
[38/51] [abbrv] incubator-weex-site git commit: update file structure
and fix responsive styles
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/refresh-loading.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/refresh-loading.md b/_drafts/v-0.10/references/components/refresh-loading.md
new file mode 100644
index 0000000..8b1d610
--- /dev/null
+++ b/_drafts/v-0.10/references/components/refresh-loading.md
@@ -0,0 +1,297 @@
+---
+title: <refresh> & <loading>
+type: references
+order: 2.7
+version: 0.10
+---
+
+# refresh & loading
+
+<span class="weex-version">v0.6.1+</span>
+
+## Loading Components
+
+To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
+
+
+**example**
+
+```html
+`<template>
+ <list>
+ <header>
+ <div class="center">
+ <text style="text-align:center">I am the header</text>
+ </div>
+ </header>
+ <loading onloading="onloading" display="{{loadingDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
+ <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
+ </loading>
+ <cell onappear="onappear($event, $index)" ondisappear="ondisappear($event, $index)" class="row" repeat="{{staffs}}" index="{{$index}}">
+ <div class="item">
+ <text>{{name}}</text>
+ </div>
+ </cell>
+ </list>
+</template>
+
+<style>
+ .row {
+ width: 750;
+ }
+ .item {
+ justify-content: center;
+ border-bottom-width: 2;
+ border-bottom-color: #c0c0c0;
+ height: 100;
+ padding:20;
+ }
+ .center {
+ border-bottom-width: 2;
+ border-bottom-color: #cccccc;
+ height: 100;
+ padding:20;
+ background-color:#FFFFFF;
+ justify-content: center;
+ }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ staffs:[],
+ loadingDisplay: 'show',
+ loadingText: 'pull up to load more',
+ refreshText: 'pull down to refresh'
+ },
+ created:function() {
+ this.refreshDisplay='show'
+ this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}];
+ },
+ methods:{
+ onappear: function (e, index) {
+ // console.log('+++++', index);
+ // console.log(this.staffs[index].name + ' is appearing...');
+ },
+ ondisappear:function (e, index) {
+ // console.log('+++++', index);
+ },
+ onloading:function(e){
+ console.log('onloading...');
+ this.staffs.push({name:'onloading'})
+ }
+ }
+ }
+</script>
+
+```
+
+[try it](http://weex.alibaba-inc.com/raw/html5/a34523fee395aa68018d65f0fb622310.js)
+
+### Child Components
+
+Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.
+
+* loading-indicator is a child component implemented with default animation effect for the refresh component.
+[example](http://weex.alibaba-inc.com/playground/a34523fee395aa68018d65f0fb622310)
+
+### Attributes
+
+* display has value of show or hide.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+
+### Styles
+common styles: check out [common styles for components](../common-style.html)
+
+### Events
+
+* onloading triggered when loading
+
+
+#### Restrictions
+* refresh/loading does not support remove action, Weex 0.9 will fix it.
+* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden.
+* 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='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs.
+
+## Refresh Components
+
+To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
+
+```html
+<template>
+ <scroller onloadmore="onloadmore" loadmoreoffset="1000">
+ <refresh onrefresh="onrefresh" display="{{refreshDisplay}}">
+ <text id="refreshText">{{refreshText}}</text>
+ </refresh>
+ <div repeat="{{v in items}}">
+ <text style="font-size: 40; color: #000000">{{v.item}}</text>
+ </div>
+ <loading onloading="onloading" display="{{loadingDisplay}}">
+ <text id="loadingText">{{loadingText}}</text>
+ </loading>
+ </scroller>
+</template>
+<script>
+ module.exports = {
+ data: {
+ refreshDisplay: 'show',
+ loadingDisplay: 'show',
+ loadingText: 'pull up to load more',
+ refreshText: 'pull down to refresh',
+ items: []
+ },
+ created: function () {
+ for (var i = 0; i < 30; i++) {
+ this.items.push({'item': 'test data' + i});
+ }
+ },
+ methods: {
+ onrefresh: function () {
+ var vm = this;
+ vm.refreshDisplay = 'show'
+ if (vm.items.length > 50) {
+ vm.refreshText = "no more data!"
+ vm.refreshDisplay = 'hide'
+ return;
+ }
+ var len = vm.items.length;
+ for (var i = len; i < (len + 20); i++) {
+ vm.items.unshift({'item': 'test data ' + i});
+ }
+ vm.refreshDisplay = 'hide'
+ },
+ onloading: function () {
+ var vm = this;
+ vm.loadingDisplay = 'show'
+ if (vm.items.length > 30) {
+ vm.loadingText = "no more data!"
+ vm.loadingDisplay = 'hide'
+ return;
+ }
+
+ var len = vm.items.length;
+ for (var i = len; i < (len + 20); i++) {
+ vm.items.push({'item': 'test data ' + i});
+ }
+ vm.loadingDisplay = 'hide'
+ },
+ onloadmore:function(){
+ console.log("into--[onloadmore]")
+ }
+ }
+ }
+</script>
+```
+
+[try it](http://dotwe.org/242add915e41d307f2fa6f423278425a)
+
+### Child Components
+
+Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.
+
+* loading-indicator is a child component implemented with default animation effect for the refresh component.
+[example](http://dotwe.org/e65a2cb0abfcdbbabda6778064837a92)
+
+### Attributes
+* display has value of show or hide, default value is show.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+
+### Styles
+common styles: check out [common styles for components](../common-style.html)
+
+### Events
+* onrefresh triggered when the scroller has been pulled down
+* onpullingdown available on Android. triggered when the scroller has been pulled down. you can get dy, headerHeight, maxHeight from onpullingdowns event object. [example](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1)
+
+**example**
+
+```html
+<template>
+ <list>
+ <header>
+ <div class="center">
+ <text style="text-align:center">I am the header</text>
+ </div>
+ </header>
+ <refresh onpullingdown='onpullingdown' onrefresh="onrefresh" display="{{refreshDisplay}}" style="width:750;flex-direction: row;justify-content: center;">
+ <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator>
+ </refresh>
+ <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{staffs}}" index="{{$index}}">
+ <div class="item">
+ <text>{{name}}</text>
+ </div>
+ </cell>
+ </list>
+</template>
+
+<style>
+ .row {
+ width: 750;
+ }
+ .item {
+ justify-content: center;
+ border-bottom-width: 2;
+ border-bottom-color: #c0c0c0;
+ height: 100;
+ padding:20;
+ }
+ .center {
+ border-bottom-width: 2;
+ border-bottom-color: #cccccc;
+ height: 100;
+ padding:20;
+ background-color:#FFFFFF;
+ justify-content: center;
+ }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ staffs:[],
+ refreshDisplay: 'show',
+ loadingDisplay: 'show',
+ loadingText: 'pull up to load more',
+ refreshText: 'pull down to refresh'
+ },
+ created:function() {
+ this.refreshDisplay='show'
+ this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}];
+ },
+ methods:{
+ onappear: function (e) {
+ var index = e.target.attr.index
+ // console.log(this.staffs[index].name + ' is appearing...');
+ },
+ ondisappear:function (e) {
+ },
+ onrefresh:function(e){
+ this.refreshDisplay='show';
+ // this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'}];
+ this.refreshDisplay='hide'
+ // console.log(this.refreshDisplay);
+ },
+ onpullingdown:function(e){
+ console.log('onpullingdown triggered.');
+ console.log('dy:'+e.dy);
+ console.log('headerHeight:'+e.headerHeight);
+ console.log('maxHeight:'+e.maxHeight);
+ }
+ }
+ }
+</script>
+
+```
+
+[try it ](http://dotwe.org/10ee6bd59ebe173f0f578a4eb8bac6f1)
+
+
+### Restrictions
+
+* refresh/loading does not support remove action, may support in Weex 0.9.
+* refresh/loading despite setting with display='hide', the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display='hide' when the refresh/loading should be hidden.
+* 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='hide' when display='show' shows up in an event function, or your scroller may not response to user inputs.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/scroller.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/scroller.md b/_drafts/v-0.10/references/components/scroller.md
new file mode 100644
index 0000000..3197ab8
--- /dev/null
+++ b/_drafts/v-0.10/references/components/scroller.md
@@ -0,0 +1,136 @@
+---
+title: <scroller>
+type: references
+order: 2.8
+version: 0.10
+---
+
+# <scroller>
+<span class="weex-version">v0.6.1+</span>
+
+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.
+
+Notes: A <scroller> can be used as a root element or a embed element. The scroll direction of this component is column, and it can't be changed.
+
+
+**example**
+
+```html
+<template>
+ <scroller onloadmore="onloadmore" loadmoreoffset="100">
+ <div repeat="{{v in items}}">
+ <text style="font-size: 40; color: #000000">{{v.item}}</text>
+ </div>
+ </scroller>
+</template>
+<script>
+ module.exports = {
+ data: {
+ items: [],
+ triggered:false
+ },
+ created: function () {
+ for (var i = 0; i < 50; i++) {
+ this.items.push({'item': 'test data' + i});
+ }
+ },
+ methods: {
+ onloadmore:function(){
+ if(!this.triggered){
+ for (var i = 100; i >= 50; i--) {
+ this.items.push({'item':'onloadmore triggered' + i});
+ }
+ }
+ this.triggered=true;
+ }
+ }
+ }
+</script>
+```
+
+[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2)
+
+## Child Components
+
+Scroller supports all kinds of components, such as div, text, etc.
+And there are two special components that can only be used inside scroller component.
+
+* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality.
+* loading 0.6.1 used inside list to add pull-up-to-load-more functionality.
+
+
+## Attributes
+
+* show-scrollbar: true/false whether show the scroll bar or not, default value is true
+* scroll-direction: <string> define scroll direction of component, horizontal or vertical
+* loadmoreoffset : <number> default value is 0. The loadmore event will be triggered when the list is loadmoreoffset left to reach the bottom of the list view. e.g. a list has total content length of 1000, and the loadmoreoffset is set to 400, the loadmore event will be triggered when 600 has beed scrolled and there is less than 400 left.
+* loadmoreretry : <number> default value 0，whether to reset loadmore related UI when loadmore failed, will be deprecated in further release.
+
+**example**
+
+```html
+<template>
+ <scroller onloadmore="onloadmore" loadmoreoffset="100">
+ <div repeat="{{v in items}}">
+ <text style="font-size: 40; color: #000000">{{v.item}}</text>
+ </div>
+ </scroller>
+</template>
+<script>
+module.exports = {
+ data: {
+ items: [],
+ triggered:false
+ },
+ created: function () {
+ for (var i = 0; i < 50; i++) {
+ this.items.push({'item': 'test data' + i});
+ }
+ },
+ methods: {
+ onloadmore:function(){
+ if(!this.triggered){
+ for (var i = 100; i >= 50; i--) {
+ this.items.push({'item':'onloadmore triggered' + i});
+ }
+ }
+ this.triggered=true;
+ }
+ }
+}
+</script>
+```
+
+[try it](http://dotwe.org/acf155122b9457211165680b01fae1c2)
+
+
+Please checkout [Scroller Component Attributes]() to have a look at the inherited attributes from direct parent.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+## Styles
+
+common styles: check out [common styles for components](../common-style.html)
+
+* support flexbox related styles
+* support box model related styles
+* support position related styles
+* support opacity, background-color etc.
+
+
+## Events
+
+onloadmore used with loadmoreoffset attribute. if the view has less than loadmoreoffset to scroll down, the onloadmore event will be triggered.
+
+common events: check out the [common events](../common-event.html)
+
+* support onclick event. Check out [common events](../common-event.html)
+* support onappear / ondisappear event. Check out [common events](../common-event.html)
+
+
+
+## Restrictions
+
+Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions.
+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.
+
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/slider.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/slider.md b/_drafts/v-0.10/references/components/slider.md
new file mode 100644
index 0000000..b1a537f
--- /dev/null
+++ b/_drafts/v-0.10/references/components/slider.md
@@ -0,0 +1,107 @@
+---
+title: <slider>
+type: references
+order: 2.9
+version: 0.10
+---
+
+# <slider>
+
+## Summary
+
+A slide's player to show slides (mostly as pictures) one page by another. The default interval between two slides is 3 seconds.
+
+## Child Components
+
+It supports all kinds of weex components as its slides, especially the `indicator` component which can be used only as a child component of `slider`.
+
+## Attributes
+
+- `auto-play`: <boolean> `true` | `false`. This value determines whether the slides plays automatically after the page rendering finished. The default value is `false`.
+- `interval`: <number> millisecond. This value determines time interval for each page displayed in slider.
+- `index`: <number> . This value determines the index of current shown slide. The default value is `0`.
+
+Other attributes please check out the [common attributes](../references/common-attrs.html).
+
+## Styles
+
+**common styles**: check out [common styles for components](../references/common-style.html)
+
+- support flexbox related styles
+- support box model related styles
+- support ``position`` related styles
+- support ``opacity``, ``background-color`` etc.
+
+## Events
+
+- `change`: triggerd when the slide's index is changed. The event object contains the attribute of `index`, which is the index number of the currently shown slide.
+
+**common events**: check out the [common events](../references/common-event.html)
+
+- support `click` event. Check out [common events](../references/common-event.html)
+- support `appear` / `disappear` event. Check out [common events](../references/common-event.html)
+
+### Example
+
+```html
+<template>
+ <div>
+ <slider class="slider" interval="3000" auto-play="true">
+ <div class="slider-pages" repeat="item in itemList">
+ <image class="img" src="{{item.pictureUrl}}"></image>
+ <text class="title">{{item.title}}</text>
+ </div>
+ <indicator class="indicator"></indicator>
+ </slider>
+ </div>
+</template>
+
+<style>
+ .img {
+ width: 714;
+ height: 150;
+ }
+ .title {
+ position: absolute;
+ top: 20;
+ left: 20;
+ color: #ff0000;
+ font-size: 48;
+ font-weight: bold;
+ background-color: #eeeeee;
+ }
+ .slider {
+ flex-direction: row;
+ margin: 18;
+ width: 714;
+ height: 230;
+ }
+ .slider-pages {
+ flex-direction: row;
+ width: 714;
+ height: 200;
+ }
+ .indicator {
+ width:714;
+ height:200;
+ position:absolute;
+ top:1;
+ left:1;
+ item-color: red;
+ item-selectedColor: blue;
+ item-size: 20;
+ }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ itemList: [
+ {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
+ {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
+ {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
+ ]
+ }
+ }
+</script>
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/switch.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/switch.md b/_drafts/v-0.10/references/components/switch.md
new file mode 100644
index 0000000..441da7b
--- /dev/null
+++ b/_drafts/v-0.10/references/components/switch.md
@@ -0,0 +1,81 @@
+---
+title: <switch>
+type: references
+order: 2.11
+version: 0.10
+---
+
+# <switch>
+
+<span class="weex-version">v0.6.1+</span>
+
+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.
+
+**example**
+
+```html
+<template>
+ <div>
+ <text>muted:</text>
+ <switch checked="true" onclick='onclick' onchange='onchange' ondisappear='ondisappear' onappear='onappear'></switch>
+</div>
+</template>
+
+<script>
+ module.exports ={
+ methods:{
+ onclick:function(e){
+ console.log('onclick:' + e.timestamp);
+ },
+ onchange:function(e){
+ console.log('onchage, value:' + e.value);
+ },
+ ondisappear:function(e){
+ console.log('ondisappear, value:' + e.value);
+ },
+ onappear:function(e){
+ console.log('onappear, value:' + e.value);
+ },
+ }
+ }
+</script>
+```
+
+[try it](http://dotwe.org/7306d24f4f677b6d9935dbd00e3aa981)
+
+## Child Components
+
+There are no child components for the switch component.
+
+## Attributes
+
+* checked <boolean> true|false, default value is false, indicating whether the button is on or not.
+* disabled <boolean> true|false, default value is false, indicating whether the button is enable or not.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+## Styles
+Notes: There are several style properties that you mustn't use on this component. And here are all the invalid properties:
+
+* width
+* height
+* min-width
+* min-height
+* margin and margin-xxs
+* padding and padding-xxs
+* border and border-xxs
+
+Notes: Specially the width and height related properties is not configurable and the size of this component is fixed to 100x60 (for the design width 750px).
+
+common styles: check out [common styles for components](../common-style.html)
+
+## Events
+
+* onappear / ondisappear event. check out [common events](../common-event.html)
+* onclick: check out [common events](../common-event.html)
+* onchange: check out [common events](../common-event.html)
+
+## Parameters of events' object for onchange event:
+
+* value: the value of the component who dispatched this event, which is the boolean value true or false.
+* timestamp: the time stamp of the event.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/text.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/text.md b/_drafts/v-0.10/references/components/text.md
new file mode 100644
index 0000000..308fd4a
--- /dev/null
+++ b/_drafts/v-0.10/references/components/text.md
@@ -0,0 +1,94 @@
+---
+title: <text>
+type: references
+order: 2.12
+version: 0.10
+---
+
+# <text>
+
+The weex builtin component 'text' is used to render text with specified style rule. <text> tag can contain text value only. You can use variable interpolation in the text content with the mark `{% raw %}{{}}{% endraw %}`.
+
+## Child Components
+
+This component supports no child components.
+
+## Attributes
+
+* value(string): text value of this component. This is equal to the content of 'text'.
+
+### example
+
+```
+var textComponent = this.$el("textid");
+this.text = textComponent.attr.value;
+```
+
+## Styles
+
+* lines: specify the text lines. Default value is `0` for unlimited.
+* text styles: check out [text styles](../text-style.html)
+
+ * support 'color' style.
+ * support 'font-size' style. iOS: default vlaue `32`. Android: platform specify. HTML5: default value `32`.
+ * support 'font-style' style.
+ * support 'font-weight' style.
+ * support 'text-align' style.
+ * support 'text-decoration' style.
+ * support 'text-overflow' style.
+ * support 'line-height'(available from v0.6.1) style. line-height in iOS is different from h5 and Android, text value will be placed at bottom of line box.
+ * not support 'flex-direction, 'justify-content', 'align-items' which is active for child nodes, and text has no child nodes.
+
+### common styles
+check out [common styles for components](../common-style.html)
+
+* support flexbox related styles.
+* support box model related styles.
+* support 'position' related styles.
+* support 'opacity', 'background-color' etc.
+
+## Events
+
+### common events
+check out [common events](../common-event.html)
+
+* support 'click' event.
+* support 'appear' / 'disappear' event.
+
+## Example
+
+```html
+<template>
+ <div>
+ <text>this is text content</text>
+ <text value="this is text value"></text>
+ <text style="text">{{price1}}</text>
+ <text id="textid" onclick={{showtext}}>this is gettext content</text>
+ <text value="{{text}}"></text>
+ </div>
+</template>
+
+<style>
+ .text {
+ font-size: 24;
+ text-decoration: underline;
+ }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ price1: '99.99',
+ price2: '88.88',
+ text:''
+ },
+ methods: {
+ showtext: function(event) {
+ var textComponent = this.$el("textid");
+ this.text = textComponent.attr.value;
+ }
+ }
+ };
+</script>
+```
+[Try it](http://dotwe.org/48f4d7c50245145c72c33161e2bb4325)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/textarea.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/textarea.md b/_drafts/v-0.10/references/components/textarea.md
new file mode 100644
index 0000000..2645385
--- /dev/null
+++ b/_drafts/v-0.10/references/components/textarea.md
@@ -0,0 +1,81 @@
+---
+title: <textarea>
+type: references
+order: 2.13
+version: 0.10
+---
+
+# <textarea>
+<span class="weex-version">v0.8+</span>
+
+
+### Summary
+
+The weex builtin component `textarea` is used to create interactive controls to accept data from users. It can be a multi-line [input](./input.html).
+
+**Notes:** `<textarea>` support all event which `<input>` had.
+
+### Child Components
+
+This component supports no child components.
+
+### attributes
+
+- `value`: <string> the value of the control.
+- `placeholder`: <string> a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.
+- `disabled`: <boolean> a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.
+- `autofocus`: <boolean> a boolean attribute lets you specify that a form control should have input focus when the page loads.
+- `rows:`<number> a number which can specify the height of textarea, default is `2`.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+### Styles
+
+**text styles**: checkout [text styles](../text-style.html)
+
+- support `color` style.
+- support `font-size` style.
+- support `font-style` style.
+- support `font-weight` style.
+- support `text-align` style.
+
+
+**common styles**: check out [common styles for components](../common-style.html)
+
+- support flexbox related styles.
+- support box model related styles.
+- support ``position`` related styles.
+- support ``opacity``, ``background-color`` etc.
+
+### Events
+
+- `input`: the value of an element changes.
+- `change`: the change event is fired when a change to the component's value is commited by the user. It always come after a ``blur`` event.
+- `focus`: a component has received focus.
+- `blur`: a component has lost focus.
+
+**common events**: check out the [common events](../common-event.html)
+
+- support `appear` / `disappear` event. Check out [common events](../common-event.html).
+
+**Notes:** `<textarea>` does not support the common-event `click`. Please listen to the `input` or `change` event instead.
+
+### Parameters of events' object
+
+- for ``input`` and ``change`` events:
+ - `value`: the value of the component who dispatched this event.
+ - `timestamp`: the time stamp of the event.
+- for ``focus`` and ``blur`` events:
+ - `timestamp`: the time stamp of the event.
+
+### Example
+
+```html
+<div>
+ <textarea
+ autofocus="true"
+ placeholder="..."
+ value="I am a multiple input">
+ </textarea>
+</div>
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/video.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/video.md b/_drafts/v-0.10/references/components/video.md
new file mode 100644
index 0000000..fa4384e
--- /dev/null
+++ b/_drafts/v-0.10/references/components/video.md
@@ -0,0 +1,75 @@
+---
+title: <video>
+type: references
+order: 2.14
+version: 0.10
+---
+
+# <video>
+<span class="weex-version">v0.6.1+</span>
+
+The video component can be used to embed video content in a weex page.
+
+**example**
+
+```html
+<template>
+ <div>
+ <text>Big Eater!</text>
+ <video onstart='onstart' onpause='onpause' onfinish='onfinish' onfail='onfail'
+ auto-play="false" play-status="pause" src="{{src}}" style="width:750;height:500;"></video>
+</div>
+
+ </div>
+</template>
+
+<script>
+ module.exports ={
+ data: {
+ src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
+ },
+ methods:{
+ onstart:function(e){
+ console.log('onstart');
+ console.log(e);
+ },
+ onpause:function(e){
+ console.log('onpause');
+ },
+ onfinish:function(e){
+ console.log('onfinish');
+ },
+ onfail:function(e){
+ console.log('onfail');
+ },
+ }
+ }
+</script>
+```
+
+[try it](http://dotwe.org/97938570cddf76c792a1a5f9542253b1)
+
+## Child Components
+* text is the only valid type of child component.
+
+## Attributes
+
+* src: <string> The URL of the video to embed.
+* play-status: <boolean> play | pause. Use it to control video's play/pause status. Default value is pause.
+* auto-play: <boolean> true | false. Use it to control whether it is playing when the page initialization finished. Defalut value is false.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+## Styles
+common styles: check out [common styles for components](../common-style.html)
+
+* support flexbox related styles
+* support box model related styles
+* support position related styles
+* support opacity, background-color etc.
+
+## Events
+* onstart: triggered when playback state is Playing.
+* onpause: triggered when playback state is Paused.
+* onfinish: triggered when playback state is Finished.
+* onfail: triggered when playback state is Failed.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/web.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/web.md b/_drafts/v-0.10/references/components/web.md
new file mode 100644
index 0000000..89d47c7
--- /dev/null
+++ b/_drafts/v-0.10/references/components/web.md
@@ -0,0 +1,152 @@
+---
+title: <web>
+type: references
+order: 2.15
+version: 0.10
+---
+
+# <web>
+<span class="weex-version">v0.5+</span>
+
+Use web component to display any web content in the weex page. The `src`attribute is used to specify a special source. You also can use `webview` module to control some web operation such as goBack,goForward and reload. see [webview module](https://alibaba.github.io/weex/doc/modules/webview.html).For example,You can use web component and webview module to assemble a browser.
+
+## Child Components
+
+This component supports no child components.
+
+## Attributes
+
+**src**(string): this attribute specifies the page source to load.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+## Styles
+
+**width**(float): the width of the component, default value is 0. This style must be specified.
+
+**height**(float): the height of the component, default value is 0. This style must be specifed.
+
+
+### common styles
+
+check out the [common styles](../common-attrs.html).
+
+support flexbox related styles
+support box model related styles
+support `position` related styles
+
+## Events
+
+**pagestart**: sent after the web component starts loading a page.
+**pagefinish**: sent after the web component finishes loading a page.
+**error**: sent if the web component failed to load a page.
+
+### common events
+
+support `appear` / `disappear` event.
+
+Check out [common events](../common-event.html)
+
+### Notes
+not support `click` event.
+
+## Example
+
+We use a simple Browser Demo to show how to use web component and webview module. Check out [webview module](../modules/webview.html).
+
+
+```html
+<template>
+ <div class="browserStyle">
+ <div style="flex-direction: row">
+ <input id="urlInput" type="url" autofocus="false" placeholder="..." class="textStyle" value="{{input_text}}" oninput="input">
+ </input>
+ </div>
+ <div style="flex-direction: row">
+ <wxc-button value="LoadURL" class="buttonSytle" size="small" onclick="loadURL"></wxc-button>
+ <wxc-button value="Backward" class="buttonSytle" size="small" onclick="backforward"></wxc-button>
+ <wxc-button value="Forward" class="buttonSytle" size="small" onclick="forward"></wxc-button>
+ </div>
+ <div>
+ <web id="webview" src="{{src}}" class="webStyle"></web>
+ </div>
+ </div>
+</template>
+
+<style>
+
+ .browserStyle
+ {
+ width:600;
+ height: 825;
+ background-color:#778899 ;
+ }
+
+ .textStyle
+ {
+ width:600;
+ height: 50;
+ background-color: #D3D3D3;
+ }
+
+ .buttonSytle
+ {
+ width:180;
+ height: 50;
+ font-size: 12;
+ background-color: #D3D3D3;
+ margin:10;
+ padding-left: 5;
+ padding-right: 5;
+ }
+
+ .webStyle
+ {
+ width:600;
+ height: 700;
+ background-color: #8B0000;
+ }
+
+</style>
+
+<script>
+
+ var web_module = require('@weex-module/webview');
+
+ module.exports = {
+ data: {
+ src : "https://h5.m.taobao.com",
+ input_text:"https://www.tmall.com"
+ },
+
+ methods: {
+
+ loadURL: function (e) {
+ var web_element = this.$el('webview');
+ var input = this.$el("urlInput");
+ this.src = this.input_text;
+ web_module.reload(web_element);
+ },
+
+ backforward: function (e) {
+ var web_element = this.$el('webview');
+ web_module.goBack(web_element);
+ this.input_text = web_element.attr.src;
+ },
+
+ forward: function (e) {
+ var web_element = this.$el('webview');
+ web_module.goForward(web_element);
+ this.input_text = web_element.attr.src;
+ },
+ input:function (e) {
+ var input = this.$el("urlInput");
+ this.input_text = input.attr.value;
+ }
+
+ }
+ }
+</script>
+```
+
+[Try it](http://dotwe.org/103d472645206cc1564f49717585abb4)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/wxc-navpage.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/wxc-navpage.md b/_drafts/v-0.10/references/components/wxc-navpage.md
new file mode 100644
index 0000000..0ae7eba
--- /dev/null
+++ b/_drafts/v-0.10/references/components/wxc-navpage.md
@@ -0,0 +1,74 @@
+---
+title: <wxc-navpage>
+type: references
+order: 2.16
+version: 0.10
+---
+
+# <wxc-navpage>
+
+### Summary
+
+The "wxc-navpage" tag implements a specialized component that contains a navbar at the top of the window and an embed content page. You can customize the navbar as you like. In addition, you can use `navigator` module to control the page jump, see [navigator module](../modules/navigator.html).
+
+### Child Components
+
+This type of component supports all kinds of weex component as its child components.
+
+### Attributes
+
+- `height`: <length> The height of the navbar. Default value is 88.
+- `background-color`: <color>The backgroudColor of the navbar. Default value is `white`.
+- `title`: <string> The title of the navbar.
+- `title-color`: <color>The color of the navbar title. Default value is `black`.
+- `left-item-title`: <string> The title of the leftItem.
+- `left-item-color`: <color> The color of the leftItem title. Default value is `black`.
+- `right-item-title`: <string> The title of the rightItem.
+- `right-item-color`: <color> The color of the rightItem title. Default value is `black`.
+- `left-item-src`: <string> The imageURL of the leftItem you want to set.
+- `right-item-src`: <string> The imageURL of the rightItem you want to set.
+
+Other attributes please check out the [common attributes](../references/common-attrs.html).
+
+### Styles
+
+**common styles**: check out the [common styles](../references/common-attrs.html)
+
+- support flexbox related styles
+- support box model related styles
+- support ``position`` related styles
+- support ``opacity``, ``background-color`` etc.
+
+### Events
+
+- `naviBar.leftItem.click`: triggered when the leftItem of navbar is clicked. You need to register the observer in ready or create block.
+- `naviBar.rightItem.click`: triggered when the rightItem of navbar is clicked. You need to register the observer in ready or create block.
+
+**common events**: check out the [common events](../references/common-event.html)
+
+- support `click` event. Check out [common events](../references/common-event.html)
+- support `appear` / `disappear` event. Check out [common events](../references/common-event.html)
+
+### Example
+
+```html
+<template>
+ <wxc-navpage height={{...}} background-color="..." title="..." title-color="..." left-item-title="..." left-item-color="..." right-item-src="...">
+ <content> ...</content>
+ </wxc-navpage>
+</template>
+<script>
+ require('weex-components');
+ module.exports = {
+ created: function() {
+ this.$on('naviBar.rightItem.click',function(e){
+ //handle your click event here.
+ });
+
+ this.$on('naviBar.leftItem.click',function(e){
+ //handle your click event here.
+ });
+ }
+ }
+</script>
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/components/wxc-tabbar.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/components/wxc-tabbar.md b/_drafts/v-0.10/references/components/wxc-tabbar.md
new file mode 100644
index 0000000..944b06d
--- /dev/null
+++ b/_drafts/v-0.10/references/components/wxc-tabbar.md
@@ -0,0 +1,94 @@
+---
+title: <wxc-tabbar>
+type: references
+order: 2.17
+version: 0.10
+---
+
+# <wxc-tabbar>
+
+The `wxc-tabbar` is a custom component, which belongs to the `weex-components` node package, implements a specialized component that corresponds to the radio-style selection. It displays tabs at the bottom of the window for switching between different tab pages.
+
+Usage: You can use this component by a `require` statement, `require('weex-components');`, in the script tag. e.g.
+
+```html
+<template>
+ <div style="flex-direction: column;">
+ <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
+ </div>
+</template>
+
+<script>
+ require('weex-components');
+ // Other javascript statements.
+</script>
+```
+
+Before requiring `weex-components'`, you need to specify `weex-components` dependency in your project's package.json file. e.g.
+
+```json
+"dependencies": {
+ "weex-components": "^0.2.0"
+}
+```
+
+## Child Components
+
+`wxc-tabbar` has no child components.
+
+
+## Attributes
+
+* `selected-index` : <number> default value is 0
+* `selected-color`: <color> The color of the title when it is selected. Default is red color.
+* `unselected-color`: <color> The color of the title when it is unselected. Default is black color.
+* `tab-items` This attribute accepts an array of `tabitem` objects, each of which corresponds to the tab pages. And the order of the items equals to the order of the tab pages onscreen. You can configure the appearance of tabbar by setting the tabitem object's properties. Each tabitem properties are listed as below:
+ * `index`: <integer> This attribute is required, and it specifies the order of the item.
+ * `title`: <string> The item’s title. and it is optional. The tile will not be displayed if empty or not provided.
+ * `titleColor`: <color>The item’s titleColor. Default is black color.
+ * `image`: <string>The icon displayed when the tabitem is unselected. The image will not be displayed if empty or not provided.
+ * `selectedImage` : <string>The icon displayed when the tabitem is selected. The icon will not be displayed if empty or not provided.
+ * `src` : <string> The weex page for the tab page.
+ * `visibility`: <string>visible | hidden. This attribute specifies display status of the tab page. Default value is visible.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+## Styles
+common styles: check out [common styles](../common-style.html) for components
+
+* support flexbox related styles
+* support box model related styles
+* support position related styles
+* support opacity, background-color etc.
+
+## Events
+* `tabBar.onClick`: triggered when the tabitem is selected. You need to register the observer in ready or create block.
+e.g.
+
+
+```html
+<template>
+ <div style="flex-direction: column;">
+ <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
+ </div>
+</template>
+
+<script>
+ require('weex-components');
+ module.exports = {
+ data: {
+ },
+ methods: {
+ ready: function (e) {
+ var vm = this;
+ vm.$on('tabBar.onClick',function(e){
+ var index = e.detail.index;
+ });
+ },
+ }
+ }
+</script>
+```
+
+## Example
+You should checkout the playground's `tabbar` example.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/gesture.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/gesture.md b/_drafts/v-0.10/references/gesture.md
new file mode 100644
index 0000000..fc41fd4
--- /dev/null
+++ b/_drafts/v-0.10/references/gesture.md
@@ -0,0 +1,74 @@
+---
+title: Gesture
+type: references
+order: 1.4
+version: 0.10
+---
+
+# Gesture
+
+> Experiment Feature
+
+Weex encapsulates native touch events to provide a gesture system. Using gesture is similar to use event in Weex. Just set `on` attributes on a node to listen to gesture.
+
+## Type
+For now, there are four types of gestures:
+
+* **Touch**. Touch gesture is fired when a touch point is placed, moved or removed from the touch surface. Touch gesture is accuracy as it will report every trivial event. As a result, listening to touch gesture may be slow, a great deal of events needs to be processed even a small move happened. There are three types of Touch gesture:
+ * `touchstart` will be fired when a touch point is placed on the touch surface.
+ * `touchmove` will be fired when a touch point is moved along the touch surface.
+ * `touchend` will be fired when a touch point is removed from the touch surface.
+* **Pan**. Pan gesture also report motion of touch point on the touch surface, which is similar to touch gesture. But Pan gesture is sampled and faster than the touch event. As consequence, it is less accuracy than touch gesture. There are also three types of Pan gesture, and the meaning of these types is very close to types of Touch.
+ * `panstart`
+ * `panmove`
+ * `panend`
+* **Swipe**. Swipe is fired when user swipe a touch point on the screen. A serial of motion will only trigger one Swipe gesture.
+* **LongPress**. Swipe is fired when a touch point is held for 500 ms or more.
+
+The Touch gesture and Pan is very close to each other, with following features hold:
+
+* **Touch**. Not sampled, accuracy, but slow.
+* **Pan**. Sampled, fast, less accuracy.
+
+Users may choose their gesture according to their situation.
+
+## Properties
+The following properties can be used in gesture callback:
+
+* `direction`. Only exists for **Swipe** gesture. Indicate the direcion of the swipe, choose from `up`, `left`, `bottom`, `right`.
+* `changedTouches`. An array of motion for every touch pointer that has contribute to the current gesture.
+
+### changedTouches
+
+`changedTouches` is an array, with the following properties in its children:
+
+* `identifier`. A unique identifier for a touch pointer.
+* `pageX`. The X coordinate of the touch pointer relative to the left edge of the document.
+* `pageY`. The Y coordinate of the touch pointer relative to the top of the document.
+* `screenX`. The X coordinate of the touch point relative to the left edge of the screen.
+* `screenY`. The Y coordinate of the touch point relative to the top edge of the screen.
+
+## Constrain
+Currently, Weex Android do not support listening to gesture on `scroller`, `list` and `webview`, as it would lead a large amount of event conflicting.
+
+## How to use
+
+Example:
+
+```html
+<template>
+ <div ontouchstart="handleTouchstart"></div>
+</template>
+
+<script>
+module.exports = {
+ methods: {
+ handleTouchstart: function(eventProperties) {
+ // handling with the Event Properties
+ }
+ }
+}
+</script>
+```
+
+With the code above, a `touchstart` event will be fired when a touch point is placed on the touch surface.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/images/css-boxmodel.png
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/images/css-boxmodel.png b/_drafts/v-0.10/references/images/css-boxmodel.png
new file mode 100644
index 0000000..a2063e2
Binary files /dev/null and b/_drafts/v-0.10/references/images/css-boxmodel.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/images/css-flexbox-align.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/images/css-flexbox-align.jpg b/_drafts/v-0.10/references/images/css-flexbox-align.jpg
new file mode 100644
index 0000000..8a7f731
Binary files /dev/null and b/_drafts/v-0.10/references/images/css-flexbox-align.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/images/css-flexbox-justify.svg
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/images/css-flexbox-justify.svg b/_drafts/v-0.10/references/images/css-flexbox-justify.svg
new file mode 100644
index 0000000..33e742b
--- /dev/null
+++ b/_drafts/v-0.10/references/images/css-flexbox-justify.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
+ <defs>
+ <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
+ <rect x='0' y='0' width='10' height='10' fill='#eee' />
+ <rect x='10' y='10' width='10' height='10' fill='#eee' />
+ <rect x='0' y='10' width='10' height='10' fill='#ccc' />
+ <rect x='10' y='0' width='10' height='10' fill='#ccc' />
+ </pattern>
+ </defs>
+ <style>
+ text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
+ rect { stroke-width: 2px; stroke: #888; }
+ g > rect:nth-child(1) { fill: #888 }
+ g > rect:nth-child(2) { fill: #fcc; }
+ g > rect:nth-child(3) { fill: #cfc; }
+ g > rect:nth-child(4) { fill: #ccf; }
+ g > rect:nth-child(5) { fill: transparent; }
+ </style>
+ <g transform="translate(2,2)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='0' y='0' width='100' height='50' />
+ <rect x='100' y='0' width='80' height='50' />
+ <rect x='180' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>flex-start</text>
+ </g>
+ <g transform="translate(2,56)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='120' y='0' width='100' height='50' />
+ <rect x='220' y='0' width='80' height='50' />
+ <rect x='300' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>flex-end</text>
+ </g>
+ <g transform="translate(2,110)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='60' y='0' width='100' height='50' />
+ <rect x='160' y='0' width='80' height='50' />
+ <rect x='240' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>center</text>
+ </g>
+ <g transform="translate(2,164)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='0' y='0' width='100' height='50' />
+ <rect x='160' y='0' width='80' height='50' />
+ <rect x='300' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>space-between</text>
+ </g>
+ <g transform="translate(2,218)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='20' y='0' width='100' height='50' />
+ <rect x='160' y='0' width='80' height='50' />
+ <rect x='280' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>space-around</text>
+ </g>
+</svg>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/images/css-flexbox-sample.png
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/images/css-flexbox-sample.png b/_drafts/v-0.10/references/images/css-flexbox-sample.png
new file mode 100644
index 0000000..0f1236d
Binary files /dev/null and b/_drafts/v-0.10/references/images/css-flexbox-sample.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/images/nav.png
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/images/nav.png b/_drafts/v-0.10/references/images/nav.png
new file mode 100644
index 0000000..7081ca7
Binary files /dev/null and b/_drafts/v-0.10/references/images/nav.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/index.md b/_drafts/v-0.10/references/index.md
new file mode 100644
index 0000000..d59d654
--- /dev/null
+++ b/_drafts/v-0.10/references/index.md
@@ -0,0 +1,49 @@
+---
+title: Bootstrap
+type: references
+order: 1
+has_chapter_content: false
+chapter_title: Common Options
+version: 0.10
+---
+
+# Bootstrap
+
+Besides its default meaning, `<script>` tag supports two more configuration with its `type` property *in the top level component of a page*.
+
+* `type="data"`: For initial data configuration, the data defined here will overwrite the data definition in the `<script>`.
+* `type="config"`: For configuration definition.
+
+```html
+<script type="data">
+ /* (optional) the definition of initial data */
+</script>
+
+<script type="config">
+ /* (optional) the definition of configuration */
+</script>
+```
+
+## Initial data definition
+
+Sometimes, it is hard to maintain huge data structure in the default `<script>` tag. So Weex allows us to have a `<script type="data">` tag to define initial data. The data defined in here will totally replace the data defined in the default `<script>` tag.
+
+here is an example:
+
+```html
+<script type="data">
+{
+ title: 'Alibaba',
+ date: new Date().toLocaleString()
+}
+</script>
+```
+
+## script configuration
+
+Weex also allows us to do some configuration with a `<script type="config">`, So far, we only support the `downgrade` configs.
+
+- `downgrade.osVersion`
+- `downgrade.appVersion`
+- `downgrade.weexVersion`
+- `downgrade.deviceModel`
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/animation.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/animation.md b/_drafts/v-0.10/references/modules/animation.md
new file mode 100644
index 0000000..4b46564
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/animation.md
@@ -0,0 +1,63 @@
+---
+title: animation
+type: references
+order: 3.1
+version: 0.10
+---
+
+# animation
+
+Smooth and meaningful animation is very effective for enhancing the user experience of mobile application, you can use the `animation` module to perform animation on components. A animation can perform a series of simple transformations (position, size, rotation, background color, and opacity) on the component. So, if you have a `image` component, you can move, rotate, grow, or shrink it.
+
+## API
+### transition(node, options, callback)
+
+[example](http://dotwe.org/5be74019d5e510fa95c5dedec24f7ce5)
+
+#### Arguments
+##### node
+
+**type:** node
+
+**position:** An element that will be animated, normally you can get this by calling `this.$el(id)`.
+
+##### options
+
+**type:** object
+
+**position:** Transition options.
+- `duration` (number): Specifies the number of milliseconds of animation execution, the default value is `0`, means that no animation will occur.
+- `delay` (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is `0`.
+- `timingFunction` (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is `linear`, the allowed attributes are listed in the following table:
+
+|name|description|example|
+|:--|:--|:--|
+|`linear`|Specifies a transition effect with the same speed from start to end|[example](http://dotwe.org/d71491ded2bede32df3e8b44b53d5e4f)|
+|`ease-in`|Specifies a transition effect with a slow start|[example](http://dotwe.org/23b104f833039f263957481f2e2c40c9)|
+|`ease-out`|Specifies a transition effect with a slow end|[example](http://dotwe.org/04dab95e073a2c3a808e6b01fc20e996)|
+|`ease-in-out`|Specifies a transition effect with a slow start and end|[example](http://dotwe.org/fc37ec17d215e786ce336a00457489e3)|
+|`cubic-bezier(x1, y1, x2, y2)`|Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).|[example](http://dotwe.org/95d8f15d0014c31d3a1d15728313f2a5)|
+
+- `styles` (object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table:
+
+| name | description | value type | default value |example|
+| :--- | :--- | :--- | :--- |:---|
+|width|The width applied to the component after the animation finished.|length|none|[example](http://dotwe.org/b599d273f996cfdcbeca7bd5c828ca90)|
+|height|The height applied to the component after the animation finished.|length|none|[example](http://dotwe.org/d0b1ccadf386ba00960d0c8340c682e5)|
+|backgroundColor|The background color applied to the component after the animation finished.|string|none|[example](http://dotwe.org/f4616ee18f6042b63a8fdcd2816b1712)|
+|opacity|The opacity applied to the component after the animation finished.|number between 0 to 1|`1`|[example](http://dotwe.org/f94394173301db83ae6e66d1330a0d0b)|
+|transformOrigin|The povit of transition. The possible values for `x-aris` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent|`x-axis y-axis`|`center center`|[example](http://dotwe.org/de43f5a47de230dd531797458bf7fd3c)|
+|transform|Transform function to be applied to the element. The properties in the following table are supported|object|none|[example](http://dotwe.org/cfc0388441f5a53a73335885006c13e7)|
+
+properties of `transform`:
+
+| name | description | value type | default value |example|
+| :--- | :--- | :--- | :--- |:---|
+|translate/translateX/translateY|Specifies the location of which the element will be translated.|pixel or percent|none|[example](http://dotwe.org/6638e66e296723bbef3e59c83b2b5003)|
+|rotate|Specifies the angle of which the element will be rotated, the unit is degree.|number|none|[example](http://dotwe.org/ba9e9920594d9388744b2bd0d1b7695d)|
+|scale/scaleX/scaleY|Stretch or shrink the element.|number|none|[example](http://dotwe.org/14b42dde6583ab222bd2b7ed08f241c8)|
+
+#### callback
+**type:** function
+
+**position:** Callback which is called after the completion of transition.
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/clipboard.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/clipboard.md b/_drafts/v-0.10/references/modules/clipboard.md
new file mode 100644
index 0000000..d0f45e7
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/clipboard.md
@@ -0,0 +1,53 @@
+---
+title: clipboard
+type: references
+order: 3.2
+version: 0.10
+---
+
+# clipboard
+<span class="weex-version">v0.8+ (developing)</span>
+
+clipboard allows you to `getString()` or `setString()` from the system clipboard.
+
+Not long ago, We're still suffering from such a situation that we got a verification code sent by SMS, and we had no way to get the code from the SMS text but to typed it by our hands. How frustrated it is! But now you can enable your app to get the code from the system clipboard by calling `clipboard.getString()` .
+
+## Caution
+
+* only support text.
+* only works on Android and iOS. NOT works for html5, for web security reason.
+
+## API
+
+### getString(callback)
+
+reads from clipboard.
+
+##### Arguments
+
+`callback(function)`: the callback function after executing this action. `data` is the return value.
+
+Example
+
+```js
+var clipboard = require('@weex-module/clipboard');
+clipboard.getString(function(ret) {
+ // callback. 'ret' is an object that contains 'result' and 'data'.
+ // use 'ret.data' to fetch the value.
+ console.log("read from clipboard is " + ret.data);
+});
+
+```
+### setString(text)
+
+sets the text to clipboard, having the same effect as copying manually.
+
+##### Arguments
+
+`text(string)`: the text copied to clipboard.
+Example
+
+```js
+var clipboard = require('@weex-module/clipboard');
+clipboard.setString("SomeStringHere");
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/dom.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/dom.md b/_drafts/v-0.10/references/modules/dom.md
new file mode 100644
index 0000000..948abf0
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/dom.md
@@ -0,0 +1,114 @@
+---
+title: dom
+type: references
+order: 3.3
+version: 0.10
+---
+
+# dom
+
+## Summary
+
+A series of dom apis that sending virtual-dom's messages to the native renderer to update the dom tree. The only API for developers to use in a `.we` file is `scrollToElement` <del>which you can use by calling the `$scrollTo` method</del>. Other APIs mentioned on this page should only be used through the native renderer in the `callNative` process.
+
+## API
+
+### scrollToElement(node, options)
+
+Scroll the page to the specified node. This API should only be used on the element in the `scroller` or `list` component.
+
+<del>This API can be used by calling the VM's method `$scrollTo` **(deprecated)**.</del> You can use `require('@weex-module/dom').scrollToElement` to call this API in your `.we` file.
+
+#### Arguments
+
+* `node`*(Node)*: an element that scrolled into the view.
+* `options`*(object)*: some options.
+ * `offset`*(number)*: An offset to the visible position, default is `0`.
+
+#### Example
+
+```javascript
+var dom = require('@weex-module/dom');
+dom.scrollToElement(this.$el('someId'), {offset: 10});
+```
+
+### createBody(element)
+
+Create the body for the whole dom tree. Element type should only be the ones that can be used as roots (`div`, `scroller` and `list`).
+
+#### Arguments
+
+* `element`*(object)*: a object that specified the body node info like ref, type, children, etc.
+
+### addElement(parentNode, element, index)
+
+Add a element into the dom tree.
+
+#### Arguments
+
+* `parentNode`*(Node)*: specify the element's parent node.
+* `element`*(object)*: a object that specified the config info for the node to be added.
+* `index`*(number)*: insert the element to the specified position.
+
+### removeElement(node)
+
+Remove a node in the dom tree.
+
+#### Arguments
+
+* `node`*(Node)*: the node to be removed.
+
+### moveElement(node, parentNode, index)
+
+Move a exsited node into another parent (or the same parent) before the specified position.
+
+#### Arguments
+
+* `node`*(Node)*: the node to be moved.
+* `parentNode`*(Node)*: the parent node to move into.
+* `index`*(number)*:: according to the specified position index, will the node be inserted into.
+
+### addEvent(node, type)
+
+Inform the renderer that there are listeners for a specified event type.
+
+#### Arguments
+
+* `node`*(Node)*: the node to be listened on.
+* `type`*(string)*: which type of events the node should be listened for.
+
+### removeEvent(node, type)
+
+Remove event listeners on the specified node for the specified event type.
+
+#### Arguments
+
+* `node`*(Node)*: on which node should the listeners to be removed
+* `type`*(string)*: specify the event type.
+
+### updateAttrs(node, attr)
+
+Update attrbutes of the specified node.
+
+#### Arguments
+
+* `node`*(Node)*: the node to be updated.
+* `attr`*(object)*: the attributes object with the attribute items to be updated.
+
+### updateStyle(node, style)
+
+Update styles of the specified node.
+
+#### Arguments
+
+* `node`*(Node)*: the node to be updated.
+* `style`*(object)*: the style object with the style rules to be updated.
+
+### createFinish()
+
+Notify native renders that the series of messages for updating the native dom tree have reached a end.
+
+### refreshFinish()
+
+Notify native renders that the series of messages for refreshing a native dom tree have reached a end.
+
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/globalevent.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/globalevent.md b/_drafts/v-0.10/references/modules/globalevent.md
new file mode 100644
index 0000000..0db8c48
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/globalevent.md
@@ -0,0 +1,89 @@
+---
+title: globalEvent
+type: references
+order: 3.10
+version: 0.10
+---
+
+# globalEvent
+<span class="weex-version">v0.8+ (developing)</span>
+
+## Summary
+
+`globalEvent` 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.
+
+You can register events via `addEventListener`, which can be removed by `removeEventListener` when you do not need to listen for `globalEvent`.
+
+*AUCTION*
+- Only instance level is not application level .
+
+## How to make your Module support global events
+API development is complete, when the event needs to be sent, the need through the following methods:
+
+```javascript
+/**
+ *
+ * @param eventName eventName
+ * @param params event params
+ */
+instance.fireGlobalEventCallback(eventName,params);
+```
+
+How to dispatch a global event in a weex-html5 component or module ? Just dispatch the event on the document element:
+
+```javascript
+var evt = new Event('some-type')
+evt.data = { foo: 'bar' }
+document.dispatchEvent(evt)
+```
+
+### Example
+
+#### Android
+
+```java
+Map<String,Object> params=new HashMap<>();
+params.put("key","value");
+mWXSDKInstance.fireGlobalEventCallback("geolocation",params);
+```
+#### iOS
+
+```Objective-C
+[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}];
+```
+
+## API
+
+### addEventListener(String eventName, String callback)
+
+register global event.
+
+#### Arguments
+
+* `eventName`*(string)*: The name of the event you want to listen to.
+* `callback`*(function)*: the callback function after executing this action.
+
+#### Example
+
+```javascript
+var globalEvent = require('@weex-module/globalEvent');
+globalEvent.addEventListener("geolocation", function (e) {
+ console.log("get geolocation")
+ });
+```
+
+### removeEventListener(String eventName)
+
+remove global event
+
+#### Arguments
+
+* `eventName`*(string)*: You no longer need to listen for event names.
+
+#### Example
+
+```javascript
+var globalEvent = require('@weex-module/globalEvent');
+globalEvent.removeEventListener("geolocation");
+```
+
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/index.md b/_drafts/v-0.10/references/modules/index.md
new file mode 100644
index 0000000..2a094ca
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/index.md
@@ -0,0 +1,28 @@
+---
+title: Built-in Modules
+type: references
+order: 3
+has_chapter_content: true
+version: 0.10
+---
+
+# Built-in Modules
+
+## How to use
+
+You can use a simply way like `require('@weex-module/name')` to access the apis of module. e.g.
+
+```html
+<script>
+var dom = require('@weex-module/dom')
+
+module.exports = {
+ data: {},
+ created: function () {
+ dom.scrollToElement(this.$el('someIdForElement'), {
+ offset: 0
+ })
+ }
+}
+</script>
+```
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/modal.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/modal.md b/_drafts/v-0.10/references/modules/modal.md
new file mode 100644
index 0000000..2ebad15
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/modal.md
@@ -0,0 +1,192 @@
+---
+title: modal
+type: references
+order: 3.4
+version: 0.10
+---
+
+# modal
+
+Weex provides a series of message boxes: `toast`, `alert`, `confirm` and `prompt`.
+
+## API
+### toast(options)
+
+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 "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.
+
+#### Arguments
+- `options` (object): toast options.
+ - `message` (string): the text message that the toast shows.
+ - `duration` (number): the duration(seconds) that the toast shows.
+
+**Example:**
+
+```html
+<template>
+ <div style="height: 200px; width: 400px; background-color: #00bfff;
+ justify-content: center; align-items: center" onclick="{{perform}}">
+ <text style="font-size: 60px; color: #ffffff">Toast</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ methods: {
+ perform: function () {
+ var modal = require('@weex-module/modal');
+ modal.toast({
+ 'message': 'I am a toast',
+ 'duration': 3
+ });
+ }
+ }
+ }
+</script>
+```
+### alert(options, callback)
+
+An alert box is often used if you want to make sure information comes through to the user.
+When an alert box pops up, the user will have to click "OK" to proceed.
+
+#### Arguments
+
+- `options` (object): alert box options.
+ - `message` (string): the text message that the alert shows.
+ - `okTitle` (string): the text of positive button, default is 'OK'.
+ - `callback` (function): callback when complete.
+ This method has a callback function whose arguments will be:
+- `result` (string): the title text of the confirm button that clicked by user.
+
+**Example:**
+
+```html
+<template>
+ <div>
+ <div style="height: 200px; width: 400px; background-color: #00bfff;
+ justify-content: center; align-items: center" onclick="{{perform}}">
+ <text style="font-size: 60px; color: #ffffff">Alert</text>
+ </div>
+ <text>{{params}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ params: ''
+ },
+ methods: {
+ perform: function () {
+ var modal = require('@weex-module/modal');
+ var self = this;
+ modal.alert({
+ 'message': 'I am alert message',
+ 'okTitle' : 'YES'
+ }, function (result) {
+ self.params = String(result)
+ });
+ }
+ }
+ }
+</script>
+```
+
+### confirm(options, callback)
+A confirm box is often used if you want the user to verify or accept something.
+
+When a confirm box pops up, the user will have to click either confirm or cancel button to proceed.
+
+#### Arguments
+- `options` (object): confirm box options.
+ - `message` (string): the message that the confirm shows.
+ - `okTitle` (string): the title of confirm button, default is 'OK'.
+ - `cancelTitle` (string): the title of cancel button, default is 'Cancel'.
+- `callback` (function): callback when complete.
+
+This method has a callback function whose arguments will be:
+- `result`(string): the title text of the button that clicked by user.
+**Example:**
+
+```html
+<template>
+ <div>
+ <div style="height: 200px; width: 400px; background-color: #00bfff;
+ justify-content: center; align-items: center" onclick="{{perform}}">
+ <text style="font-size: 60px; color: #ffffff">Confirm</text>
+ </div>
+ <text>{{params}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ params: ''
+ },
+ methods: {
+ perform: function () {
+ var modal = require('@weex-module/modal');
+ var self = this;
+ modal.confirm({
+ 'message': 'I have read and accept the terms.',
+ 'okTitle' : 'YES',
+ 'cancelTitle' : 'NO'
+ }, function (e) {
+ self.params = String(e)
+ });
+ }
+ }
+ }
+</script>
+```
+
+### prompt(options, callback)
+
+A prompt box is often used if you want the user to input a value before entering a page.
+When a prompt box pops up, the user will have to click either confirm or cancel button to proceed after entering an input value.
+
+#### Arguments
+- `options` (object): some options.
+ - `message` (string): the message that the prompt shows.
+ - `okTitle` (string): the title text of confirm button, default is 'OK'.
+ - `cancelTitle` (string): the title text of cancel button, default is 'Cancel'.
+- `callback` (function): callback when complete.
+ This method has a callback function whose arguments will be:
+- `ret` (object): the argument will be a object, which has attributes `result` and `data`, like `{ result: 'OK', data: 'hello world' }`
+ - `result` (string): the title of the button that clicked by user.
+ - `data` (string): the value of the text that entered by user.
+
+**Example:**
+
+```html
+<template>
+ <div>
+ <div style="height: 200px; width: 400px; background-color: #00bfff;
+ justify-content: center; align-items: center" onclick="{{perform}}">
+ <text style="font-size: 60px; color: #ffffff">Prompt</text>
+ </div>
+ <text>{{params}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ params: ''
+ },
+ methods: {
+ perform: function () {
+ var modal = require('@weex-module/modal');
+ var self = this;
+ modal.prompt({
+ 'message': 'I am a prompt',
+ 'okTitle' : 'YES',
+ 'cancelTitle' : 'NO'
+ }, function (e) {
+ self.params = JSON.stringify(e)
+ });
+ }
+ }
+ }
+</script>
+```
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/navigator.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/navigator.md b/_drafts/v-0.10/references/modules/navigator.md
new file mode 100644
index 0000000..fe4442c
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/navigator.md
@@ -0,0 +1,198 @@
+---
+title: navigator
+type: references
+order: 3.5
+version: 0.10
+---
+
+# Navigator
+<span class="weex-version">v0.6.1+</span>
+
+As it's 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. 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.
+
+**example**
+
+```html
+<template>
+ <div class="div">
+ <text class="text" onclick="onItemClick">click me! {{message}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports ={
+ data:{
+ message:""
+ },
+ methods:{
+ onItemClick:function(e){
+
+ var navigator = require('@weex-module/navigator');
+ var params = {'url':'http://weex.alibaba-inc.com/raw/html5/3d2996653c1d129603f9c935b895e998.js','animated':true};
+ navigator.push(params, function(e) {
+ console.log('i am the callback.')
+ });
+ }
+ }
+ }
+</script>
+<style>
+ .div {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 750;
+ height: 90;
+ padding-left:30;
+ padding-right:30;
+
+ border-bottom-width: 1;
+ border-style: solid;
+ border-color: #dddddd;
+ }
+ .text{
+ width: 750;
+ height: 90;
+ }
+</style>
+```
+
+[try it](http://dotwe.org/004a5e3f26290cf5b9ce03806a574633)
+
+## API
+### push(options, callback)
+
+push a weex page onto the navigator stack, you can specify whether apply animation when pushing. And you can also specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+* options(object): some options.
+ * url(stirng): The URL of the weex page to push.
+ * animated(string): true, if the weex page is push through animation, otherwise, false. Default value is true.
+
+* callback(object): the callback function to be called after executing this action.
+
+```javascript
+var params = {
+ 'url': 'navigator-demo.js',
+ 'animated' : 'true',
+}
+var navigator = require('@weex-module/navigator');
+navigator.push(params, function(e) {
+ //callback
+});
+```
+
+### pop(options, callback)
+pop a weex page onto the navigator stack, you can specify whether apply animation when popping. And you can also specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+* options(object): some options.
+ * animated(string): true if the weex page is pop through animation; otherwise, false. Default value is true.
+* callback(object): the callback function after executing this action.
+
+**example**
+
+```javascript
+var params = {
+ 'animated' : 'true',
+}
+var navigator = require('@weex-module/navigator');
+navigator.pop(params, function(e) {
+ //callback
+});
+```
+
+### close(options, callback)
+close a weex page, you can specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+* options(object): some options.
+ * animated(string): true, should animation be applied when closing. Default value is true.
+* callback(object): the callback function after executing this action.
+
+### setNavBarBackgroundColor(params, callback)
+set color for the navigation bar's background color, you can specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+* params(object): some parameters.
+ * backgroundColor(string): it's a required param, no default value provided.
+* callback(object): the callback function after executing this action.
+
+
+### setNavBarLeftItem(params,callback)
+set left item for the navigation bar, you can specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+* params(object): parameters can not be empty, titleColor depends on title. And If title and icon are provided, only the title and its titleColor will be used. That's to say, icon will only be used when title is not present.
+ * title(string): the title for the bar button.
+ * titleColor (string): the title color.
+ * icon (string): the icon for the bar button, should be an an downloadable image.
+* callback(object): the callback function after executing this action.
+
+### clearNavBarLeftItem(callback)
+clear left item for the navigation bar, you can specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+* callback(object): the callback function after executing this action.
+
+### setNavBarRightItem(params,callback)
+set the right item for the navigation bar, you can specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+* params(object): parameters can not be empty, titleColor depends on title. And If title and icon are provided, only the title and its titleColor will be used. That's to say, icon will be used when title is not present.
+ * title(string): the title for the bar button.
+ * titleColor (string): the title color.
+ * icon (string): the icon for the bar button, should be an an downloadable image.
+* callback(object): the callback function after executing this action.
+
+### clearNavBarRightItem(params, callback)
+clear the right item for the navigation bar, you can specify a callback function to be executed after the operation is over.
+**parameters**
+
+* params(object): optional.
+* callback(object): the callback function after executing this action.
+
+
+### setNavBarMoreItem(params,callback)
+set the more item for the navigation bar, you can specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+Actually, the function does nothing.
+* params(object): optional.
+* callback(object): the callback function after executing this action.
+
+### clearNavBarMoreItem(params, callback)
+clear the more item for the navigation bar, you can specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+Actually, the function does nothing.
+* params(object): optional.
+* callback(object): the callback function after executing this action.
+
+### setNavBarTitle(params,callback)
+set the title for the navigation bar, you can specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+* params(object): parameters can not be empty.
+ * title(string): the title for the bar button.
+* callback(object): the callback function after executing this action.
+
+
+### clearNavBarTitle(params,callback)
+clear the title for the navigation bar, you can specify a callback function to be executed after the operation is over.
+
+**parameters**
+
+* params(object): optional.
+* callback(object): the callback function after executing this action.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/storage.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/storage.md b/_drafts/v-0.10/references/modules/storage.md
new file mode 100644
index 0000000..9c62109
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/storage.md
@@ -0,0 +1,111 @@
+---
+title: storage
+type: references
+order: 3.6
+version: 0.10
+---
+
+# storage
+<span class="weex-version">v0.7+</span>
+
+## Summary
+
+`storage` is a series of apis, allowing you to for example add, modify or delete stored data items.
+
+## API
+
+### setItem(key, value, callback)
+
+When passed a key name and value, will add that key to the storage,
+or update that key's value if it already exists.
+
+#### Arguments
+
+* `key`*(string)*: the name of the key you want to store. "" or null is not allowed.
+* `value`*(string)*: the name of the value you want to store."" or null is not allowed.
+* `callback`*(object)*: the callback function after executing this action.
+
+##### Example
+
+```javascript
+var storage = require('@weex-module/storage');
+storage.setItem('bar', 'bar-value', function(e) {
+ // callback.'e' is an object that contains 'result' and 'data'. e.result indicate whether `setItem` is succeed.
+ // e.data will return 'undefined' if success or 'invalid_param' if your key/value is ""/null.
+});
+```
+
+### getItem(key, callback)
+
+When passed a key name, will return that key's value.
+
+#### Arguments
+
+* `key`*(string)*: the name of the key you want to retrieve the value of."" or null is not allowed.
+* `callback`*(object)*: the callback function after executing this action.
+
+##### Example
+
+```javascript
+var storage = require('@weex-module/storage');
+storage.getItem('foo', function(e) {
+ //callback.'e' is an object that contains 'result' and 'data'.
+ // use 'e.data' to fetch the value of the key,if not found,'undefined' will return.
+});
+```
+
+### removeItem(key, callback)
+
+When passed a key name, will remove that key from the storage.
+
+#### Arguments
+
+* `key`*(string)*: the name of the key you want to remove."" or null is not allowed.
+* `callback`*(object)*: the callback function after executing this action.
+
+##### Example
+
+```javascript
+var storage = require('@weex-module/storage');
+storage.removeItem('foo', function(e) {
+ // callback. 'e' is an object that contains 'result' and 'data'.
+ // e.result will return 'success' or 'failed' according to the executing result.
+ // e.data will always return 'undefined' in this function if success.
+});
+```
+
+### length(callback)
+
+Returns an integer representing the number of data items stored in the Storage object.
+
+#### Arguments
+
+* `callback`*(object)*: the callback function after executing this action.
+
+##### Example
+
+```javascript
+var storage = require('@weex-module/storage');
+storage.length(function(e) {
+ // callback. 'e' is an object that contains 'result' and 'data'.
+ //e.data will return that number.
+});
+```
+
+### getAllKeys(callback)
+
+Returns an array that contains all keys stored in Storage object.
+
+#### Arguments
+
+* `callback`*(object)*: the callback function after executing this action.
+
+##### Example
+
+```javascript
+var storage = require('@weex-module/storage');
+storage.getAllKeys(function(e) {
+ // callback. 'e' is an object that contains 'result' and 'data'.
+ //e.data will return that array of keys.
+});
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/stream.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/stream.md b/_drafts/v-0.10/references/modules/stream.md
new file mode 100644
index 0000000..522e3b0
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/stream.md
@@ -0,0 +1,86 @@
+---
+title: stream
+type: references
+order: 3.7
+version: 0.10
+---
+
+# stream
+
+A series of stream api. It provides a network request.
+
+## API
+
+### fetch(options, callback,progressCallback)
+
+Start a network request, use two callbacks to receive server's response data.
+
+**Arguments**
+
+* options(object): the request options, key value style dictionary.
+
+ * method(string): the HTTP method `GET` or `POST`.
+
+ * url(string): the request url.
+
+ * headers(string): the HTTP request headers.
+
+ * type(string): request type, 'json','text' or 'jsonp'(same as 'json' in native implementation)
+
+ * body(string): the HTTP body.
+
+* callback(function): A callback function whose argument is the response object of the request. Callback function will receive a `response` object.
+
+ * status(number): response status code.
+
+ * ok(boolean): true if status code is bewteen 200～299.
+
+ * statusText(string): status text
+
+ * data(string): response data. It's a object if request option is `json`/`jsonp`, or *(string)* in other type value.
+
+ * headers(object): response headers
+
+* progressCallback(function): A progress callback. This callback will be invoked before request finished.
+
+ * readyState(number): Current request state.'1':request connection opened;'2':response headers received.;'3':response data is loading;
+
+ * status(number): response status code.
+
+ * length(number): bytes of data have received. You can read full length of response from 'headers'.
+
+ * statusText(string): status text.
+
+ * headers(object): response headers.
+
+### Example
+
+```html
+<template>
+ <div>
+ <text onclick="startStream">click here to start stream</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ methods: {
+ startStream: function () {
+ var stream_module = require('@weex-module/stream');
+ stream_module.fetch({
+ method: 'GET',
+ url: "http://httpbin.org/get",
+ type:'json'
+ }, function(response) {
+ //finished response
+ console.log("all received:",response);
+ },function(response){
+ //progress response
+ console.log("current bytes received:",response.length);
+ });
+ }
+ }
+ }
+</script>
+```
+[Try it](http://dotwe.org/6e4ede64fdfe070b9696cc4cc3bdd086)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v-0.10/references/modules/timer.md
----------------------------------------------------------------------
diff --git a/_drafts/v-0.10/references/modules/timer.md b/_drafts/v-0.10/references/modules/timer.md
new file mode 100644
index 0000000..c82109d
--- /dev/null
+++ b/_drafts/v-0.10/references/modules/timer.md
@@ -0,0 +1,60 @@
+---
+title: Timer
+type: references
+order: 3.8
+version: 0.10
+---
+
+# Timer
+
+Weex encapsulates a series of APIs in order to start/stop a one-time task or a repeated task at a fixed delay. Please note that this module don't provide an accuracy delay. It provides best-effort delivery, but the actual delay may still exceed the delay user wants if the corresponding thread is busy.
+Actually, this module is made for the polyfill of HTML5 timer APIs, developers **should not** use this module directly unless they know exactly what they are doing.
+
+## API
+
+All timeout or interval in this module are measured in milliseconds.
+Also, timeout and interval should be a non-negative integer(the max of integer is 0x7FFFFFFF). If timeout or interval is negative, then it will be reset to zero, e.g. the task will be put in the task queue immediately.
+
+### setTimeout(fn, timeout)
+
+The `setTimeout()` method calls a function after a specified number of milliseconds. Use the `clearTimeout()` method to prevent the function from running. The function is only executed once. If you need to repeat execution, use the `setInterval()` method.
+
+#### Arguments
+
+- `fn` (function): The function that will be executed
+- `timeout` (number): The number of milliseconds to wait before executing the function
+
+#### Return value
+
+A Number, representing the fnId value of the timer that is set. Use this value with the `clearTimeout()` method to cancel the timer.
+
+### setInterval(fn, interval)
+
+The `setInterval()` method calls a function at specified intervals (in milliseconds), and it will continue calling the function until `clearInterval()` is called. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.
+
+#### Arguments
+
+- `fn` (function): The function that will be executed
+- `interval` (number): The intervals (in milliseconds) on how often to execute the function
+
+#### Return value
+
+A Number, representing the fnId value of the timer that is set. Use this value with the `clearInterval()` method to cancel the timer
+
+### clearTimeout(fnId)
+
+The `clearTimeout()` method clears a timer set with the `setTimeout()` method. The fnId value returned by `setTimeout()` is used as the parameter for the `clearTimeout()` method. If the function has not already been executed, you will be able to stop the execution by calling the `clearTimeout()` method, otherwise, this method has no influence on the task.
+
+#### Arguments
+
+- `fnId` (number): The fnId value of the timer returned by the `setTimeout()` method
+
+### clearInterval(fnId)
+
+The `clearInterval()` method clears a timer set with the `setInterval()` method. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.
+
+#### Arguments
+
+- `fnId` (number): The fnId of the timer returned by the `setInterval()` method
+
+[Try it](http://dotwe.org/996578e8f29b88d7d4fa01ab031fbbda)