Top 10 jQuery Mobile Code Snippets that you need to know
2015-02-14 06:13
471 查看
Top 10 jQuery Mobile Code Snippets that you need to know
jQuery Mobile is a framework for mobile web apps and mobile websites with an aim to provide a unified user interface system across many mobile device platforms such iPhone, BlackBerry, Androidand Windows Mobile. The framework is built on top of one of the most popular Javascript frameworks, jQuery.
Followings are some of the most useful code snippets that I’ve used in my recent web app developed using jQuery Mobile framework.
1. Disable truncation for list items and buttons
If your list item or button has a long text, it will be truncated automatically by jQuery Mobile. To disable this truncation, add “
white-space: normal;” to the 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 that you can use to 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()*4); // 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 is 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 you can easily create a new theme for your web app.
The steps to create a new theme:
1. Copy CSS for any theme from 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-cto
.ui-btn-up-z,
.ui-body-cto
.ui-body-zand
so 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 are 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 is the easiest method to work with and the performance is quite satisfactory.
If you are interested in @font-face, here is a helpful tutorial with a demo on how to work with @font-face method.
7. Create an image-only button with no text
Sometimes, you may not want to have any text for your button but still use the rest of the features that comes with a button element. This is usually the case with a home button or an info button. To hide any text associated with the button, 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 way), set rel attribute 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, jQuery Mobile framework adds an arrow next to every list item. To disable this, set data-icon attribute to “false” on the list item that you’d like the arrow to be removed.
<li data-icon="false"><a href="contact.html">Contact Us</a></li>
10. Set background color of a page
This may sound simple but it took me a few minutes to figure out how to apply a background color to a page without having it overwritten by jQuery Mobile CSS. Normally, you’d set a background color to body element but if you are using jQuery Mobile framework,
you need to set it to ui-page class.
.ui-page { background: #eee; }
相关文章推荐
- Top 10 jQuery Mobile Code Snippets that you need to know
- Top 10 Things You Need to Know in java 6 beta 2
- Top 10 New Things You Need to Know About Java 6
- [转]Top 10 things Vi user need to know about Vim
- Everything you need to know about Authenticode Code Signing
- 10 Things You Need To Know About Cocoa Auto Layout
- 开发mobile要知道的六件事情(Six things you need to know about developing mobile applications)
- (2) c# language feature that you need to know - second session.
- Almost everything you need to know to enter mobile game development on 2013 - See more at: http://ww
- 4k HDR – 8 bit, 10 bit, 12 bit, and all the bits you need to know
- (1) C# language feature that you need to know
- WCF Essentials - What You Need To Know About One-Way Calls, Callbacks, And Events
- Everything You Need To Know To Start Programming 64-Bit Windows Systems
- What you need to know about AllowUnsafeUpdates (Part 1) [转载]
- Top 10 Concepts That Every Software Engineer Should Know
- 10 signs that you’re not cut out to be an IT manager
- C++ -> C#: What You Need to Know to Move from C++ to C#
- Oracle 10g DBA Certification: Everything You Need to Know
- Something you need to know about Content Deployment in SharePoint
- 你不适合作IT经理人的十个迹象(10 signs that you’re not cut out to be an IT manager)