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:22 UTC
[27/51] [abbrv] incubator-weex-site git commit: rearrangement the
structure of the document
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/guide/syntax/events.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/guide/syntax/events.md b/_draft/v-0.10/guide/syntax/events.md
new file mode 100644
index 0000000..c79dd2b
--- /dev/null
+++ b/_draft/v-0.10/guide/syntax/events.md
@@ -0,0 +1,59 @@
+---
+title: Events
+type: guide
+order: 2.3
+version: 0.10
+---
+
+# Events
+
+Weex allow `<template>` to bind event type and handler on an Element. The attribute name is the event type with prefix `on...` and the attribute value is handler method name. For instance: `onclick="handler"`. e.g.
+
+```html
+<template>
+ <image onclick="handler" ...></image>
+</template>
+
+<script>
+ module.exports = {
+ methods: {
+ handler: function (e) {
+ // TODO
+ }
+ }
+ }
+</script>
+```
+
+When user clicks the image , handler function which defined in `<script>` code will be executed.
+
+## Inline Handler
+
+Beside a handler method name, you can also call a handler inline.
+
+e.g.
+```html
+<template>
+ <image onclick="handler('arg1', $event)" ...></image>
+</template>
+
+<script>
+ module.exports = {
+ methods: {
+ handler: function (arg1, e) {
+ // TODO
+ }
+ }
+ }
+</script>
+```
+
+## Event Object
+
+When an event handler called, it will receive an event object as the first argument. Every event object will contains following properties.
+
+* `type`: event name, eg: `click`
+* `target`: target `Element` of the event
+* `timestamp`: time stamp that event triggered
+
+Next, let's have a look at [display logic control](./display-logic.html).
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/guide/syntax/id.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/guide/syntax/id.md b/_draft/v-0.10/guide/syntax/id.md
new file mode 100644
index 0000000..eaa6e04
--- /dev/null
+++ b/_draft/v-0.10/guide/syntax/id.md
@@ -0,0 +1,65 @@
+---
+title: Find an Element
+type: guide
+order: 2.7
+version: 0.10
+---
+
+# Find an Element
+
+In Weex, we may set the `id` property for a particular element, just as unique identification of a particular element.
+
+`id` can be used by `this.$el(id)` to find an element with a certain id. Take the API [`scrollToElement()`](../../references/modules/dom.html#scrolltoelementnode-options) For example:
+
+```html
+<template>
+ <container>
+ <text id="top">Top</text>
+ <container style="height: 10000; background-color: #999999;">
+ </container>
+ <text onclick="back2Top">Back to Top</text>
+ </container>
+</template>
+<script>
+ var dom = require('@weex-module/dom')
+ module.exports = {
+ methods: {
+ back2Top: function () {
+ var top = this.$el('top')
+ dom.scrollToElement(top)
+ }
+ }
+ }
+</script>
+```
+
+`id` can also work with `repeat` attribute [See more about display logical control](./display-logic.html), and ensure repetitive elements with different `id`:
+
+```html
+<template>
+ <container>
+ <image id="{{imgId}}" src="{{imgUrl}}" onclick="getImageId" repeat="{{images}}"></image>
+ </container>
+</template>
+<script>
+ module.exports = {
+ data: {
+ images: [
+ {imgId: 1, imgUrl: '...'},
+ {imgId: 2, imgUrl: '...'},
+ {imgId: 3, imgUrl: '...'},
+ ...
+ ]
+ },
+ methods: {
+ getImageId: function(e) {
+ // get e.target.id
+ }
+ }
+ }
+</script>
+```
+
+Additionally, in the [composed components](./composed-component.html), we can get the corresponding sub component through `this.$vm(id)` APIs.
+
+Next is how to [send messages between composed components](./comm.html).
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/guide/syntax/index.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/guide/syntax/index.md b/_draft/v-0.10/guide/syntax/index.md
new file mode 100644
index 0000000..448c40a
--- /dev/null
+++ b/_draft/v-0.10/guide/syntax/index.md
@@ -0,0 +1,122 @@
+---
+title: Syntax
+type: guide
+order: 2
+has_chapter_content: true
+version: 0.10
+---
+
+# Syntax
+
+*The syntax of Weex is deeply inspired from [Vue.js](http://vuejs.org/), an elegant JavaScript framework with component system and reactive data binding.*
+
+A simple Weex page sample is just a piece of `<template>` code, a piece of `<style>` code and a piece of `<script>` code. The three parts together describe a whole Weex page.
+
+- `<template>`: *required*. Just uses HTML syntax and describes the structure of a Weex page, which is build upon several tags. Each tag means a type of *component*.
+- `<style>`: *optional*. Describes the presentation details, and the content is based on CSS syntax.
+- `<script>`: *optional*. Describes the data and behavior with JavaScript syntax. It defines data and how these data are processed etc.
+
+```html
+<template>
+ <!-- (required) the structure of page -->
+</template>
+
+<style>
+ /* (optional) stylesheet */
+</style>
+
+<script>
+ /* (optional) the definition of data, methods and life-circle */
+</script>
+```
+
+## `<template>`
+
+We describe page structure in `<template>` tag like the following definition:
+
+```html
+<template>
+ <container>
+ <image style="width: 200; height: 200;" src="http://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></image>
+ <text>Alibaba Weex Team</text>
+ </container>
+</template>
+```
+
+Here `container` tag is the root element of the component. `image` tag describes a picture, while `text` tag means a paragraph of text.
+
+Just similar to HTML, each component could have its own attributes, some components also have children as their sub components.
+
+The root element of template: In a `template` tag, there could be only one root component which has no display logics directive. Here are three types of root component we support now:
+
+- `<container>`: a common native container
+- `<scroller>`: a native scroll view
+- `<list>`: a native cell-reusable list view
+
+Only these type of components are allowed for root element.
+
+* [See all built-in components](../../references/components/index.html).
+
+## `<style>`
+
+You can consider the Weex style syntax is a subset of the CSS syntax, but there is still some differences.
+
+First we could write inline `style` attribute in `<template>` element. Second we could use the `class` attribute to apply stylesheets, which are defined with single-class selectors in `<style>` code. Here is an example:
+
+```html
+<template>
+ <container>
+ <text style="font-size: 64;">Alibaba</text>
+ <text class="large">Weex Team</text>
+ </container>
+</template>
+
+<style>
+ .large {font-size: 64;}
+</style>
+```
+
+Both the two `text` components above have the same `font-size`, which is `64` pixel.
+
+* [See common styles in Weex](../../references/common-style.html)
+
+
+### Notes!
+weex is basically following [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) naming rule , so please **do not use CamelCase** in your attribute , **long-name** with “-” as delimiter is much better.
+
+## `<script>`
+
+The syntax is JavaScript (ES5) and it describes data and behavior of a Weex page. Here we create three paragraphs:
+
+```html
+<template>
+ <container>
+ <text>The time is {{datetime}}</text>
+ <text>{{title}}</text>
+ <text>{{getTitle()}}</text>
+ </container>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ title: 'Alibaba',
+ datetime: null
+ },
+ methods: {
+ getTitle: function () {
+ return 'Weex Team'
+ }
+ },
+ created: function() {
+ this.datetime = new Date().toLocaleString()
+ }
+ }
+</script>
+```
+
+This piece of `<script>` code will generate some component options and assign it to `module.exports`. The three text components above respectively shows the current datetime, 'Alibaba' and 'Weex Team'. The `data` in the `<script>` code stores component data which could be used for [data-binding](./data-binding.html) in the `<template>`. When data changes, the bound value will be updated automatically. Also it could be read and written by `this.x` in its methods.
+
+* [See component definitions references](../../references/component-defs.html)
+
+Next, let's have a look at [data-binding](./data-binding.html).
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/guide/syntax/render-logic.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/guide/syntax/render-logic.md b/_draft/v-0.10/guide/syntax/render-logic.md
new file mode 100644
index 0000000..be967e1
--- /dev/null
+++ b/_draft/v-0.10/guide/syntax/render-logic.md
@@ -0,0 +1,35 @@
+---
+title: Render Logic Control
+type: guide
+order: 2.5
+version: 0.10
+---
+
+# Render Logic Control
+
+## `append`
+
+Attribute `append` do not have data-binding. It won't change the final rendering effect. But it determines whether this component should be rendered as a whole tree or a single node with child nodes appended after.
+
+`append` has two key attributes, `tree` and `node`, the usage is:
+
+```html
+<template>
+ <container>
+ <container id="world" append="tree">
+ <text>Hello World!</text>
+ </container>
+ <container id="weex" append="node">
+ <text>Hello Weex!</text>
+ </container>
+ </container>
+</template>
+```
+
+In the code snippet above, the element with id 'world' will wait for all its children to be rendered then it will be rendered entirely, while the element with id 'weex' will only render itself to the page, then its child elements will be rendered to page one by one.
+
+The rendering result is obvious, The latter statement will render the element a bit faster on the first-paint, but the total time might be longger than `append="tree"` case.
+
+By default, elements are rendered as `node` mode. Once an element is in `tree` rendering mode, its children elements will always be rendered in `tree` mode.
+
+Next we will introduce [composed component](./composed-component.html).
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/guide/syntax/style-n-class.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/guide/syntax/style-n-class.md b/_draft/v-0.10/guide/syntax/style-n-class.md
new file mode 100644
index 0000000..4337992
--- /dev/null
+++ b/_draft/v-0.10/guide/syntax/style-n-class.md
@@ -0,0 +1,118 @@
+---
+title: Style & Class
+type: guide
+order: 2.2
+version: 0.10
+---
+
+# Style & Class
+
+## The Basic Syntax
+
+CSS style description can be viewed as a series of key-value pairs,each of which describes a particular style, such as the width and height of a component.
+
+```css
+.box {
+ width: 400;
+ height: 50;
+}
+```
+
+The format of key-value pairs is `prop-name: prop-value;`. The key name is `prop-name`, the value name is `prop-value`. Usually,the key name and the value name follow Horizontal connection nomenclature, the value may be a number(the default units is px); The key and the value must be separated by `:`, between each key-value pairs must be separated by `;`.
+
+The style description will appear on a weex page in two formats:
+
+* Style attribute of `<template>` label
+* Stylesheets of `<style>` label
+
+### style attribute
+
+The style written in the style label, for example:
+
+```html
+<template>
+ <container style="width: 400; height: 50;">
+ ...
+ </container>
+</template>
+```
+
+It is said that the width and height of `<container>` label is 400 pixels and 50 pixels respectively.
+
+### the `<style>` tag
+
+For example:
+
+```html
+<style>
+ .wrapper {width: 600;}
+ .title {width: 400; height: 50;}
+ .highlight {color: #ff0000;}
+</style>
+```
+
+The stylesheets contain multiple style rules, each style rule has only one class which is contained by its style selector, a pair of curly braces `{...}`, and the styles of the curly braces. For example:
+
+```css
+.title {
+ width: 400;
+ height: 50;
+}
+```
+
+The above is a rule.
+
+### Class attribute
+
+The selectors of `<style>` label are matched with the class attribute of `<template>` label, we should use spaces to separate the class names. For example:
+
+```html
+<template>
+ <container class="wrapper">
+ <text class="title">...</text>
+ <text class="title highlight">...</text>
+ </container>
+</template>
+<style>
+ .wrapper {width: 600;}
+ .title {width: 400; height: 50;}
+ .highlight {color: #ff0000;}
+</style>
+```
+
+It means that the width of the outermost container is 600px, The inside of the two title text is 400 pixels wide 50 pixels high, the second piece of text is red.
+
+### Notes
+
+* In order to simplify the page design and the complete underlying implementation, the width of our default screen is unified to 750 pixels, different screens should be scaled with corresponding ratio.
+* The CSS standard may support a lot of selectors, but now weex only support single-class selector.
+* The CSS standard can support many types of length units, but now weex only support pixel, and the `px` unit could be ignored, you can write number directly. More details can be found in [commmon styles](../../references/common-style.html).
+* The styles of Weex cannot be inherited to children elements, this is different to the CSS standard, such as `color` and `font-size`.
+* The CSS standard contains a lot of styles, but weex only sopport few styles which include layouts such as box model, flexbox, positions. And styles include `font-size`, `color`, etc.
+
+## With Data-binding
+
+Page [data](./data-binding.html) can be bound in `style` and `class` attribute. For example:
+
+```html
+<template>
+ <container>
+ <text style="font-size: {{fontSize}};">Alibaba</text>
+ <text class="large {{textClass}}">Weex Team</text>
+ </container>
+</template>
+<style>
+ .large {font-size: 32;}
+ .highlight {color: #ff0000;}
+</style>
+<script>
+ module.exports = {
+ data: {
+ fontSize: 32,
+ textClass: 'highlight'
+ }
+ }
+</script>
+```
+
+Next, let's have a look at [events](./events.html).
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/api.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/api.md b/_draft/v-0.10/references/api.md
new file mode 100644
index 0000000..a62d5b8
--- /dev/null
+++ b/_draft/v-0.10/references/api.md
@@ -0,0 +1,84 @@
+---
+title: Component APIs
+type: references
+order: 1.3
+version: 0.10
+---
+
+# APIs
+
+You can access these apis through `this`(Vm) context in script methods.
+
+e.g.
+
+```html
+<script>
+module.exports = {
+ methods: {
+ somemethod: function() {
+ this.$vm('someId');
+ }
+ }
+}
+</script>
+```
+
+## $(id)
+
+**Deprecated**, please use `$vm` instead.
+
+## $el(id)
+
+Return the element referenced by specific id.
+
+### Arguments
+
+* `id`*(string)*: the unique identifier.
+
+### Returns
+
+* *(Element)*: an Element object referenced.
+
+### Tips
+* id is only guaranteed to be unique within the current (page)components, if you are looking for the parent components or child components, you can make use of the communication mode between components.
+* Further reading: [id](../guide/syntax/id.html), [Communicate Between Components](../guide/syntax/comm.html)
+
+## $vm(id)
+
+Return the vm object referenced by specific id.
+
+### Arguments
+
+* `id`*(string)*: the unique identifier.
+
+### Returns
+
+* `vm`*(Vm)*: a Vm object referenced.
+
+### Tips
+* id is only guaranteed to be unique within the current (page)components, if you are looking for the parent components or child components, you can make use of the communication mode between components.
+* Further reading: [id](../guide/syntax/id.html), [Communicate Between Components](../guide/syntax/comm.html)
+
+## $getConfig()
+
+Get the current global environment variables and configuration information.
+
+### Returns
+
+ * `config`*(object)*: the object of config.
+ * `bundleUrl`*(string)*: the url of bundle.
+ * `debug`*(boolean)*: if is debug mode.
+ * `env`*(object)*: a object of envrioment.
+ * `weexVersion`*(string)*: a version of weex sdk.
+ * `appName`*(string)*: a name of app.
+ * `appVersion`*(string)*: a version of app.
+ * `platform`*(string)*: the platform, one of `iOS`, `Android` and `Web`.
+ * `osVersion`*(string)*: the version of os.
+ * `deviceModel`*(string)*: the model of device. **native only**
+ * `deviceWidth`*(number)*: the width of device, in pixels.
+ * `deviceHeight`*(number)*: the height of device, in pixels.
+
+## $call(module, method, ...args)
+
+**Deprecated**, please use `require('@weex-module/module')[method](...args)` instead. See [modules](./modules/index.html) for more information
+
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/bubble.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/bubble.md b/_draft/v-0.10/references/bubble.md
new file mode 100644
index 0000000..ba59a90
--- /dev/null
+++ b/_draft/v-0.10/references/bubble.md
@@ -0,0 +1,150 @@
+---
+title: Event Bubble
+type: references
+order: 1.3
+version: 0.10
+---
+
+# Event Bubble <span class="api-version">v0.13+</span>
+
+Weex 1.0 implements the W3C standard event bubbling mechanism.
+
+### Usage
+
+```html
+<template>
+ <div class="root" onclick="rootClick" bubble="true">
+ <div>
+ <text style="font-size: 40px;">{{rootText}}</text>
+ </div>
+ <div class="outer" onclick="parentClick">
+ <div>
+ <text style="font-size: 40px;">{{parentText}}</text>
+ </div>
+ <text class="inner" onclick="click">{{innerText}}</text>
+ </div>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ innerText: 'click me',
+ parentText: '',
+ rootText: ''
+ },
+ methods: {
+ click: function(e) {
+ this.innerText = 'inner bubble'
+ },
+ parentClick: function(e) {
+ this.parentText = 'parent bubble'
+ },
+ rootClick: function(e) {
+ this.rootText = 'root bubble'
+ }
+ }
+ }
+</script>
+
+<style>
+ .inner {
+ font-size: 40px;
+ text-align: center;
+ background-color: #7a9b1b;
+ padding: 40px;
+ }
+
+ .outer {
+ font-size: 40px;
+ text-align: center;
+ background-color: #9b7a1b;
+ padding: 120px;
+ }
+
+ .root {
+ font-size: 40px;
+ text-align: center;
+ background-color: #7a1b9b;
+ padding: 80px;
+ }
+</style>
+```
+
+[try it](http://dotwe.org/weex/dbfeb926e003986e2eea88c8ccdadb92)
+
+Run the above code, open with the client, click on the middle of the elements, you can see the event spread up, followed by the trigger.
+
+### Notice
+
+One thing should be noticed: **For compatibility with previous versions, Weex does not turn on event bubbling by default. You need to add `bubble = "true"` on the root element's properties to turn on the bubbling mechanism. Otherwise, the event will not be propagated upwards, keeping the same effect as the previous version.**
+
+### stopPropagation
+
+In the event handler function, you can use the `e.stopPropagation()` method to prevent the event from escalating. Note that `e.stopPropagation()` differs from `bubble = "true"`, which affects only the current elements and the propagation of parent elements, without affecting the propagation of child elements; the latter is a switching mechanism that is added for compatibility, Will be a global shutdown or open the bubble mechanism, the two can co-exist, as follows:
+
+```html
+<template>
+ <div class="root" onclick="rootClick" bubble="true">
+ <div>
+ <text style="font-size: 40px;">{{rootText}}</text>
+ </div>
+ <div class="outer" onclick="parentClick">
+ <div>
+ <text style="font-size: 40px;">{{parentText}}</text>
+ </div>
+ <text class="inner" onclick="click">{{innerText}}</text>
+ </div>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ innerText: 'click me',
+ parentText: '',
+ rootText: ''
+ },
+ methods: {
+ click: function(e) {
+ this.innerText = 'inner bubble'
+ },
+ parentClick: function(e) {
+ this.parentText = 'parent bubble'
+ e.stopPropagation()
+ },
+ rootClick: function(e) {
+ this.rootText = 'root bubble'
+ // e.stopPropagation()
+ }
+ }
+ }
+</script>
+
+<style>
+ .inner {
+ font-size: 40px;
+ text-align: center;
+ background-color: #7a9b1b;
+ padding: 40px;
+ }
+
+ .outer {
+ font-size: 40px;
+ text-align: center;
+ background-color: #9b7a1b;
+ padding: 120px;
+ }
+
+ .root {
+ font-size: 40px;
+ text-align: center;
+ background-color: #7a1b9b;
+ padding: 80px;
+ }
+</style>
+```
+
+[try it](http://dotwe.org/weex/0cab45a7c62e8bebedd2ffd83a8e1256)
+
+Run the above code, open with the client, click on the middle of the element, you can see the event up to the parent element is terminated, no longer continue to spread to the root element.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/cheatsheet.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/cheatsheet.md b/_draft/v-0.10/references/cheatsheet.md
new file mode 100644
index 0000000..68ac69a
--- /dev/null
+++ b/_draft/v-0.10/references/cheatsheet.md
@@ -0,0 +1,102 @@
+# Weex Cheat Sheet
+
+## Native Components
+
+| component | attribtues | styles | events | special parent | children |
+| ---- | ---- | ---- | ---- | ---- | ---- |
+| `<div>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
+| `<text>` | `value` | **box model**<br>flex<br>`position`<br>`background-color`<br>`opacity`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-decoration`<br>`text-align`<br>`text-overflow`<br>`line-height` | `click`<br>`appear`<br>`disappear` | - | text only |
+| `<image>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`resize` | `click`<br>`appear`<br>`disappear` | - | (none) |
+| `<scroller>` | `show-scrollbar`<br>`scroll-direction` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
+| `<list>` | `loadmoreoffset` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`loadmore`<br>`refresh`<br>`loading` | - | `<cell>`<br>`<header>`<br>`<refresh>`<br>`<loading>` |
+| `<cell>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | `<list>` | (any) |
+| `<slider>` | `auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`change` | - | (any)<br>`<indicator>` |
+| `<indicator>` | - | **box model**<br>**flexbox**<br>`position`<br>`item-color`<br>`item-selected-color`<br>`item-size` | `click`<br>`appear`<br>`disappear` | `<slider>` | (none) |
+| `<wxc-navpage>` | `height`<br>`background-color`<br>`title`<br>`title-color`<br>`left-item-title`<br>`left-item-color`<br>`right-item-title`<br>`right-item-color`<br>`left-item-src`<br>`right-item-src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`naviBar.leftItem.click`<br>`naviBar.rightItem.click` | - | (any) |
+| `<wxc-tabbar>` | `tab-items` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `tabBar.onClick` | - | (none) |
+| `<embed>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (none) |
+| `<web>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`pagestart`<br>`pagefinish`<br>`error` | - | (none) |
+| `<video>` | `src`<br>`play-status`<br>`auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`start`<br>`pause`<br>`finish`<br>`fail` | - | (none) |
+| `<a>` | `href` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
+| `<input>` | `type`<br>`value`<br>`placeholder`<br>`disabled`<br>`autofocus` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`placeholder-color`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-align` | `click`<br>`appear`<br>`disappear` | - | (none) |
+| `<switch>` | `checked`<br>`disabled` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `appear`<br>`disappear`<br>`input`<br>`change`<br>`focus`<br>`blur` | - | (none) |
+
+## Native Modules
+
+| module | apis |
+| ---- | ---- |
+| `@weex-module/dom` | `scrollToElement(node, { offset })` |
+| `@weex-module/modal` | `toast({ message, duration })`<br>`alert({ message, okTitle }, callback)`<br>`confirm({ message, okTitle, cancelTitle }, callback(result))`<br>`prompt({ message, okTitle, cancelTitle }, callback(result, data))` |
+| `@weex-module/stream` | `fetch({ method, url, headers, type, body }, callback({ status, ok, statusText, data, headers }), progressCallback({ readyState, status, length, statusText, headers}))` |
+| `@weex-module/webview` | `goBack(ref)`<br>`goForward(ref)`<br>`reload(ref)` |
+| `@weex-module/navigator` | `push({ url, animated }, callback)`<br>`pop({ animated }, callback)` |
+| `@weex-module/animation` | `transition(node, { styles, duration, timingFunction, delay, transform-origin }, callback)` |
+
+## Special Template Syntax
+
+* `<foo x="abc">`
+* `{% raw %}<foo x="{{expr}}">{% endraw %}`
+* `<foo style="name1: value1; name2: value2">`
+* `{% raw %}<foo style="name1: value1; name2: {{expr}}; name3: ...">{% endraw %}`
+* `<foo class="a b c">`
+* `{% raw %}<foo class="a {{expr}} c">{% endraw %}`
+* `<foo onclick="methodName">`
+* `<foo id="abc">`
+* `<foo if="expr">`
+* `<foo repeat="item in list">`
+* `<foo repeat="(key,item) in list">`
+* `<component type="foo">`
+* `{% raw %}<component type="{{expr}}">{% endraw %}`
+
+## ViewModel APIs
+
+* `this.$vm(el)`
+* `this.$el(el)`
+* `this.$getConfig()`
+* `this.$emit(type, data)`
+* `this.$dispatch(type, data)`
+* `this.$broadcast(type, data)`
+
+## ViewModel Options
+
+* `data`
+* `methods`
+* `computed`
+* `init`, `created`, `ready`
+* `events`
+
+example:
+
+```javascript
+module.exports = {
+
+ data: function () {
+ return {
+ x: 1,
+ y: 2
+ }
+ }
+
+ methods: {
+ foo: function () {
+ console.log('foo')
+ }
+ },
+
+ computed: {
+ z: function () {
+ return this.x + this.y
+ }
+ },
+
+ events: {
+ custom: function (e) {
+ console.log(e)
+ }
+ },
+
+ init: function () {},
+ created: function () {},
+ ready: function () {}
+}
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/color-names.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/color-names.md b/_draft/v-0.10/references/color-names.md
new file mode 100644
index 0000000..a61112b
--- /dev/null
+++ b/_draft/v-0.10/references/color-names.md
@@ -0,0 +1,182 @@
+---
+title: List of the names of colors
+type: references
+order: 1.7
+version: 0.10
+---
+
+# List of the names of colors
+
+### Basic color keywords:
+
+| Color Name | Hex rgb |
+| ---------- | ------- |
+| black | #000000 |
+| silver | #C0C0C0 |
+| gray | #808080 |
+| white | #FFFFFF |
+| maroon | #800000 |
+| red | #FF0000 |
+| purple | #800080 |
+| fuchsia | #FF00FF |
+| green | #008000 |
+| lime | #00FF00 |
+| olive | #808000 |
+| yellow | #FFFF00 |
+| navy | #000080 |
+| blue | #0000FF |
+| teal | #008080 |
+| aqua | #00FFFF |
+
+### Extended color keywords:
+
+| Color Name | Hex rgb |
+| ---------- | ------- |
+| aliceblue | #F0F8FF |
+| antiquewhite | #FAEBD7 |
+| aqua | #00FFFF |
+| aquamarine | #7FFFD4 |
+| azure | #F0FFFF |
+| beige | #F5F5DC |
+| bisque | #FFE4C4 |
+| black | #000000 |
+| blanchedalmond | #FFEBCD |
+| blue | #0000FF |
+| blueviolet | #8A2BE2 |
+| brown | #A52A2A |
+| burlywood | #DEB887 |
+| cadetblue | #5F9EA0 |
+| chartreuse | #7FFF00 |
+| chocolate | #D2691E |
+| coral | #FF7F50 |
+| cornflowerblue | #6495ED |
+| cornsilk | #FFF8DC |
+| crimson | #DC143C |
+| cyan | #00FFFF |
+| darkblue | #00008B |
+| darkcyan | #008B8B |
+| darkgoldenrod | #B8860B |
+| darkgray | #A9A9A9 |
+| darkgreen | #006400 |
+| darkgrey | #A9A9A9 |
+| darkkhaki | #BDB76B |
+| darkmagenta | #8B008B |
+| darkolivegreen | #556B2F |
+| darkorange | #FF8C00 |
+| darkorchid | #9932CC |
+| darkred | #8B0000 |
+| darksalmon | #E9967A |
+| darkseagreen | #8FBC8F |
+| darkslateblue | #483D8B |
+| darkslategray | #2F4F4F |
+| darkslategrey | #2F4F4F |
+| darkturquoise | #00CED1 |
+| darkviolet | #9400D3 |
+| deeppink | #FF1493 |
+| deepskyblue | #00BFFF |
+| dimgray | #696969 |
+| dimgrey | #696969 |
+| dodgerblue | #1E90FF |
+| firebrick | #B22222 |
+| floralwhite | #FFFAF0 |
+| forestgreen | #228B22 |
+| fuchsia | #FF00FF |
+| gainsboro | #DCDCDC |
+| ghostwhite | #F8F8FF |
+| gold | #FFD700 |
+| goldenrod | #DAA520 |
+| gray | #808080 |
+| green | #008000 |
+| greenyellow | #ADFF2F |
+| grey | #808080 |
+| honeydew | #F0FFF0 |
+| hotpink | #FF69B4 |
+| indianred | #CD5C5C |
+| indigo | #4B0082 |
+| ivory | #FFFFF0 |
+| khaki | #F0E68C |
+| lavender | #E6E6FA |
+| lavenderblush | #FFF0F5 |
+| lawngreen | #7CFC00 |
+| lemonchiffon | #FFFACD |
+| lightblue | #ADD8E6 |
+| lightcoral | #F08080 |
+| lightcyan | #E0FFFF |
+| lightgoldenrodyellow | #FAFAD2 |
+| lightgray | #D3D3D3 |
+| lightgreen | #90EE90 |
+| lightgrey | #D3D3D3 |
+| lightpink | #FFB6C1 |
+| lightsalmon | #FFA07A |
+| lightseagreen | #20B2AA |
+| lightskyblue | #87CEFA |
+| lightslategray | #778899 |
+| lightslategrey | #778899 |
+| lightsteelblue | #B0C4DE |
+| lightyellow | #FFFFE0 |
+| lime | #00FF00 |
+| limegreen | #32CD32 |
+| linen | #FAF0E6 |
+| magenta | #FF00FF |
+| maroon | #800000 |
+| mediumaquamarine | #66CDAA |
+| mediumblue | #0000CD |
+| mediumorchid | #BA55D3 |
+| mediumpurple | #9370DB |
+| mediumseagreen | #3CB371 |
+| mediumslateblue | #7B68EE |
+| mediumspringgreen | #00FA9A |
+| mediumturquoise | #48D1CC |
+| mediumvioletred | #C71585 |
+| midnightblue | #191970 |
+| mintcream | #F5FFFA |
+| mistyrose | #FFE4E1 |
+| moccasin | #FFE4B5 |
+| navajowhite | #FFDEAD |
+| navy | #000080 |
+| oldlace | #FDF5E6 |
+| olive | #808000 |
+| olivedrab | #6B8E23 |
+| orange | #FFA500 |
+| orangered | #FF4500 |
+| orchid | #DA70D6 |
+| palegoldenrod | #EEE8AA |
+| palegreen | #98FB98 |
+| paleturquoise | #AFEEEE |
+| palevioletred | #DB7093 |
+| papayawhip | #FFEFD5 |
+| peachpuff | #FFDAB9 |
+| peru | #CD853F |
+| pink | #FFC0CB |
+| plum | #DDA0DD |
+| powderblue | #B0E0E6 |
+| purple | #800080 |
+| red | #FF0000 |
+| rosybrown | #BC8F8F |
+| royalblue | #4169E1 |
+| saddlebrown | #8B4513 |
+| salmon | #FA8072 |
+| sandybrown | #F4A460 |
+| seagreen | #2E8B57 |
+| seashell | #FFF5EE |
+| sienna | #A0522D |
+| silver | #C0C0C0 |
+| skyblue | #87CEEB |
+| slateblue | #6A5ACD |
+| slategray | #708090 |
+| slategrey | #708090 |
+| snow | #FFFAFA |
+| springgreen | #00FF7F |
+| steelblue | #4682B4 |
+| tan | #D2B48C |
+| teal | #008080 |
+| thistle | #D8BFD8 |
+| tomato | #FF6347 |
+| turquoise | #40E0D0 |
+| violet | #EE82EE |
+| wheat | #F5DEB3 |
+| white | #FFFFFF |
+| whitesmoke | #F5F5F5 |
+| yellow | #FFFF00 |
+| yellowgreen | #9ACD32 |
+
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/common-attrs.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/common-attrs.md b/_draft/v-0.10/references/common-attrs.md
new file mode 100644
index 0000000..2ed0310
--- /dev/null
+++ b/_draft/v-0.10/references/common-attrs.md
@@ -0,0 +1,78 @@
+---
+title: Common Attribute
+type: references
+order: 1.5
+version: 0.10
+---
+
+# Common Attribute
+
+Attributes provide additional information about weex tags. All weex tags can have attributes, attributes are always specified in the start tag and usually come in name/value pairs like: name="value". Mustache can be used inside a value.
+All of weex tags have the following attributes：
+
+## id
+
+Specifies a unique id for an element in `<template>` scope. With `id` attribute you can easily refer a weex tag.
+
+```html
+<div id="logo"></div>
+<div id="item-{{index}}"></div>
+```
+
+## style
+
+Specifies an inline style for an element.
+
+```html
+<div style="width: 200; height: 200"></div>
+<div style="padding: {{x}}; margin: 0"></div>
+```
+
+## class
+
+Specifies one or more classnames for an element (refers to a class in a style sheet).
+
+```html
+<div class="button"></div>
+<div class="button {{btnStatus}}"></div>
+```
+
+## repeat
+
+We can use the `repeat` attribute to render a list of items based on an array. The `repeat` attribute has a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an alias for the array element being iterated on.
+
+```html
+<div repeat={{list}}></div>
+<div repeat={{item in list}}></div>
+```
+
+## if
+
+Provide a boolean value to decide whether or not to display current tag.
+
+```html
+<div if="true"></div>
+<div if="{{opened}}"></div>
+<div if="{{direction === 'row'}}"></div>
+```
+
+## append
+
+By providing the value of tree or node, it determines the progress of rendering.
+
+```html
+<div append="tree/node"></div>
+```
+
+## Event Handing (on...)
+
+Register event handlers on weex tag.
+
+```html
+<div onclick="openDetail"></div>
+<div onappear="{{loadMore}}"></div>
+```
+
+## Notes!
+
+Weex is basically following [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) naming rule, so please **do not use CamelCase** in your attribute, **kebab-case** with "-" as delimiter is much better.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/common-event.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/common-event.md b/_draft/v-0.10/references/common-event.md
new file mode 100644
index 0000000..c8e0836
--- /dev/null
+++ b/_draft/v-0.10/references/common-event.md
@@ -0,0 +1,120 @@
+---
+title: Common Events
+type: references
+order: 1.9
+version: 0.10
+---
+
+# Common Events
+
+Weex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Bellow are the common event attributes that can be added to weex components to define event actions.
+
+## Click event
+
+The onclick attribute fires on a click gesture on the element.
+**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
+
+### event object
+
+- `type` : `click`
+- `target` : The target component where the event is triggered
+- `timestamp` : Timestamp when event is triggered
+
+**Example:**
+
+```html
+<template>
+ <text style="font-size: 60px" onclick="{{update}}">I am {{name}}</text>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ name: 'Tom'
+ },
+ methods: {
+ update: function () {
+ this.name = this.name === 'Tom' ? 'Jerry' : 'Tom'
+ }
+ }
+ }
+</script>
+```
+
+
+## Longpress event
+
+If a `longpress` event is bound to a component, the event will be triggered when user long press on it.
+**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
+
+### event object
+
+- `type` : `longpress`
+- `target` : The target component where the event is triggered
+- `timestamp` : Timestamp when event is triggered
+
+**Example:**
+
+```html
+<template>
+ <div style="width: 400px; height: 200px; background-color: {{bg}};
+ justify-content: center; align-items: center;" onlongpress="{{update}}">
+ <text style="font-size: 60px">Press me</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ bg: '#FF0000'
+ },
+ methods: {
+ update: function () {
+ this.bg = this.bg === '#FF0000' ? '#00FF00' : '#FF0000'
+ }
+ }
+ }
+</script>
+```
+
+## Appear event
+
+If a appear event is bound to a component inside a scrollable container, the event will be triggered when the component comes to be visible.
+
+### event object
+
+- `type` : `appear`
+- `target` : The target component where the event is triggered
+- `timestamp` : Timestamp when event is triggered
+- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
+
+[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)
+
+## Disappear event
+
+If a `disappear` event is bound to a component inside a scrollable container, the event will be triggered when the component scrolls out of viewport and disappears from your sight.
+
+### event object
+
+- `type` : `disappear`
+- `target` : The target component where the event is triggered
+- `timestamp` : Timestamp when event is triggered
+- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
+
+[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)
+
+## Page event
+
+Weex provides you with simple management of page status, such as `viewappear` and `viewdisappear`.
+The `viewappear` event will be triggered when page is about to show or before any animations are configured for showing. For example, when calling `push` method in `navigator` module, this event will be trigged in new page.
+The `viewdisappear` event will be triggeded when page is about to dismiss.
+Different from `appear` and `disappear` of component, these two events focus on the status of whole page, so **they must be bound to the root component**.
+In addititon, these events also can be bound to body component which is not root actually such as `wxc-navpage`.
+
+### event object
+
+- `type` : `viewappear` or `viewdisappear`
+- `target` : The target component where the event is triggered
+- `timestamp` : Timestamp when event is triggered
+
+[example](http://dotwe.org/3fa162a65fbf0c7e2655fbc1bebbfc38)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/common-style.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/common-style.md b/_draft/v-0.10/references/common-style.md
new file mode 100644
index 0000000..8ae8224
--- /dev/null
+++ b/_draft/v-0.10/references/common-style.md
@@ -0,0 +1,208 @@
+---
+title: Common Style
+type: references
+order: 1.6
+version: 0.10
+---
+
+# Common Style
+
+All of weex tags share some common style rules
+
+## Box Model
+
+
+
+Weex box model based on the CSS box model, all of weex elements can be considered as boxes. The term "box model" is used when talking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content.
+
+you can use the definition below in weex box model.
+
+- `width`: `length` type, default value `0`
+- `height`: `length` type, default value `0`
+- `padding`: `length` type, default value `0`, (space around content, between element content and the element border)
+ - `padding-left`: `length` type, default value `0`
+ - `padding-right`: `length` type, default value `0`
+ - `padding-top`: `length` type, default value `0`
+ - `padding-bottom`: `length` type, default value `0`
+- `margin`: `length` type, default value `0`, (space around elements, outside the border)
+ - `margin-left`: `length` type, default value `0`
+ - `margin-right`: `length` type, default value `0`
+ - `margin-top`: `length` type, default value `0`
+ - `margin-bottom`: `length` type, default value `0`
+- `border`
+ - `border-style`: values `solid` | `dashed` | `dotted`, default value `solid`
+ - `border-left-style`: values `solid` | `dashed` | `dotted`, default value `solid`
+ - `border-top-style`: values `solid` | `dashed` | `dotted`, default value `solid`
+ - `border-right-style`: values `solid` | `dashed` | `dotted`, default value `solid`
+ - `border-bottom-style`: values `solid` | `dashed` | `dotted`, default value `solid`
+ - `border-width`: `length` type, non-negative, default value `0`
+ **DO NOT** use `border-width:1`. There is a default viewport `<viewport width="750">`, if the actual width of a device is 720px, then `border-width:1` will be `border-width:0.96`. As weex **do not** support sub-pixel, this border would not be rendered.
+ - `border-left-width`: `length` type, non-negative, default value `0`
+ - `border-top-width`: `length` type, non-negative, default value `0`
+ - `border-right-width`: `length` type, non-negative, default value `0`
+ - `border-bottom-width`: `length` type, non-negative, default value `0`
+ - `border-color`: `color` type, default value `#000000`
+ - `border-left-color`: `color` type, default value `#000000`
+ - `border-top-color`: `color` type, default value `#000000`
+ - `border-right-color`: `color` type, default value `#000000`
+ - `border-bottom-color`: `color` type, default value `#000000`
+ - `border-radius`: `length` type, default value `0`, (rounded borders to elements , default value is 0 meaning right angle )
+
+ Although the the default overflow style is `overflow:hidden` in android, a view will not be clipped by its parents' `border-radius`. This only happens on Android, it works fine on iOS.
+ - `border-bottom-left-radius`: `length` type, non-negative, default value `0`
+ - `border-bottom-right-radius`: `length` type, non-negative, default value `0`
+ - `border-top-left-radius`: `length` type, non-negative, default value `0`
+ - `border-top-right-radius`: `length` type, non-negative, default value `0`
+
+Notes: The rule of border-radius for a specific corner such as `border-top-left-radius` is not currently supported for component `<image>` and `<text>`.
+
+Weex box model uses `border-box` as the default value of `box-sizing`, meaning the width and height properties includes content, padding and border, but not the margin.
+
+example:
+
+```html
+<template>
+ <div>
+ <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
+ </div>
+</template>
+```
+
+## Flexbox
+
+Weex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices.
+
+Flexbox consists of flex containers and flex items. If a weex element can containing other elements, it is a flex container.
+
+Notice that the old version of flexbox specification has differences with the new ones, such as whether or not to support wrapping. This is described at w3c's working drafts, and you should notice the differences among them. Also notice that the old version is only supported below the 4.4 version of android.
+
+### Flex container
+
+Flexbox is the default and only style model in Weex, so you don't have to add `display: flex;` in a container.
+
+- `flex-direction`: values `row` | `column`, default value `column`
+
+The flex-direction property specifies the direction of the flexible items inside the flex container. Default value is `column` (top-to-bottom).
+
+- `justify-content`: values `flex-start` | `flex-end` | `center` | `space-between`, default value `flex-start`
+
+The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. Default value is `flex-start` meaning the flex items are positioned at the beginning of the container. `flex-end` means the items are positioned at the end of the container. `center` means the items are positioned at the center of the container. `space-between` means the items are positioned with space between the lines.
+
+
+
+- `align-items`: values `stretch` | `flex-start` | `center` | `flex-end`, default value `stretch`
+
+The align-items property vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. Default value is `stretch` meaning the items are stretched to fit the container. `flex-start` means the items are positioned at the top of the container; `flex-end` means the items are positioned at the bottom of the container; `center` means items are positioned at the center of the container (vertically).
+
+
+
+### Flex item
+
+- `flex`: `number` type, default value `0`
+
+the flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container. If all of the flex items set `flex: 1`, they will have equal width or height on direction of flex container's `flex-direction`. If there are two flex items, with one setting `flex: 1`, and the other setting `flex: 2`, the first one will take 1/3 container space, and the second one will take 2/3 container space. If all of flex items don't set `flex`, they will be aligned depending on the container's `justify-content` property.
+
+
+## Examples
+
+a list of images with equal scales align at the vertical axis:
+
+```html
+<template>
+ <div style="width: 300; height: 100;">
+ <image src="..." style="flex: 1;"></image>
+ <image src="..." style="flex: 1;"></image>
+ <image src="..." style="flex: 1;"></image>
+ </div>
+</template>
+```
+
+a image with fixed width aligns with a stretched text:
+
+```html
+<template>
+ <div style="width: 300; height: 100;">
+ <image src="..." style="width: 100; height: 100;"></image>
+ <text style="flex: 1;">...</text>
+ </div>
+</template>
+```
+
+mixed direction alignment:
+
+```html
+<template>
+ <div style="width: 100;">
+ <image src="..." style="width: 100; height: 100;"></image>
+ <div style="flex-direction: row;">
+ <text style="flex: 2; font-size: 32;">title</text>
+ <text style="flex: 1; font-size: 16;">$100</text>
+ </div>
+ </div>
+</template>
+```
+
+one text align left , the other float right:
+
+
+
+```html
+<template>
+<div style="flex-direction: row; justify-content: space-between;">
+ <text>WEEX</text>
+ <text>2016-05-08</text>
+</div>
+</template>
+```
+
+## Position
+
+we can use properties below to control placement of weex tag
+
+- `position`: values `relative` | `absolute` | `fixed` | `sticky`, default value `relative`
+
+`relative` means the item is positioned relative to its normal position. `absolute` means the item is positioned relative to its container. `fixed` keeps the elements position fixed when the page is scrolling. `sticky` keeps elements positioned inside the viewport as "stuck" at the top or "relative" at its original place depending on whether does it about to scroll out of the view.
+
+- `top`: `number` type, default value `0`, upward offset value
+- `bottom`: `number` type, default value `0`, downward offset value
+- `left`: `number` type, default value `0`, leftward offset value
+- `right`: `number` type, default value `0`, rightward offset value
+
+### Examples
+
+```html
+<template>
+ <div style="flex-direction: column;">
+ <div style="height: 3000;">
+ <image src="..." style="top: 50; left: 50; ..."></image>
+ </div>
+ <div style="height: 3000;">
+ <image src="..." style="position: sticky; ..."></image>
+ </div>
+ <div style="height: 3000;">
+ <image src="..." style="position: absolute; top: 50; left: 50; ..."></image>
+ </div>
+ </div>
+</template>
+```
+
+## Other Common Style
+
+- `opacity`
+- `background-color`
+
+## Type of Style Value
+
+- `length` type
+- `number` type
+- `color` type (*[The list of color keywords.](./color-names.html)*)
+- enumerated type
+
+## Simple Step
+
+These up-to-down steps may help you to plan the whole style of weex pages.
+
+1. overall style: divide the whole page to different parts
+2. flex alignment: align boxes in every part of page
+3. position box: place box, set offset
+4. element specific style: set styles for certain element if needed
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/component-defs.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/component-defs.md b/_draft/v-0.10/references/component-defs.md
new file mode 100644
index 0000000..baa6584
--- /dev/null
+++ b/_draft/v-0.10/references/component-defs.md
@@ -0,0 +1,131 @@
+---
+title: Component Definition
+type: references
+order: 1.2
+version: 0.10
+---
+
+# Component Definition
+
+A component definition is a set of options to describe a component. It's always assigned to `module.exports` in `<script>`.
+
+```javascript
+module.exports = {
+ // a set of options here
+}
+```
+
+## Data & Methods options
+
+```javascript
+module.exports = {
+ data: function () {
+ return {x: 1, y: 2}
+ },
+ methods: {
+ doThis: function () {...},
+ doThat: function () {...}
+ },
+ ...
+}
+```
+
+The `data` option is a function that return a observable data object for this ViewModel.
+The `methods` option is a map which contains all ViewModel methods.
+
+Each `data` or `methods` property will be proxied to the ViewModel instance. So you can read and write data with `this.x`, also you can call methods with `this.doThis(...)`.
+
+A whole example:
+
+```html
+<template>
+ <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div>
+</template>
+<script>
+ module.exports = {
+ data: function () {
+ return {w: 750, h: 200}
+ },
+ methods: {
+ update: function (e) {
+ this.h += 200
+ }
+ }
+ }
+</script>
+```
+
+## Events options
+
+```javascript
+module.exports = {
+ data: ...,
+ methods: {
+ foo: function () {
+ ...
+ this.$emit('customtype1', data)
+ }
+ },
+ events: {
+ customtype1: function (e) {
+ console.log(e.type, e.detail)
+ }
+ },
+ ...
+}
+```
+
+The `events` options could allow you to add custom event listeners when ViewModel created. Then it will listen these type of events and handle them by the function-type value.
+
+The first argument is a event object which contains event data in `e.detail`.
+
+## Lifecycle options
+
+```javascript
+module.exports = {
+ data: ...,
+ methods: ...,
+ init: function () {
+ console.log('ViewModel constructor begins')
+ },
+ created: function () {
+ console.log('Data observation finished')
+ },
+ ready: function () {
+ console.log('Virtual DOM finished')
+ },
+ ...
+}
+```
+
+Weex ViewModel now supports these lifecycle hook functions which could be write as component options:
+
+* `init`: fired at the beginning of a ViewModel constructor call.
+* `created`: fired when ViewModel observes default data but not compile the template.
+* `ready`: fired when ViewModel observes default data and compiles the template to generate virtual DOM finally.
+
+**Note: If you want to use the function in `methods`, `events` or lifecycle options as a parameter, please make sure the context is correct as expect. For example:**
+
+```javascript
+module.exports = {
+ data: function () {
+ return {x: 1, y: 2}
+ },
+ ready: function () {
+ // `undefined`
+ // because the context changed
+ this.foo(this.bar)
+ // `1`
+ // because the context bound correct
+ this.foo(this.bar.bind(this))
+ },
+ methods: {
+ foo: function (fn) {
+ return fn()
+ },
+ bar: function () {
+ return this.x
+ }
+ }
+}
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/components/a.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/a.md b/_draft/v-0.10/references/components/a.md
new file mode 100644
index 0000000..e1677bf
--- /dev/null
+++ b/_draft/v-0.10/references/components/a.md
@@ -0,0 +1,50 @@
+---
+title: <a>
+type: references
+order: 2.1
+version: 0.10
+---
+
+# <a>
+
+`a` defines a hyperlink to a page in the web. Its purpose and syntax is very similar to [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) in HTML5.
+
+## Child Components
+
+This type of component supports all kinds of weex component as it's child components except for its own kind.
+
+## Attributes
+
+* href: href attributes defines the URL of the hyperlink.
+
+## Styles:
+
+### common styles
+
+Check out the [common styles](../common-style.html)
+
+## Events
+
+### common events
+
+Check out the [common events](../common-event.html)
+
+### Notes
+
+We can't guarantee the order of execution between onclick function and href. we recommend that do not use the click event in `a`.
+
+## Examples
+
+```html
+<template>
+ <div>
+ <a href="http://h5.m.taobao.com">
+ <text>Click me to see how 'A' element opens a new world.</text>
+ </a>
+ </div>
+</template>
+```
+
+[Try it](http://dotwe.org/d99f6eb55aa501c836a195ec824cada0)
+
+Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for 'a'.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/components/cell.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/cell.md b/_draft/v-0.10/references/components/cell.md
new file mode 100644
index 0000000..34d1703
--- /dev/null
+++ b/_draft/v-0.10/references/components/cell.md
@@ -0,0 +1,42 @@
+---
+title: <cell>
+type: references
+order: 2.6
+version: 0.10
+---
+
+# <cell>
+
+### Summary
+
+This component must be used as a subcomponent of a [`list`](./list.html) component, which is for the performance optimizing during scrolling.
+
+### Child Components
+
+This type of component supports all kinds of weex component as its child components.
+
+### Attributes
+
+There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
+
+**Notes:** you can't give `<cell>` a `flex` value. Width of `<cell>` is equal to the width of its parent component `<list>`, and you don't need to specify its height.
+
+### Styles
+
+**common styles**: check out the [common styles](../common-attrs.html)
+
+- support flexbox related styles
+- support box model related styles
+- support ``position`` related styles
+- support ``opacity``, ``background-color`` etc.
+
+### Events
+
+**common events**: check out the [common events](../common-event.html)
+
+- support `click` event. Check out [common events](../common-event.html)
+- support `appear` / `disappear` event. Check out [common events](../common-event.html)
+
+### Example
+
+please refer to [List](./list.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/components/div.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/div.md b/_draft/v-0.10/references/components/div.md
new file mode 100644
index 0000000..1e75523
--- /dev/null
+++ b/_draft/v-0.10/references/components/div.md
@@ -0,0 +1,48 @@
+---
+title: <div>
+type: references
+order: 2.2
+version: 0.10
+---
+
+# <div>
+
+### Summary
+
+The most fundamental component which is a contianer to wrap any other components. It supports all the common styles, attributes and layout of flexbox.
+
+alias: `<container>` (deprecated)
+
+### Child Components
+
+This type of component supports all kinds of weex component as its child components including its own kind.
+
+### Attributes
+
+There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
+
+### Styles
+
+**common styles**: check out the [common styles](../common-attrs.html)
+
+- support flexbox related styles
+- support box model related styles
+- support ``position`` related styles
+- support ``opacity``, ``background-color`` etc.
+
+### Events
+
+**common events**: check out the [common events](../common-event.html)
+
+- support `click` event. Check out [common events](../common-event.html)
+- support `appear` / `disappear` event. Check out [common events](../common-event.html)
+
+### Examples
+
+```html
+<div>
+ <image src="..."></image>
+ <text>...</text>
+</div>
+```
+
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/components/image.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/image.md b/_draft/v-0.10/references/components/image.md
new file mode 100644
index 0000000..3eae206
--- /dev/null
+++ b/_draft/v-0.10/references/components/image.md
@@ -0,0 +1,55 @@
+---
+title: <image>
+type: references
+order: 2.3
+version: 0.10
+---
+
+# <image>
+
+### Summary
+
+`image` tag is used to render a specified picture, and it shouldn't contain any child component. You can use `img` as alias.
+
+**Notes:** the styles of `width` and `height` should be specified, otherwise it won't work.
+
+alias: `<img>`
+
+### Child Components
+
+This component supports no child components.
+
+### Attributes
+
+- `src`: <string> image source url
+- `resize`: <span class="api-version">v0.5+</span> <string> the 'ScaleType' of the component. The default value is ``stretch``, if this attribute is not specified. Possible values are ``cover``, ``contain``, each of which has the same meaning with w3c standard.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+### Styles
+
+- `width`: <length> the width of the component. This style should be specified.
+- `height`: <length> the height of the component. This style should 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
+- support ``opacity``, ``background-color`` etc.
+
+### Events
+
+**common events**: check out the [common events](../common-event.html)
+
+- support `click` event. Check out [common events](../common-event.html)
+- support `appear` / `disappear` event. Check out [common events](../common-event.html)
+
+### Examples
+
+```html
+<div>
+ <image src="..." ></image>
+ <text>...</text>
+</div>
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/components/index.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/index.md b/_draft/v-0.10/references/components/index.md
new file mode 100644
index 0000000..66e211c
--- /dev/null
+++ b/_draft/v-0.10/references/components/index.md
@@ -0,0 +1,24 @@
+---
+title: Build-in Components
+type: references
+order: 2
+version: 0.10
+---
+
+# Build-in Components
+
+- [<a>](./a.html)
+- [<indicator>](./indicator.html)
+- [<switch>](./switch.html)
+- [<text>](./text.html)
+- [<textarea>](./textarea.html)
+- [<video>](./video.html)
+- [<web>](./web.html)
+- [<div>](./div.html)
+- [<image>](./image.html)
+- [<input>](./input.html)
+- [<list>](./list.html)
+- [<cell>](./cell.html)
+- [<refresh> & <loading>](./refresh.html)
+- [<scroller>](./scroller.html)
+- [<slider>](./slider.html)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/components/indicator.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/indicator.md b/_draft/v-0.10/references/components/indicator.md
new file mode 100644
index 0000000..b06dc95
--- /dev/null
+++ b/_draft/v-0.10/references/components/indicator.md
@@ -0,0 +1,98 @@
+---
+title: <indicator>
+type: references
+order: 2.10
+version: 0.10
+---
+
+# <indicator>
+
+### Summary
+
+This component must be used as a subcomponent of a [`slider`](./slider.html) component.
+
+### Child Components
+
+This component supports no child components.
+
+### Attributes
+
+There is no specific attribute for this component other than the [common attributes](../common-attrs.html).
+
+### Styles
+
+- `item-color`: <colors> This style attribute sets the normal item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
+- `item-selectedColor`: <colors> This style attribute sets the selected item color using either a named color or a color specified in the hexadecimal #RRGGBB format.
+- `item-size`: <length> The size of the indicator elements, which is an float attribute.
+
+**common styles**: check out the [common styles](../common-attrs.html)
+
+- support flexbox related styles
+- support box model related styles
+- support ``position`` related styles
+
+**Note:** There are some specific details about the style `width` and `height` on this component: the position of indicator will not only depend on the `top`, `left`, `bottom` and `right`, but also depend on the value of `width` and `height`. Imagine there is a virtual container outside the indicator, and it inherit the `width` and `height` of the indicator. The `top`, `left`, `right` and `bottom` will always take effect on this container, not the indicator points themselves, and the indicator points will be positioned in the center of it. And also you should know the default `width` and `height` is the parent slider's `width` and `height`.
+
+**Note:** `background-color` is not recommended to apply on this component, and you should use `item-color` and `item-selectedColor` instead.
+
+### Events
+
+**common events**: check out the [common events](../common-event.html)
+
+- support `click` event. Check out [common events](../common-event.html)
+- support `appear` / `disappear` event. Check out [common events](../common-event.html)
+
+### Example
+
+```html
+<template>
+ <div>
+ <slider class="slider">
+ <div class="slider-pages" repeat="{{itemList}}">
+ <image class="img" src="{{pictureUrl}}"></image>
+ <text class="title">{{title}}</text>
+ </div>
+
+ <indicator class="indicator"></indicator>
+ </slider>
+ </div>
+</template>
+
+<style>
+ .img {width: 150; height: 150;}
+ .title {flex: 1; 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/32a097bf/_draft/v-0.10/references/components/input.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/input.md b/_draft/v-0.10/references/components/input.md
new file mode 100644
index 0000000..feaac53
--- /dev/null
+++ b/_draft/v-0.10/references/components/input.md
@@ -0,0 +1,124 @@
+---
+title: <input>
+type: references
+order: 2.4
+version: 0.10
+---
+
+# input
+
+The weex builtin component `input` is used to create input controls to receive the user's input characters. How a `input` component works varies considerably depending on the value of its `type` attribute, such as `text`, `password`, `url`, `email`, `tel` etc.
+
+**Notes:** does not support the common-event `click`. Please listen to the `input` or `change` event instead.
+
+## Child Components
+
+This component supports no child components.
+
+## Attributes
+
+* `type`: the type of controls to display. The default value is `text`, if this attribute is not specified. Possible values are `text`, `password`, `tel`, `email`, `url` etc. each of which has the same meaning with W3C standard.
+
+* `value`: the value(text) of the control.
+
+* `placeholder`: 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`: 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`: a boolean attribute lets you specify that a form control should have input focus when the page loads.
+
+* `maxlength`: <span class="api-version">v0.7+</span> a number value to specify maxlength of input.
+
+Other attributes please check out the [common attributes](../common-attrs.html).
+
+## Styles
+
+* placeholder-color: the color of placeholder. Default value is '#999999'.
+
+* 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 input character 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 [common events](../common-event.html)
+
+* support 'appear' / 'disappear' event.
+
+### Notes
+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
+<template>
+ <div>
+ <input
+ type="text"
+ placeholder="Input Something"
+ class="input"
+ autofocus="true"
+ value=""
+ onchange="onchange"
+ oninput="oninput"
+ />
+ <text>oninput: {{txtInput}}</text>
+ <text>onchange: {{txtChange}}</text>
+ </div>
+</template>
+
+<style>
+ .input {
+ font-size: 60;
+ height: 80;
+ width: 400;
+ }
+</style>
+
+<script>
+ require('weex-components');
+ module.exports = {
+ data: {
+ txtInput: '',
+ txtChange: ''
+ },
+ methods: {
+ onchange: function(event) {
+ this.txtChange = event.value;
+ console.log('onchange', event.value);
+ },
+ oninput: function(event) {
+ this.txtInput = event.value;
+ console.log('oninput', event.value);
+ }
+ }
+ };
+</script>
+```
+
+[Try it](http://dotwe.org/e1b18eb89facb4e2a5467ee4bebd9be6)
+
+Use [Weex Playground](https://alibaba.github.io/weex/download.html) App to Scan the QR image and view the example for 'input'.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/components/list.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/list.md b/_draft/v-0.10/references/components/list.md
new file mode 100644
index 0000000..3b4745e
--- /dev/null
+++ b/_draft/v-0.10/references/components/list.md
@@ -0,0 +1,292 @@
+---
+title: <list>
+type: references
+order: 2.5
+version: 0.10
+---
+
+# List
+
+<span class="weex-version">v0.6.1+</span>
+
+The List component, which inherits from Scroller component, is a core component, and it provides the most popular features for using a list of items.
+
+It can provide excellent experience and performance while still maintaining smooth scroll and low memory usage.
+
+**example**
+
+```html
+<template>
+ <list>
+ <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;
+ }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ 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)
+ }
+ }
+ }
+</script>
+
+```
+
+[try it](http://dotwe.org/15d58cfbca9b6a72c89c9a13ad1f6155)
+
+### Child Components
+
+Notes: The list now supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly.
+
+* cell 0.6.1 defines the attributes and behavior of the cells that appear in list.
+* header 0.6.1 sticks to the top when it reaches the top of the screen.
+* 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.
+
+Please checkout [Scroller Component Attributes](./scroller.html) 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 0.5 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)
+
+
+### API
+
+All cells or cell's subcomponents in list support the scrollToElement API in [dom module](../modules/dom.html)
+
+#### Difference between loading child component and onloadmore event
+
+loading is a child component that can response to the onloading event, and this event can only be triggered when the scroller/list has been scrolled down to the bottom.
+onloadmore is an event that will be triggered when the rest of the scroller/list is less than loadmoreoffset long.
+
+
+* [scroller example](http://dotwe.org/85fd3988eefa24f058b7da7966e56203)
+* [list example](http://dotwe.org/62f895249014dde26cc0725c8005e42c)
+
+### 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.
+
+### Example
+
+```html
+<template>
+ <div class="wrapper">
+ <list class="list">
+ <header class="header">
+ <text class="title">Search Results</text>
+ </header>
+ <refresh style="width: 750; padding: 30;" onrefresh="refreshData" display="{{refreshDisplay}}">
+ <text class="text"> ↓ Pull to refresh </text>
+ <loading-indicator class="indicator"></loading-indicator>
+ </refresh>
+ <cell class="row" repeat="item in items" id="item-{{$index}}">
+ <div>
+ <text class="item">Repo name: {{item.full_name}}</text>
+ </div>
+ <div>
+ <text class="item">Repo star: {{item.stargazers_count}}</text>
+ </div>
+ </cell>
+ <loading onloading="loadingData" style="width: 750; padding: 30;" display="{{loadingDisplay}}">
+ <text class="text">{{loadingText}}</text>
+ </loading>
+ </list>
+ <div class="up" onclick="goToTop">
+ <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
+ </div>
+ </div>
+</template>
+
+<style>
+.wrapper {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+.list{
+ background-color: #ffffff;
+ flex: 1;
+}
+.header {
+ height: 80;
+ align-items: center;
+ justify-content: center;
+ background-color: #efefef;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.title {
+ text-align: center;
+}
+.text {
+ text-align: center;
+}
+.row {
+ padding: 20;
+ border-bottom-color: #eeeeee;
+ border-bottom-width: 2;
+ border-bottom-style: solid;
+}
+.up {
+ width: 70;
+ height: 70;
+ position: fixed;
+ right: 20;
+ bottom: 20;
+}
+.img {
+ width: 70;
+ height: 70;
+}
+</style>
+
+<script>
+var dom = require('@weex-module/dom') || {}
+var stream = require('@weex-module/stream') || {}
+var modal = require('@weex-module/modal') || {}
+
+var SEARCH_URL = 'https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc'
+
+module.exports = {
+ data: {
+ isLoaded: true,
+ page: 1,
+ loadingDisplay: 'hide',
+ refreshDisplay: 'hide',
+ loadingText: 'Loading...',
+ items:[]
+ },
+ created: function () {
+ var url = SEARCH_URL + '&page=' + this.page
+
+ this.renderData(url)
+
+ this.page++
+ },
+ methods: {
+ renderData: function (url) {
+ var self = this
+
+ stream.fetch({
+ method: 'GET',
+ url: url,
+ type:'json'
+ }, function(res) {
+ self.refreshDisplay = 'hide'
+ self.loadingDisplay = 'hide'
+
+ try {
+ var results = res.data.items || []
+
+ if (Array.isArray(results)) {
+ for(var i = 0; i < results.length; i++) {
+ self.items.push(results[i])
+ }
+ }
+
+ self.isLoaded = true
+ } catch(e) {}
+ },function(res){
+
+ })
+ },
+ loadingData: function (e) {
+ var url = SEARCH_URL + '&page=' + this.page
+ var self = this
+
+ if (self.isLoaded === false) return
+
+ self.loadingDisplay = 'show'
+
+ if (self.page <=10 ) {
+ self.renderData(url)
+ self.page++
+ } else {
+ self.loadingDisplay = 'hide'
+ self.loadingText = 'NO MORE!'
+ }
+ },
+ goToTop: function (e) {
+ dom.scrollToElement(this.$el('item-0'), {
+ offset: -100
+ })
+ },
+ refreshData: function (e) {
+ var url = SEARCH_URL + '&page=1'
+
+ if (this.isLoaded === false) return
+
+ this.refreshDisplay = 'show'
+
+ modal.toast({
+ 'message': 'Refreshing...',
+ 'duration': 1
+ })
+
+ this.items = []
+ this.page = 1
+ this.renderData(url)
+
+ this.refreshDisplay = 'hide'
+ }
+ }
+}
+</script>
+```
+
+[Try it](http://dotwe.org/ed524ade679b0fa96e980600c53ea5ce)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/_draft/v-0.10/references/components/refresh-loading.md
----------------------------------------------------------------------
diff --git a/_draft/v-0.10/references/components/refresh-loading.md b/_draft/v-0.10/references/components/refresh-loading.md
new file mode 100644
index 0000000..8b1d610
--- /dev/null
+++ b/_draft/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.