Docs Translation: Widget(Accordion to Figure)

allin09 · Jul 10, 2015 · cbdc68d · cbdc68d
1 parent d53b893
commit cbdc68d
Show file tree

Hide file tree

Showing 12 changed files with 403 additions and 6 deletions.
diff --git a/Hongdp - 快捷方式.lnk b/Hongdp - 快捷方式.lnk
diff --git a/dist/.gitkeep b/dist/.gitkeep
diff --git a/docs/en/javascript/offcanvas.md b/docs/en/javascript/offcanvas.md
@@ -178,7 +178,8 @@ Add `data-am-offcanvas` attribute to the overlay element:
   </tr>
   <tr>
     <td><code>{effect: 'push'}</code></td>
-    <td>Offcanvas animation. Optional values include <code>overlay | push</code>. Default value is <code>overlay</code></td>
+    <td>Offcanvas animation. 
+     include <code>overlay | push</code>. Default value is <code>overlay</code></td>
   </tr>
   </tbody>
 </table>
@@ -195,7 +196,7 @@ __Attension:__ The `#my-offcanvas` here points directly to the offcanvas instead
 
 #### Options
 
-- `options.effect`. Optional values include `overlay | push`. Default value is `overlay`.
+- `options.effect`. Available options include `overlay | push`. Default value is `overlay`.
 
 ```javascript
 $('#my-offcanvas').offCanvas({effect: 'push'});

diff --git a/docs/en/javascript/popover.md b/docs/en/javascript/popover.md
@@ -94,7 +94,7 @@ $(function() {
   <tr>
     <td><code>trigger</code></td>
     <td><code>string</code></td>
-    <td>Trigger type. Optional values include <code>click|hover|focus</code>, Default to be <code>click</code></td>
+    <td>Trigger type. Available options include <code>click|hover|focus</code>, Default to be <code>click</code></td>
   </tr>
   </tbody>
 </table>

diff --git a/docs/en/javascript/selected.md b/docs/en/javascript/selected.md
@@ -403,8 +403,8 @@ $(function() {
 #### Options
 
 - `btnWidth: null`: Button width. Default value is `200px`
-- `btnSize: null`: Button size. Optional values include `xl|sm|lg|xl`
-- `btnStyle: 'default'`: Button style. Optional values include `primary|secondary|success|warning|danger`
+- `btnSize: null`: Button size. Available options include `xl|sm|lg|xl`
+- `btnStyle: 'default'`: Button style. Available options include `primary|secondary|success|warning|danger`
 - `maxHeight: null`: The maximum height.
 - `dropUp: 0`: Dropup if true. Default value is `0` (`false`)
 

diff --git a/widget/accordion/README.en.md b/widget/accordion/README.en.md
@@ -0,0 +1,161 @@
+# Accordion 
+---
+
+This widget help building a beautiful accordion panel.
+
+## Usage
+
+### Copy and Paste
+
+- Copy the codes in examples, and paste it to the `<body>` of the Amaze UI HTML template([Download](/getting-started));
+- Replace the contents in examples with your own contents.
+
+### Using Handlebars
+
+First, import Handlebars library and `amui.widget.helper.js`(See `widget.html` file in [Amaze UI HTML Template](/getting-started)).
+
+Then use either following ways to bind data.
+
+__1. Insert the script of widget into the template:__
+
+```html
+<script type="text/x-handlebars-template" id="my-tpl">
+  {{>accordion accordionData}}
+</script>
+```
+
+Then query the template and pass the data to it.
+
+```javascript
+$(function() {
+  var $tpl = $('#my-tpl'),
+      tpl = $tpl.text(),
+      template = Handlebars.compile(tpl),
+      data = {
+        accordionData: {
+          "theme": "basic",
+          "content": [
+            {
+              "title": "Title 1",
+              "content": "Content 1",
+              "active": true
+            },
+            {
+              "title": "Title 2",
+              "content": "Content 2"
+            },
+            {
+              "title": "Title 3",
+              "content": "Content 3"
+            }
+          ]
+        }
+      },
+      html = template(data);
+
+  $tpl.before(html);
+});
+```
+
+The rendered HTML looks like this:
+
+```html
+<section data-am-widget="accordion" class="am-accordion am-accordion-basic doc-accordion-class"
+         id="doc-accordion-example" data-accordion-settings="{  }">
+  <dl class="am-accordion-item am-active">
+    <dt class="am-accordion-title">Title 1</dt>
+    <dd class="am-accordion-content">Content 1</dd>
+  </dl>
+  <dl class="am-accordion-item">
+    <dt class="am-accordion-title">Title 2</dt>
+    <dd class="am-accordion-content">Content 2</dd>
+  </dl>
+  <dl class="am-accordion-item">
+    <dt class="am-accordion-title">Title 3</dt>
+    <dd class="am-accordion-content">Content 3</dd>
+  </dl>
+</section>
+```
+
+If there are other widget or templates in the same page, we recommend using this way. Maintenance will be easier in this way.
+
+__Second, Directly render the widget with Handlebars：__
+
+```javascript
+var template = Handlebars.compile('{{>accordion}}'),
+    data = {
+      accordionData: {
+        "id": "doc-accordion-example",
+        "className": "doc-accordion-class",
+        "theme": "basic",
+        "content": [
+          {
+            "title": "Title 1",
+            "content": "Content 1",
+            "active": true
+          },
+          {
+            "title": "Title 2",
+            "content": "Content 2"
+          },
+          {
+            "title": "Title 3",
+            "content": "Content 3"
+          }
+        ]
+      }
+    },
+    html = template(data.accordionData);
+
+$('body').append(html);
+```
+
+### Allmobilize WebIDE
+
+- Drag the widget to the edit interface;
+- Click the `Data binding` button on the right panel, and bind data using following format.
+
+```javascript
+var data = [
+  {
+    "title": "",    // Title. Support using html
+    "content": ""   // Content. Support using html
+  }
+];
+
+return data;
+```
+
+## Data Interface
+
+```javascript
+{
+  // ID
+  "id": "",
+
+  // Customized class
+  "className": "",
+
+  // Theme
+  "theme": "",
+
+  "options": {
+    "multiple": false // Allow opening multiple panel at the same time. Default value is FALSE.
+  },
+
+  // Content(* means required)
+  "content": [
+    {
+      "title": "", // Title. Support using html
+      "content": "", // Content. Support using html
+      "active": false // Whether activate current panel. 
+      // New in Amaze UI 2.3
+      "disabled": null // Whether diable current panel.
+    }
+  ]
+}
+```
+
+## Attention:
+
+- **Don't use `padding`/`margin`/`border` for `.am-accordion-bd`.
diff --git a/widget/blank/README.en.md b/widget/blank/README.en.md
@@ -0,0 +1,10 @@
+# blank
+---
+
+This blank widget allow developers to build their own widget.
+
+## Structure
+
+```javascript
+// Blank. Write your own data structure according to the HTML of your widget.
+```
diff --git a/widget/container/README.en.md b/widget/container/README.en.md
@@ -0,0 +1,15 @@
+# Container
+---
+
+Container widget.
+
+
+## API
+
+```javascript
+{
+  "id": "",
+  "className": "",
+  "theme": ""
+}
+```
diff --git a/widget/divider/README.en.md b/widget/divider/README.en.md
@@ -0,0 +1,30 @@
+# Divider
+---
+
+This widget is used to create beautiful dividers.
+
+## Usage
+
+### Copy and Paste
+
+- Copy the codes in examples, and paste it to the `<body>` of the Amaze UI HTML template([Download](/getting-started));
+
+### Using Handlebars
+
+The Handlebars partial name of this widget is `divider`. See more details in [Accordion](/widgets/accordion).
+
+### Allmobilize WebIDE
+
+This widget don't need data-binding.
+
+## Structure
+
+```javascript
+{
+  "id": "",
+
+  "className": "",
+
+  "theme": "default"
+}
+```
diff --git a/widget/duoshuo/README.en.md b/widget/duoshuo/README.en.md
@@ -0,0 +1,34 @@
+# Duoshuo
+---
+
+This is the DuoShuo comment widget.
+
+<div class="am-alert am-alert-danger">
+  Please use your own DuoShuo website ID to replace <code>amazeui</code> in <code>data-ds-short-name="amazeui"</code>. Otherwise, your comments will all come to Amaze UI.
+</div>
+
+<div class="am-alert am-alert-warning">
+  This widget is provided by <a href="http://dev.duoshuo.com/" target="_blank">DuoShuo</a>. See more details in <a href="http://dev.duoshuo.com/docs" target="_blank">Official Docs</a>.
+</div>
+
+## Usage
+
+The shortName is required, and others are optional.
+
+## API
+
+```javascript
+{
+  "id": "",
+  "className": "",
+  "theme": "",
+  "options": {
+    "shortName": "",
+  },
+  "content": {
+    "threadKey": "",
+    "title": "",
+    "url": ""
+  }
+}
+```
diff --git a/widget/figure/README.en.md b/widget/figure/README.en.md
@@ -0,0 +1,56 @@
+# Figure
+---
+
+The Figure widget is used to place single image. Please use [Gallery](/widgets/gallery) for multiple images.
+
+## Usage
+
+### Copy and Paste
+
+- Copy the codes in examples, and paste it to the `<body>` of the Amaze UI HTML template([Download](/getting-started));
+- Replace the contents in examples with your own contents.
+
+### Using Handlebars
+
+The Handlebars partial of Figure widget is `figure`. See [Accordion](/widgets/accordion) for more details
+
+### Allmobilize WebIDE
+
+- Drag the widget to the edit interface;
+- Click the `Data binding` button on the right panel, and bind data using following format.
+
+```javascript
+var data = {
+  "img": "",          // Path of image.
+  "imgAlt": "",       // Alternative text. If this is empty then use figcaption.
+  "figcaption": ""    // The caption of image. Shown at the bottom of image. 
+};
+
+return data;
+```
+
+## Data Interface
+
+If the image is too big, use the thumbnail in `img`, and use the original image in `rel`.
+
+```javascript
+{
+  "id": "",
+  "className": "",
+  "theme": "",
+  "options": {
+    "figcaptionPosition": "bottom", // Caption position: top | bottom
+    "zoomble": false // Whether allow zooming: ['auto'|true|false]
+                      // 'auto' - Judge by the width of image. Allow zooming if the width of image is larger than viewport.
+                     // This option will be used as the data-am-figure="{pureview: {{zoomable}} }" option in pureview.
+  },
+  "content": [
+    {
+      "img": "", // Path of image(thumbnail)
+      "rel": "", // Path of original image.
+      "imgAlt": "", // Alternative text. If this is empty then use figcaption.
+      "figcaption": "" // Caption.
+    }
+  ]
+}
+```