jQuery Mobile Introduction Components API
What is jQuery Mobile? Unified user interface system. Works seamlessly across all popular mobile device platforms. Built on the rock-solid jQuery and jQuery UI foundation. Focused on a feature-rich but lightweight codebase. Built on progressive enhancement with a flexible theming system and ThemeRoller tool.
What is jQuery Mobile? Use ajax navigation system that brings animated page transitions and a core set of UI widgets Pages Dialogs Toolbars Listviews Buttons with icons Form elements Accordions Collapsibles
Supported platform Apple iOS 3.2*-6.0 - Tested on the original Chrome for Android 18 - Tested on iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1 / Android 4.0 and 4.1 deviceset 6.0), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.1 Chrome Desktop 11-21 - Tested on OS X / 6.0) 10.7 and Windows 7 Android 2.1-2.3 - Tested on the HTC Safari Desktop 4-5 - Tested on OS X 10.7 Incredible (2.2), original Droid (2.2), HTC and Windows 7 Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 Firefox Desktop 4-15 - Tested on OS X (1.5) 10.7 and Windows 7 Android 3.2 (Honeycomb) - Tested on the Internet Explorer 7-10 - Tested on Samsung Galaxy Tab 10.1 and Motorola Windows XP, Vista and 7 XOOM Opera Desktop 10-12 - Tested on OS X Android 4.0 (ICS) - Tested on a Galaxy 10.7 and Windows 7 Nexus. Note: transition performance can be poor on upgraded devices Android 4.1 (Jelly Bean) - Tested on a Galaxy Nexus and Galaxy 7
Page & dialogs jQuery Mobile includes a navigation system to load linked pages into the DOM via AJAX, enhance the new content, then display pages with a rich set of animated page transitions. The navigation system automatically transforms all links and forms by using progressive enhancement to hijack links and issue AJAX requests. The back button is fully supported so pages, dialogs, and popups all seamlessly work with the navigation system. There are tools to prefetch & cache, dynamically inject, and script pages for advanced use cases.
Toolbars Toolbar page elements are used for headers and footers throughout many mobile sites and applications. These scroll with the page by default, but can have fixed positioning and be persistent across pages. jQuery Mobile also provides a navbar component that can be used within any toolbar or the page content.
Buttons Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins. The button markup is flexible and can be created from links or form buttons. Each button has a range of styling options including icons and positioning, inline and mini sizing, grouping sets, and theming.
Forms All form widgets begin with native form elements with rich HTML semantics that are enhanced to make them more attractive and easy to use. In browsers that dont support the custom controls, they will still have a usable experience. Most common form elements are included: text inputs, search, sliders, flip toggle switches, radio buttons, checkboxes, and select menus. Available in standard and mini sized versions.
Forms Forms <form action="form.php" method="post"> ... </form> Mini sized elements <input type="text" name="name" id="basic" data- mini="true" /> Labels All elements need to pair with label, but you can hide the label using class="ui-hidden-accessible”.
Forms Disable element Add ui-disabled class to disable elements. Field containers
Listviews Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns. All lists start with simple HTML list markup and include styling for read- only, linked, numbered, nested, collapsible lists and more. Listviews are full width by default but can be set to be inset styled. To make development easy, there are simple ways to add a search filter and automatic dividers.
Basic listview Add data-role=“listview” in ul. Programmatically control listviews $(.selector).listview(refresh);