You read it right, jQuery the smartest javascript web framework for web applications goes mobile. It is called “jQuery Mobile”. The jQuery team has just released their release candidate 1 of the very first version and they say, jQuery Mobile is:
“A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”
It is as powerful as it is said in the documents. I have been to the demos site and tested them on following devices:
- Android 2.3.4 – Samsung Galaxy SII
- iOS 3 – iPhone 3GS
- iOS 4 – iPhone 3GS, iPhone 4
- Mac OSx 10.3 – Macbook Pro
Testing Screenshots
Look at the screen shots below, which I took from Samsung Galaxy S2 default web browser:
jQuery Mobile - Home Page
jQuery Mobile - Demos Site
jQuery Mobile - Components & API
jQuery Mobile - Form Elements Demo
Demos look and work awesome on my android phone, as well as on Mac OSX. It supports almost all devices including, iOS based devices, Android, Windows Mobile, Symbian, Blackberry OS, Palm OS etc. The list of supporting platform is given below.
Powerful Key features:
- Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.
- Compatible with all major mobile, tablet, e-reader & desktop platforms - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, and all modern browsers with graded levels of support.
- Lightweight size and minimal image dependencies for speed.
- HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.
- Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
- Powerful Ajax-powered navigation system to enable animated page transitions while maintaining back button, bookmarking and and clean URLs though pushState.
- Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.
- Touch and mouse event support streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.
- Powerful theming framework and ThemeRoller application make highly-branded experiences easy to build.
Supported Platforms:
The supported platform is divided into three different grading.
- A (full),
- B (full minus Ajax),
- C (basic)
The visual fidelity of the experience is highly dependent on CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.
A-grade - Full enhanced experience with Ajax-based animated page transitions.
- Apple iOS 3.2-5.0 beta - Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)
- Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
- Android Honeycomb- Tested on the Samsung Galaxy Tab 10.1
- Windows Phone 7 - Tested on the HTC 7 Surround
- Blackberry 6.0 - Tested on the Torch 9800 and Style 9670
- Blackberry 7 - Tested on BlackBerry® Torch 9810
- Blackberry Playbook - Tested on PlayBook version 1.0.1 / 1.0.5
- Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
- Palm WebOS 3.0 - Tested on HP TouchPad
- Firebox Mobile (Beta) - Tested on Android 2.2
- Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)
- Meego 1.2 NEW - Tested on Nokia 950
- Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
- Chrome Desktop 11-13 - Tested on OS X 10.6.7 and Windows 7
- Firefox Desktop 3.6-4.0 - Tested on OS X 10.6.7 and Windows 7
- Internet Explorer 7-9 - Tested on Windows XP, Vista and 7 (minor CSS issues)
- Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7
B-grade - Enhanced experience except without Ajax navigation features.
- Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
- Opera Mini (5.0-6.0) - Tested on iOS 3.2/4.3
- Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)
C-grade - Basic, non-enhanced HTML experience that is still functional
- Blackberry 4.x - Tested on the Curve 8330
- Windows Mobile - Tested on the HTC Leo (WInMo 5.2)
- All older smartphone platforms and featurephones - Any device that doesn’t support media queries will receive the basic, C grade experience
Not Officially Supported - May work, but haven’t been thoroughly tested or debugged
- Samsung Bada - The project doesn’t currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0
This is enough to get started. Take me to the jQuery Mobile Framework site.
