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:28 UTC
[33/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/v1.0/references/components/refresh.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/components/refresh.md b/_drafts/v1.0/references/components/refresh.md
new file mode 100644
index 0000000..868dad7
--- /dev/null
+++ b/_drafts/v1.0/references/components/refresh.md
@@ -0,0 +1,204 @@
+---
+title: <refresh>
+type: references
+order: 2.7
+version: 0.10
+---
+
+# <refresh>
+
+<span class="weex-version">v0.6.1+</span>
+
+`<refresh>` 为 `<scroller>` 和 `<list>` 提供下拉加载功能。用法与特性与 `<loading>` 类似，`<scroller>` 和 `<list>` 的子组件，且只能在被 `<scroller>` 和 `<list>` 包含时才能被正确的渲染。
+
+一个简单例子：
+
+```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 class="row" repeat="i in staffs" index="{{$index}}">
+ <div class="item">
+ <text>{{i.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:{
+ onrefresh:function(e){
+ this.refreshDisplay='show';
+ this.staffs=[{name:'anna'},{name:'baos'},{name:'connon'},{name:'inns'}];
+ this.refreshDisplay='hide'
+ },
+ onpullingdown:function(e){
+ console.log('onpullingdown triggered.');
+ console.log('dy:'+e.dy);
+ console.log('headerHeight:'+e.headerHeight);
+ console.log('maxHeight:'+e.maxHeight);
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/64cb982f67186c76f9f27fe3000a2fe8)
+
+## 子组件
+
+- [`<text>`](./text.html)
+- [`<image>`](./image.html)
+- `<loading-indicator>`: `<refresh>` 和 `<loading>` 组件的子组件，拥有默认的动画效果的实现。
+
+## 特性
+
+- `display {string}`：可选值为 `show` 或者 `hide`，仅隐藏 `<indicator>`，`<loading>` 其他子组件依然可见，`<loading>` 事件仍会被触发。
+
+## 样式
+
+支持所有通用样式。
+
+- 盒模型
+- `flexbox` 布局
+- `position`
+- `opacity`
+- `background-color`
+
+查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `refresh`： 当 `<scroller>`/`<list>` 被下拉时触发。
+- `pullingdown`：仅在 Android 支持。当 `<scroller>`/`<list>` 被下拉时触发，可以从事件的参数对象中获取 dy，headerHeight，maxHeight
+
+## 约束
+
+- `<refresh>` 不支持 `remove`，v0.9 版本会修复。
+- `display` 值为 `show` 或 `hide`。仅隐藏 `<indicator>`，`<refresh>` 其他子组件依然可见，`refresh` 事件仍会被触发。
+
+ 如果需要 `<refresh>` hide 时隐藏文案并不再触发事件，有两种解决方法：
+
+ 1. 修改提示文案，并在 `refresh` 事件中添加判断逻辑；
+ 2. v0.9+ 可通过 `remove` 解决。
+
+- 只能通过 `display` 特性进行展示和隐藏，且必须成对出现，即设置 `display="show"`,必须有对应的 `display="hide"`。
+
+## 示例
+
+```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>
+```
+
+[体验一下](http://dotwe.org/80c027d6bfb337195c25cc0ba9317ea5)
+
+更多示例可查看 [`<list>`](./list.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/components/scroller.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/components/scroller.md b/_drafts/v1.0/references/components/scroller.md
new file mode 100644
index 0000000..0fac77c
--- /dev/null
+++ b/_drafts/v1.0/references/components/scroller.md
@@ -0,0 +1,324 @@
+---
+title: <scroller>
+type: references
+order: 2.8
+version: 0.10
+---
+
+# <scroller>
+
+<span class="weex-version">v0.6.1+</span>
+
+`<scroller>` 是一个竖直的，可以容纳多个排成一列的子组件的滚动器。如果子组件的总高度高于其本身，那么所有的子组件都可滚动。
+
+**注意：** `<scroller>` 可以当作根元素或者嵌套元素使用。此组件的滚动方向是垂直方向的形式。
+
+一个简单例子：
+
+```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>
+```
+
+[体验一下](http://dotwe.org/6910f0b87aeabe3f2a0d62c0d658dbd2)
+
+## 子组件
+
+支持任意类型的 Weex 组件作为其子组件。 其中，还支持以下两个特殊组件作为子组件：
+
+- `<refresh>`
+
+ 用于给列表添加下拉刷新的功能。
+
+ 使用文档请查看 [`<refresh>`](./refresh.html)
+
+- `<loading>`
+
+ `<loading>` 用法与特性和 `<refresh>` 类似，用于给列表添加上拉加载更多的功能。
+
+ 使用文档请查看 [`<loading>`](./loading.html)
+
+## 特性
+
+- `show-scrollbar {boolean}`：可选值为 `true`/ `false`，默认值为 `true`。控制是否出现滚动条。
+- `scroll-direction {string}`：可选为 `horizontal` 或者 `vertical`，默认值为 `vertical` 。定义滚动的方向。
+- `loadmoreoffset {number}`：默认值为 0，触发 `loadmore` 事件所需要的垂直偏移距离（设备屏幕底部与页面底部之间的距离）。当页面的滚动条滚动到足够接近页面底部时将会触发 `loadmore` 这个事件。
+
+ 
+
+- `loadmoreretry {number}`：默认值为 0，当 `loadmore` 失败时是否重置 `loadmore` 相关的 UI，值不一样就会重置。
+
+## 样式
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `loadmore` <sup class="wx-v">v0.5+</sup>：如果滚动到底部将会立即触发这个事件，你可以在这个事件的处理函数中加载下一页的列表项。
+- 通用事件
+
+ 支持所有通用事件：
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 扩展
+
+### scrollToElement(node, options)
+
+滚动到列表某个指定项是常见需求，`<list>` 拓展了该功能支持滚动到指定 `<cell>`。通过 `dom` module 访问，更多信息可参考 [dom module](../modules/dom.html) 。
+
+#### 参数
+
+- `node {node}`：指定目标节点。
+- `options {Object}`：
+ - `offset {number}`：一个到其可见位置的偏移距离，默认是0
+
+#### 示例
+
+```html
+<template>
+ <scroller>
+ <div class="row" repeat="item in rows" id="item-{{$index}}">
+ <text class="item-title">row {{item.id}}</text>
+ </div>
+ <div onclick="go" style="width: 750;height: 50; position: fixed; left: 0; right: 0; bottom: 0; background-color: #eeeeee;">
+ <text style="text-align: center;">
+ Go to 50th line.
+ </text>
+ </div>
+ </scroller>
+</template>
+
+<script>
+var dom = require('@weex-module/dom')
+
+module.exports = {
+ data: {
+ rows: []
+ },
+ created: function () {
+ for (var i = 0; i < 100; i++) {
+ this.rows.push({
+ id: i
+ })
+ }
+ },
+ methods: {
+ go: function () {
+ var el = this.$el('item-49')
+
+ dom.scrollToElement(el, {
+ offset: 0
+ })
+ }
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/483e5c878c52c0891e6e35e478f19854)
+
+## 约束
+
+**不允许**相同方向的 `<list>` 或者 `<scroller>` 互相嵌套，换句话说就是嵌套的 `<list>`/`<scroller>` 必须是不同的方向。
+
+举个例子，**不允许**一个垂直方向的 `<list>` 嵌套的一个垂直方向的 `<scroller>` 中，但是一个垂直方向的 `<list>` 是可以嵌套的一个水平方向的 `<list>` 或者 `<scroller>` 中的。
+
+## 示例
+
+
+
+```html
+<style>
+.item {
+ padding: 20;
+ height: 220;
+ border-bottom-width: 1;
+ border-bottom-style: solid;
+ border-bottom-color: #efefef;
+}
+.item-content {
+ flex-direction: row;
+ width: 710;
+ background-color: #ffffff;
+}
+.item-imgbox {
+ height: 180;
+ width: 180;
+ margin-right: 20;
+}
+.item-img {
+ width: 180;
+ height: 180;
+}
+.item-info {
+ height: 180;
+ width: 510;
+ justify-content: center;
+ position: relative;
+}
+.item-info-detail {
+ position: relative;
+ color: #A2A2A2;
+}
+.desc {
+ lines: 4;
+ text-overflow: ellipsis;
+ font-size: 26;
+ line-height: 30;
+ color: #A2A2A2;
+}
+.title {
+ lines: 1;
+ text-overflow: ellipsis;
+ font-size: 32;
+ color: #2D2D2D;
+ line-height: 40;
+}
+.detail-info {
+ margin-top: 15;
+}
+.up {
+ width: 70;
+ height: 70;
+ position: fixed;
+ right: 20;
+ bottom: 20;
+}
+.img {
+ width: 70;
+ height: 70;
+}
+</style>
+
+<template>
+ <div>
+ <scroller>
+ <div class="item" repeat="item in items" id="item-{{$index}}">
+ <div class="item-content">
+ <div class="item-imgbox">
+ <img class="item-img" src="{{item.img}}" alt="" />
+ </div>
+ <div class="item-info">
+ <div class="item-info-detail">
+ <text class="title">{{item.title}}</text>
+ <div class="detail-info">
+ <text class="desc">{{item.desc}}</text>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </scroller>
+ <div class="up" onclick="goToTop">
+ <img class="img" src="https://img.alicdn.com/tps/TB1ZVOEOpXXXXcQaXXXXXXXXXXX-200-200.png"></img>
+ </div>
+ </div>
+</template>
+
+<script>
+ var dom = require('@weex-module/dom') || {}
+
+ module.exports = {
+ data: {
+ items: [{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ },{
+ img: 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
+ title: 'Who is Alan Mathison Turing?',
+ desc: 'Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.'
+ }]
+ },
+ created: function () {
+ },
+ methods: {
+ goToTop: function (e) {
+ dom.scrollToElement(this.$el('item-0'), {
+ offset: 0
+ })
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/799f54b32f5227f9c34cfbb5e6946ba7)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/components/slider.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/components/slider.md b/_drafts/v1.0/references/components/slider.md
new file mode 100644
index 0000000..b12a8aa
--- /dev/null
+++ b/_drafts/v1.0/references/components/slider.md
@@ -0,0 +1,121 @@
+---
+title: <slider>
+type: references
+order: 2.9
+version: 0.10
+---
+
+# <slider>
+
+`<slider>` 组件用于在一个页面中展示多个图片，在前端，这种效果被称为 `轮播图`。
+
+## 子组件
+
+支持任意类型的 Weex 组件作为其子组件。 其中，还支持以下组件作为子组件展示特殊效果：
+
+ - `<indicator>`：用于显示轮播图指示器效果，必须充当 [`<slider>`](./slider.html) 组件的子组件使用。
+
+## 特性
+
+- `auto-play {boolean}`：可选值为 `true`/`false`，默认的是 `false`。
+
+ 该值决定是否自动播放轮播。重置 `loadmore` 相关的 UI，值不一样就会重置。
+
+- `interval {number}`：值为毫秒数，此值设定 slider 切换时间间隔。当 `auto-play` 值为 `true` 时生效。
+
+## 样式
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `change`: 当轮播索引改变时，触发该事件。
+
+ 事件中 event 对象属性：
+ - `index`：展示的图片索引
+
+- 通用事件
+
+ 支持所有通用事件：
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 示例
+
+```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://dotwe.org/37784d97811f4c91594a9ad6f118c0f7)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/components/switch.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/components/switch.md b/_drafts/v1.0/references/components/switch.md
new file mode 100644
index 0000000..8a3d614
--- /dev/null
+++ b/_drafts/v1.0/references/components/switch.md
@@ -0,0 +1,98 @@
+---
+title: <switch>
+type: references
+order: 2.11
+version: 0.10
+---
+
+# <switch>
+
+<span class="weex-version">v0.6.1+</span>
+
+`<switch>` 是 Weex 的内置组件，用来创建与 iOS 一致样式的按钮。例如，在 iPhone 中的设置应用中的飞行模式按钮就是一个 switch 按钮。
+
+## 子组件
+
+`<switch>` 组件**不支持**任何子组件。
+
+## 特性
+
+- `checked {boolean}`：默认值为 `false`，表明按钮是否开启 is on or not.
+- `disabled {boolean}`：默认值为 `false`，表明是否激活按钮
+
+## 样式
+
+值得注意的是，在这个组件上，有些样式组件属性**不能使用**，它们是：
+
+- `width`
+- `height`
+- `min-width`
+- `min-height`
+- `margin`
+- `padding`
+- `border`
+
+**注意：**
+
+由于设计宽度为 750px，宽度和高度相关的属性不能配置，组件的尺寸限定在 100x60。
+
+- 通用样式
+
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `change`：改变开关状态时触发该事件。
+
+ 事件中 event 对象属性：
+
+ - `value`: 组件布尔值真或假。
+ - `timestamp`: 事件的时间戳。
+
+- 通用事件
+
+ 支持所有通用事件：
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 示例
+
+```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>
+```
+
+[体验一下](http://dotwe.org/5f8b9d9c0e429e61f4a004dc8ee637e1)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/components/text.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/components/text.md b/_drafts/v1.0/references/components/text.md
new file mode 100644
index 0000000..edd6a05
--- /dev/null
+++ b/_drafts/v1.0/references/components/text.md
@@ -0,0 +1,116 @@
+---
+title: <text>
+type: references
+order: 2.12
+version: 0.10
+---
+
+# <text>
+
+`<text>` 是 Weex 内置的组件，用来将文本按照指定的样式渲染出来。`<text>` 只能包含文本值，你可以使用 `{% raw %}{{}}{% endraw %}` 标记插入变量值作为文本内容。
+
+## 子组件
+
+此组件不支持子组件。
+
+## 特性
+
+- `value {string}`: 组件的值，与 `<text>` 标签中的文本内容相同。
+
+## 样式
+
+- `lines {number}`: 指定文本行数。默认值是 `0` 代表不限制行数。
+- text styles: 查看 [文本样式](../text-style.html)
+
+ - 支持 `color` 样式.
+ - 支持 `font-size` 样式. iOS默认值：`32`，Android：不同设备不同，H5 默认值：`32`.
+ - 支持 `font-style` 样式.
+ - 支持 `font-weight` 样式.
+ - 支持 `text-align` 样式.
+ - 支持 `text-decoration` 样式.
+ - 支持 `text-overflow` 样式.
+ - 支持 `line-height`样式<sup class="wx-v">0.6.1+</sup> 。`line-height` 在 iOS 中与 H5 和 Android 中不同， 文本值将放置在框的底部。
+ - 不支持 `flex-direction`, `justify-content`, `align-items` 这些为子节点设置的属性，并且`<text>`没有子节点。
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- 通用事件
+ 支持所有通用事件：
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 约束
+
+1. `<text>` 里直接写文本头尾空白会被过滤，如果需要保留头尾空白，暂时只能通过数据绑定写头尾空格。
+
+```html
+<template>
+ <div>
+ <text> 测试1，直接放置头尾用空白的文本 </text>
+ <text>{{msg}}</text>
+ </div>
+</template>
+<script>
+module.exports = {
+ data: {
+ msg: ' 测试2，使用数据绑定 '
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/473d451e48ba322b606c4ba2577fd96a)
+
+## 示例
+
+```html
+<template>
+ <div>
+ <text>this is text content</text>
+ <text value="this is text value"></text>
+ <text id="textid" onclick={{showtext}}>this is gettext content</text>
+ <text value="{{text}}"></text>
+ <text style="lines: 3;">Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.</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>
+```
+
+[体验一下](http://dotwe.org/b2796940d6b9766000778c61446fcd26)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/components/textarea.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/components/textarea.md b/_drafts/v1.0/references/components/textarea.md
new file mode 100644
index 0000000..9470173
--- /dev/null
+++ b/_drafts/v1.0/references/components/textarea.md
@@ -0,0 +1,115 @@
+---
+title: <textarea>
+type: references
+order: 2.13
+version: 0.10
+---
+
+# <textarea>
+
+<span class="weex-version">v0.8+</span>
+
+`textarea` 是 Weex 内置的一个组件，用于用户交互，接受用户输入数据。 可以认为是允许多行的 `<input>`
+
+**Notes:** `<textarea>`支持 `<input>` 支持的所有的事件。
+
+## 子组件
+
+`textarea` 组件不支持子组件。
+
+## 特性
+
+- `value {string}`：组件的接收到的输入字符。
+- `placeholder {string}`：提示用户可以输入什么。 提示文本不能有回车或换行。
+- `disabled {boolean}`：表示是否支持输入。通常 `click` 事件在 `disabled` 控件上是失效的。
+- `autofocus {boolean}`：表示是否在页面加载时控件自动获得输入焦点。
+- `rows {number}`：接收 number 类型的数据，指定组件的高度，默认值是 2
+
+## 样式
+
+- text styles
+ - 支持 `color`
+ - 支持 `font-size`
+ - 支持 `font-style`
+ - 支持 `font-weight`
+ - 支持 `text-align`
+
+ 查看 [文本样式](../text-style.html)
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `input`: 输入字符的值更改。
+
+ 事件中 event 对象属性：
+
+ - `value`: 触发事件的组件；
+ - `timestamp`: 事件发生时的时间戳。
+
+- `change`: 当用户输入完成时触发。通常在 `blur` 事件之后。
+
+ 事件中 event 对象属性：
+
+ - `value`: 触发事件的组件；
+
+ - `timestamp`: 事件发生时的时间戳。
+
+- `focus`: 组件获得输入焦点。
+
+ 事件中 event 对象属性：
+
+ - `timestamp`: 事件发生时的时间戳。
+
+- `blur`: 组件失去输入焦点。
+
+ 事件中 event 对象属性：
+
+ - `timestamp`: 事件发生时的时间戳。
+
+- 通用事件
+
+ **注意：**
+ 不支持 `click` 事件。 请监听 `input` 或 `change` 事件代替。
+
+ 支持以下通用事件：
+
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+## 示例
+
+```html
+<template>
+ <div>
+ <textarea
+ class="textarea"
+ autofocus="true"
+ placeholder="..."
+ value="我是一个多行版本的input组件">
+ </textarea>
+ </div>
+</template>
+<style>
+ .textarea {
+ margin: 20;
+ border-width: 2;
+ border-style: solid;
+ border-color: #efefef;
+ border-radius: 5;
+ }
+</style>
+```
+
+[体验一下](http://dotwe.org/31d67beda847cd5b5cf7b78ff21895ba)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/components/video.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/components/video.md b/_drafts/v1.0/references/components/video.md
new file mode 100644
index 0000000..ac17c8b
--- /dev/null
+++ b/_drafts/v1.0/references/components/video.md
@@ -0,0 +1,82 @@
+---
+title: <video>
+type: references
+order: 2.14
+version: 0.10
+---
+
+# <video>
+
+<span class="weex-version">v0.6.1+</span>
+
+`<video>` 组件可以让我们在 Weex 页面中嵌入视频内容。
+
+## 子组件
+
+- `<text>` 是唯一合法的子组件。
+
+### 特性
+
+- `src {string}`：内嵌的视频指向的URL
+- `play-status {string}`：可选值为 `play` | `pause`，用来控制视频的播放状态，`play` 或者 `pause`，默认值是 `pause`。
+- `auto-play {boolean}`：可选值为 `true` | `false`，当页面加载初始化完成后，用来控制视频是否立即播放，默认值是 `false`。
+
+## 样式
+
+- 通用样式：支持所有通用样式
+
+ - 盒模型
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `start`：当 playback 的状态是 Playing 时触发
+- `pause`：当 playback 的状态是 Paused 时触发
+- `finish`：当 playback 的状态是 Finished 时触发
+- `fail`：当 playback 状态是 Failed 时触发
+
+## 示例
+
+```html
+<template>
+ <div>
+ <text>Big Eater!</text>
+ <video class="video" onstart="onstart" onpause="onpause" onfinish="onfinish" onfail="onfail"
+ auto-play="false" play-status="pause" src="{{src}}" style="width:750;height:500;"></video>
+ <text>state: {{msg}}</text>
+ </div>
+</template>
+
+<style>
+</style>
+
+<script>
+ module.exports ={
+ data: {
+ msg: '',
+ src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
+ },
+ methods:{
+ onstart:function(e){
+ this.msg = 'onstart'
+ },
+ onpause:function(e){
+ this.msg = 'onpause'
+ },
+ onfinish:function(e){
+ this.msg = 'onfinish'
+ },
+ onfail:function(e){
+ this.msg = 'onfinish'
+ },
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/d83a00bbd180bd5dc4e7f9381d39b4dd)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/components/web.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/components/web.md b/_drafts/v1.0/references/components/web.md
new file mode 100644
index 0000000..073fb4b
--- /dev/null
+++ b/_drafts/v1.0/references/components/web.md
@@ -0,0 +1,143 @@
+---
+title: <web>
+type: references
+order: 2.15
+version: 0.10
+---
+
+# <web>
+
+<span class="weex-version">v0.5+</span>
+
+使用 `<web>` 组件在 Weex 页面中嵌入一张网页内容。`src` 属性用来指定资源地址。你也可以使用 `webview module` 来控制 `web` 的行为，比如前进、后退和重载。可以在这里查看 [`webview` module](../modules/webview.html)。
+
+## 子组件
+
+不支持子组件。
+
+## 特性
+
+- `src {string}`：此特性指定嵌入的 web 页面 url。
+
+## 样式
+
+- 通用样式：不支持部分盒模型样式，支持列表如下：
+
+ - `width`
+
+ 组件的宽度，默认值是0。这个样式定义必须指定数值。
+
+ - `height`
+
+ 组件的高度，默认值是0。这个样式定义必须指定数值。
+
+ - `flexbox` 布局
+ - `position`
+ - `opacity`
+ - `background-color`
+
+ 查看 [组件通用样式](../common-style.html)
+
+## 事件
+
+- `pagestart`: `<web>` 组件开始加载时发送此事件消息。
+- `pagefinish`: `<web>` 组件完成加载时发送此事件消息。
+- `error`: 如果 `<web>` 组件加载出现错误，会发送此事件消息。
+
+- 通用事件
+
+ 支持以下通用事件：
+ - `appear`
+ - `disappear`
+
+ 查看 [通用事件](../common-event.html)
+
+**注意：**
+
+不支持 `click` 事件。
+
+## 示例
+
+我们用一个简易浏览器示例，来展示如何使用 `<web>` 组件和 `webview` module。 查看 [webview module](../modules/webview.html)。
+
+```html
+<template>
+ <div class="browserStyle">
+ <div style="flex-direction: row">
+ <input id="urlInput" type="url" autofocus="false" placeholder="input url" onchange="change" oninput="input" class="textStyle" value="https://www.baidu.com">
+ </input>
+ </div>
+ <div style="flex-direction: row">
+ <text class="buttonSytle" onclick="loadURL">LoadURL</text>
+ <text class="buttonSytle" onclick="backforward">Backward</text>
+ <text class="buttonSytle" onclick="forward">Forward</text>
+ </div>
+ <div>
+ <web id="webview" src="{{src}}" class="webStyle"></web>
+ </div>
+ </div>
+</template>
+
+<style>
+ .browserStyle {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color:#778899 ;
+ }
+
+ .textStyle {
+ width: 750;
+ height: 50;
+ background-color: #D3D3D3;
+ font-size: 30;
+ }
+
+ .buttonSytle {
+ width:200;
+ height: 50;
+ background-color: #D3D3D3;
+ margin:10;
+ padding-left: 5;
+ padding-right: 5;
+ font-size: 30;
+ }
+
+ .webStyle {
+ width: 750;
+ height: 800;
+ background-color: #8B0000;
+ }
+</style>
+
+<script>
+ var web_module = require('@weex-module/webview')
+
+ module.exports = {
+ data: {
+ src : "https://h5.m.taobao.com",
+ },
+
+ methods: {
+ loadURL: function (e) {
+ var input = this.$el("urlInput");
+ this.src = input.attr.value;
+ },
+
+ backforward: function (e) {
+ var web_element = this.$el('webview');
+ web_module.goBack(web_element);
+ },
+
+ forward: function (e) {
+ var web_element = this.$el('webview');
+ web_module.goForward(web_element);
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/84741a6befeb0f1e5ce11b47ecf1123f)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/gesture.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/gesture.md b/_drafts/v1.0/references/gesture.md
new file mode 100644
index 0000000..4377af9
--- /dev/null
+++ b/_drafts/v1.0/references/gesture.md
@@ -0,0 +1,79 @@
+---
+title: 手势
+type: references
+order: 1.4
+version: 0.10
+---
+
+# 手势
+
+*注：该功能属于实验性功能*
+
+Weex 封装了原生的触摸事件以提供手势系统。使用手势类似于在 Weex 中使用事件，只需在节点上设置 `on` 特性来监听手势即可。
+
+## 手势类型
+
+目前，仅支持以下四种手势类型：
+
+- **Touch**：当触摸到一个点，移动或从触摸面移开时触发 `touch` 手势。触摸手势很精准，它会返回所有详细的事件信息。所以，监听 `touch` 手势可能很慢，即使只移动一丁点也需要处理大量事件。有三种类型的 `touch` 手势：
+
+ - `touchstart` 将在触摸到触摸面上时触发。
+ - `touchmove` 将在触摸点在触摸面移动时被触发。
+ - `touchend` 将在从触摸面离开时被触发。
+
+- **Pan**：`pan` 手势也会返回触摸点在触摸面的移动信息，有点类似于 `touch` 手势。但是 `pan` 手势只会采样收集部分事件信息因此比 `touch` 事件要快得多，当然精准性差于 `touch`。`pan` 也有三中类型的手势，这些手势的意义与 `touch` 完全一样：
+
+ - `panstart`
+ - `panmove`
+ - `panend`
+
+- **Swipe**：`swipe` 将会在用户在屏幕上滑动时触发，一次连续的滑动只会触发一次 `swiper` 手势。
+- **LongPress**：`LongPress` 将会在触摸点连续保持 500 ms以上时触发。
+
+`touch` 和 `pan` 非常接近，它们的特点可以总结成这样：
+
+- **Touch**：完整信息，精准、很慢
+- **Pan**：抽样信息，很快，不够精准
+
+开发者可以根据自己的情况选择合适的手势。
+
+## 属性
+
+以下属性可以在手势的回调中使用：
+
+- `direction`：仅在 `swipe` 手势中存在，返回滑动方向，返回值可能为 `up`, `left`, `bottom`, `right`。
+- `changedTouches`：一个数组，包含了当前手势的触摸点的运动轨迹
+
+### changedTouches
+
+`changedTouches` 是一个数组，其子元素中包含以下属性：
+
+- `identifier`：触摸点的唯一标识符。
+- `pageX`：触摸点相对于文档左侧边缘的 X 轴坐标。
+- `pageY`：触摸点相对于文档顶部边缘的 Y 轴坐标。
+- `screenX`：触摸点相对于屏幕左侧边缘的 X 轴坐标。
+- `screenY`：触摸点相对于屏幕顶部边缘的 Y 轴坐标。
+
+## 约束
+
+目前，由于会触发大量事件冲突，Weex Android 还不支持在滚动类型的元素上监听手势，例如 `scroller`, `list` 和 `webview` 这三个组件。
+
+## 示例
+
+```html
+<template>
+ <div ontouchstart="handleTouchstart"></div>
+</template>
+
+<script>
+module.exports = {
+ methods: {
+ handleTouchstart: function(eventProperties) {
+ // handling with the Event Properties
+ }
+ }
+}
+</script>
+```
+
+如上面代码所示，一个 `touchstart` 事件会在触摸点与触摸面接触的时候触发。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/Artboard.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/Artboard.jpg b/_drafts/v1.0/references/images/Artboard.jpg
new file mode 100644
index 0000000..2f6bb95
Binary files /dev/null and b/_drafts/v1.0/references/images/Artboard.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/coding_weex_1.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/coding_weex_1.jpg b/_drafts/v1.0/references/images/coding_weex_1.jpg
new file mode 100644
index 0000000..8080578
Binary files /dev/null and b/_drafts/v1.0/references/images/coding_weex_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/css-boxmodel.png
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/css-boxmodel.png b/_drafts/v1.0/references/images/css-boxmodel.png
new file mode 100644
index 0000000..a2063e2
Binary files /dev/null and b/_drafts/v1.0/references/images/css-boxmodel.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/css-flexbox-align.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/css-flexbox-align.jpg b/_drafts/v1.0/references/images/css-flexbox-align.jpg
new file mode 100644
index 0000000..8a7f731
Binary files /dev/null and b/_drafts/v1.0/references/images/css-flexbox-align.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/css-flexbox-justify.svg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/css-flexbox-justify.svg b/_drafts/v1.0/references/images/css-flexbox-justify.svg
new file mode 100644
index 0000000..33e742b
--- /dev/null
+++ b/_drafts/v1.0/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/v1.0/references/images/div_1.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/div_1.jpg b/_drafts/v1.0/references/images/div_1.jpg
new file mode 100644
index 0000000..3c89773
Binary files /dev/null and b/_drafts/v1.0/references/images/div_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/div_2.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/div_2.jpg b/_drafts/v1.0/references/images/div_2.jpg
new file mode 100644
index 0000000..67395bb
Binary files /dev/null and b/_drafts/v1.0/references/images/div_2.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/div_3.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/div_3.jpg b/_drafts/v1.0/references/images/div_3.jpg
new file mode 100644
index 0000000..b10f69e
Binary files /dev/null and b/_drafts/v1.0/references/images/div_3.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/div_4.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/div_4.jpg b/_drafts/v1.0/references/images/div_4.jpg
new file mode 100644
index 0000000..acc2518
Binary files /dev/null and b/_drafts/v1.0/references/images/div_4.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/image_1.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/image_1.jpg b/_drafts/v1.0/references/images/image_1.jpg
new file mode 100644
index 0000000..b87de15
Binary files /dev/null and b/_drafts/v1.0/references/images/image_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/image_2.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/image_2.jpg b/_drafts/v1.0/references/images/image_2.jpg
new file mode 100644
index 0000000..598a242
Binary files /dev/null and b/_drafts/v1.0/references/images/image_2.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/list_2.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/list_2.jpg b/_drafts/v1.0/references/images/list_2.jpg
new file mode 100644
index 0000000..8c2cc55
Binary files /dev/null and b/_drafts/v1.0/references/images/list_2.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/list_3.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/list_3.jpg b/_drafts/v1.0/references/images/list_3.jpg
new file mode 100644
index 0000000..f2968c7
Binary files /dev/null and b/_drafts/v1.0/references/images/list_3.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/list_4.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/list_4.jpg b/_drafts/v1.0/references/images/list_4.jpg
new file mode 100644
index 0000000..0123171
Binary files /dev/null and b/_drafts/v1.0/references/images/list_4.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/nav.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/nav.jpg b/_drafts/v1.0/references/images/nav.jpg
new file mode 100644
index 0000000..8c6ed03
Binary files /dev/null and b/_drafts/v1.0/references/images/nav.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/scroller_1.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/scroller_1.jpg b/_drafts/v1.0/references/images/scroller_1.jpg
new file mode 100644
index 0000000..3e995cb
Binary files /dev/null and b/_drafts/v1.0/references/images/scroller_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/style_1.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/style_1.jpg b/_drafts/v1.0/references/images/style_1.jpg
new file mode 100644
index 0000000..2482710
Binary files /dev/null and b/_drafts/v1.0/references/images/style_1.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/images/style_2.jpg
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/images/style_2.jpg b/_drafts/v1.0/references/images/style_2.jpg
new file mode 100644
index 0000000..6b6f2e1
Binary files /dev/null and b/_drafts/v1.0/references/images/style_2.jpg differ
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/index.md b/_drafts/v1.0/references/index.md
new file mode 100644
index 0000000..644c16f
--- /dev/null
+++ b/_drafts/v1.0/references/index.md
@@ -0,0 +1,46 @@
+---
+title: Bootstrap
+type: references
+order: 1
+has_chapter_content: false
+chapter_title: 通用选项
+version: 0.10
+---
+
+# Bootstrap
+
+除了其默认的意义，`<script>`标签支持在页面的顶级组件中通过 `type` 属性定义两种配置。
+- `type="data"`: 配置初始化数据，这里定义的数据会覆盖定义在`<script>`中的数据；
+- `type="config"`: 定义配置项。
+
+``` html
+<script type="data">
+ /* (可选) 定义初始化数据 */
+</script>
+
+<script type="config">
+ /* (可选) 定义配置项 */
+</script>
+
+```
+## 定义初始化数据
+
+有时，很难在默认的`<script>`标签中维护巨大的数据结构。所以 Weex 允许我们通过 `<script type="data">` 标签定义初始化数据。在这里定义的数据将完全取代默认的 `<script>` 标签中定义的数据。
+
+例如：
+
+```html
+<script type="data">
+ module.exports = {
+ title: 'Alibaba',
+ date: new Date().toLocaleString()
+ }
+</script>
+```
+## 配置项
+
+Weex 也允许我们通过 `<script type="config">` 定义一些配置项，目前，仅只支持配置 `downgrade`。
+- `downgrade.osVersion`
+- `downgrade.appVersion`
+- `downgrade.weexVersion`
+- `downgrade.deviceModel`
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/animation.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/animation.md b/_drafts/v1.0/references/modules/animation.md
new file mode 100644
index 0000000..821bfac
--- /dev/null
+++ b/_drafts/v1.0/references/modules/animation.md
@@ -0,0 +1,90 @@
+---
+title: animation
+type: references
+order: 4.1
+version: 0.10
+---
+
+# `animation` 动画
+
+流畅且有意义的动画是一个十分有效的提升移动应用用户体验的手段，`animation` 模块被用于在组件上执行动画。动画可以对组件执行一系列简单的变换 (位置、大小、旋转角度、背景颜色和不透明度)。举个例子，如果有一个 `<image>` 组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。
+
+## 示例
+
+```html
+<template>
+ <div>
+ <div id="test" class="test" onclick="run"></div>
+ </div>
+</template>
+<style>
+ .test { background-color: #6666ff; width: 200; height: 200; }
+</style>
+<script>
+ var animation = require('@weex-module/animation')
+ module.exports = {
+ methods: {
+ run: function () {
+ var testEl = this.$el('test')
+ animation.transition(testEl, {
+ styles: {
+ backgroundColor: '#FF0000',
+ transform: 'translate(100px, 100px)'
+ },
+ duration: 0, //ms
+ timingFunction: 'ease',
+ 'transform-origin': 'center center',
+ delay: 0 //ms
+ }, function () {
+ console.log('animation finished.')
+ })
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/2ae04d3a7017a2ec748cf40905fcd98c)
+
+## API
+
+### `transition(el, options, callback)`
+
+[example](http://dotwe.org/a034a49b5863da099843eb9a0eea9f93)
+
+#### 参数
+
+* `el {Element}`：将要执行动画的元素，通常可以通过调用 [`this.$el(id)`](../api.html) 来获取元素的引用。
+* `options {Object}`：描述动画过程的对象。
+ * `options.duration {number}`：指定动画的持续时间 (单位是毫秒)，默认值是 `0`，表示没有动画效果。
+ * `options.delay {number}`：指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 `0`，表示没有延迟，在请求后立即执行动画。
+ * `options.timingFunction {string}`：描述动画执行的速度曲线，用于使动画变化更为平滑。默认值是 `linear`，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性：
+
+| 属性名 | 描述 | 示例 |
+| ---- | ---- | ---- |
+| `linear` | 动画从头到尾的速度是相同的 | [example](http://dotwe.org/70e0c243ffde30abd8fd353f8c6d1d9a) |
+| `ease-in` | 动画速度由慢到快 | [example](http://dotwe.org/23b104f833039f263957481f2e2c40c9) |
+| `ease-out` | 动画速度由快到慢 | [example](http://dotwe.org/04dab95e073a2c3a808e6b01fc20e996) |
+| `ease-in-out` | 动画先加速到达中间点后减速到达终点 | [example](http://dotwe.org/fc37ec17d215e786ce336a00457489e3) |
+| `cubic-bezier(x1, y1, x2, y2)` | 在三次贝塞尔函数中定义变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 [cubic-bezier](http://cubic-bezier.com/) 和 [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). | [example](http://weex.alibaba-inc.com/playground/95d8f15d0014c31d3a1d15728313f2a5) |
+
+* `options.styles {Object}`：设置不同样式过渡效果的键值对，下表列出了所有合法的参数：
+
+| 参数名 | 描述 | 值类型 | 默认值 | 示例 |
+| ---- | ---- | ---- | ---- |---- |
+| width | 动画执行后应用到组件上的宽度值 | length | 无 | [example](http://dotwe.org/b599d273f996cfdcbeca7bd5c828ca90) |
+| height | 动画执行后应用到组件上的高度值 | length | 无 | [example](http://dotwe.org/d0b1ccadf386ba00960d0c8340c682e5) |
+| backgroundColor | 动画执行后应用到组件上的背景颜色 | string | none | [example](http://dotwe.org/f4616ee18f6042b63a8fdcd2816b1712) |
+| opacity | 动画执行后应用到组件上的不透明度值 | 介于 0 到 1 间的数值 | `1` | [example](http://dotwe.org/f94394173301db83ae6e66d1330a0d0b) |
+| transformOrigin | 定义变化过程的中心点. 参数 `x-aris` 可能的值为 `left`、`center`、`right`、长度值或百分比值, 参数 `y-axis` 可能的值为 `top`、`center`、`bottom`、长度值或百分比值 | `x-axis y-axis` | `center center` | [example](http://dotwe.org/de43f5a47de230dd531797458bf7fd3c) |
+| transform | 定义应用在元素上的变换类型，支持下表列出的属性 | object | 无 | [example](http://dotwe.org/6766dab0589f7831d4bb6030f4226996) |
+
+`transform`属性的合法值:
+
+| 名称 | 描述 | 值类型 | 默认值 | 示例 |
+| ---- | ---- | ---- | ---- | ---- |
+| `translate`/`translateX`/`translateY` | 指定元素将已被移动到的新位置 | 像素值或百分比 | 无 | [example](http://dotwe.org/6638e66e296723bbef3e59c83b2b5003) |
+| `rotate` | 指定元素将被旋转的角度，单位是度 | number | 无 | [example](http://dotwe.org/ba9e9920594d9388744b2bd0d1b7695d) |
+| `scale`/`scaleX`/`scaleY` | 按比例放大或缩小元素 | number | 无 | [example](http://dotwe.org/14b42dde6583ab222bd2b7ed08f241c8) |
+
+* `callback {Function}`：动画执行完毕之后的回调
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/clipboard.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/clipboard.md b/_drafts/v1.0/references/modules/clipboard.md
new file mode 100644
index 0000000..f4525f2
--- /dev/null
+++ b/_drafts/v1.0/references/modules/clipboard.md
@@ -0,0 +1,112 @@
+---
+title: clipboard
+type: references
+order: 4.2
+version: 0.10
+---
+
+# `clipboard` 剪切板
+<span class="weex-version">v0.8+</span>
+
+我们可以通过 `clipboard` 模块的 `getString()`、`setString()` 接口从系统的粘贴板获取内容或者设置内容。
+
+以前当我们收到一条短信验证码信息时，除了人肉拷贝，我们无法获取拷贝短信的内容。这是非常苦恼的。但是现在我们可以通过简单的调用 `clipboard.getString()` 接口来获取短信内容了。
+
+## 示例
+
+```html
+<template>
+ <div>
+ <div class="div">
+ <text class="text" onclick="onItemClick">hello {{message}}</text>
+ </div>
+ <div class="div">
+ <text class="text" onclick="setContent">click me to set: {{tobecopied}}</text>
+ </div>
+ </div>
+</template>
+
+<script>
+ var clipboard = require('@weex-module/clipboard');
+ module.exports ={
+ data:{
+ tobecopied:'yay!',
+ message:"nothing."
+ },
+ methods:{
+ setContent:function(e){
+ clipboard.setString(this.tobecopied);
+ },
+ onItemClick:function(e){
+ this.message='clicked! ';
+ clipboard.getString(function(ret) {
+ this.message = 'text from clipboard:'+ ret;
+ }.bind(this));
+ }
+ }
+ }
+</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>
+```
+
+[体验一下](http://dotwe.org/b6a9d613462d85dce56f81085b094dfa)
+
+**注意**
+
+* 仅支持文本拷贝
+* 出于安全考虑和平台限制，只支持 Android 和 iOS，不支持 html5。
+
+## API
+
+### `getString(callback)`
+
+从系统粘贴板读取内容。
+
+#### 参数
+
+* `callback {function (ret)}`：执行完读取操作后的回调函数。`ret {Object}` 为 `callback` 函数的参数，有两个属性：
+ - `ret.data`：获取到的文本内容；
+ - `ret.result`：返回状态，可能为 `success` 或 `fail`。
+
+#### 示例
+
+```javascript
+var clipboard = require('@weex-module/clipboard');
+clipboard.getString(function(ret) {
+ console.log("text from clipboard： " + ret.data);
+});
+```
+
+### `setString(text)`
+
+将一段文本复制到剪切板，相当于手动复制文本。
+
+#### 参数
+
+* `text {string}`：要复制到剪切板的字符串。
+
+#### 示例
+
+```javascript
+var clipboard = require('@weex-module/clipboard');
+clipboard.setString("SomeStringHere");
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/dom.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/dom.md b/_drafts/v1.0/references/modules/dom.md
new file mode 100644
index 0000000..270ec2b
--- /dev/null
+++ b/_drafts/v1.0/references/modules/dom.md
@@ -0,0 +1,79 @@
+---
+title: dom
+type: references
+order: 4.3
+version: 0.10
+---
+
+# dom
+
+包含如下可以更新 dom 树的 dom API。
+
+这部分API是通过把 virtual-dom 的消息发送到 native 渲染器来做到的。
+
+开发者在日常开发中，唯一可在 `.we` 文件中使用的是 `scrollToElement`。
+~~你也可以调用 `$scrollTo` 方法来使用它~~
+
+这个页面提及的其他的 API，只在 `callNative` 进程中的 native 渲染器用。
+（关于 `callNative` 进程的进一步介绍，可以在 [How it works](../../advanced/how-it-works.html)中的 JS Framework 部分看到 ）
+
+## API
+### scrollToElement(node, options)
+
+让页面滚动到那个对应的节点，这个API只能在 `<scroller>` 和 `<list>` 组件中用。
+
+~~这个API也能通过调用VM的方法 `$scrollTo` 来使用（已弃用）~~
+
+要在你的 `.we` 文件中使用这个 API，可以使用 `require('@weex-module/dom').scrollToElement`。
+
+#### 参数
+- `node {Node}`：你要滚动到的那个节点
+- `options {Object}`：如下选项
+ - `offset {number}`：一个到其可见位置的偏移距离，默认是 `0`
+
+#### 示例
+
+```html
+<template>
+ <scroller>
+ <div class="row" repeat="item in rows" id="item-{{$index}}">
+ <text class="item-title">row {{item.id}}</text>
+ </div>
+ <div onclick="go" style="width: 750;height: 50; position: fixed; left: 0; right: 0; bottom: 0; background-color: #eeeeee;">
+ <text style="text-align: center;">
+ Go to 50th line.
+ </text>
+ </div>
+ </scroller>
+</template>
+
+<script>
+var dom = require('@weex-module/dom')
+
+module.exports = {
+ data: {
+ rows: []
+ },
+ created: function () {
+ for (var i = 0; i < 100; i++) {
+ this.rows.push({
+ id: i
+ })
+ }
+ },
+ methods: {
+ go: function () {
+ var el = this.$el('item-49')
+
+ dom.scrollToElement(el, {
+ offset: 0
+ })
+ }
+ }
+}
+</script>
+```
+
+## 其他
+
+dom 还有一些底层接口用于创建 Weex 实例时调用，比如 `createBody`、`updateAttrs` 等，但并未开放供外部使用。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/globalevent.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/globalevent.md b/_drafts/v1.0/references/modules/globalevent.md
new file mode 100644
index 0000000..9a04dc0
--- /dev/null
+++ b/_drafts/v1.0/references/modules/globalevent.md
@@ -0,0 +1,87 @@
+---
+title: globalEvent
+type: references
+order: 4.9
+version: 0.10
+---
+
+# 全局事件
+<span class="weex-version">0.8 (开发中)</span>
+
+`globalEvent` 用于监听持久性事件，例如定位信息，陀螺仪等的变化。全局事件是需要额外 APIs 处理的次要 API。你能通过 `addEventListener` 注册事件监听，当你不再需要的时候，也可以通过 `removeEventListener` 取消事件监听。
+
+*提醒*
+
+- 这是一个实例级别的事件，而非应用级别。
+
+## 如何让你的模块支持全局事件
+
+API 开发完成后，当需要发送事件时，需要通过以下方法：
+
+```javascript
+/**
+ *
+ * @param eventName eventName
+ * @param params event params
+ */
+instance.fireGlobalEventCallback(eventName,params);
+```
+
+如何在 weex-html5 组件或模块中分发全局事件？只需在文档元素上分派事件：
+
+```javascript
+var evt = new Event('some-type')
+evt.data = { foo: 'bar' }
+document.dispatchEvent(evt)
+```
+
+**示例**
+
+### Android
+
+```java
+Map<String,Object> params=new HashMap<>();
+params.put("key","value");
+mWXSDKInstance.fireGlobalEventCallback("geolocation",params);
+```
+
+### iOS
+
+```object-c
+[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}];
+```
+
+## API
+
+### `addEventListener(String eventName, String callback)`
+
+注册全局事件。
+
+#### 参数
+
+- `eventName {string}`：需要监听的事件名称。
+- `callback {Function}`：触发事件后的回调函数。
+
+#### 示例
+
+```javascript
+var globalEvent = require('@weex-module/globalEvent');
+globalEvent.addEventListener("geolocation", function (e) {
+ console.log("get geolocation")
+});
+```
+
+### `removeEventListener(String eventName)`
+
+取消事件监听。
+
+#### 参数
+
+- `eventName {string}`：需要取消的事件名称。
+
+#### 示例
+
+```javascript
+var globalEvent = require('@weex-module/globalEvent');
+globalEvent.removeEventListener("geolocation");
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/index.md b/_drafts/v1.0/references/modules/index.md
new file mode 100644
index 0000000..c76e401
--- /dev/null
+++ b/_drafts/v1.0/references/modules/index.md
@@ -0,0 +1,20 @@
+---
+title: 内建模块
+type: references
+order: 4
+has_chapter_content: true
+version: 0.10
+---
+
+# 内建模块
+
+## 如何使用
+
+你可以简单的通过类似 `require('@weex-module/name')` 这样的语法获取一个模块的 API，比如：
+
+```javascript
+var dom = require('@weex-module/dom')
+dom.scrollToElement(this.$el('someIdForElement'), {
+ offset: 0
+})
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/modal.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/modal.md b/_drafts/v1.0/references/modules/modal.md
new file mode 100644
index 0000000..3e652a8
--- /dev/null
+++ b/_drafts/v1.0/references/modules/modal.md
@@ -0,0 +1,196 @@
+---
+title: modal
+type: references
+order: 4.4
+version: 0.10
+---
+
+# `modal` 模态
+
+`modal` 模块提供了以下展示消息框的 API：`toast`、`alert`、`confirm` 和 `prompt`。
+
+## API
+
+### `toast(options)`
+
+`toast()` 会在一个小浮层里展示关于某个操作的简单反馈。例如，在邮件发送前离开邮编编辑界面，可以触发一个“草稿已保存”的 toast，告知用户以后可以继续编辑。toast 会在显示一段时间之后自动消失。
+
+#### 参数
+
+- `options {Object}`：相关选项
+ - `message {string}`：展示的内容
+ - `duration {number}`：展示的持续时间（以秒为单位）
+
+#### 示例
+
+```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>
+```
+
+[体验一下](http://dotwe.org/a1b8699c49d1cbb3d0de66c1c5175387)
+
+### `alert(options, callback)`
+
+警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。
+
+#### 参数
+
+- `options {Object}`：alert选项
+ - `message {string}`：警告框内显示的文字信息
+ - `okTitle {string}`：确定按钮上显示的文字信息，默认是“OK”
+ - `callback {Function}`：用户操作完成后的回调
+
+#### 示例
+
+```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>
+```
+
+[体验一下](http://dotwe.org/18e2a4bdff4d2f7db865c11eadfcd13e)
+
+### `confirm(options, callback)`
+
+确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
+
+#### 参数
+
+- `options {object}`：confirm 选项
+ - `message {string}`：确认框内显示的文字信息
+ - `okTitle {string}`：确认按钮上显示的文字信息，默认是 `OK`
+ - `cancelTitle {string}`：取消按钮上显示的文字信息，默认是 `Cancel`
+- `callback {function (result)}`：用户操作完成后的回调，回调函数的参数 `result` 是确定按钮上的文字信息字符串
+
+#### 示例
+
+```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>
+```
+
+[体验一下](http://dotwe.org/3534b9d5eac99045015d97b20af22c27)
+
+### `prompt(options, callback)`
+
+提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。
+
+#### 参数
+
+- `options {object}`：prompt 选项
+ - `message {string}`：提示框内要显示的文字信息
+ - `okTitle {string}`：确认按钮上显示的文字信息，默认是 `OK`
+ - `cancelTitle {string}`：取消按钮上显示的文字信息，默认是 `Cancel`
+- `callback {function (ret)}`：用户操作完成后的回调，回调函数的参数 `ret` 格式形如 `{ result: 'OK', data: 'hello world' }`，如下
+ - `result {string}`：用户按下的按钮上的文字信息
+ - `data {string}`：用户输入的文字信息
+
+### 示例
+
+```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>
+```
+
+[体验一下](http://dotwe.org/9f089100f5808dbc55ef4872a2c0c77b)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/navigator.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/navigator.md b/_drafts/v1.0/references/modules/navigator.md
new file mode 100644
index 0000000..fdd4e76
--- /dev/null
+++ b/_drafts/v1.0/references/modules/navigator.md
@@ -0,0 +1,110 @@
+---
+title: navigator
+type: references
+order: 4.5
+version: 0.10
+---
+
+# `navigator` 导航控制
+<span class="weex-version">v0.6.1+</span>
+
+众所周知，在浏览器里，我们可以通过前进或者回退按钮来切换页面，iOS/Android 的 `navigator` 模块就是用来实现类似的效果的。除了前进、回退功能，该模块还允许我们指定在切换页面的时候是否应用动画效果。
+
+## 示例
+
+```html
+<template>
+ <div class="div">
+ <text class="text" onclick="onItemClick">click me! {{message}}</text>
+ </div>
+</template>
+
+<script>
+ var navigator = require('@weex-module/navigator')
+ var nextUrl = 'http://dotwe.org/raw/dist/6cd1703a45d7b2752cf05303069ce881.js'
+ module.exports ={
+ data:{
+ message:''
+ },
+ methods:{
+ onItemClick:function(e){
+ var params = {'url':nextUrl,'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>
+```
+
+[体验一下](http://dotwe.org/dba03a1660e6242778fd19d3d8f5944b)
+
+## API
+
+### `push(options, callback)`
+
+把一个weex页面URL压入导航堆栈中，可指定在页面跳转时是否需要动画，以及操作完成后需要执行的回调函数
+
+#### 参数
+
+* `options {Object}`：选项参数
+ * `url {stirng}`：要压入的 Weex 页面的 URL
+ * `animated {string}`：`"true"` 示意为页面压入时需要动画效果，`"false"` 则不需要，默认值为 `"true"`
+* `callback {Function}`：执行完该操作后的回调函数
+
+#### 示例
+
+```javascript
+var navigator = require('@weex-module/navigator')
+var params = {
+ url: 'navigator-demo.js',
+ animated: 'true'
+}
+navigator.push(params, function () {
+ // callback
+})
+```
+
+### `pop(options, callback)`
+
+把一个 Weex 页面 URL 弹出导航堆栈中，可指定在页面弹出时是否需要动画，以及操作完成后需要执行的回调函数。
+
+#### 参数
+
+* `options {object}`：选项参数对象
+ * `animated {string}`：`"true"` 示意为弹出页面时需要动画效果，`"false"` 则不需要，默认值为 `"true"`
+* `callback {function}`：执行完该操作后的回调函数
+
+#### 示例
+
+```javascript
+var navigator = require('@weex-module/navigator')
+var params = {
+ animated: 'true'
+}
+navigator.pop(params, function () {
+ // callback
+})
+```
+
+*注意事项：`animated` 二级参数目前仅支持字符串的 `"true"` 和 `"false"`，传入布尔值类型会导致程序崩溃，未来版本会修复这个问题*
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/modules/storage.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/modules/storage.md b/_drafts/v1.0/references/modules/storage.md
new file mode 100644
index 0000000..c18b9ae
--- /dev/null
+++ b/_drafts/v1.0/references/modules/storage.md
@@ -0,0 +1,224 @@
+---
+title: storage
+type: references
+order: 4.6
+version: 0.10
+---
+
+# `storage` 本地存储
+<span class="weex-version">v0.7+</span>
+
+**备注**：0.7及以上版本可用
+
+`storage` 是一个在前端比较常用的模块，可以对本地数据进行存储、修改、删除，并且该数据是永久保存的，除非手动清除或者代码清除。但是，`storage` 模块有一个限制就是浏览器端（H5）只能存储小于5M的数据，因为在 H5/Web 端的实现是采用 `HTML5 LocalStorage API`。而 Android 和 iOS 这块是没什么限制的。
+ storage 常用在一些被用户经常查询，但是又不频繁更新的数据，比如搜索历史、用户的订单列表等。搜索历史一般情况都是作为本地数据存储的，因此使用 storage 比较合适。而用户订单列表是需要本地存储和服务端器检索配合的场景。当一个用户下单后，会经常查阅个人的订单列表。但是，订单的列表数据不是频繁更新的，往往只有在收到货品时，才更新“已签收”，其余平时的状态是“已发货”。因此，可以使用 storage 存储订单列表，可以减少服务器的压力，例如减少 SQL 查询或者缓存的压力。当用户查看订单详情的时候，再更新数据状态。
+
+这里，我们简单模拟“搜索”记录的场景。在搜索的时候写入，然后读取出来展示成列表。
+
+```html
+<template>
+ <div style="background-color:#F6F6F6;">
+ <div class="search_view">
+ <input class="search" placeholder="Please input" onchange="change"/>
+ <text class="btn" onclick="search">Search</text>
+ </div>
+ <text class="item">History</text>
+ <list>
+ <cell repeat="(i, v) in items">
+ <text class="item">{{v}}</text>
+ </cell>
+ </list>
+ </div>
+</template>
+
+<style>
+ .search_view{
+ height:70;
+ margin-top:20;
+ margin-left:10;
+ margin-right:10;
+ flex-direction:row;
+ }
+ .search{
+ height:70;
+ border-width:1;
+ border-color:#dddddd;
+ padding-left:10;
+ font-size:28;
+ flex:1;
+ }
+ .btn{
+ width:80;
+ text-align:center;
+ justify-content:center;
+ font-size:28;
+ background-color:#1A89EA;
+ color:#ffffff;
+ }
+ .item{
+ text-align:center;
+ font-size:25;
+ height:50;
+ margin-top:10;
+ color:#5E5E5E;
+ border-bottom-width:1;
+ border-bottom-color:#dddddd;
+ justify-content:center;
+ }
+</style>
+
+<script>
+ var storage = require('@weex-module/storage');
+ module.exports = {
+ data: {
+ items: [],
+ keywords:''
+ },
+ created: function(){
+ var that = this;
+ storage.getAllKeys(function(e) {
+ if(e.result == 'success' && e.data.length){
+ e.data.forEach(function(item){
+ if(item.indexOf('search_') > -1){
+ that.items.push(item.split('search_')[1]);
+ }
+ });
+ }
+ });
+ },
+ methods:{
+ search: function(){
+ var that = this;
+ if(!this.keywords) return;
+ storage.setItem('search_' + this.keywords, this.keywords, function(e) {
+ that.items.push(that.keywords);
+ });
+ },
+ change: function(e){
+ if(!e.value) return;
+ this.keywords = e.value;
+ }
+ }
+ };
+</script>
+```
+
+[体验一下](http://dotwe.org/b0f9a8f5df916c91bfb39e54e03a9ba8)
+
+这里，逐一解释下上面的代码。`input` 组件监听了 `change` 事件，可以保存用户输入的搜索关键字。如果用户点击了搜索按钮，则将关键字存储到 storage。这里，使用了 `search_` 作为 storage key 的前缀。因此，我们在页面加载时，在 `created` 生命周期中可以先使用 `storage.getAllKeys` 获取所有的 `key`。如果 `key` 包含了 `search_ `，则说明是搜索记录。因此，将该记录压入数组 items 中，于是界面就会展示出搜索记录的列表。
+
+## API
+
+`storage` 提供了一系列的 API 供我们调用。我们只需要引入该模块，然后调用对应的 API 即可。
+
+### `setItem(key, value, callback)`
+
+该方法可以通过键值对的形式将数据存储到本地。同时可以通过该方法，更新已有的数据。
+
+#### 参数
+
+* `key {string}`：要存储的键，不允许是 `""` 或 `null`
+* `value {string}`：要存储的值，不允许是 `""` 或 `null`
+* `callback {function (e)}`：执行操作成功后的回调
+ * `e.result`：表示设置是否成功，如果成功返回 `"success"`
+ * `e.data`：`undefined` 表示设置成功，`invalid_param` 表示 key/value 为 `""` 或者 `null`
+
+#### 示例
+
+```javascript
+var storage = require('@weex-module/storage')
+storage.setItem('bar', 'bar-value', function (e) {
+ e.result
+ e.data
+})
+```
+
+这里，对返回值做一个简单的介绍：
+
+`e` 包含两个属性：`e.result` 和 `e.data`。如果 `e.result` 返回值是 “success”，则说明成功。`e.data` 返回 `undefined` 表示设置成功，返回 `invalid_param` 表示` key/value` 为 "" 或者 null。因此，你可以判断两个返回判断是否插入成功。
+
+### `getItem(key, callback)`
+
+传入键名返回对应的键值
+
+#### 参数
+
+* `key {string}`：要获取的值的名称，不允许是 `""` 或 `null`
+* `callback {function (e)}`：执行操作成功后的回调
+ * `e.result`：表示设置是否成功，如果成功返回 `"success"`
+ * `e.data`：获取对应的键值字符串，如果没有找到则返回 `undefined`
+
+#### 示例
+
+```javascript
+var storage = require('@weex-module/storage')
+storage.getItem('foo', function (e) {
+ e.data
+});
+```
+
+### `removeItem(key, callback)`
+
+传入一个键名将会删除本地存储中对应的键值
+
+#### 参数
+
+* `key {string}`：要删除的值的名称，不允许是 `""` 或 `null`
+* `callback {function (e)}`：执行操作成功后的回调.
+ * `e.result`：表示删除是否成功，如果成功返回 `"success"`
+ * `e.data`：`undefined` 表示删除成功
+
+#### 示例
+
+```javascript
+var storage = require('@weex-module/storage')
+storage.removeItem('foo', function (e) {
+ e.result
+ e.data
+})
+```
+
+### `length(callback)`
+
+返回本地存储的数据中所有存储项数量的整数
+
+#### 参数
+
+* `callback {function (e)}`：执行操作成功后的回调
+ * `e.result`：表示设置是否成功，如果成功返回 `"success"`
+ * `e.data`：当前已存储项的数量
+
+#### 示例
+
+````javascript
+var storage = require('@weex-module/storage')
+storage.length(function (e) {
+ e.result
+ e.data
+})
+````
+
+### `getAllKeys(callback)`
+
+返回一个包含全部已存储项键名的数组
+
+#### 参数
+
+* `callback {function (e)}`：执行操作成功后的回调。
+ * `e.result`：表示设置是否成功，如果成功返回 `"success"`
+ * `e.data`：所有键名组成的数组
+
+#### 示例
+
+````javascript
+var storage = require('@weex-module/storage')
+storage.getAllKeys(function (e) {
+ e.result
+ e.data
+})
+````
+
+## 其它参考
+
+* [W3school: html5 localStorage](http://www.w3school.com.cn/html5/html_5_webstorage.asp)
+* [storage 模块完整的 Demo](https://github.com/apache/incubator-weex/blob/dev/examples/module/storage-demo.we)