10 Jquerymobile Code Snippets you need to know

1. Disable text truncation on list items and buttons
If your list item or button is a long text, it will be automatically truncated by jquery mobile, to disable this truncation setting, you need to add the property "White-space:normal" to the CSS selector. For example, disable truncation on the button:
. ui-btn-text{
White-space:normal;
}
To suppress truncation on list items:
. ui-li-desc{
White-space:norma;
}
Apply automatic truncation, set "White-space:normal:nowrap" above the element.

2. Randomly display the background when the page loads
JQuery Mobile has a series of initialization events that are triggered when the page loads, and the following is a random background after each page load is completed.
The CSS is as follows:
. 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 is as follows:
$ ('. My-page '). Live ("Pagecreate", function () {
var RANDOMBG = Math.floor (Math.random ()); 0 to 3
$ ('. My-page '). Removeclass (). addclass (' bg ' + RANDOMBG);
});
3. Disable button
$ (' #home-button '). Button ("Disable");
The Settings button is available
$ (' #home-button '). Button ("Enable");
4. Suppress pop-up information when loading
Each time a different page loading will trigger a popup message, it is really annoying, to disable the occurrence of this situation, add the following code
$.mobile.pageloading (TRUE);
is visible by default
$.mobile.pageloading ();
5. Custom Themes
The JQuery mobile framework has 5 themes, theme A, theme B, theme C, theme D and subject E. But you can also easily for your web app
Create a theme. The steps are as follows:
(1) Copy any of the themes from the jquery Mobile css file into your own CSS file.
(2) Give your theme and CSS selector a proper name. For example, you copied the theme C, and you want to name your theme z for the theme, rename it. ui-btn-up-c for. Ui-btn-up-z and so on.
(3), modify the color and style of the custom theme
(4), apply your custom theme to any element, just set the Data-theme property to Z, for example:
<div data-role= "page" data-theme= "Z" >
6. Apply Custom Fonts
When you build a web App with jquery Mobile, you want to use some special fonts, and you'll find that customizing fonts with @font-face is a pretty satisfying approach.
7. Create a button with no text and only pictures
Sometimes, you might want to use a button with no text content that still has a button feature. To hide text on a button, set data-iconpos= "Notext", for example:
<a href= ". /index.html "data-icon=" Grid "claa=" Ui-btn-right "data-iconpos=" Notext ">Home</a>
8. Open a hyperlink without using the Ajax page transition
<a href= ". /index.html "data-icon=" Grid "class=" Ui-btn-right "rel=" external ">Home</a>
9. Remove arrows from List of items
By default, the JQuery mobile framework adds an arrow to each list item and wants to disable the arrow display, data-icon= "false" if you want to remove the list item setting.
<li data-icon= "false" ><a href= "contact.html" >contact us</a></li>
10. Set the background color of the page
How do I set a page background color without modifying the jquery mobile style? It sounds simple, but it takes a few minutes to solve. In general, you need to set the background color in the BODY element, but with the jquery Mobil framework you need to set it in the Ui-page class.
. ui-page{
Background: #eee;
}

from:http://blog.csdn.net/lgd5979/article/details/7018256

10 Jquerymobile Code Snippets you need to know