How to run jQuery on Mobile devices
In this article we will learn about the details on the jQuery Mobile comprising of its page structure, different roles, mobile themes, page navigation, toolbars and finally the buttons.
You didn't like the quality of this content?
Would you like to comment what you didn't like?
Figure 1: jQuery Logo
A Glance at the JQuery Mobile Page Structure
It is very important to have the structure of the page and know how it is defined. The very first thing to keep in mind before you start off is an HTML 5 doctype for the reason that jQuery Mobile needs HTML 5. There are very few internet or web browsers that support HTML 5.
Listing 1: Represents the working of JQuery Mobile pages
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body> </html>
For those who are not familiar with or just new to HTML 5, we have the new doctype as can be seen in the above code and it can easily be noticed that it is very different from the one that is being followed in the HTML 4 standard. The next thing that needs to be started making use of the jQuery Mobile is to reference the Mobile CSS file, the Core jQuery file, and the jQuery Mobile file.
Role of Jquery Mobile in Page Structure
Looking at the code discussed above, it can be noticed in the body of the HTML file that page sections are being referenced as roles where the first element is the "page" role. This is done particularly in order to define the area view or page on the mobile device. Talking about the Inside the "page" div element, we can make use of any normal HTML markup. However it is better to make use of the other defining roles.
We have the first role by the name of "header" that is basically used to define the header of the page. We have the next role as "content" role that should comprise of all of the main content of the page. Finally we have the last role as the "footer" role that is primarily made use of in order to define the footer section of the page.
jQuery Mobile Themes
jQuery Mobile is basically used to support a powerful theming engine. One can make use of his own theme or the built-in themes from jQuery can also be used. The other thing that one can do to bring in more awesome feature is to give the users an option of switching their theme. How are basically themes applied? They are applied to objects by incorporating an attribute to the <div> tag. The attribute is "data-theme":
<div data-role="page" data-theme="e"></div>
If we talk about the themes that are currently in-built, we have 6 in number. How are these additional themes referenced? They are basically referenced making use of the letters a-e however if we have no theme being referenced, the default theme is made use. Here it is important to note that the themes are not cascading but are applied at the role level and are not applied to the child elements that permits the developers to mix and match themes.
Introduction to Navigation
Let us talk about page navigation now. if we talk in particular about the page navigation in jQuery Mobile, it is actually a lot different than in traditional web navigation. AJAX is basically made use of by the jQuery Mobile in order to load pages. What advantage it brings to the page? This basically provides a very smooth page transitions and more importantly it can also help give quicker page loads. The thing to keep in mind over here as far as the page navigation is concerned is that as long as the pages are set up with the code correctly, it will load just fine. Te advantage that it brings is by adding "back" button of its own so as to assist in navigating back to a previous page.
Brief about Toolbars
How are toolbars defined? Toolbars are basically defined by the "header" and "footer" roles that are assigned to the <div> tags. As discussed above the page navigation discussion, there is a "back" button that is added for navigation. One can also add their own buttons for navigation.
Listing 2: Represents the code to add your own Buttons
<div data-role="header"> <a href="index.html" data-icon="delete">Cancel</a> <a href="index.html" data-icon="check">Save</a> <h1>Page Title</h1> </div>
As can be seen from the above code, one can also add icons to each of the toolbar item.
A look at the Buttons
As far as the buttons are concerned, we have two types of buttons that are being used with jQuery Mobile. The first are buttons that are basically used for navigation. These are nothing but the standard anchor links, "<a href="">Link</a>". On the other hand, we have the button that makes use of the button element or input element. The use of input element is done in the case when the type is set to "button". One can just go ahead and just add the icons to these much in the same way like it is being done in the toolbar above.
We have come to an end to this interesting article where we learnt about the details on the jQuery Mobile comprising of its page structure, different roles, and mobile Themes, Page Navigation, Toolbars and finally the Buttons. Hope you enjoyed the reading and learning part of this article.