From cbdc68db74c8e9568bc4ec9b6463a1405008e409 Mon Sep 17 00:00:00 2001 From: hongdp Date: Fri, 10 Jul 2015 15:13:34 +0800 Subject: [PATCH] Docs Translation: Widget(Accordion to Figure) --- ...3\346\215\267\346\226\271\345\274\217.lnk" | Bin 0 -> 898 bytes dist/.gitkeep | 1 - docs/en/javascript/offcanvas.md | 5 +- docs/en/javascript/popover.md | 2 +- docs/en/javascript/selected.md | 4 +- widget/accordion/README.en.md | 161 ++++++++++++++++++ widget/blank/README.en.md | 10 ++ widget/container/README.en.md | 15 ++ widget/divider/README.en.md | 30 ++++ widget/duoshuo/README.en.md | 34 ++++ widget/figure/README.en.md | 56 ++++++ widget/footer/README.en.md | 91 ++++++++++ 12 files changed, 403 insertions(+), 6 deletions(-) create mode 100644 "Hongdp - \345\277\253\346\215\267\346\226\271\345\274\217.lnk" delete mode 100644 dist/.gitkeep create mode 100644 widget/accordion/README.en.md create mode 100644 widget/blank/README.en.md create mode 100644 widget/container/README.en.md create mode 100644 widget/divider/README.en.md create mode 100644 widget/duoshuo/README.en.md create mode 100644 widget/figure/README.en.md create mode 100644 widget/footer/README.en.md diff --git "a/Hongdp - \345\277\253\346\215\267\346\226\271\345\274\217.lnk" "b/Hongdp - \345\277\253\346\215\267\346\226\271\345\274\217.lnk" new file mode 100644 index 0000000000000000000000000000000000000000..acc55deb56ba909d7740440506aec3d9a262e3f3 GIT binary patch literal 898 zcmah{T}YE*6n>^gT98{#sTjGG$tqmmQgaS6X)<@Q(lE>5yV%;krjeUDg&>F_lw?{L z7De_R&OV)Z)%)_CbKY~F_nh;7-|+)5m@_DW z(UgSu6tZEYedlP_3xb+u{H zPW>p&WWd2KR2CnU2JD2SUCwjz;`q#&;``ov4-OsoWwwqzlxOce zI9YdVI+=GpexOL6941gmNa7wX)M8~?58O~;@2cFdreC#Qh+O@IB>UXk?0xEYd7k{u z8z{NZ_VO_OSwfIxn}|j}*GW_mn^RUfwL(;JyXXpdrmDQ?}vBx;4fdQyGE2D?jh9qkox@q?x6};(r6=)0a!2M#S@#B{Ej4 zX{MhbMvwMqXVpHPy+VjJ#QgBdxs8zeHxGvFThF~R4ZX%_{o7T^UG%RNg47r2U$hBv zXy~9^_^v8yIX5A6F`35s>0A`mXGt>YD?r7m8El?Ax5%Uh+qGy!cYN48dg=T2319z) e6Ypp6d!WoRJZ3BSYU {effect: 'push'} - Offcanvas animation. Optional values include overlay | push. Default value is overlay + Offcanvas animation. + include overlay | push. Default value is overlay @@ -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 index 75669edb8..6a5a45fba 100644 --- a/docs/en/javascript/popover.md +++ b/docs/en/javascript/popover.md @@ -94,7 +94,7 @@ $(function() { trigger string - Trigger type. Optional values include click|hover|focus, Default to be click + Trigger type. Available options include click|hover|focus, Default to be click diff --git a/docs/en/javascript/selected.md b/docs/en/javascript/selected.md index 4474358b9..97c701b95 100644 --- 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 new file mode 100644 index 000000000..198a3dbda --- /dev/null +++ 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 `` 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 + +``` + +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 +
+
+
Title 1
+
Content 1
+
+
+
Title 2
+
Content 2
+
+
+
Title 3
+
Content 3
+
+
+``` + +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 new file mode 100644 index 000000000..e755ee4f7 --- /dev/null +++ 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 new file mode 100644 index 000000000..e25d5553b --- /dev/null +++ b/widget/container/README.en.md @@ -0,0 +1,15 @@ +# Container +--- + +Container widget. + + +## API + +```javascript +{ + "id": "", + "className": "", + "theme": "" +} +``` \ No newline at end of file diff --git a/widget/divider/README.en.md b/widget/divider/README.en.md new file mode 100644 index 000000000..8a3dd0776 --- /dev/null +++ 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 `` 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" +} +``` \ No newline at end of file diff --git a/widget/duoshuo/README.en.md b/widget/duoshuo/README.en.md new file mode 100644 index 000000000..2b28630d1 --- /dev/null +++ b/widget/duoshuo/README.en.md @@ -0,0 +1,34 @@ +# Duoshuo +--- + +This is the DuoShuo comment widget. + +
+ Please use your own DuoShuo website ID to replace amazeui in data-ds-short-name="amazeui". Otherwise, your comments will all come to Amaze UI. +
+ +
+ This widget is provided by DuoShuo. See more details in Official Docs. +
+ +## Usage + +The shortName is required, and others are optional. + +## API + +```javascript +{ + "id": "", + "className": "", + "theme": "", + "options": { + "shortName": "", + }, + "content": { + "threadKey": "", + "title": "", + "url": "" + } +} +``` \ No newline at end of file diff --git a/widget/figure/README.en.md b/widget/figure/README.en.md new file mode 100644 index 000000000..f6ef56205 --- /dev/null +++ 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 `` 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. + } + ] +} +``` diff --git a/widget/footer/README.en.md b/widget/footer/README.en.md new file mode 100644 index 000000000..fe0737ebc --- /dev/null +++ b/widget/footer/README.en.md @@ -0,0 +1,91 @@ +# Footer +--- + +用于页面底部显示版本切换、版权等信息。 + +## 使用方法 + +### 直接使用 + +- 拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（[点此下载](/getting-started)） `` 区域； +- 将示例代码中的内容替换为自己的内容。 + +### 使用 Handlebars + +本组件 Handlebars partial 名称为 `footer`，使用细节参照[折叠面板组件](/widgets/accordion)。 + +### 云适配 WebIDE + +- 将组件拖入编辑界面； +- 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。 + +```javascript +var data = { + "lang": context.__lang, // 默认，无需改动。若改动赋值为“en”则为英文，否则为中文！ + "owner": "", // 网站名字 可以填写公司名称或者其他内容。 + "companyInfo": [ + { // 网站信息 + "detail": "" // 必要时可加 a 标签跳转到某个页面，网站的详细信息，在页面中的footer部分就可以看到这里的文字 + }, + { + "detail": "" // 必要时可加 a 标签跳转到某个页面，网站的详细信息，在页面中的footer部分就可以看到这里的文字 + } + ] +}; +return data; +``` + +__数据说明：__ + +- `switchName`：可写：手机版等，默认 `云适配版`； +- `owner`：网站名字； +- `slogan`：弹出层广告语； +- `companyInfo`：填写公司相关信息，此为一对象数组，每一条信息通过对detail赋值来实现！ + +### Add to Homescreen + +- 目前仅支持 iOS，需要在 header 里设置 icon。 + +参考链接： + +- [Safari Web Content Guide: Configuring Web Applications](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) +- [iOS Human Interface Guidelines: Icon and Image Sizes](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1) +- [Add to Homescreen - Google Chrome Mobile -- Google Developers](https://developers.google.com/chrome/mobile/docs/installtohomescreen) +- [Everything you always wanted to know about touch icons](http://mathiasbynens.be/notes/touch-icons) + +添加到桌面图标功能默认开启，可以通过设置以下代码禁用： + +```javascript +window.AMUI_NO_ADD2HS = true; +``` + +## 数据接口 + +```javascript +{ + "id": "", + + "className": "", + + "theme": "default", + + "options": { + "modal": "", + "techSupprtCo": "", + "techSupprtNet": "", + "textPosition": "" + }, + + "content": { + "lang": "", + "switchName": "", + "owner": "", + "slogan": "", + "companyInfo": [ + { + "detail": "" + } + ] + } +} +```