Let's take a look at a simple example using jQuery mobile. First off, you need to use the new HTML5 doctype in your page.
Next, include a reference to the jQuery Mobile library and stylesheets.
Now, we are ready to get started. First off, let's start by defining the layout of the page. Each view or "page" on the mobile device is identified by an element with the data-role="page".
Inside that, we can further define the page layout.
That is all that is needed to start coding your site. It's that easy! There is also a boilerplate template that is available on the site.
Okay, so now we have defined our page - let's start making it sexy. The library comes with themes that are even easier to use, plus they take advantage of CSS3 properties. Simply assign a data-theme attribute to the header or footer.
The default theme currently contains five style and you simply define the swatch by the swatch letter.
If we wanted to style a link as a button, add the data-role="button" attribute.
It then appears as
Let's say we wanted to add an icon to our button.
Which appears as
There are many more features available with the jQuery Mobile library, and I'm sure as it expands and progresses we will see a lot more from it! I've just touched on some of the great features that it currently offers, but for more information please check out http://jquerymobile.com
On this site, I already had a iPhone enabled version of my site - but it didn't quite work across all mobile devices. I decided that it was time to update the mobile site to make it available to more devices. Please check it out at - http://www.deanhume.com/mobile
Add your comment