Microsoft

Blog Categories

Subscribe to RSS feed

Archives

The jQuery Mobile Project

At the jQuery conference in Boston (Oct 16th) John Resig announced that jQuery Mobile (Alpha) was released. I would say Mobile was the teams main focus during the conference. Some other main topics that were covered in the presentations were Testing, and Code Organization.

At a high level, jQuery mobile is a UI Framework that helps developers create sites that target all mobile devices. Built with progressive-enhancement, the framework allows you to create one web app that works on all popular smartphone and tablets while giving the best experience to the devices that are capable of displaying CSS3. If a device does not render CSS3 than it will be able to show the same content in a stripped-down UI.

Example: Here is the www.jquerymobile.com site in 3 browsers.

iPhone SafariWP7 IE8iPhone Bing

The first is Safari on the iPod Touch (same as iPhone). The browser renders CSS3 and displays the best visual and animated experience that the web app has to offer. The second image is IE on the Windows Phone 7. WP7 does not yet have a browser that can render CSS3 styling. But notice how the info is still presentable by the visitor. This is what is meant by progressive enhancement. This is the UI that all visitors will experience when they visit a jQuery Mobile site with older browsers. You can view a chart of how the browsers are graded at http://jquerymobile.com/gbs/. For fun, the third browser is the Bing app on the iPod Touch.

Here is an example of some simple HTML that is then styled by the framework:

<div data-role=”page” >
<div data-role=”header”><h1>Page Title</h1></div>
<div data-role=”content” class=”ui-content” role=”main”>
<ul data-role=”listview”>
<li><a href=”acura.html”>Acura</a></li>
<li><a href=”audi.html”>Audi</a></li>
<li><a href=”bmw.html”>BMW</a></li>
</ul>
</div>
<div data-role=”footer”><h4>Page Footer</h4></div>
</div>

Below is what the above code looks like when rendered with the framework:

Now that you see how easy it is to create a site with progressive-enhancement on jQuery Mobile you will want to know how you can make it look different. The framework comes with several different themes as well as the option to change the CSS to any style that you like: http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-themes.html

Tags: ,

Leave a Reply