Web Development Blog (GO)

Top Ten jQuery Mobile Code Snippets That's need to know

JQuery Mobile is a framework for mobile web apps and mobile websites with an aim to provide a unified user interface Syste M across many mobile device platforms such iPhone, BlackBerry, Android and Windows Mobile. The framework is built on top of the most popular Javascript frameworks, JQuery.

Followings is some of the most useful code snippets that I ' ve used in my recent web app developed using JQuery Mobile fra Mework.

1. Disable truncation for list items and buttons

If your list item or button has a long text, it is truncated automatically by JQuery Mobile. To disable this truncation, add "to the white-space: normal; CSS selector in question.

For example, to disable truncation for buttons:

. ui-btn-text {white-space:normal;}

To disable truncation for list descriptions:

. ui-li-desc {white-space:normal;}

To enable truncation, set it to " white-space: nowrap; ".

2. Display a random background image on page load

JQuery Mobile has a number of page initialization events This you can use the trigger certain methods on page load. The following CSS + Javascript can be used to display a random background image every time a page is loaded.

Css

. my-page  {background:transparent url (... /images/bg.jpg) 0 0 no-repeat; }.my-page.bg1 {background:transparent URL (.. /images/bg-1.jpg) 0 0 no-repeat; }.my-page.bg2 {background:transparent URL (.. /images/bg-2.jpg) 0 0 no-repeat; }.my-page.bg3 {background:transparent URL (.. /images/bg-3.jpg) 0 0 no-repeat; }

Javascript

$ ('. My-page '). Live ("Pagecreate", function () {var RANDOMBG = Math.floor (Math.random ());//0 to 3$ ('. My-page '). Removeclass (). addclass (' BG ' + RANDOMBG;});

3. Disable a button action

To disable a button action (for Eg:from opening a page), add the following Javascript.

$ (' #home-button '). Button ("Disable");

and to re-enable it:

$ (' #home-button '). Button ("Enable");

4. Disable Loading Pop-up message

I Find the loading pop-up message a bit annoying because it gets triggered everytime you load a different page. To disable This:add the following line of code into your JS file.

$.mobile.pageloading (TRUE);

By default, it's enabled like so:

$.mobile.pageloading ();

5. Create a custom theme

JQuery Mobile Framework comes with 5 themes–theme A, Theme B, Theme C, Theme D and Theme E. But the can easily create a new theme for your web app.

The steps to create a new theme:
1. Copy css for any theme from the JQuery Mobile css file and paste it into your own CSS file.
2. Give your theme a name and rename the CSS selectors appropriately. Your theme name can be any alphabet character (A to Z). So for example, if you copied Theme C, and you want to call your Theme Theme Z, rename .ui-btn-up-c .ui-btn-up-z to, to and .ui-body-c .ui-body-z s O on.
3. Change colors and styles of your custom theme
4. To apply your custom theme Z to any element, just set the Data-theme attribute to Z. For example:

<div data-role= "page" data-theme= "Z" >

6. Use a custom font

There is a few font-replacement methods available such as Cufon, SIFR, FLIR, @font-face and Google Fonts API. When building a web app using JQuery Mobile, I found that @font-face method was the easiest method to work with and the per Formance is quite satisfactory. If you were interested in @font-face, this is a helpful tutorial with a demo about to work with @font-face method.

7. Create a image-only button with no text

Sometimes, want to has any text for your button but still use the rest of the features that comes with a butt on element. This is usually the case with a home button or an info button. To hide any text associated with the button and set Data-iconpos attribute to "Notext". For example:

<a href= ". /index.html "data-icon=" Grid "class=" Ui-btn-right "data-iconpos=" Notext ">Home</a>

8. Open a link without using AJAX with page transitions

To open a link without using AJAX with page transitions (ie:reloading the full page the Old-school), set rel attribut E to "external".

<a href= ". /index.html "data-icon=" Grid "class=" Ui-btn-right "rel=" external ">Home</a>

9. Remove an arrow from a list item

By default, the JQuery Mobile framework adds an arrow next to every list item. To disable this, set Data-icon attribute to "false" on the list item which you ' d like the arrow to be removed.

<li data-icon= "false" ><a href= "contact.html" >contact us</a></li>

Set background color of a page

This could sound simple but it took me a few minutes to figure out how to apply a background color to a page without have It overwritten by JQuery Mobile CSS. Normally, you ' d set a background color to the BODY element but if you are using the JQuery Mobile framework, you need to set it to Ui-page class.

. ui-page {background: #eee;}