# Data Attributes full (ok) Link dung js chuan: ### Đọc thêm: ### Data attribute reference The jQuery Mobile framework uses HTML5 `data-` attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use `data-` attributes, set a custom namespace by modifying the [`ns` global option](https://api.jquerymobile.com/data-attribute/global-config). ## [Button](https://api.jquerymobile.com/button/) [**`https://demos.jquerymobile.com/1.4.5/button-markup/`**](https://demos.jquerymobile.com/1.4.5/button-markup/) Links with `data-role="button"`. Input-based buttons, links in toolbars and button elements are auto-enhanced, no `data-role` required. **V1: data-role="button" data-icon="plus"** C:\xampp\htdocs\oec\index.html ```
button
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FwUtBCME3z7wUVYIpJAuD%2FScreenshot_2.png?alt=media\&token=6e3e37fe-0fef-4a0b-9993-daf01475fbab) **V2: data-role="button" data-icon="plus" data-iconpos="right" data-inline="true"** C:\xampp\htdocs\oec\index.html ```
button
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FtFjuXS4lvhPVlENTE6KI%2FScreenshot_3.png?alt=media\&token=c5c01b7e-1630-4354-9293-d6df4eb6de2a) **V3: data-role="button" data-icon="plus" data-iconpos="right" data-inline="true" data-theme="e"** C:\xampp\htdocs\oec\index.html ```
button
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FphSPYQvpcskkvi4qN164%2FScreenshot_4.png?alt=media\&token=6666637a-9bbe-4c93-bd4b-cc046a3dc87d) ## [Checkbox](https://api.jquerymobile.com/checkboxradio/) [`https://demos.jquerymobile.com/1.4.5/checkboxradio-checkbox/`](https://demos.jquerymobile.com/1.4.5/checkboxradio-checkbox/) Pairs of labels and inputs with `type="checkbox"` are auto-enhanced, no `data-role` required C:\xampp\htdocs\oec\index.html ```
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FbdFfFWxXzqtQLPhv5g7W%2FScreenshot_5.png?alt=media\&token=5c810b3a-9fc1-4649-9155-bf74e1717d66) ## [Collapsible](https://api.jquerymobile.com/collapsible/) [`https://demos.jquerymobile.com/1.4.5/collapsible/`](https://demos.jquerymobile.com/1.4.5/collapsible/) A heading and content wrapped in a container with the `data-role="collapsible"` **`V1:` data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"** C:\xampp\htdocs\oec\index.html ```

collapsible

Lorem ipsum dolor sit, amet.

``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FQQqDtkXgqFbmb33DEp8g%2FScreenshot_6.png?alt=media\&token=27a36d70-5d08-4906-9010-2eba9c9a9c28) **V2: data-role="collapsible" data-collapsed="true" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"** ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2Fqopx0LpPjO77NyYARYfv%2FScreenshot_7.png?alt=media\&token=b8619933-a563-420b-a425-ba51129889ac) ## [Collapsible set](https://api.jquerymobile.com/collapsibleset/) [`https://demos.jquerymobile.com/1.4.5/collapsibleset/`](https://demos.jquerymobile.com/1.4.5/collapsibleset/) A number of collapsibles wrapped in a container with the `data-role="collapsibleset"` **V1: data-role="collapsibleset" data-theme="a" data-content-theme="b"** C:\xampp\htdocs\oec\index.html ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2F8g1oFYvPJ4Y5j7qZelsf%2FScreenshot_9.png?alt=media\&token=837dd787-73a5-450c-94e3-4f50c5f56527) ## [Controlgroup](https://api.jquerymobile.com/controlgroup/) [`https://demos.jquerymobile.com/1.4.5/controlgroup/`](https://demos.jquerymobile.com/1.4.5/controlgroup/) DIV or FIELDSET container with `data-role="controlgroup"`. Visually integrate multiple button-styled elements. **V1: data-role="controlgroup"** C:\xampp\htdocs\oec\index.html ```
No icon Left Right
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FkfHep4XavjaNYszQu25X%2FScreenshot_10.png?alt=media\&token=a78db107-23fa-4cb0-8fbf-9e702c54002f) **V2: data-role="controlgroup" data-type="horizontal"** C:\xampp\htdocs\oec\index.html ```
No icon Left Right
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FONvQS4vy3djOn8zVav4m%2FScreenshot_11.png?alt=media\&token=c8e7b8e1-f949-481d-968f-cfcdb2d6d788) ## [Dialog](https://api.jquerymobile.com/dialog/): [`https://demos.jquerymobile.com/1.2.1/docs/pages/dialog/index.html`](https://demos.jquerymobile.com/1.2.1/docs/pages/dialog/index.html) **V1: data-role="button" data-inline="true" data-rel="dialog" data-transition="pop"**\ C:\xampp\htdocs\oec\index.html ```
Open dialog ``` C:\xampp\htdocs\oec\dialog.html ``` jQuery Mobile Framework - Dialog Example

Dialog

Delete page?

This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.

Sounds good Cancel
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FAZJTlyb7wp1mupM8xifa%2FScreenshot_12.png?alt=media\&token=d57bda18-f70f-4b8c-ad74-73d09ffe3cd3) ## [Flip toggle switch](https://api.jquerymobile.com/flipswitch/) [`https://demos.jquerymobile.com/1.4.5/slider-flipswitch/`](https://demos.jquerymobile.com/1.4.5/slider-flipswitch/) C:\xampp\htdocs\oec\index.html ```
``` ## [Listview](https://api.jquerymobile.com/listview/) [h`ttps://demos.jquerymobile.com/1.4.5/listview/`](https://demos.jquerymobile.com/1.4.5/listview/) `OL` or `UL` with `data-role="listview"` C:\xampp\htdocs\oec\index.html ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FVtzeR6zSYSE2Auw34aQs%2FScreenshot_14.png?alt=media\&token=00cd2321-99fe-49ab-b806-23b5ec882af7) ### [Listview item](https://api.jquerymobile.com/listview/) `LI` within a listview ## [Navbar](https://api.jquerymobile.com/navbar/) ## [`https://demos.jquerymobile.com/1.4.5/navbar/`](https://demos.jquerymobile.com/1.4.5/navbar/) C:\xampp\htdocs\oec\index.html ```
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FdRMAybwElCy3O4BiA0h9%2FScreenshot_15.png?alt=media\&token=50a5418e-6c48-4bab-abca-50612b64e48e) ## [Page](https://api.jquerymobile.com/page/) [`https://demos.jquerymobile.com/1.4.5/pages/`](https://demos.jquerymobile.com/1.4.5/pages/) Container with `data-role="page"` C:\xampp\htdocs\oec\index.html ```

Foo

I'm first in the source order so I'm shown as the page.

View internal page called bar

Page Footer

Bar

I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.

Back to foo

Page Footer

``` ## [Popup](https://api.jquerymobile.com/popup/) [`https://demos.jquerymobile.com/1.4.5/popup`](https://demos.jquerymobile.com/1.4.5/popup) **V1: data-rel="popup" > data-role="popup"** C:\xampp\htdocs\oec\index.html ```
Basic Popup

This is a completely basic popup, no options set.

``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FdmQjFGlgnw7nTha9Nc4N%2FScreenshot_16.png?alt=media\&token=c6ce17fe-231c-4ba9-87a7-186eed2d79e5) **V2: data-rel="popup" > data-rel="back"** C:\xampp\htdocs\oec\index.html ``` ``` ## [Radio button](https://api.jquerymobile.com/checkboxradio/) [`https://demos.jquerymobile.com/1.4.5/checkboxradio-radio`](https://demos.jquerymobile.com/1.4.5/checkboxradio-radio) Pairs of labels and inputs with `type="radio"` are auto-enhanced, no `data-role` required C:\xampp\htdocs\oec\index.html ```
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2F2a5XxnG1fmL8Fizpiqik%2FScreenshot_18.png?alt=media\&token=9dd98c65-e32a-4835-b7a5-82dba2a78916) ## [Selectmenu](https://api.jquerymobile.com/selectmenu/) [`https://demos.jquerymobile.com/1.4.5/selectmenu`](https://demos.jquerymobile.com/1.4.5/selectmenu) All `select` form elements are auto-enhanced, no `data-role` required C:\xampp\htdocs\oec\index.html ```
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FdXPP5mnaAa28Cp4bTQFS%2FScreenshot_19.png?alt=media\&token=15202d43-b2d5-4bbb-889b-db0c16ddfa99) ### [Slider](https://api.jquerymobile.com/slider/) Inputs with `type="range"` are auto-enhanced, no `data-role` required C:\xampp\htdocs\oec\index.html ```
``` ## [Textinput](https://api.jquerymobile.com/textinput/) [`https://demos.jquerymobile.com/1.4.5/textinput/`](https://demos.jquerymobile.com/1.4.5/textinput/) Input `type="text|number|search|etc."` or `textarea` elements are auto-enhanced, no `data-role` required C:\xampp\htdocs\oec\index.html ```
``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2Fa5Mr67AlAMsLaG3uwa1R%2FScreenshot_20.png?alt=media\&token=c6455d8f-c467-4dcc-9b14-940662b99920) ### [Toolbar](https://api.jquerymobile.com/toolbar/) [`https://demos.jquerymobile.com/1.4.5/toolbar/`](https://demos.jquerymobile.com/1.4.5/toolbar/) The toolbar widget is used to enhance headers and footers. C:\xampp\htdocs\oec\index.html ```

Page Title

Powered by jQuery Mobile

``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FdyAWO9RPbiXm2mfLE7QZ%2FScreenshot_21.png?alt=media\&token=f95f1564-5181-4377-93ad-6a31520c6e83) ### [Fixed toolbar](https://api.jquerymobile.com/toolbar/) [`https://demos.jquerymobile.com/1.4.5/toolbar-fixed/`](https://demos.jquerymobile.com/1.4.5/toolbar-fixed/) Container with `data-role="header"` or `data-role="footer"` plus the attribute `data-position="fixed"` C:\xampp\htdocs\oec\index.html ```

Page Title

Powered by jQuery Mobile

``` ![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2F6f8N9mFn1IFLSHwDS2GL%2FScreenshot_22.png?alt=media\&token=8acbaa90-60b9-4e43-8c80-e8b3c0b74b7a)