Intro

As soon as I heard the term jQuery Mobile the first time I asked myself “We already have jQuery and it works fine on mobile devices – why would we need another library that’s gonna increase loading time?”. But the minute I got into it I realized that it’s not just a library, it’s a complete framework that allows you to build scalable web-applications by mostly relying on HTML5. You just start with a HTML file, include jQuery Mobile and the corresponding CSS and boom – the framework does the rest for you. jQuery Mobile takes care of all the Ajax, preloading, nice transitions and styling ( of course you can always use different themes or use your own CSS ) for you. In this tutorial it’s expected that you know what a localhost is and how to use it. If not you should get more familiar with it before you continue.

Getting Started

We’re gonna create a simple album-manager-app that’s going to include most of the simple and very useful practices. I recommend getting the Zip-File from the jQuery Mobile download page, it includes all the necessary files and a great documentation for looking things up. First things first – let’s create a new folder inside your localhost’s root folder ( in most cases it’s called “www” ) and rename it to “jqmobile”. Create 3 sub-folders called “img”, “contact” and “list-view”. You should retireve the images from the download or the demo above and place them in the “img”-folder, were gonna use those later.  Now let’s create an index.html file in the jqmobile folder. Paste the following code into your HTML file:

The code above is pretty self explanatory. We’re defining the document encoding, applying a title, setting the viewport width to the pixel width of the device it’s viewed on, then we’re including the corresponding CSS and of course jQuery and jQuery Mobile. So far this isn’t much different from any HTML5 based template, now we’re getting into the interesting stuff. Go ahead an paste the following after your <body> tag:

You can apply a “data-role”-attribute to almost any HTML-tag, jQuery Mobile will look for it and provide the corresponding functionality. To clear things up: <div data-role="page">  will represent the visible part of your page and therefore contain everything content related. You can also create multiple pages in one HTML-file but we’ll get into that later. <div data-role="header"> , <div data-role="content"> and <div data-role="footer"> will create the corresponding elements and get the according styling via the classes jQuery Mobile added to them. Try it out! You will see that there’s already some styling applied to the elements. To add some content paste the following code into your <div data-role="content">:

This is pretty much basic HTML – the links just point to the matching folders. We’re gonna use index.html files inside the folders to get prettier URLs. The  data-role="button" and the  data-icon="check" provide styling for the anchor. You can check out other button and icon styles here. Lastly we’re gonna add the navigation via a div with the  data-role="navbar" attribute. Add this right after the closing tag of the header:

Again the styling will be applied because of the classes and attributes added via jQuery Mobile. Maybe you’ve noticed that jQuery Mobile is adding a bunch of classes to a lot of elements. You can play around with the styling by manually adding the appropriate classes or attributes . For more infomation on this please check out the documentation. Altough using # in an href attribute isn’t the best practice in regular projects, it’s fine to do it in  jQuery mobile because the JavaScript will make it return false properly.

Contact Form

That’s a pretty nice start-page so far and it only took as a few lines of HTML. Next we’re gonna create the contact area of the page. Create a new index.php file in your “contact”-folder and paste in the following code.

This is all stuff you’re already familiar with. We basically reused the start-template and tweaked the navigation a bit. Now to add a basic form insert the following code after the closing tag of your navigation

This lesson isn’t about PHP so I’m not going to go too deep into the following.  Just create a new file in your “contact”-folder, call it “process.php” and paste the code below:

This is just a really basic emailing script. All we do is grab all the data from our $_POST superglobal, passing it into a template and sending it via the PHP mail() function. Now we should add the given functionality to our index.php file. Before the  <!DOCTYPE html> tag add  <?php include('process.php'); ?>  in order to include the file. After the  <div data-role="content">  paste the following code:

This will display a response message once the email was sent by checking if the $submitted variable was set. jQuery mobile will handle the request via Ajax, even providing a nice loading animation. If you don’t want your file to be sent via Ajax you can add data-ajax="false" to the form element. For more information on forms follow this link. For your convenience – here’s the entire index.php file again:

Multi-Page Template

Last but not least we’re gonna take a look at the multi-page template available in jQuery mobile. The way this works is instead of linking to a different html file you can set an anchor’s href attribute to the id of a certain <div data-role="page"> inside the same file. You can create have multiple pages in one file. Let’s take a closer look, shall we…

For our content we’re gonna create a list view – as usually jQuery Mobile is taking care of the styling for us. As mentioned above you can get all of the images via the provided download or the demo page. Insert the following into your  <div data-role="content"> :

Now we created a nice list-view representing all of the albums in our manager app. If you inspect the  <ul data-role="listview" >  element you will notice that jQuery Mobile is adding a bunch of attributes for theming purposes – try playing around with those. Here’s all you need to know on list-views. OK, our list looks great but it doesn’t do much so far. You might have noticed that the hrefs of the anchors in the list are already pointing towards ids instead of html files. Now we’ll just have to create the adjacent pages in order to provide the intended functionality. The way this works is pretty straightforward. Right after the closing tag of our <div data-role="page">  we’re gonna add a second page:

As soon as you click the anchor pointing to the pages id, jQuery Mobile hides the current <div data-role="page">  and displays the according <div data-role="page"> . An anchor with a   data-rel="back"  attribute will take you back one history entry, ignoring the anchor’s default href. The nice thing about these multi-page templates is that they are fully compatible with the browsers native history navigation, this means the user can go back and forth as he is used to in regular websites. On this page we are indeed adding a small amount of inline CSS manually just to keep it simple – in bigger projects you would probably have your own external CSS file for such purposes. Now to add the other 3 pages paste the following code after the last page:

Alright, that’s it. The app works. Try adding  data-rel="dialog" data-transition="pop"  to one of the anchors and see what happens.

Summary

I hope you got a good look at the functionality and flexibility of jQuery Mobile. We just created a simple App that is capable of loading content asynchronously, using nice transitions, without writing a single line of JavaScript and barely writing any CSS. But don’t forget what you’ve seen here is just the tip of the iceberg. JQuery Mobile is capable of much more complex and in depth operations, providing a rich JavaScript API and versatile theming posibilities.