You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ji...@apache.org on 2017/02/20 06:41:07 UTC
[18/50] [abbrv] incubator-weex git commit: V0.10.0 stable gitlab
(#178)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/references/common-style.md
----------------------------------------------------------------------
diff --git a/doc/references/common-style.md b/doc/references/common-style.md
index 3752bd9..144b4f8 100644
--- a/doc/references/common-style.md
+++ b/doc/references/common-style.md
@@ -1,6 +1,5 @@
# Common Style
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/23" class="weex-translate">cn</a>
All of weex tags share some common style rules
@@ -31,6 +30,7 @@ you can use the definition below in weex box model.
- `border-right-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- `border-bottom-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- `border-width`: [length](styles/units/length.md) 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](styles/units/length.md) type, non-negative, default value `0`
- `border-top-width`: [length](styles/units/length.md) type, non-negative, default value `0`
- `border-right-width`: [length](styles/units/length.md) type, non-negative, default value `0`
@@ -41,6 +41,8 @@ you can use the definition below in weex box model.
- `border-right-color`: [color](styles/units/color.md) type, default value `#000000`
- `border-bottom-color`: [color](styles/units/color.md) type, default value `#000000`
- `border-radius`: [length](styles/units/length.md) 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](styles/units/length.md) type, non-negative, default value `0`
- `border-bottom-right-radius`: [length](styles/units/length.md) type, non-negative, default value `0`
- `border-top-left-radius`: [length](styles/units/length.md) type, non-negative, default value `0`
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/references/component-defs.md
----------------------------------------------------------------------
diff --git a/doc/references/component-defs.md b/doc/references/component-defs.md
index 7b75982..1a8774d 100644
--- a/doc/references/component-defs.md
+++ b/doc/references/component-defs.md
@@ -1,6 +1,5 @@
# Component Definition
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/31" class="weex-translate">cn</a>
A component definition is a set of options to describe a component. It's always assigned to `module.exports` in `<script>`.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/references/styles/units/color.md
----------------------------------------------------------------------
diff --git a/doc/references/styles/units/color.md b/doc/references/styles/units/color.md
index 35821d5..02244b2 100644
--- a/doc/references/styles/units/color.md
+++ b/doc/references/styles/units/color.md
@@ -21,6 +21,10 @@ Supported value types:
}
```
-**Note:** `hsl()`, `hsla()`, `currentColor`, 8-chars hex colors are not supported.
+## Note
+
+* `hsl()`, `hsla()`, `currentColor`, 8-chars hex colors are not supported.
+
+* `rgb(a,b,c)` or `rgba(a,b,c,d)` have much worse performance than ohter color format. Choose your color format wisely.
See more for [named colors](../../color-names.md).
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/references/text-style.md
----------------------------------------------------------------------
diff --git a/doc/references/text-style.md b/doc/references/text-style.md
index 1f9d503..1056ea1 100644
--- a/doc/references/text-style.md
+++ b/doc/references/text-style.md
@@ -1,6 +1,5 @@
# Text Style
<span class="weex-version">0.5</span>
-<a href="https://github.com/weexteam/article/issues/37" class="weex-translate">cn</a>
Text alike components share some common style rules. The text alike components currently includes [`text`](../components/text.md) and [`input`](../components/input.md).
@@ -12,7 +11,7 @@ Text alike components share some common style rules. The text alike components c
- `font-weight`: <enum> `normal` | `bold`. This property specifies the boldness of the font. Default value is `normal`.
- `text-decoration`: <enum> `none` | `underline` | `line-through`. This property is used to set the text formatting to underline or line-through. The default value is `none`.
- `text-align`: <enum> `left` | `center` | `right`. This property describes how inline content like text is aligned in its parent component. The default value is `left`.
-- `font-family`:<string> this property set the font-family of the text. This property **doesn't guarteen** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occurr and the default typeface will be load. The fallback mechanism may vary in different devices.
+- `font-family`:<string> this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices.
- `text-overflow`:<string> `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.
The property `color` support multiple fomats of values, contains rgb, rgba, #fff, #ffffff, named-color.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/specs/js-framework-apis.md
----------------------------------------------------------------------
diff --git a/doc/specs/js-framework-apis.md b/doc/specs/js-framework-apis.md
index 1fa80a5..aa37742 100644
--- a/doc/specs/js-framework-apis.md
+++ b/doc/specs/js-framework-apis.md
@@ -1,6 +1,5 @@
# JS Framework APIs
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/wiki/%E6%AC%A2%E8%BF%8E%E5%8F%82%E4%B8%8EWeex%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3%E7%BF%BB%E8%AF%91" class="weex-translate incomplete">cn</a>
## Intro about JS Runtime
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/specs/virtual-dom-apis.md
----------------------------------------------------------------------
diff --git a/doc/specs/virtual-dom-apis.md b/doc/specs/virtual-dom-apis.md
index caa8553..2fa71b0 100644
--- a/doc/specs/virtual-dom-apis.md
+++ b/doc/specs/virtual-dom-apis.md
@@ -1,6 +1,5 @@
# Virtual DOM APIs
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/wiki/%E6%AC%A2%E8%BF%8E%E5%8F%82%E4%B8%8EWeex%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3%E7%BF%BB%E8%AF%91" class="weex-translate incomplete">cn</a>
## `Document`
@@ -100,11 +99,11 @@ Removes a child. The parameter `preserved` means whether destroy the removed nod
##### `setAttr(key: string, value: string, silent: boolean?)`
-If `slient` is truthy, it won't cause native calls. Used for handling event with virtual-DOM changes.
+If `silent` is true, it won't cause native calls. Used for handling event with virtual-DOM changes.
##### `setStyle(key: string, value: string, silent: boolean?)`
-The `slient` parameter is just same as `setAttr` method.
+The `silent` parameter is just same as `setAttr` method.
##### `setClassStyle(classStyle: Object)`
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/comm.md
----------------------------------------------------------------------
diff --git a/doc/syntax/comm.md b/doc/syntax/comm.md
index c531167..e99f356 100644
--- a/doc/syntax/comm.md
+++ b/doc/syntax/comm.md
@@ -1,6 +1,5 @@
# Communicate Between Components
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/16" class="weex-translate">cn</a>
## For Child-Parent Communication
@@ -49,7 +48,7 @@ eg:
## For Parent-Child Communication
-Parent component can using `this.$([String id])` get context of child component. you can access child component information using the context object.
+Parent component can use `this.$vm([String id])` get vm instance of child component. you can access child component information using the vm instance.
```html
<we-element name="foo">
@@ -85,7 +84,7 @@ Parent component can using `this.$([String id])` get context of child component.
module.exports = {
methods: {
test: function (e) {
- var foo = this.$('fooEl')
+ var foo = this.$vm('fooEl')
foo.setTitle('...')
foo.imageUrl = '...'
}
@@ -148,7 +147,7 @@ eg:
<div>
<text onclick="test">click to update foo</text>
<foo></foo>
- <foo></foo>
+ <bar></bar>
</div>
</template>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/composed-component.md
----------------------------------------------------------------------
diff --git a/doc/syntax/composed-component.md b/doc/syntax/composed-component.md
index d1297c9..64e88f8 100644
--- a/doc/syntax/composed-component.md
+++ b/doc/syntax/composed-component.md
@@ -1,6 +1,5 @@
# Composed Component
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/2" class="weex-translate">cn</a>
If some part of weex file is reused often, you could create a composed component represent these part.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/config-n-data.md
----------------------------------------------------------------------
diff --git a/doc/syntax/config-n-data.md b/doc/syntax/config-n-data.md
index 4908a88..417f117 100644
--- a/doc/syntax/config-n-data.md
+++ b/doc/syntax/config-n-data.md
@@ -1,6 +1,5 @@
# Page Config & Data
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/9" class="weex-translate">cn</a>
You can write some instance config and data in some additional `<script>` at the **top-level** Weex component.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/data-binding.md
----------------------------------------------------------------------
diff --git a/doc/syntax/data-binding.md b/doc/syntax/data-binding.md
index eeabc52..7f6fd73 100644
--- a/doc/syntax/data-binding.md
+++ b/doc/syntax/data-binding.md
@@ -1,6 +1,5 @@
# Data-Binding
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/5" class="weex-translate">cn</a>
In Weex, we use the *mustache* syntax `{{...}}` to bind data in `<template>` which are defined in `<script>`. Once data and template is bound, the data changes will influence the corresponding template content immediately and automatically.
@@ -212,5 +211,31 @@ example2.items = []
* [See more about display logic control](./display-logic.md)
+### `static`
+
+`static` attribute can cancel the data binding, and the data changes will not be synchronized to UI.
+
+```html
+<template>
+ <div static>
+ <text>{{ word }}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ ready: function() {
+ this.word = 'Data changes'
+ },
+ data: {
+ word: 'Hello, static'
+ }
+ }
+</script>
+```
+
+As shown above, after the `static` attribute is added, the rendering result will be `Hello, static`, which is equivalent to rendering a static node. The change of the data `word` in ready function will not be listened, so the text value will not change.
+`static` property is designed to reduce the long list or pure static page memory overhead. Be careful with it, as it will likely break your page logic.
+
Next, let's have a look at [style and class](./style-n-class.md).
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/display-logic.md
----------------------------------------------------------------------
diff --git a/doc/syntax/display-logic.md b/doc/syntax/display-logic.md
index da13040..49db592 100644
--- a/doc/syntax/display-logic.md
+++ b/doc/syntax/display-logic.md
@@ -1,6 +1,5 @@
# Display Logic Control
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/12" class="weex-translate">cn</a>
There are two attributes for display logic control: `if` and `repeat`. We can create Weex page structure and effects more flexible with them.
@@ -95,7 +94,7 @@ The origin data properties which not belongs to the array will also be bound:
</script>
```
-### A extension of repeat syntax
+### An extension of repeat syntax
#### use default `$index` for the index of array.
<span class="weex-version">0.5</span>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/events.md
----------------------------------------------------------------------
diff --git a/doc/syntax/events.md b/doc/syntax/events.md
index 4b4e118..4ffd727 100644
--- a/doc/syntax/events.md
+++ b/doc/syntax/events.md
@@ -1,6 +1,5 @@
# Events
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/15" class="weex-translate">cn</a>
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.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/id.md
----------------------------------------------------------------------
diff --git a/doc/syntax/id.md b/doc/syntax/id.md
index 851d0e6..bfe8696 100644
--- a/doc/syntax/id.md
+++ b/doc/syntax/id.md
@@ -1,6 +1,5 @@
# Find an Element
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/3" class="weex-translate">cn</a>
In Weex, we may set the `id` property for a particular element, just as unique identification of a particular element.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/main.md
----------------------------------------------------------------------
diff --git a/doc/syntax/main.md b/doc/syntax/main.md
index 8bce0f8..6b54e6b 100644
--- a/doc/syntax/main.md
+++ b/doc/syntax/main.md
@@ -1,6 +1,5 @@
# Syntax
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/8" class="weex-translate">cn</a>
*The syntax of Weex is deeply inspired from [Vue.js](http://vuejs.org/), an elegant JavaScript framework with component system and reactive data binding.*
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/render-logic.md
----------------------------------------------------------------------
diff --git a/doc/syntax/render-logic.md b/doc/syntax/render-logic.md
index 08c9547..fbc820f 100644
--- a/doc/syntax/render-logic.md
+++ b/doc/syntax/render-logic.md
@@ -1,6 +1,5 @@
# Render Logic Control
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/7" class="weex-translate">cn</a>
## `append`
@@ -21,7 +20,7 @@ Attribute `append` do not have data-binding. It won't change the final rendering
</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 entiely, 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.
+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.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/syntax/style-n-class.md
----------------------------------------------------------------------
diff --git a/doc/syntax/style-n-class.md b/doc/syntax/style-n-class.md
index 190884b..7470f1a 100644
--- a/doc/syntax/style-n-class.md
+++ b/doc/syntax/style-n-class.md
@@ -1,6 +1,5 @@
# Style & Class
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/6" class="weex-translate">cn</a>
## The Basic Syntax
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/tools/devtools-android.md
----------------------------------------------------------------------
diff --git a/doc/tools/devtools-android.md b/doc/tools/devtools-android.md
index 0607a3c..559e9a3 100644
--- a/doc/tools/devtools-android.md
+++ b/doc/tools/devtools-android.md
@@ -1,5 +1,7 @@
# Devtools for Android
+[](https://github.com/weexteam/weex_devtools_android/releases) [](https://www.codacy.com/app/weex_devtools/weex_devtools_android?utm_source=github.com&utm_medium=referral&utm_content=weexteam/weex_devtools_android&utm_campaign=Badge_Grade) [](https://codeclimate.com/github/weexteam/weex_devtools_android) [](https://codeclimate.com/github/weexteam/weex_devtools_android) [](https://github.com/weexteam/weex_devtools_android/issues) [  ](https://bintray.com/alibabaweex/maven/weex_inspector/_latestVersion)
+
Weex devtools is a custom devtools for weex that implements [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) inspired by [Stetho](https://github.com/facebook/stetho), it is designed to help you quickly inspect your app and debug your JS bundle source in a chrome web page.At present The devtools consist of two part : `Inspector` and `Debugger`. If you want it work well, you must install a `weex-devtool` as debug server.
- **Inspector**
@@ -41,7 +43,7 @@ There are two choices to set the dependency, the Choice A is recommanded if you
* *A - aar dependency from jcenter*.
````
dependencies {
- compile 'com.taobao.android:weex_inspector:0.0.2.7'
+ compile 'com.taobao.android:weex_inspector:0.0.8.1'
}
````
I strongly recommend you use the latest version since both weex sdk and devtools are developed iteratively and rapidly. See the release version list [here](https://github.com/weexteam/weex_devtools_android/releases). All the release version will publish to the [jcenter repo](https://bintray.com/alibabaweex/maven/weex_inspector).
@@ -55,6 +57,15 @@ I strongly recommend you use the latest version since both weex sdk and devtools
}
````
+##### Version compatibility
+
+| weex sdk | weex inspector | debug server |
+|----------|----------------|--------------|
+|0.8.0.1+ | 0.0.8.1 |0.2.39+ |
+|0.7.0+ | 0.0.7.13 |0.2.38 |
+|0.6.0+ | 0.0.2.2 | |
+
+
#### Initialize in your XXXApplication file.
````
public class MyApplication extends Application {
@@ -102,4 +113,4 @@ client.networkInterceptors().add(new OkHttpInterceptor());
The network inspection only support OKHttpClient right now!!! If you want to use the network inspection to catch your bundle request, you must change your bundle server ip to the real server ip.
#### Known Issues
- You can report issues and bugs [here](https://github.com/weexteam/weex_devtools_android/issues). We will replay as soon as possible.
+ You can report issues and bugs [here](https://github.com/weexteam/weex_devtools_android/issues). We will reply as soon as possible.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/tools/devtools-ios.md
----------------------------------------------------------------------
diff --git a/doc/tools/devtools-ios.md b/doc/tools/devtools-ios.md
index 73f7c1f..5a13910 100644
--- a/doc/tools/devtools-ios.md
+++ b/doc/tools/devtools-ios.md
@@ -1,4 +1,5 @@
# Devtools for IOS
+
Remote debug for your native iOS app using Chrome Developer Tools
## weex-devtool launch\uff1a
@@ -65,4 +66,4 @@ Your app must be linked against the following frameworks/dylibs
* CFNetwork.framework
* CoreData.framework
* Security.framework
-* Foundation.framework
\ No newline at end of file
+* Foundation.framework
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/tools/devtools.md
----------------------------------------------------------------------
diff --git a/doc/tools/devtools.md b/doc/tools/devtools.md
index b866cd3..22e7ce9 100644
--- a/doc/tools/devtools.md
+++ b/doc/tools/devtools.md
@@ -50,14 +50,18 @@ use -e to set the entry of these bundles. and the url of "index.we" will display
### Inspector
- Inspector can be used to show your `Element` \ `NetWork` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` and so on.
+ Inspector can be used to show your `Element` \ `Network` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` and so on.
#### Element
-
+##### native view element
+
-#### NetWork
+##### weex dom element
+
+
+#### Network
##### show the total time and latency
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/tools/how-to-debug.md
----------------------------------------------------------------------
diff --git a/doc/tools/how-to-debug.md b/doc/tools/how-to-debug.md
index e12004c..c14cdbc 100644
--- a/doc/tools/how-to-debug.md
+++ b/doc/tools/how-to-debug.md
@@ -27,10 +27,10 @@ weex --debugger
#####3.start debug
If you start server success you can find the address which like this:
- 
+ 
copy "http://30.10.217.78:4000/" to your browser\u3002The browser will show a QR Code.
Use your 'playgroud' to scan the code QR in your browser.you can find this content:
-
+
#####Device Log Level
@@ -42,4 +42,4 @@ For example, you select "Debug", the device will send "error", "Info","Warn" lev
Blue button is used to filter the log Level\u3002
For example, you select the "error", you can only see the "error" level log
-
\ No newline at end of file
+
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/tools/playground-app.md
----------------------------------------------------------------------
diff --git a/doc/tools/playground-app.md b/doc/tools/playground-app.md
index 0209061..a3fc73a 100644
--- a/doc/tools/playground-app.md
+++ b/doc/tools/playground-app.md
@@ -1,18 +1,16 @@
Weex Playground App
===================
-<a href="https://github.com/weexteam/article/issues/48" class="weex-translate">cn</a>
One of best parts of Weex is Native Runtime . After preview your `we file` render in H5 using weex-toolkit CLI , you can try Native Runtime in a standalone App , this is Weex Playground App . More then that ,Weex playground App preset a lot of Demo & ShowCase ,so you will get to experience performance of Weex native runtime easily.
-Android version of Playground App can be downloaded [here](http://alibaba.github.io/weex/download.html). iOS version will soon be ready to download.
-
+Android and IOS version of Playground App can be downloaded [here](http://alibaba.github.io/weex/download.html).
## Screenshot
-
+
-This is main interface of Weex Playground App , grey color list item is Demo/Showcase entry . click top right corner Icon will active QR scaner that work with Weex [toolkit CLI](../tools/cli.md)
+This is main interface of Weex Playground App , you can click the item to see the corresponding demo . click top right corner Icon will active QR scaner that work with Weex [toolkit CLI](../tools/cli.md)
please refer to [Weex Tutorial](../tutorial.md)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/doc/tutorial.md
----------------------------------------------------------------------
diff --git a/doc/tutorial.md b/doc/tutorial.md
index 1670af4..ff28bf8 100644
--- a/doc/tutorial.md
+++ b/doc/tutorial.md
@@ -1,7 +1,6 @@
# Tutorial
<span class="weex-version">0.4</span>
-<a href="https://github.com/weexteam/article/issues/4" class="weex-translate">cn</a>
We will make a simple but realistic list, in which the technologies Weex uses will be shown. This form of list also works for a lot of e-commercial apps and mobile sites.
@@ -60,7 +59,7 @@ weex tech_list.we
A browser window will be opened automatically to display the running result like below (weex-toolkit version should be greater than 0.1.0, use `weex --version` to check it):
-
+
## Introduce to Weex Syntax
@@ -68,9 +67,9 @@ So it's time for introducing the syntax.
Given the content of `tech_list.we`, Weex source code is composed of three parts -- *template*, *style*, and *script*, just like html, css, and javascript for the Web.
-Template is the skeleton that gives Weex structure. It is composed of tags which surround content and apply meaning to it. Weex has two types of tag, opening tag & closing tag. We call every pair of opening tags & closing tags a Weex tag. Tags have *attributes*, different attribute has different meaning, for example, `class` attribute makes it possible to define equal styles for multiple tags, `onclick` attribute makes the tag respond to click event.
+Template is the skeleton that gives Weex structure. It is composed of tags which surround content and apply meaning to it. Tags have *attributes*, different attribute means different feature, for example, `class` attribute makes it possible to define the same styles for multiple tags, `onclick` attribute makes the tag respond to click event.
-Style describes how Weex tags are to be displayed. We like you, love the CSS, so we try to keep consistent with CSS standard as possible. Weex Style supports a lot of CSS features, like margin, padding, fixed and so on. Better yet, flexbox layout (flex) is well supported in Weex Style.
+Style describes how Weex tags are to be displayed. We prefer CSS very much. So we try to keep consistent with CSS standard as possible. Weex Style supports a lot of CSS features, like margin, padding, fixed and so on. Better yet, flexbox layout (flex) is well supported in Weex Style.
Script adds *data* & *logic* to Weex tags, helping you easily access local or remote data and update tags. You can also define some methods for your tag to respond to different events. Weex Script organization learns a lot from CommonJS module style.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/component/input-demo.we
----------------------------------------------------------------------
diff --git a/examples/component/input-demo.we b/examples/component/input-demo.we
index ed52984..7056218 100644
--- a/examples/component/input-demo.we
+++ b/examples/component/input-demo.we
@@ -136,4 +136,4 @@
}
}
};
-</script>
\ No newline at end of file
+</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/component/slider-neighbor/index.we
----------------------------------------------------------------------
diff --git a/examples/component/slider-neighbor/index.we b/examples/component/slider-neighbor/index.we
new file mode 100644
index 0000000..cbb608d
--- /dev/null
+++ b/examples/component/slider-neighbor/index.we
@@ -0,0 +1,74 @@
+<template>
+ <scroller style="flex-direction: column; background-color: #ffffff;width:750;height:600;border-width: 0;">
+ <div style="height:410; border-width:3; border-style:solid; border-color:#000000;margin:10;">
+ <slider-neighbor style="width:700;height:400;" neighbor-scale="0.8" neighbor-space="30" current-item-scale="0.95" interval="3000" neighbor-alpha="0.8" auto-play="{{attr_auto_play}}">
+ <container style="">
+ <image style="width:650;background-color:#FFFFDF;height:400;" src="https://gw.alicdn.com/tps/TB1dzanMVXXXXXQXVXXXXXXXXXX-573-412.png"></image>
+ </container>
+ <container style="">
+ <image style="width:650;background-color:#FFFFDF;height:400;" src="https://gw.alicdn.com/tps/TB1p9CCMVXXXXa_XFXXXXXXXXXX-450-340.png"></image>
+ </container>
+ <container style="">
+ <image style="width:650;background-color:#FFFFDF;height:400;" src="https://gw.alicdn.com/tps/TB1zpSiMVXXXXchXFXXXXXXXXXX-448-338.png"></image>
+ </container>
+ <container style="">
+ <image style="width:650;background-color:#FFFFDF;height:400;" src="https://gw.alicdn.com/tps/TB1EuGIMVXXXXcoXpXXXXXXXXXX-452-337.png"></image>
+ </container>
+ <indicator style="height:60;position:absolute;bottom:15;width:700;left:0;itemSelectedColor:#0000FF;itemSize:20;itemColor:#FF0000;"></indicator>
+ </slider-neighbor>
+ </div>
+ <scroller style="height:100; border-width:0; margin:10;">
+ <TC_Support_SubTitle title="auto-play"></TC_Support_SubTitle>
+ <div repeat="btnList2100" style="flex-direction:row">
+ <text onclick="update2100" flagid="{{index}}" repeat="row" style="width:310; height:50;text-align: center; border-width: 1;border-color: #696969;border-style:solid;border-radius:5; margin:10; background-color: {{bgc}}">auto play: {{value}}</text>
+ </div>
+ </scroller>
+ </scroller>
+</template>
+
+
+<script>
+ module.exports = {
+ data : {
+ log_detail:[],
+ attr_auto_play:false,
+ btnList2100: [
+ {row:
+ [
+ {value: "false",bgc:'#EEEEEE',index:0},
+ {value: "true",bgc:'#EEEEEE',index:1},
+ ],
+ },
+ ],
+ },
+ methods : {
+ update2100: function (e) {
+ var self = this
+ var index = e.target.attr.flagid
+ for (var i = 0; i < self.btnList2100.length; i++) {
+ var row = self.btnList2100[i];
+ var columnlist = row.row;
+ for (var j = 0; j < columnlist.length; j++) {
+ var column = columnlist[j];
+ if (column.index === index) {
+ column.bgc = '#B2DFEE'
+ switch (index) {
+ case 0:
+ self.attr_auto_play=false;
+ break;
+ case 1:
+ self.attr_auto_play=true;
+ break;
+ default:
+ break;
+ }
+ }
+ else {
+ column.bgc = '#EEEEEE'
+ }
+ }
+ }
+ },
+ },
+ }
+</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/component/slider-neighbor/silder-neighbor.we
----------------------------------------------------------------------
diff --git a/examples/component/slider-neighbor/silder-neighbor.we b/examples/component/slider-neighbor/silder-neighbor.we
deleted file mode 100644
index 811afab..0000000
--- a/examples/component/slider-neighbor/silder-neighbor.we
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
- <scroller style="flex-direction: column; background-color: #ffffff;width:750;height:600;border-width: 0;">
- <TC_Support_MainTitle title="AG_Test_Slider-Neighbor_Auto_Play"></TC_Support_MainTitle>
- <div style="height:410; border-width:3; border-style:solid; border-color:#000000;margin:10;">
- <slider-neighbor style="width:700;height:400;" neighbor-scale="0.7" interval="3000" neighbor-alpha="0.8" auto-play="{{attr_auto_play}}">
- <container style="">
- <image style="width:650;background-color:#FFFFDF;height:400;" src="https://gw.alicdn.com/tps/TB1dzanMVXXXXXQXVXXXXXXXXXX-573-412.png"></image>
- </container>
- <container style="">
- <image style="width:650;background-color:#FFFFDF;height:400;" src="https://gw.alicdn.com/tps/TB1p9CCMVXXXXa_XFXXXXXXXXXX-450-340.png"></image>
- </container>
- <container style="">
- <image style="width:650;background-color:#FFFFDF;height:400;" src="https://gw.alicdn.com/tps/TB1zpSiMVXXXXchXFXXXXXXXXXX-448-338.png"></image>
- </container>
- <container style="">
- <image style="width:650;background-color:#FFFFDF;height:400;" src="https://gw.alicdn.com/tps/TB1EuGIMVXXXXcoXpXXXXXXXXXX-452-337.png"></image>
- </container>
- <indicator style="height:60;position:absolute;bottom:15;width:700;left:0;itemSelectedColor:#0000FF;itemSize:20;itemColor:#FF0000;"></indicator>
- </slider-neighbor>
- </div>
- <scroller style="height:100; border-width:0; margin:10;">
- <TC_Support_SubTitle title="auto-play"></TC_Support_SubTitle>
- <div repeat="btnList2100" style="flex-direction:row">
- <text onclick="update2100" flagid="{{index}}" repeat="row" style="width:310; height:50;text-align: center; border-width: 1;border-color: #696969;border-style:solid;border-radius:5; margin:10; background-color: {{bgc}}">auto play: {{value}}</text>
- </div>
- </scroller>
- </scroller>
-</template>
-
-
-<script>
- module.exports = {
- data : {
- log_detail:[],
- attr_auto_play:false,
- btnList2100: [
- {row:
- [
- {value: "false",bgc:'#EEEEEE',index:0},
- {value: "true",bgc:'#EEEEEE',index:1},
- ],
- },
- ],
- },
- methods : {
- update2100: function (e) {
- var self = this
- var index = e.target.attr.flagid
- for (var i = 0; i < self.btnList2100.length; i++) {
- var row = self.btnList2100[i];
- var columnlist = row.row;
- for (var j = 0; j < columnlist.length; j++) {
- var column = columnlist[j];
- if (column.index === index) {
- column.bgc = '#B2DFEE'
- switch (index) {
- case 0:
- self.attr_auto_play=false;
- break;
- case 1:
- self.attr_auto_play=true;
- break;
- default:
- break;
- }
- }
- else {
- column.bgc = '#EEEEEE'
- }
- }
- }
- },
- },
- }
-</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/component/web-demo.we
----------------------------------------------------------------------
diff --git a/examples/component/web-demo.we b/examples/component/web-demo.we
index 62cc209..2be930c 100644
--- a/examples/component/web-demo.we
+++ b/examples/component/web-demo.we
@@ -46,7 +46,6 @@
module.exports = {
methods: {
goback: function() {
- var $webview = require('@weex-module/webview');
var webElement = this.$el('webview');
$webview.goBack(webElement.ref);
},
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/index.we
----------------------------------------------------------------------
diff --git a/examples/index.we b/examples/index.we
index 3b7adfa..bd79e8d 100644
--- a/examples/index.we
+++ b/examples/index.we
@@ -25,6 +25,7 @@
{name: 'component/list/list-basic', title: 'List (Basic)'},
{name: 'component/list/list-demo', title: 'List (Advanced)'},
{name: 'component/slider/index', title: 'Slider'},
+ {name: 'component/slider-neighbor/index', title: 'Slider Neighbor'},
{name: 'component/a-demo', title: 'A'},
{name: 'component/video-demo', title: 'Video'},
{name: 'component/countdown-demo', title: 'Countdown'},
@@ -38,6 +39,7 @@
{name: 'module/instance-api', title: 'Instance API'},
{name: 'module/modal', title: 'Modal'},
{name: 'module/stream-demo', title: 'Stream'},
+ {name: 'module/websocket-demo', title: 'WebSocket'},
{name: 'module/storage-demo',title:'Storage'},
{name: 'module/picker-demo',title:'Picker'},
{name: 'module/componentRect',title:'componentRect'},
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/module/stream-demo.we
----------------------------------------------------------------------
diff --git a/examples/module/stream-demo.we b/examples/module/stream-demo.we
index d52c1b0..e1817c8 100644
--- a/examples/module/stream-demo.we
+++ b/examples/module/stream-demo.we
@@ -91,7 +91,8 @@
stream.fetch({
method: 'POST',
url: POST_URL,
- type:'json'
+ type:'json',
+ body:JSON.stringify({username:'weex'})//or you can just use JSON Object {username:'weex'}
}, function(ret) {
if(!ret.ok){
me.postResult = "request failed";
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/module/websocket-demo.we
----------------------------------------------------------------------
diff --git a/examples/module/websocket-demo.we b/examples/module/websocket-demo.we
new file mode 100644
index 0000000..11d9c11
--- /dev/null
+++ b/examples/module/websocket-demo.we
@@ -0,0 +1,112 @@
+<template>
+ <scroller>
+ <wxc-panel title="websocket" type="primary">
+ <input
+ type="text"
+ placeholder="please input message to send"
+ class="input"
+ autofocus="false"
+ value=""
+ onchange="onchange"
+ oninput="oninput"
+ id = "input"
+ />
+ <div style="flex-direction: row; justify-content: center;">
+ <wxc-button value="connect" size="small" type="primary" onclick="{{connect}}"></wxc-button>
+ <wxc-button value="send" size="small" onclick="{{send}}" type="primary" style="margin-left:20px;"></wxc-button>
+ <wxc-button value="close" size="small" onclick="{{close}}" type="primary" style="margin-left:20px;"></wxc-button>
+
+ </div>
+
+ <wxc-panel title="method = send">
+ <text>{{sendinfo}}</text>
+ </wxc-panel>
+
+ <wxc-panel title="method = onopen">
+ <text>{{onopeninfo}}</text>
+ </wxc-panel>
+
+ <wxc-panel title="method = onmessage">
+ <text>{{onmessage}}</text>
+ </wxc-panel>
+
+ <wxc-panel title="method = onclose">
+ <text>{{oncloseinfo}}</text>
+ </wxc-panel>
+
+ <wxc-panel title="method = onerror">
+ <text>{{onerrorinfo}}</text>
+ </wxc-panel>
+
+ <wxc-panel title="method = close">
+ <text>{{closeinfo}}</text>
+ </wxc-panel>
+ </wxc-panel>
+ </scroller>
+</template>
+
+<style>
+ .input {
+ font-size: 40px;
+ height: 80px;
+ width: 600px;
+ }
+</style>
+
+<script>
+ require('weex-components');
+ var navigator = require('@weex-module/navigator');
+ var modal = require('@weex-module/modal');
+ var websocket = require('@weex-module/webSocket');
+ module.exports = {
+ data: {
+ connectinfo: '',
+ sendinfo: '',
+ onopeninfo: '',
+ onmessage: '',
+ oncloseinfo: '',
+ onerrorinfo: '',
+ closeinfo: '',
+ txtInput:'',
+ navBarHeight: 88,
+ title: 'Navigator',
+ dir: 'examples',
+ baseURL: '',
+ },
+ methods: {
+ connect:function() {
+ websocket.WebSocket('ws://115.29.193.48:8088','');
+ var self = this;
+ websocket.onopen = function(e)
+ {
+ self.onopeninfo = e;
+ }
+ websocket.onmessage = function(e)
+ {
+ self.onmessage = e.data;
+ }
+ websocket.onerror = function(e)
+ {
+ self.onerrorinfo = e.data;
+ }
+ websocket.onclose = function(e)
+ {
+ self.onerrorinfo = e.code;
+ }
+ },
+ send:function(e) {
+ var input = this.$el('input');
+ input.blur();
+ websocket.send(this.txtInput);
+ this.sendinfo = this.txtInput;
+
+ },
+ oninput: function(event) {
+ this.txtInput = event.value;
+ },
+ close:function(e) {
+ websocket.close();
+ },
+ }
+ };
+</script>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vanilla/index.js
----------------------------------------------------------------------
diff --git a/examples/vanilla/index.js b/examples/vanilla/index.js
index ac6cbc0..82d8d1d 100644
--- a/examples/vanilla/index.js
+++ b/examples/vanilla/index.js
@@ -5,7 +5,7 @@ var body = document.createElement('div', {
})
var image = document.createElement('image', {
- attr: { src: 'http://alibaba.github.io/weex/img/weex_logo_blue@3x.png' },
+ attr: { src: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png' },
classStyle: { width: 360, height: 82 }
})
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/animation.vue
----------------------------------------------------------------------
diff --git a/examples/vue/animation.vue b/examples/vue/animation.vue
index 84761bd..9b2b2c2 100644
--- a/examples/vue/animation.vue
+++ b/examples/vue/animation.vue
@@ -25,19 +25,21 @@
<script>
var animation = require('@weex-module/animation')
module.exports = {
- data: {
- transformOrigin: 'center center',
- current_rotate: 0,
- current_scale: 1,
- current_color: '#FF0000',
- current_opacity: 1,
- current_translate: '',
- current_transform: '',
- isStop: true
+ data: function () {
+ return {
+ transformOrigin: 'center center',
+ current_rotate: 0,
+ current_scale: 1,
+ current_color: '#FF0000',
+ current_opacity: 1,
+ current_translate: '',
+ current_transform: '',
+ isStop: true
+ }
},
components: {
- panel: require('weex-vue-components/panel.vue'),
- button: require('weex-vue-components/button.vue')
+ panel: require('./include/panel.vue'),
+ button: require('./include/button.vue')
},
methods: {
anim: function(styles, timingFunction, duration, callback) {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/a.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/a.vue b/examples/vue/components/a.vue
index 7d6ed23..ff0149b 100644
--- a/examples/vue/components/a.vue
+++ b/examples/vue/components/a.vue
@@ -1,7 +1,7 @@
<template>
<scroller>
<panel title="Hyperlink" type="primary">
- <a href="http://g.tbcdn.cn/ali-wireless-h5/res/0.0.16/hello.js">
+ <a href="http://alibaba.github.io/weex/index.html">
<tip type="info" style="margin-bottom: 20px;"
value="Click me to see how 'A' element opens a new world."></tip>
</a>
@@ -11,12 +11,14 @@
<script>
module.exports = {
- data: {
- img: '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg'
+ data: function () {
+ return {
+ img: '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg'
+ }
},
components: {
- panel: require('weex-vue-components/panel.vue'),
- tip: require('weex-vue-components/tip.vue')
+ panel: require('../include/panel.vue'),
+ tip: require('../include/tip.vue')
}
}
</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/countdown.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/countdown.vue b/examples/vue/components/countdown.vue
index 36df716..cb29c43 100644
--- a/examples/vue/components/countdown.vue
+++ b/examples/vue/components/countdown.vue
@@ -55,27 +55,29 @@
<script>
module.exports = {
- data: {
- countdown1: {
- remain: 5000,
- time: {
- D: '0',
- hh: '00',
- mm: '00',
- ss: '00'
- }
- },
- countdown2: {
- remain: 5000,
- time: {
- MM: '0',
- ss: '0'
+ data: function () {
+ return {
+ countdown1: {
+ remain: 5000,
+ time: {
+ D: '0',
+ hh: '00',
+ mm: '00',
+ ss: '00'
+ }
+ },
+ countdown2: {
+ remain: 5000,
+ time: {
+ MM: '0',
+ ss: '0'
+ }
}
}
},
components: {
- panel: require('weex-vue-components/panel.vue'),
- countdown: require('weex-vue-components/countdown.vue')
+ panel: require('../include/panel.vue'),
+ countdown: require('../include/countdown.vue')
},
methods: {
tick: function (e, k) {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/image.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/image.vue b/examples/vue/components/image.vue
index 5bcf86b..c0a43ea 100644
--- a/examples/vue/components/image.vue
+++ b/examples/vue/components/image.vue
@@ -44,12 +44,14 @@
<script>
module.exports = {
- data: {
- img: '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg'
+ data: function () {
+ return {
+ img: '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg'
+ }
},
components: {
- panel: require('weex-vue-components/panel.vue'),
- tip: require('weex-vue-components/tip.vue')
+ panel: require('../include/panel.vue'),
+ tip: require('../include/tip.vue')
}
}
</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/input.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/input.vue b/examples/vue/components/input.vue
index e2a957e..6f56fde 100644
--- a/examples/vue/components/input.vue
+++ b/examples/vue/components/input.vue
@@ -25,22 +25,31 @@
</style>
<script>
+ var modal = require('@weex-module/modal')
module.exports = {
- data: {
- txtInput: '',
- txtChange: ''
+ data: function () {
+ return {
+ txtInput: '',
+ txtChange: ''
+ }
},
components: {
- panel: require('weex-vue-components/panel.vue')
+ panel: require('../include/panel.vue')
},
methods: {
onchange: function(event) {
this.txtChange = event.value;
- console.log('onchange', event.value);
+ modal.toast({
+ message: 'onchange: ' + event.value,
+ duration: 2
+ })
},
oninput: function(event) {
this.txtInput = event.value;
- console.log('oninput', event.value);
+ modal.toast({
+ message: 'onitput: ' + event.value,
+ duration: 1
+ })
}
}
};
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/list.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/list.vue b/examples/vue/components/list.vue
index 4c5b7f7..81056c3 100644
--- a/examples/vue/components/list.vue
+++ b/examples/vue/components/list.vue
@@ -3,6 +3,7 @@
<list class="list">
<cell
v-for="(v,i) in rows"
+ append="tree"
:index="i"
class="row"
@appear="onappear"
@@ -72,41 +73,43 @@
this.appearMin = appearIds[0];
}
},
- data: {
- appearMin:1,
- appearMax:1,
- appearIds:[],
- rows:[
- {id: 1},
- {id: 2},
- {id: 3},
- {id: 4},
- {id: 5},
- {id: 6},
- {id: 7},
- {id: 8},
- {id: 9},
- {id: 10},
- {id: 11},
- {id: 12},
- {id: 13},
- {id: 14},
- {id: 15},
- {id: 16},
- {id: 17},
- {id: 18},
- {id: 19},
- {id: 20},
- {id: 21},
- {id: 22},
- {id: 23},
- {id: 24},
- {id: 25},
- {id: 26},
- {id: 27},
- {id: 28},
- {id: 29}
- ]
+ data: function () {
+ return {
+ appearMin:1,
+ appearMax:1,
+ appearIds:[],
+ rows:[
+ {id: 1},
+ {id: 2},
+ {id: 3},
+ {id: 4},
+ {id: 5},
+ {id: 6},
+ {id: 7},
+ {id: 8},
+ {id: 9},
+ {id: 10},
+ {id: 11},
+ {id: 12},
+ {id: 13},
+ {id: 14},
+ {id: 15},
+ {id: 16},
+ {id: 17},
+ {id: 18},
+ {id: 19},
+ {id: 20},
+ {id: 21},
+ {id: 22},
+ {id: 23},
+ {id: 24},
+ {id: 25},
+ {id: 26},
+ {id: 27},
+ {id: 28},
+ {id: 29}
+ ]
+ }
}
}
</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/marquee.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/marquee.vue b/examples/vue/components/marquee.vue
index ca0a4cc..0736112 100644
--- a/examples/vue/components/marquee.vue
+++ b/examples/vue/components/marquee.vue
@@ -37,24 +37,26 @@
<script>
module.exports = {
- data: {
- marquee: {
- height: 30,
- duration: 1500,
- interval: 2000,
- list: [
- {text: 'Introducing Bots on Messenger'},
- {text: 'Capturing 3D 360-Stereo VR Video'},
- {text: 'The Future of Video on Facebook'},
- {text: 'Announcing Vue.js 2.0'},
- {text: 'Not Your Average Virtual-DOM'},
- {text: 'Templates, JSX, or Hyperscript?'}
- ]
+ data: function () {
+ return {
+ marquee: {
+ height: 30,
+ duration: 1500,
+ interval: 2000,
+ list: [
+ {text: 'Introducing Bots on Messenger'},
+ {text: 'Capturing 3D 360-Stereo VR Video'},
+ {text: 'The Future of Video on Facebook'},
+ {text: 'Announcing Vue.js 2.0'},
+ {text: 'Not Your Average Virtual-DOM'},
+ {text: 'Templates, JSX, or Hyperscript?'}
+ ]
+ }
}
},
components: {
- panel: require('weex-vue-components/panel.vue'),
- marquee: require('weex-vue-components/marquee.vue')
+ panel: require('../include/panel.vue'),
+ marquee: require('../include/marquee.vue')
},
methods: {
marqueeChange: function (e) {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/navigator.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/navigator.vue b/examples/vue/components/navigator.vue
index 48e98b8..7b0d15b 100644
--- a/examples/vue/components/navigator.vue
+++ b/examples/vue/components/navigator.vue
@@ -23,16 +23,18 @@
var navigator = require('@weex-module/navigator')
var getBaseURL = require('../include/base-url.js').getBaseURL
module.exports = {
- data: {
- navBarHeight: 88,
- title: 'Navigator',
- dir: 'examples',
- baseURL: '',
+ data: function () {
+ return {
+ navBarHeight: 88,
+ title: 'Navigator',
+ dir: 'examples',
+ baseURL: ''
+ }
},
components: {
- panel: require('weex-vue-components/panel.vue'),
- navpage: require('weex-vue-components/navpage.vue'),
- button: require('weex-vue-components/button.vue')
+ panel: require('../include/panel.vue'),
+ navpage: require('../include/navpage.vue'),
+ button: require('../include/button.vue')
},
created: function() {
this.$getConfig(function (config) {
@@ -41,7 +43,7 @@
var scale = env.scale;
var deviceWidth = env.deviceWidth / scale;
this.navBarHeight = 64.0 * 750.0 / deviceWidth;
- }
+ }
}.bind(this));
this.baseURL = getBaseURL(this)
},
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/scroller.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/scroller.vue b/examples/vue/components/scroller.vue
index 94bf4b3..d5d4610 100644
--- a/examples/vue/components/scroller.vue
+++ b/examples/vue/components/scroller.vue
@@ -87,75 +87,77 @@
}, 1000)
}
},
- data: {
- refresh_display: 'hide',
- loading_display: 'hide',
- sections: [
- {
- title: 'Header 1',
- items: [
- {id: 1},
- {id: 2},
- {id: 3},
- {id: 4},
- {id: 5}
- ]
- },
- {
- title: 'Header 2',
- items: [
- {id: 6},
- {id: 7},
- {id: 8},
- {id: 9},
- {id: 10},
- {id: 11}
- ]
- }
- ],
- moreSections: [
- {
- title: 'Header 3',
- items: [
- {id: 12},
- {id: 13},
- {id: 14},
- {id: 15},
- {id: 16},
- {id: 17},
- {id: 18}
- ]
- },
- {
- title: 'Header 4',
- items: [
- {id: 19},
- {id: 20},
- {id: 21},
- {id: 22}
- ]
- },
- {
- title: 'Header 5',
- items: [
+ data: function () {
+ return {
+ refresh_display: 'hide',
+ loading_display: 'hide',
+ sections: [
+ {
+ title: 'Header 1',
+ items: [
+ {id: 1},
+ {id: 2},
+ {id: 3},
+ {id: 4},
+ {id: 5}
+ ]
+ },
+ {
+ title: 'Header 2',
+ items: [
+ {id: 6},
+ {id: 7},
+ {id: 8},
+ {id: 9},
+ {id: 10},
+ {id: 11}
+ ]
+ }
+ ],
+ moreSections: [
+ {
+ title: 'Header 3',
+ items: [
+ {id: 12},
+ {id: 13},
+ {id: 14},
+ {id: 15},
+ {id: 16},
+ {id: 17},
+ {id: 18}
+ ]
+ },
+ {
+ title: 'Header 4',
+ items: [
+ {id: 19},
+ {id: 20},
+ {id: 21},
+ {id: 22}
+ ]
+ },
+ {
+ title: 'Header 5',
+ items: [
{id: 23},
{id: 24},
{id: 25},
{id: 26},
{id: 27}
- ]
- },
- {
- title: 'Header 6',
- items: [
+ ]
+ },
+ {
+ title: 'Header 6',
+ items: [
{id: 28},
{id: 29},
{id: 30},
{id: 31},
{id: 32}
+ ]
+ }
]
- }
- ]
+ }
}
}
</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/slider.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/slider.vue b/examples/vue/components/slider.vue
index b2a9dba..9359ac5 100644
--- a/examples/vue/components/slider.vue
+++ b/examples/vue/components/slider.vue
@@ -77,16 +77,59 @@
var img0 = '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg';
var img1 = '//gw.alicdn.com/tps/i1/TB1M3sQMpXXXXakXXXXApNeJVXX-360-360.png';
module.exports = {
- data: {
- eventCnt: 0,
- togglePlayMsg: 'pause',
- sliders: [
- {
- interval: 1000,
- autoPlay: true,
- sliderPages: [
- {
- items: [
+ data: function () {
+ return {
+ eventCnt: 0,
+ togglePlayMsg: 'pause',
+ sliders: [
+ {
+ interval: 1000,
+ autoPlay: true,
+ sliderPages: [
+ {
+ items: [
+ {
+ image: img0,
+ link: '//h5.m.taobao.com/1'
+ },
+ {
+ image: img0,
+ link: '//h5.m.taobao.com/1'
+ }
+ ]
+ },
+ {
+ items: [
+ {
+ image: img1,
+ link: '//h5.m.taobao.com/1'
+ },
+ {
+ image: img1,
+ link: '//h5.m.taobao.com/1'
+ }
+ ]
+ },
+ {
+ items: [
+ {
+ image: img0,
+ link: '//h5.m.taobao.com/1'
+ },
+ {
+ image: img1,
+ link: '//h5.m.taobao.com/1'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ interval: 3000,
+ autoPlay: true,
+ sliderPages: [
+ {
+ items: [
{
image: img0,
link: '//h5.m.taobao.com/1'
@@ -95,10 +138,10 @@
image: img0,
link: '//h5.m.taobao.com/1'
}
- ]
- },
- {
- items: [
+ ]
+ },
+ {
+ items: [
{
image: img1,
link: '//h5.m.taobao.com/1'
@@ -107,10 +150,10 @@
image: img1,
link: '//h5.m.taobao.com/1'
}
- ]
- },
- {
- items: [
+ ]
+ },
+ {
+ items: [
{
image: img0,
link: '//h5.m.taobao.com/1'
@@ -119,58 +162,16 @@
image: img1,
link: '//h5.m.taobao.com/1'
}
- ]
- }
- ]
- },
- {
- interval: 3000,
- autoPlay: true,
- sliderPages: [
- {
- items: [
- {
- image: img0,
- link: '//h5.m.taobao.com/1'
- },
- {
- image: img0,
- link: '//h5.m.taobao.com/1'
- }
+ ]
+ }
]
},
{
- items: [
- {
- image: img1,
- link: '//h5.m.taobao.com/1'
- },
- {
- image: img1,
- link: '//h5.m.taobao.com/1'
- }
- ]
- },
- {
- items: [
- {
- image: img0,
- link: '//h5.m.taobao.com/1'
- },
- {
- image: img1,
- link: '//h5.m.taobao.com/1'
- }
- ]
- }
- ]
- },
- {
- interval: 5000,
- autoPlay: true,
- sliderPages: [
- {
- items: [
+ interval: 5000,
+ autoPlay: true,
+ sliderPages: [
+ {
+ items: [
{
image: img0,
link: '//h5.m.taobao.com/1'
@@ -179,10 +180,10 @@
image: img0,
link: '//h5.m.taobao.com/1'
}
- ]
- },
- {
- items: [
+ ]
+ },
+ {
+ items: [
{
image: img1,
link: '//h5.m.taobao.com/1'
@@ -191,10 +192,10 @@
image: img1,
link: '//h5.m.taobao.com/1'
}
- ]
- },
- {
- items: [
+ ]
+ },
+ {
+ items: [
{
image: img0,
link: '//h5.m.taobao.com/1'
@@ -203,14 +204,15 @@
image: img1,
link: '//h5.m.taobao.com/1'
}
+ ]
+ }
]
}
- ]
- }
- ]
+ ]
+ }
},
components: {
- panel: require('weex-vue-components/panel.vue'),
+ panel: require('../include/panel.vue'),
sliderPage: require('../include/slider-page.vue')
},
methods: {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/tabbar.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/tabbar.vue b/examples/vue/components/tabbar.vue
index 7c9b212..7cc54ae 100644
--- a/examples/vue/components/tabbar.vue
+++ b/examples/vue/components/tabbar.vue
@@ -7,43 +7,45 @@
<script>
var getBaseURL = require('../include/base-url.js').getBaseURL
module.exports = {
- data: {
- dir: 'examples',
- tabItems: [
- {
- index: 0,
- title: 'tab1',
- titleColor: '#000000',
- icon: '',
- image: 'http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png',
- selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png',
- src: 'component/tabbar/tabbar-item.js?itemId=tab1',
- visibility: 'visible',
- },
- {
- index: 1,
- title: 'tab2',
- titleColor: '#000000',
- icon: '',
- image: 'http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png',
- selectedImage: 'http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png',
- src: 'component/tabbar/tabbar-item.js?itemId=tab2',
- visibility: 'hidden',
- },
- {
- index: 2,
- title: 'tab3',
- titleColor: '#000000',
- icon: '',
- image: 'http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png',
- selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png',
- src: 'component/tabbar/tabbar-item.js?itemId=tab3',
- visibility: 'hidden',
- }
- ],
+ data: function () {
+ return {
+ dir: 'examples',
+ tabItems: [
+ {
+ index: 0,
+ title: 'tab1',
+ titleColor: '#000000',
+ icon: '',
+ image: 'http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png',
+ selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png',
+ src: 'component/tabbar/tabbar-item.js?itemId=tab1',
+ visibility: 'visible',
+ },
+ {
+ index: 1,
+ title: 'tab2',
+ titleColor: '#000000',
+ icon: '',
+ image: 'http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png',
+ selectedImage: 'http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png',
+ src: 'component/tabbar/tabbar-item.js?itemId=tab2',
+ visibility: 'hidden',
+ },
+ {
+ index: 2,
+ title: 'tab3',
+ titleColor: '#000000',
+ icon: '',
+ image: 'http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png',
+ selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png',
+ src: 'component/tabbar/tabbar-item.js?itemId=tab3',
+ visibility: 'hidden',
+ }
+ ],
+ }
},
components: {
- tabbar: require('weex-vue-components/tabbar.vue')
+ tabbar: require('../include/tabbar.vue')
},
created: function() {
var baseURL = getBaseURL(this)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/text.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/text.vue b/examples/vue/components/text.vue
index d4fd69c..277e95e 100644
--- a/examples/vue/components/text.vue
+++ b/examples/vue/components/text.vue
@@ -54,7 +54,7 @@
<script>
module.exports = {
components: {
- panel: require('weex-vue-components/panel.vue')
+ panel: require('../include/panel.vue')
}
}
</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/video.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/video.vue b/examples/vue/components/video.vue
index 6e1da0e..df49f30 100644
--- a/examples/vue/components/video.vue
+++ b/examples/vue/components/video.vue
@@ -5,8 +5,8 @@
auto-play="true" :playStatus="playStatus">
</video>
<div style="flex-direction: row; justify-content: center;">
- <button value="Pause" @click="pause"></button>
- <button value="Play" @click="play" type="primary" style="margin-left:20px;"></button>
+ <button value="Pause" @click.native="pause"></button>
+ <button value="Play" @click.native="play" type="primary" style="margin-left:20px;"></button>
</div>
</scroller>
</template>
@@ -22,18 +22,22 @@
<script>
var modal = require('@weex-module/modal')
module.exports = {
- data: {
- playStatus: 'play'
+ data: function () {
+ return {
+ playStatus: 'play'
+ }
},
components: {
- button: require('weex-vue-components/button.vue')
+ button: require('../include/button.vue')
},
methods: {
pause: function() {
this.playStatus = 'pause'
+ modal.toast({ 'message': 'click pause' })
},
play: function() {
this.playStatus = 'play'
+ modal.toast({ 'message': 'click play' })
},
onpause: function(e) {
this.playStatus = e.playStatus
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/components/web.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/web.vue b/examples/vue/components/web.vue
index 7934f5b..7e66c64 100644
--- a/examples/vue/components/web.vue
+++ b/examples/vue/components/web.vue
@@ -11,7 +11,7 @@
style="margin-left:30px;width:210px; margin-top:5px; margin-bottom:5px"
@click.native="refresh"></button>
</div>
- <web class="content" ref="webview" src='https://m.taobao.com/?spm=0.0.0.0&v=0#index'
+ <web class="content" ref="webview" src='http://alibaba.github.io/weex/index.html'
@pagestart="startload" @pagefinish="finishload" @error="failload"></web>
</div>
</template>
@@ -48,7 +48,7 @@
var webview = require('@weex-module/webview');
module.exports = {
components: {
- button: require('weex-vue-components/button.vue')
+ button: require('../include/button.vue')
},
methods: {
goback: function() {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/include/button.vue
----------------------------------------------------------------------
diff --git a/examples/vue/include/button.vue b/examples/vue/include/button.vue
new file mode 100644
index 0000000..63612df
--- /dev/null
+++ b/examples/vue/include/button.vue
@@ -0,0 +1,162 @@
+<!-- Inspired by bootstrap http://getbootstrap.com/ -->
+<template>
+ <div :class="['btn', 'btn-' + type, 'btn-sz-' + size]">
+ <text :class="['btn-txt', 'btn-txt-' + type, 'btn-txt-sz-' + size]">{{value}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ props: {
+ type: { default: 'default' },
+ size: { default: 'large' },
+ value: { default: '' }
+ }
+ }
+</script>
+
+<style>
+ .btn {
+ margin-bottom: 0;
+ align-items: center;
+ justify-content: center;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #333;
+
+ /*white-space: nowrap;*/
+ /*vertical-align: middle;*/
+ /*touch-action: manipulation;*/
+ /*cursor: pointer;*/
+ /*-webkit-user-select: none;*/
+ /*background-image: none;*/
+ /*border-image-source: initial;*/
+ /*border-image-slice: initial;*/
+ /*border-image-width: initial;*/
+ /*border-image-outset: initial;*/
+ /*border-image-repeat: initial;*/
+ }
+
+ .btn-txt {
+
+ }
+
+ /**TYPE**/
+
+ .btn-default {
+ color: rgb(51, 51, 51);
+ }
+
+ .btn-primary {
+ background-color: rgb(40, 96, 144);
+ border-color: rgb(40, 96, 144);
+ }
+
+ .btn-success {
+ background-color: rgb(92, 184, 92);
+ border-color: rgb(76, 174, 76);
+ }
+
+ .btn-info {
+ background-color: rgb(91, 192, 222);
+ border-color: rgb(70, 184, 218);
+ }
+
+ .btn-warning {
+ background-color: rgb(240, 173, 78);
+ border-color: rgb(238, 162, 54);
+ }
+
+ .btn-danger {
+ background-color: rgb(217, 83, 79);
+ border-color: rgb(212, 63, 58);
+ }
+
+ .btn-link {
+ border-color: transparent;
+ border-radius: 0;
+ }
+
+ .btn-txt-default {
+ color: rgb(51, 51, 51);
+ }
+
+ .btn-txt-primary {
+ color: rgb(255, 255, 255);
+ }
+
+ .btn-txt-success {
+ color: rgb(255, 255, 255);
+ }
+
+ .btn-txt-info {
+ color: rgb(255, 255, 255);
+ }
+
+ .btn-txt-warning {
+ color: rgb(255, 255, 255);
+ }
+
+ .btn-txt-danger {
+ color: rgb(255, 255, 255);
+ }
+
+ .btn-txt-link {
+ color: rgb(51, 122, 183);
+ /*font-weight: 400;*/
+ }
+
+ /**SIZE**/
+
+ .btn-sz-large {
+ width: 300px;
+ height: 100px;
+ padding-top: 25px;
+ padding-bottom: 25px;
+ padding-left: 40px;
+ padding-right: 40px;
+ /*line-height: 1.33333;*/
+ border-radius: 15px;
+ }
+
+ .btn-sz-middle {
+ width: 240px;
+ height: 80px;
+ padding-top: 15px;
+ padding-bottom: 15px;
+ padding-left: 30px;
+ padding-right: 30px;
+ /*line-height: 1.42857;*/
+ border-radius: 10px;
+ }
+
+ .btn-sz-small {
+ width: 170px;
+ height: 60px;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ padding-left: 25px;
+ padding-right: 25px;
+ /*line-height: 1.5;*/
+ border-radius: 7px;
+ }
+
+ .btn-txt-sz-large {
+ font-size: 45px;
+ }
+
+ .btn-txt-sz-middle {
+ font-size: 35px;
+ }
+
+ .btn-txt-sz-small {
+ font-size: 30px;
+ }
+
+ /*DISABLED*/
+
+ .disabled {
+
+ }
+
+</style>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/include/countdown.vue
----------------------------------------------------------------------
diff --git a/examples/vue/include/countdown.vue b/examples/vue/include/countdown.vue
new file mode 100644
index 0000000..4058ed2
--- /dev/null
+++ b/examples/vue/include/countdown.vue
@@ -0,0 +1,93 @@
+<template>
+ <div style="overflow: hidden; flex-direction: row;"
+ v-on:appear="appeared"
+ v-on:disappear="disappeared">
+ <slot></slot>
+</div>
+</template>
+
+<style>
+.wrap {
+ overflow: hidden;
+}
+</style>
+
+<script>
+function format (str) {
+ if (str.length >= 2) {
+ return str;
+ } else {
+ return '0' + str;
+ }
+}
+
+function getTime(target, now) {
+ var remain = parseInt((target - now) / 1000)
+ var D = String(parseInt(remain / 86400))
+ var DD = format(D)
+ var h = String(parseInt((remain - parseInt(D) * 86400) / 3600))
+ var hh = format(h)
+ var H = String(parseInt(remain / 3600))
+ var HH = format(H)
+ var m = String(parseInt((remain - parseInt(H) * 3600) / 60))
+ var mm = format(m)
+ var M = String(parseInt(remain / 60))
+ var MM = format(M)
+ var s = String(remain - parseInt(M) * 60)
+ var ss = format(s)
+ var S = String(remain)
+ var SS = format(S)
+ return {
+ D: D, DD: DD,
+ h: h, hh: hh,
+ H: H, HH: HH,
+ m: m, mm: mm,
+ M: M, MM: MM,
+ s: s, ss: ss,
+ S: S, SS: SS
+ }
+}
+
+module.exports = {
+ props: {
+ remain: {
+ default: 0
+ }
+ },
+ data: function () {
+ return {
+ now: 0,
+ target: 0,
+ outofview: false
+ }
+ },
+ created: function() {
+ this.now = Date.now();
+ this.target = this.now + this.remain * 1000
+ if (this.remain > 0) {
+ this.run();
+ }
+ },
+ methods: {
+ run: function() {
+ if (!this.outofview) {
+ this.now = Date.now()
+ }
+ var time = getTime(this.target, this.now)
+ if (this.target >= this.now) {
+ this.$emit('tick', time)
+ } else {
+ this.$emit('alarm', time)
+ return
+ }
+ setTimeout(this.run.bind(this), 1000)
+ },
+ appeared: function() {
+ this.outofview = false
+ },
+ disappeared: function() {
+ this.outofview = true
+ }
+ }
+}
+</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/include/example-list-item.vue
----------------------------------------------------------------------
diff --git a/examples/vue/include/example-list-item.vue b/examples/vue/include/example-list-item.vue
index 2b69a88..c78d1da 100644
--- a/examples/vue/include/example-list-item.vue
+++ b/examples/vue/include/example-list-item.vue
@@ -19,7 +19,7 @@
url: { default: '' }
},
components: {
- listItem: require('weex-vue-components/list-item.vue')
+ listItem: require('./list-item.vue')
},
methods: {
redirect: function() {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/include/hn.vue
----------------------------------------------------------------------
diff --git a/examples/vue/include/hn.vue b/examples/vue/include/hn.vue
new file mode 100644
index 0000000..52c5742
--- /dev/null
+++ b/examples/vue/include/hn.vue
@@ -0,0 +1,47 @@
+<template>
+ <div :class="['h' + level]" style="justify-content: center;">
+ <text :class="['txt-h' + level]">{{value}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ props: {
+ level: { default: 1 },
+ value: { default: '' }
+ }
+ }
+</script>
+
+<style>
+ .h1 {
+ height: 110px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ }
+
+ .h2 {
+ height: 110px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ }
+
+ .h3 {
+ height: 110px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ }
+
+
+ .txt-h1 {
+ font-size: 70px;
+ }
+
+ .txt-h2 {
+ font-size: 52px;
+ }
+
+ .txt-h3 {
+ font-size: 42px;
+ }
+</style>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/include/list-item.vue
----------------------------------------------------------------------
diff --git a/examples/vue/include/list-item.vue b/examples/vue/include/list-item.vue
new file mode 100644
index 0000000..9e62712
--- /dev/null
+++ b/examples/vue/include/list-item.vue
@@ -0,0 +1,46 @@
+<template>
+ <div
+ :style="{ backgroundColor: bgColor }"
+ class="item"
+ v-on:click="click"
+ v-on:touchstart="touchstart"
+ v-on:touchend="touchend">
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ props: {
+ bgColor: { default: '#ffffff' }
+ },
+ methods: {
+ click: function () {
+ this.$emit('click')
+ },
+ touchstart: function() {
+ // FIXME android touch
+ // TODO adaptive opposite bgColor
+ // this.bgColor = '#e6e6e6';
+ },
+ touchend: function() {
+ // FIXME android touchend not triggered
+ // this.bgColor = '#ffffff';
+ }
+ }
+ }
+</script>
+
+<style>
+ .item {
+ padding-top: 25px;
+ padding-bottom: 25px;
+ padding-left: 35px;
+ padding-right: 35px;
+ height: 160px;
+ justify-content: center;
+ /*margin-bottom: 1px; FUTURE */
+ border-bottom-width: 1px;
+ border-color: #dddddd;
+ }
+</style>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/include/marquee.vue
----------------------------------------------------------------------
diff --git a/examples/vue/include/marquee.vue b/examples/vue/include/marquee.vue
new file mode 100644
index 0000000..35d0f04
--- /dev/null
+++ b/examples/vue/include/marquee.vue
@@ -0,0 +1,78 @@
+<template>
+ <div
+ class="wrap"
+ @appear="appeared"
+ @disappear="disappeared">
+ <div
+ ref="anim"
+ class="anim">
+ <slot></slot>
+ </div>
+ </div>
+</template>
+
+<style>
+ .wrap {
+ overflow: hidden;
+ position: relative;
+ }
+ .anim {
+ flex-direction: column;
+ position: absolute;
+ transform: translateY(0) translateZ(0);
+ }
+</style>
+
+<script>
+ var animation = require('@weex-module/animation')
+
+ module.exports = {
+ props: {
+ step: { default: 0 },
+ count: { default: 0 },
+ index: { default: 1 },
+ duration: { default: 0 },
+ interval: { default: 0 },
+ outofview: { default: false }
+ },
+ created: function () {
+ if (this.interval > 0 && this.step > 0 && this.duration > 0) {
+ this.run()
+ }
+ },
+ methods: {
+ run: function () {
+ if (this.outofview) {
+ setTimeout(this.run.bind(this), this.interval)
+ } else {
+ setTimeout(function () {
+ this.animation(this.run.bind(this))
+ }.bind(this), this.interval)
+ }
+ },
+ animation: function (cb) {
+ var offset = -this.step * this.index;
+ animation.transition(this.$refs.anim.ref, {
+ styles: {
+ transform: 'translateY(' + offset + 'px) translateZ(0)'
+ },
+ timingFunction: 'ease',
+ duration: this.duration
+ }, function () {
+ this.index = (this.index + 1) % (this.count);
+ this.$emit('change', {
+ index: this.index,
+ count: this.count
+ });
+ cb && cb();
+ }.bind(this));
+ },
+ appeared: function() {
+ this.outofview = false
+ },
+ disappeared: function() {
+ this.outofview = true
+ }
+ }
+ }
+</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/include/navbar.vue
----------------------------------------------------------------------
diff --git a/examples/vue/include/navbar.vue b/examples/vue/include/navbar.vue
new file mode 100644
index 0000000..9e755f2
--- /dev/null
+++ b/examples/vue/include/navbar.vue
@@ -0,0 +1,121 @@
+<template>
+ <div
+ :dataRole="dataRole"
+ class="container"
+ :style="{ height: height, backgroundColor: backgroundColor }">
+ <text
+ v-if="!rightItemSrc"
+ naviItemPosition="right"
+ :style="{ color: rightItemColor }"
+ class="right-text"
+ v-on:click="onclickrightitem">{{rightItemTitle}}</text>
+ <image
+ v-if="rightItemSrc"
+ naviItemPosition="right"
+ :src="rightItemSrc"
+ class="right-image"
+ v-on:click="onclickrightitem"></image>
+ <text
+ v-if="!leftItemSrc"
+ naviItemPosition="left"
+ :style="{ color: leftItemColor }"
+ class="left-text"
+ v-on:click="onclickleftitem">{{leftItemTitle}}</text>
+ <image
+ v-if="leftItemSrc"
+ naviItemPosition="left"
+ :src="leftItemSrc"
+ class="left-image"
+ v-on:click="onclickleftitem"></image>
+ <text
+ naviItemPosition="center"
+ :style="{ color: titleColor }"
+ class="center-text">{{title}}</text>
+ </div>
+</template>
+
+<style>
+ .container {
+ flex-direction: row;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 750;
+ }
+ .right-text {
+ position: absolute;
+ bottom: 28;
+ right: 32;
+ text-align: right;
+ font-size: 32;
+ font-family: 'Open Sans', sans-serif;
+ }
+ .left-text {
+ position: absolute;
+ bottom: 28;
+ left :32;
+ text-align :left;
+ font-size: 32;
+ font-family: 'Open Sans', sans-serif;
+ }
+ .center-text {
+ position: absolute;
+ bottom: 25;
+ left: 172;
+ right: 172;
+ text-align: center;
+ font-size: 36;
+ font-weight: bold;
+ }
+ .left-image {
+ position: absolute;
+ bottom: 20;
+ left: 28;
+ width: 50;
+ height: 50;
+ }
+ .right-image {
+ position: absolute;
+ bottom: 20;
+ right: 28;
+ width: 50;
+ height: 50;
+ }
+</style>
+
+<script>
+ module.exports = {
+ props: {
+ dataRole: { default: 'navbar' },
+ //\u5bfc\u822a\u6761\u80cc\u666f\u8272
+ backgroundColor: { default: 'black' },
+ //\u5bfc\u822a\u6761\u9ad8\u5ea6
+ height: { default: 88 },
+ //\u5bfc\u822a\u6761\u6807\u9898
+ title: { default: '' },
+ //\u5bfc\u822a\u6761\u6807\u9898\u989c\u8272
+ titleColor: { default: 'black' },
+ //\u53f3\u4fa7\u6309\u94ae\u56fe\u7247
+ rightItemSrc: { default: '' },
+ //\u53f3\u4fa7\u6309\u94ae\u6807\u9898
+ rightItemTitle: { default: '' },
+ //\u53f3\u4fa7\u6309\u94ae\u6807\u9898\u989c\u8272
+ rightItemColor: { default: 'black' },
+ //\u5de6\u4fa7\u6309\u94ae\u56fe\u7247
+ leftItemSrc: { default: '' },
+ //\u5de6\u4fa7\u6309\u94ae\u6807\u9898
+ leftItemTitle: { default: '' },
+ //\u5de6\u4fa7\u6309\u94ae\u989c\u8272
+ leftItemColor: { default: 'black' }
+ },
+ methods: {
+ onclickrightitem: function (e) {
+ this.$emit('naviBarRightItemClick');
+ },
+ onclickleftitem: function (e) {
+ this.$emit('naviBarLeftItemClick');
+ }
+ }
+ }
+</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/include/navpage.vue
----------------------------------------------------------------------
diff --git a/examples/vue/include/navpage.vue b/examples/vue/include/navpage.vue
new file mode 100644
index 0000000..2fd6e49
--- /dev/null
+++ b/examples/vue/include/navpage.vue
@@ -0,0 +1,62 @@
+<template>
+ <div class="wrapper">
+ <navbar
+ :dataRole="dataRole"
+ :height="height"
+ :backgroundColor="backgroundColor"
+ :title="title"
+ :titleColor="titleColor"
+ :leftItemSrc="leftItemSrc"
+ :leftItemTitle="leftItemTitle"
+ :leftItemColor="leftItemColor"
+ :rightItemSrc="rightItemSrc"
+ :rightItemTitle="rightItemTitle"
+ :rightItemColor="rightItemColor"
+ @naviBarRightItemClick="naviBarRightItemClick"
+ @naviBarLeftItemClick="naviBarLeftItemClick"
+ ></navbar>
+ <div class="wrapper" :style="{ marginTop: height }">
+ <slot></slot>
+ </div>
+ </div>
+</template>
+
+<style>
+ .wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 750;
+ }
+</style>
+
+<script>
+ module.exports = {
+ components: {
+ navbar: require('./navbar.vue')
+ },
+ props: {
+ dataRole: { default: 'navbar' },
+ backgroundColor: { default: 'black' },
+ height: { default: 88 },
+ title: { default: "" },
+ titleColor: { default: 'black' },
+ rightItemSrc: { default: '' },
+ rightItemTitle: { default: '' },
+ rightItemColor: { default: 'black' },
+ leftItemSrc: { default: '' },
+ leftItemTitle: { default: '' },
+ leftItemColor: { default: 'black' }
+ },
+ methods: {
+ naviBarRightItemClick: function (e) {
+ this.$emit('naviBarRightItemClick', e)
+ },
+ naviBarLeftItemClick: function (e) {
+ this.$emit('naviBarLeftItemClick', e)
+ }
+ }
+ }
+</script>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b5123119/examples/vue/include/panel.vue
----------------------------------------------------------------------
diff --git a/examples/vue/include/panel.vue b/examples/vue/include/panel.vue
new file mode 100644
index 0000000..13bbbe1
--- /dev/null
+++ b/examples/vue/include/panel.vue
@@ -0,0 +1,141 @@
+<!-- Inspired by bootstrap http://getbootstrap.com/ -->
+<template>
+ <div
+ :class="['panel', 'panel-' + type]"
+ :style="{ borderWidth: border }">
+ <text
+ :class="['panel-header', 'panel-header-' + type]"
+ :style="{
+ paddingTop: paddingHead,
+ paddingBottom: paddingHead,
+ paddingLeft: paddingHead*1.5,
+ paddingRight: paddingHead*1.5
+ }">{{title}}</text>
+ <div
+ :class="['panel-body', 'panel-body-' + type]"
+ :style="{
+ paddingTop: paddingBody,
+ paddingBottom: paddingBody,
+ paddingLeft: paddingBody*1.5,
+ paddingRight: paddingBody*1.5
+ }">
+ <slot></slot>
+ </div>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ props: {
+ type: { default: 'default' },
+ title: { default: '' },
+ paddingBody: { default: 20 },
+ paddingHead: { default: 20 },
+ dataClass: { default: '' }, // FIXME transfer class
+ border:{ default: 0 }
+ }
+ }
+</script>
+
+<style>
+ .panel {
+ margin-bottom: 20px;
+ background-color: #fff;
+ /*border: 1px solid transparent;*/
+ /*border-radius: 10px;*/
+ /*-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);*/
+ /*box-shadow: 0 1px 1px rgba(0,0,0,.05);*/
+ border-color: #dddddd;
+ border-width: 1px;
+ }
+
+ .panel-default {
+ }
+
+ .panel-primary {
+ border-color: rgb(40, 96, 144);
+ }
+
+ .panel-success {
+ border-color: rgb(76, 174, 76);
+
+ }
+
+ .panel-info {
+ border-color: rgb(70, 184, 218);
+
+ }
+
+ .panel-warning {
+ border-color: rgb(238, 162, 54);
+
+ }
+
+ .panel-danger {
+ border-color: rgb(212, 63, 58);
+
+ }
+
+ .panel-header {
+ background-color: #f5f5f5;
+ font-size: 40px;
+ /*padding-left: 12px;*/
+ /*padding-right: 12px;*/
+ /*padding-top: 20px;*/
+ /*padding-bottom: 20px;*/
+ color: #333;
+ }
+
+ .panel-header-default {
+ }
+
+ .panel-header-primary {
+ background-color: rgb(40, 96, 144);
+ color: #ffffff;
+ }
+
+ .panel-header-success {
+ background-color: rgb(92, 184, 92);
+ color: #ffffff;
+ }
+
+ .panel-header-info {
+ background-color: rgb(91, 192, 222);
+ color: #ffffff;
+ }
+
+ .panel-header-warning {
+ background-color: rgb(240, 173, 78);
+ color: #ffffff;
+ }
+
+ .panel-header-danger {
+ background-color: rgb(217, 83, 79);
+ color: #ffffff;
+ }
+
+ .panel-body {
+ /*padding-left: 12px;*/
+ /*padding-right: 12px;*/
+ /*padding-top: 20px;*/
+ /*padding-bottom: 20px;*/
+ }
+
+ .panel-body-default {
+ }
+
+ .panel-body-primary {
+ }
+
+ .panel-body-success {
+ }
+
+ .panel-body-info {
+ }
+
+ .panel-body-warning {
+ }
+
+ .panel-body-danger {
+ }
+</style>