Adaptive Widgets
Adaptive widgets for use in jQuery Mobile applications are available in v3. If you are running v2.3.x, they are not included. You can download v3 2013 here: Downloads Page. Widgets that are adaptive are marked with an asterisk * on the Widgets page.
Adaptive widgets are different from jQuery UI widgets in that you can use them in both mobile and non-mobile web applications. To use the adaptive widgets in non-mobile applications, use the regular help for each widget. To use them in mobile applications:
- Use jQuery Mobile instead of jQuery UI references
- Do not initialize the widget in script (unless you need to for complex widgets like charts)
- Use the data-role attribute to create the widget in markup
These steps are demonstrated in the Quick Start section below.
 |
NOTE: If you run your mobile application on Android, all chart widgets require Android version Ice Cream Sandwich or higher in order to render, because they use SVG (Scalable Vector Graphics). |
Quick Start
This quick start helps you to create a Web page for a mobile application, add an adaptive widget, and customize the appearance and behavior of the widget.
- To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup
| Paste in Notepad. |
Copy Code
|
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
|
- Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at Mobile Wijmo CDN.
Drop down and copy references to paste inside the head tags
| References |
Copy Code
|
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<!--Theme-->
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20133.19.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.js" type="text/javascript"></script> |
- Add the following markup within the <body> tags to create the widget. The first <div> element creates a jQuery mobile page, and the second one creates a jQuery Mobile content area. The third one creates the Wijmo Calendar widget, and its data-role attribute initializes it.
Drop down and copy markup to paste inside the body tags
| Markup |
Copy Code
|
<div data-role="page">
<div data-role="content">
<div data-role="wijcalendar"></div>
</div>
</div> |
- Within the <head> tags, there is no need to add script to initialize the widget as this is done in markup using the data-role attribute.
- Save your HTML file and open it in a browser. The widget appears like the following.
See Also
Concepts
Mobile Widgets
