Repository: incubator-weex
Updated Branches:
  refs/heads/dev 437ed268c -> 78363c89d


+ [doc] feature: update websocket doc


Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/feb6cca1
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/feb6cca1
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/feb6cca1

Branch: refs/heads/dev
Commit: feb6cca1bc0ef42f79ab0d6f3b766b90c512f700
Parents: 7a8eac8
Author: 齐山 <sunjjb...@163.com>
Authored: Fri Apr 28 13:59:14 2017 +0800
Committer: 齐山 <sunjjb...@163.com>
Committed: Fri Apr 28 13:59:14 2017 +0800

----------------------------------------------------------------------
 doc/source/cn/references/modules/websocket.md | 128 +++++++++++----------
 doc/source/references/modules/websocket.md    | 128 +++++++++++----------
 2 files changed, 132 insertions(+), 124 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/feb6cca1/doc/source/cn/references/modules/websocket.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/modules/websocket.md 
b/doc/source/cn/references/modules/websocket.md
index de99ad3..e83c15f 100644
--- a/doc/source/cn/references/modules/websocket.md
+++ b/doc/source/cn/references/modules/websocket.md
@@ -90,87 +90,91 @@ WebSockets 是一种先进的技术, 这使得在用户的 
H5/iOS/Android 和一
   <scroller>
     <div>
       <div style="background-color: #286090">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#FFFFFF">websocket</text>
+        <text class="title" style="height: 80px ;padding: 20px;color: 
white">websocket</text>
       </div>
-      <input
-              type="text"
-              placeholder="please input message to send"
-              class="input"
-              autofocus="false"
-              value=""
-              onchange="onchange"
-              oninput="oninput"
-              id = "input"
-      />
+      <input type="text" placeholder="please input message to send" 
class="input" autofocus="false" value="" @change="onchange" @input="oninput" 
ref="input"/>
       <div style="flex-direction: row; justify-content: center;">
-        <text class="button" onclick="{{connect}}">connect</text>
-        <text class="button" onclick="{{send}}">send</text>
-        <text class="button" onclick="{{close}}">close</text>
+        <text class="button" @click="connect">connect</text>
+        <text class="button" @click="send">send</text>
+        <text class="button" @click="close">close</text>
       </div>
-      <div style="background-color: #D3D3D3;margin-top: 20">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = send</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = send</text>
       </div>
-      <text style="color: #000000;height: 80">{{sendinfo}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = onopen</text>
+      <text style="color: black;height: 80px">{{sendinfo}}</text>
+
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onopen</text>
       </div>
-      <text style="color: #000000;height: 80">{{onopeninfo}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = onmessage</text>
+      <text style="color: black;height: 80px">{{onopeninfo}}</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onmessage</text>
       </div>
-      <text style="color: #000000;height: 100">{{onmessage}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = onclose</text>
+      <text style="color: black;height: 400px">{{onmessage}}</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onclose</text>
       </div>
-      <text style="color: #000000;height: 80">{{oncloseinfo}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = onerror</text>
+      <text style="color: black;height: 80px">{{oncloseinfo}}</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onerror</text>
       </div>
-      <text style="color: #000000;height: 80">{{onerrorinfo}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = close</text>
+      <text style="color: black;height: 80px">{{onerrorinfo}}</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = close</text>
       </div>
-      <text style="color: #000000;height: 80">{{closeinfo}}</text>
-    </div>
+      <text style="color: black;height: 80px">{{closeinfo}}</text>
+
     </div>
+
   </scroller>
 </template>
-<style>
+
+<style scoped>
   .input {
-    font-size: 40;
-    height: 80;
-    width: 600;
+    font-size: 40px;
+    height: 80px;
+    width: 600px;
   }
   .button {
-    font-size: 36;
-    width: 150;
+    font-size: 36px;
+    width: 150px;
     color: #41B883;
     text-align: center;
-    padding-top: 10;
-    padding-bottom: 10;
-    border-width: 2;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    border-width: 2px;
     border-style: solid;
-    margin-right: 20;
+    margin-right: 20px;
     border-color: rgb(162, 217, 192);
     background-color: rgba(162, 217, 192, 0.2);
   }
 </style>
+
+
 <script>
-  var websocket = require('@weex-module/webSocket');
-  module.exports = {
-    data: {
-      connectinfo: '',
-      sendinfo: '',
-      onopeninfo: '',
-      onmessage: '',
-      oncloseinfo: '',
-      onerrorinfo: '',
-      closeinfo: '',
-      txtInput:'',
-      navBarHeight: 88,
-      title: 'Navigator',
-      dir: 'examples',
-      baseURL: '',
+  var websocket = weex.requireModule('webSocket')
+  export default {
+    data () {
+      return {
+        connectinfo: '',
+        sendinfo: '',
+        onopeninfo: '',
+        onmessage: '',
+        oncloseinfo: '',
+        onerrorinfo: '',
+        closeinfo: '',
+        txtInput:'',
+        navBarHeight: 88,
+        title: 'Navigator',
+        dir: 'examples',
+        baseURL: ''
+      }
     },
     methods: {
       connect:function() {
@@ -196,7 +200,7 @@ WebSockets 是一种先进的技术, 这使得在用户的 
H5/iOS/Android 和一
         }
       },
       send:function(e) {
-        var input = this.$el('input');
+        var input = this.$refs.input;
         input.blur();
         websocket.send(this.txtInput);
         this.sendinfo = this.txtInput;
@@ -207,9 +211,9 @@ WebSockets 是一种先进的技术, 这使得在用户的 
H5/iOS/Android 和一
       close:function(e) {
         websocket.close();
       },
-    }
-  };
+    },
+  }
 </script>
 ```
 
-[Have a try](http://dotwe.org/weex/0256bbfc448f0fdbe8b10ba311c947b4)
\ No newline at end of file
+[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573)
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/feb6cca1/doc/source/references/modules/websocket.md
----------------------------------------------------------------------
diff --git a/doc/source/references/modules/websocket.md 
b/doc/source/references/modules/websocket.md
index e40cdf1..6edc8d8 100644
--- a/doc/source/references/modules/websocket.md
+++ b/doc/source/references/modules/websocket.md
@@ -89,87 +89,91 @@ An event listener to be called when an error occurs.
   <scroller>
     <div>
       <div style="background-color: #286090">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#FFFFFF">websocket</text>
+        <text class="title" style="height: 80px ;padding: 20px;color: 
white">websocket</text>
       </div>
-      <input
-              type="text"
-              placeholder="please input message to send"
-              class="input"
-              autofocus="false"
-              value=""
-              onchange="onchange"
-              oninput="oninput"
-              id = "input"
-      />
+      <input type="text" placeholder="please input message to send" 
class="input" autofocus="false" value="" @change="onchange" @input="oninput" 
ref="input"/>
       <div style="flex-direction: row; justify-content: center;">
-        <text class="button" onclick="{{connect}}">connect</text>
-        <text class="button" onclick="{{send}}">send</text>
-        <text class="button" onclick="{{close}}">close</text>
+        <text class="button" @click="connect">connect</text>
+        <text class="button" @click="send">send</text>
+        <text class="button" @click="close">close</text>
       </div>
-      <div style="background-color: #D3D3D3;margin-top: 20">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = send</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = send</text>
       </div>
-      <text style="color: #000000;height: 80">{{sendinfo}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = onopen</text>
+      <text style="color: black;height: 80px">{{sendinfo}}</text>
+
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onopen</text>
       </div>
-      <text style="color: #000000;height: 80">{{onopeninfo}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = onmessage</text>
+      <text style="color: black;height: 80px">{{onopeninfo}}</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onmessage</text>
       </div>
-      <text style="color: #000000;height: 100">{{onmessage}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = onclose</text>
+      <text style="color: black;height: 400px">{{onmessage}}</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onclose</text>
       </div>
-      <text style="color: #000000;height: 80">{{oncloseinfo}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = onerror</text>
+      <text style="color: black;height: 80px">{{oncloseinfo}}</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = onerror</text>
       </div>
-      <text style="color: #000000;height: 80">{{onerrorinfo}}</text>
-      <div style="background-color: #D3D3D3">
-        <text class="title" style="height: 80 ;padding: 20;color: 
#000000">method = close</text>
+      <text style="color: black;height: 80px">{{onerrorinfo}}</text>
+
+      <div style="background-color: lightgray">
+        <text class="title" style="height: 80px ;padding: 20px;color: 
black">method = close</text>
       </div>
-      <text style="color: #000000;height: 80">{{closeinfo}}</text>
-    </div>
+      <text style="color: black;height: 80px">{{closeinfo}}</text>
+
     </div>
+
   </scroller>
 </template>
-<style>
+
+<style scoped>
   .input {
-    font-size: 40;
-    height: 80;
-    width: 600;
+    font-size: 40px;
+    height: 80px;
+    width: 600px;
   }
   .button {
-    font-size: 36;
-    width: 150;
+    font-size: 36px;
+    width: 150px;
     color: #41B883;
     text-align: center;
-    padding-top: 10;
-    padding-bottom: 10;
-    border-width: 2;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    border-width: 2px;
     border-style: solid;
-    margin-right: 20;
+    margin-right: 20px;
     border-color: rgb(162, 217, 192);
     background-color: rgba(162, 217, 192, 0.2);
   }
 </style>
+
+
 <script>
-  var websocket = require('@weex-module/webSocket');
-  module.exports = {
-    data: {
-      connectinfo: '',
-      sendinfo: '',
-      onopeninfo: '',
-      onmessage: '',
-      oncloseinfo: '',
-      onerrorinfo: '',
-      closeinfo: '',
-      txtInput:'',
-      navBarHeight: 88,
-      title: 'Navigator',
-      dir: 'examples',
-      baseURL: '',
+  var websocket = weex.requireModule('webSocket')
+  export default {
+    data () {
+      return {
+        connectinfo: '',
+        sendinfo: '',
+        onopeninfo: '',
+        onmessage: '',
+        oncloseinfo: '',
+        onerrorinfo: '',
+        closeinfo: '',
+        txtInput:'',
+        navBarHeight: 88,
+        title: 'Navigator',
+        dir: 'examples',
+        baseURL: ''
+      }
     },
     methods: {
       connect:function() {
@@ -195,7 +199,7 @@ An event listener to be called when an error occurs.
         }
       },
       send:function(e) {
-        var input = this.$el('input');
+        var input = this.$refs.input;
         input.blur();
         websocket.send(this.txtInput);
         this.sendinfo = this.txtInput;
@@ -206,9 +210,9 @@ An event listener to be called when an error occurs.
       close:function(e) {
         websocket.close();
       },
-    }
-  };
+    },
+  }
 </script>
 ```
 
-[Have a try](http://dotwe.org/weex/0256bbfc448f0fdbe8b10ba311c947b4)
+[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573)

Reply via email to