The Mobile Fragmentation Challenge
Building native apps for every mobile operating system (iOS, Android, Windows Mobile, BlackBerry) is expensive for enterprise software teams. Each platform requires a different programming language (Objective-C, Java, C#) and specialized development tools.
Web technologies present an attractive alternative. But standard web widgets do not behave correctly on touch interfaces.
The announcement and alpha release of jQuery Mobile in October 2010 provides a unified cross-platform HTML5 framework.
Semantic HTML5 Markup and Data Attributes
jQuery Mobile utilizes declarative HTML5 markup, allowing developers to define complex page structures and widget roles using data-* attributes:
<!-- jQuery Mobile page structure in late 2010 -->
<div data-role="page" id="home-page">
<div data-role="header">
<h1>Dashboard</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#users">Manage Users</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
</div>
</div>The framework intercepts navigation requests and uses AJAX to fetch sub-pages, rendering smooth slide transitions.
Touch Event Optimizations
Unlike standard desktop browsers, mobile devices introduce touch delays (such as the 300ms double-tap zoom wait). jQuery Mobile abstracts touch interactions:
- ◆tap: Triggers immediately on click.
- ◆taphold: Triggers on sustained touch.
- ◆swipe/swipeleft/swiperight: For gestural navigations.
Hybrid App Wrappers
By combining jQuery Mobile with phone wrappers like PhoneGap (Cordova), developers can package standard HTML/CSS/JS applications into native binary app installers, accessing hardware APIs (like camera or GPS) from the browser thread.