March 5, 2021
Hot Topics:

Using jQuery Mobile Theming, Page 2

Using Mobile Theming

While you're certainly free to use standard HTML elements within your mobile applications, one of jQuery Mobile's most interesting features is the ability to enhance these elements to fit the conventions of a modern mobile application. For instance, consider the following itemized list:

<div data-role="content">	
<li>Beginning PHP and MySQL, Fourth Edition</li>
<li>Easy PayPal with PHP</li>
<li>Easy PHP Websites with the Zend Framework</li>
<li>Easy Website Deployment with Phing</li>

Loaded to the browser, this page looks pretty unappealing, as presented in Figure 3.



However, you can turn this very same list into the very slick mobile-themed version presented in Figure 4, simply by adding the attribute data-role="listview" to the <ul> element.



Even better, you can use one of jQuery Mobile's theme packages by adding the attribute data-theme="X" to the <ul> element (where X refers to the name of the theme package). For instance, set X to a, and the list presented in Figure 4 will be transformed to the list presented in Figure 5. Incidentally, while you can add the data-theme attribute where ever you please, the proper way to do so is by adding it to the DIV associated with the page data role.



I'm not sure why the cryptic name of a was chosen for this particular theme package; perhaps it's simply a matter of the jQuery Mobile team not having yet decided upon a more memorable name. At any rate, this is one of five available theme packages (a, b, c, d, and e). Try experimenting with these to see what each has to offer!


According to a Gartner report published earlier this year, worldwide mobile device sales totaled an astounding 325.6 million units in the second quarter alone. Companies on every corner of the planet are scrambling to capture market share, releasing devices of all shapes, sizes, and capabilities. Although some of these companies are attempting to establish information fiefdoms, the Web remains by far the primary means for online interaction, and with that comes serious challenges for developers seeking to cater to mobile users. The jQuery Mobile project presents a promising solution.

This is but a mere introduction to what is already shaping up to be one of the hottest technologies of the coming year. Stay tuned as I'll almost certainly be investigating additional jQuery Mobile features in future articles!

About the Author

Jason Gilmore is founder of the publishing, training and consulting firm WJGilmore.com. He also is the author of several popular books including "Easy PHP Websites with the Zend Framework", "Easy PayPal with PHP", and "Beginning PHP and MySQL, Fourth Edition". Follow him on Twitter at @wjgilmore.

Originally published on https://www.developer.com.

Page 2 of 2

This article was originally published on November 24, 2010

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date