jQuery Mobile十大常用技巧
譯文在本文中，將介紹使用jQuery Mobile開發(fā)的一些常用的技巧，閱讀對(duì)象為已經(jīng)使用過jQuery Mobile進(jìn)行開發(fā)的移動(dòng)Web開發(fā)者。
1、禁止截?cái)噙^長(zhǎng)的列表和按鈕內(nèi)容
在jQuery mobile中，如果列表或者按鈕中文字的內(nèi)容過長(zhǎng)，jQuery Mobile會(huì)自動(dòng)截?cái)嗥涑^長(zhǎng)度的內(nèi)容，但如果不希望這樣的話，可以在CSS樣式中增加如下設(shè)置即可，比如下面的是針對(duì)按鈕的CSS樣式設(shè)置：
- .ui-btn-text {
- white-space: normal;
- }
下面的是針對(duì)列表的CSS樣式設(shè)置
- .ui-li-desc {
- white-space: normal;
- }
如果要恢復(fù)對(duì)文字的截?cái)?則繼續(xù)設(shè)置CSS為white-space: nowrap;
2、實(shí)現(xiàn)頁面加載時(shí)的隨機(jī)頁面背景過渡效果
jQuery Mobile中,當(dāng)需要實(shí)現(xiàn)頁面加載時(shí),可以有很多的頁面加載事件可供使用。比如下面的CSS和JavaScript代碼，可以實(shí)現(xiàn)頁面加載時(shí)的隨機(jī)頁面背景過渡效果。
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之間的隨機(jī)數(shù)
- $('.my-page').removeClass().addClass('bg' + randombg);
- });
3、禁用button
在有的情況下，可能會(huì)需要禁止按鈕的加載事件，這個(gè)時(shí)候可以繼續(xù)通過如下的設(shè)置實(shí)現(xiàn)：
- $('#home-button').button("disable");
如果要恢復(fù)可用，則設(shè)置為：
- $('#home-button').button("enable");
4、去掉頁面加載時(shí)的提示信息
如果在加載頁面時(shí)，不需要顯示頁面加載信息時(shí)，可以通過設(shè)置一個(gè)屬性來取消顯示加載提示信息，如下：
- $.mobile.pageLoading(true);
如果要繼續(xù)保持顯示頁面加載信息，則為：
- $.mobile.pageLoading();
5、創(chuàng)建自定義主題
jQuery Mobile本身提供了A-E五種不同的主題，但可以自定義主題，步驟如下：
- 從jQuery Mobile的任意一個(gè)定義主題的CSS文件中，復(fù)制其內(nèi)容到自己定義的CSS文件中。
- 給要自定義的CSS主題一個(gè)恰當(dāng)?shù)拿Q并且重新命名CSS文件，注意命名必須是(a-z)英文字母，比如你是從jQuery Mobile的主題c的樣式文件中復(fù)制的，則可以將主題命名為Z,則復(fù)制過來的內(nèi)容中，比如要將.ui-btn-up-c改為.ui-btn-up-z,.ui-body-c改為.ui-body-z，如此類推。
- 改變新建立的自定義主題的顏色和CSS文件。
- 最后，需要在頁面中，應(yīng)用新定義的主題樣式，如下：
- <div data-role="page" data-theme="z"></div>
6、使用自定義字體
在移動(dòng)Web應(yīng)用中，有的時(shí)候需要更換字體，這樣的話，可以通過使用@font-face方法實(shí)現(xiàn)，并且性能是十分好的。具體關(guān)于@font-face的使用，請(qǐng)參考http://www.sitepoint.com/the-fontface-jquery-plugin/這篇文章。
7、創(chuàng)建一個(gè)沒有文本只有圖片的按鈕
有時(shí)，可能想用一個(gè)沒有文本內(nèi)容仍具有按鈕特性的一個(gè)按鈕。如果要在按鈕上隱藏文本，設(shè)置data-iconpos="notext"，例如：
- <a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a>
8、打開一個(gè)無需使用Ajax頁面過渡的超鏈接
如果不需要使用Ajax打開一個(gè)頁面的鏈接，可以設(shè)置鏈接的rel屬性，如下：
- <a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a>
9、移除項(xiàng)目列表中的箭頭
默認(rèn)情況下，jQuery Mobile框架會(huì)為每一個(gè)列表項(xiàng)添加一個(gè)箭頭，想要禁用箭頭顯示，需要在想要移除列表項(xiàng)設(shè)置data-icon="false"。
- <li data-icon="false"><a href="contact.html">Contact Us</a></li>
10、設(shè)置頁面的背景顏色
怎樣在不修改jQuery Mobile樣式下設(shè)置一個(gè)頁面背景顏色的？聽起來很簡(jiǎn)單，其實(shí)需要花幾分鐘時(shí)間才能解決。通常情況下，需要在body元素中設(shè)置背景顏色，但是用jQuery Mobile框架，需要設(shè)置在ui-page類中。
- .ui-page{
- background:#eee;
- }
