MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

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.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

There is a jQuery team that released a mobile version (couple of years back) of the JavaScript library that is known to be very awesome in its own form. Let us try to learn the difference between standard jQuery and the mobile version. The new version of JQuery that has been released by the team is crafted in such a manner such that it can be run on mobile devices. The devices include the ones with the touch screen as well such as those comprising of Palm, Blackberry, iPhone, Windows Phone, etc. Moreover the weight of the same is very light, probably just around 9KB in size.

jQuery Logo

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.

Conclusion

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.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login