If building truly outstanding apps is your passion, then jQuery is for you. Assuming your familiarity with the remarkable pros of this high-end open source multi-platform UI framework, I’ve written this tutorial which walks you through the method of building high-performing mobile applications.
When to use jQuery Mobile?
jQuery Mobile serves as an excellent option for building apps where you need to cater to screens with different sizes, orientations and pixel densities. This framework is the best match for app owners who want to perform dozens of hacks on a very frequent basis.
Now, coming to the process of building an application using jQuery Mobile
Step 1- Create a Basic Page Template
For this, all you need to do is simply paste the below displayed template in your text editor:
<!doctype html> <html> <head> <title>My Page</title> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css”> <script src=”https://code.jquery.com/jquery-1.8.2.min.js”></script> <script src=”https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js”></script> </head> <body> <div data-role=”page”> <div data-role=”header”> <h1>First HTML5 App</h1> </div><!– /header –> <div data-role=”content”> <p>Its first one and many more will come</p> </div><!– /content –> <div data-role=”footer”> <h4>End of the app</h4> </div><!– /footer –> </div><!– /page –> </body> </html>
Once you’re done with the same, save it and open the HTML5 document in your browser.
Here’s an explanation of the above code:
The <head> of the above HTML5 markup contains a meta view-port tag which is used for setting the screen width to the device’s pixel width. Also, within the <body> tag, there is a div including data-role of page which is used for laying out the page. Lastly, there are HTML5 data attributes including a header bar(data-role=”header”), a footer bar(data-role=”footer”) and a content resign(data-role=”content”) which are being used throughout jQuery Mobile for transforming the markup into a well-styled widget.
Step 2- Add content into the content container
Now, you need to add HTML elements into the content container. You may opt for adding lists, heading, paragraphs etc. or choose to include custom styles for creating custom layouts. The latter thing can be done by adding a new stylesheet to <head> after the completion of jQuery Mobile stylesheet.
Step 3- Create a List view
By default, jQuery comes loaded with different listviews which have been coded as lists including a data-role= “listview”. Here is how a linked list containing a role of listview looks like:
<ul data-role=”listview” data-inset=”true” data-filter=”true”> <li><a href=”http://www.wordpress.org”>Wordpress</a></li> <li><a href=”http://www.joomla.org”>Joomla</a></li> <li><a href=”http://www.magentoconnnect.com”>Magento</a></li> <li><a href=”http://www.drupal.com”>Drupal</a></li> <li><a href=”http://www.html5.com”>HTML5</a></li> </ul>
In the above code, data-inset=”true” attribute will make the list view appear as an inset module and the data-filter=”true” attribute will add a dynamic search filter.
Step 4- Add a Slider
jQuery Mobile is rich in form elements which are automatically enhanced into touch-friendly widgets. Here’s the code snippet associated with creation of a slider using HTML5:
<form> <label for=”new-slider”>New Slider:</label> <input type=”range” name=”slider” id=”new-slider” value=”10″ min=”0″ max=”15″ /> </form>
In the above code, do ensure to associate the form elements using the <label> tag and wrap the group of form elements using a <form> tag.
Step 5- Create a button
You can create a button by turning an existing link into a button. For this, simply add a data-role=”button” attribute to the link, followed by adding an icon using the data-icon attribute and setting its position using the data-iconpos attribute. The code for the same is displayed below:
<a href=”http://www.mypage.com” data-role=”button” data-icon=”new-button”>New button</a>
Step 6- Choose a suitable Theme Swatch for your jQuery mobile application
jQuery Mobile comes with a default support for up to 26 sets of button colors and tool-bar content, collaboratively termed as a “swatch”. You can simply add a data-theme=”e” attribute to any of the page widgets including header, input for slider, list or button. Moreover, the swatch letters from a-e available in your default theme can be utilized for mixing and matching swatches. Once you add the theme swatch to any of your app pages, all the widgets included within the content will automatically inherit the incorporated swatch theme, excluding the headers and footers. The code associated with this step is shown below:
<a href=”http://www.mypage.com” data-role=”button” data-icon=”new-theme-button” data-theme=”a”>New Theme Button</a>
Wrapping it up
As an avid HTML5 Fan, using jQuery Mobile will enable you to create a mobile application that’s equipped with an intuitive user interface in addition to fixed toolbars, navigation transitions, basic styling and flawless multi-platform support.
Latest posts by JuanaSteves (see all)
- A Beginner’s Guide To Create An Android App Using Eclipse - June 10, 2015
- A Simple-to-Follow Guideline On Building Apps Using jQuery Mobile - March 16, 2015