在本文中,將介紹使用jQuery Mobile開發(fā)的一些常用的技巧,閱讀對象為已經(jīng)使用過jQuery Mobile進(jìn)行開發(fā)的移動Web開發(fā)者。
1、禁止截斷過長的列表和按鈕內(nèi)容
在jQuery mobile中,如果列表或者按鈕中文字的內(nèi)容過長,jQuery Mobile會自動截斷其超過長度的內(nèi)容,但如果不希望這樣的話,可以在CSS樣式中增加如下設(shè)置即可,比如下面的是針對按鈕的CSS樣式設(shè)置:
- .ui-btn-text {
- white-space: normal;
- }
下面的是針對列表的CSS樣式設(shè)置
- .ui-li-desc {
- white-space: normal;
- }
如果要恢復(fù)對文字的截斷,則繼續(xù)設(shè)置CSS為white-space: nowrap;
2、實現(xiàn)頁面加載時的隨機頁面背景過渡效果
jQuery Mobile中,當(dāng)需要實現(xiàn)頁面加載時,可以有很多的頁面加載事件可供使用。比如下面的CSS和JavaScript代碼,可以實現(xiàn)頁面加載時的隨機頁面背景過渡效果。
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到3之間的隨機數(shù)
- $('.my-page').removeClass().addClass('bg' + randombg);
- });
3、禁用button
在有的情況下,可能會需要禁止按鈕的加載事件,這個時候可以繼續(xù)通過如下的設(shè)置實現(xiàn):
- $('#home-button').button("disable");
如果要恢復(fù)可用,則設(shè)置為:
- $('#home-button').button("enable");
4、去掉頁面加載時的提示信息
如果在加載頁面時,不需要顯示頁面加載信息時,可以通過設(shè)置一個屬性來取消顯示加載提示信息,如下:
- $.mobile.pageLoading(true);
如果要繼續(xù)保持顯示頁面加載信息,則為:
- $.mobile.pageLoading();
5、創(chuàng)建自定義主題
jQuery Mobile本身提供了A-E五種不同的主題,但可以自定義主題,步驟如下:
- <div data-role="page" data-theme="z"></div>
6、使用自定義字體
在移動Web應(yīng)用中,有的時候需要更換字體,這樣的話,可以通過使用@font-face方法實現(xiàn),并且性能是十分好的。具體關(guān)于@font-face的使用,請參考 9、移除項目列表中的箭頭 默認(rèn)情況下,jQuery Mobile框架會為每一個列表項添加一個箭頭,想要禁用箭頭顯示,需要在想要移除列表項設(shè)置data-icon="false"。 10、設(shè)置頁面的背景顏色 怎樣在不修改jQuery Mobile樣式下設(shè)置一個頁面背景顏色的?聽起來很簡單,其實需要花幾分鐘時間才能解決。通常情況下,需要在body元素中設(shè)置背景顏色,但是用jQuery Mobile框架,需要設(shè)置在ui-page類中。 【編輯推薦】
聯(lián)系客服