jQuery Mobile is the balm that soothes the headaches of mobile platform developers. It provides a way for developers to build a single code base that functions consistently on the most common mobile platforms. At this time jQuery Mobile supports iOS(iPhone, iPad), Android, BlackBerry, bada, Windows Phone, palm webOS, symbian and MeeGo. This list represents a majority of the mobile platforms and devices in the market today. Products developed with jQuery mobile will have a broad audience ready to consume them.
Even better, developers have only to build one version of their application. Once it is constructed for jQuery mobile there is no need to write it again for any of the other mobile platforms. A jQuery Mobile application runs consistently on any of the platforms previously mentioned. This lessens the time developers spend learning the nuances of a platform and allows them to commit more time to the development of their applications.
Setup of jQuery mobile is simple. Developers can opt to either host the necessary script files themselves or can make use of any number of public CDN resources. Google, Microsoft and jQuery all provide public CDN servers for jQuery Mobile. A developer simply includes the following lines in their HTML between the <head> and </head> tags and jQuery Mobile is enabled.
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css” />
<script src=”http://code.jquery.com/jquery-1.7.2.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js”></script>
From here it is a simple matter of laying out your page structure utilizing jQuery attributes. For a simple page with header, content and footer this is all it takes:
<div id=”hdr” data-role=”header”><h1>My Application 1.0</h1></div>
<div id=”cont” data-role=”content”><p>My very interesting content that goes on for days!</p></div>
<div id=”footer” data-role=”footer”>Call me! <a href=tel:5555555555>555-555-5555</a></div>
Now you have a fully functional jQuery mobile application. If you view the page on a Smartphone device you will even be able to launch the dialer application by tapping the telephone number link. That’s all there is to it. This application works across browsers and devices alike with this minimal setup and zero configuration.
In this simple example it is not even necessary to have a webserver to host the content. If you save this file on your computer with a .html extension you should be able to launch it directly in your web browser and see the intended result.
This is great for debugging locally before you publish your application to the world. You can work out all of the kinks in your own private sand box before going live to the world.
Couple jQuery Mobile with a moderate level of skill in JavaScript and you can produce some very robust applications targeted at mobile devices. Web developers can leverage their existing skill sets to enter the mobile development market with relative ease. jQuery Mobile provides the infrastructure necessary to cross over to mobile development from web development painlessly. There is no need to learn native development techniques which vary from device to device. Simply understand the jQuery Mobile platform and you are ready to launch.
So, what are you going to build today?
