JQuery Mobile十大經常使用技巧【轉載】

jQuery Mobile十大經常使用技巧

目前,在移Web開發領域中,除了使用如Android,iOS系統原生提供的API進行開發外,對於Web開發人員來講,最方便快捷的方法莫過於使用好比jQuery Mobile,Sencha Touch這樣基於HTML 5的Web框架進行開發了,由於只要熟悉CSS,JavaScript則能夠很輕鬆地運用這些移動Web開發框架進行開發。

 

在本文中，將介紹使用jQuery Mobile開發的一些經常使用的技巧，閱讀對象爲已經使用過jQuery Mobile進行開發的移動Web開發者。

一、禁止截斷過長的列表和按鈕內容

在jQuery mobile中，若是列表或者按鈕中文字的內容過長，jQuery Mobile會自動截斷其超過長度的內容，但若是不但願這樣的話，能夠在CSS樣式中增長以下設置便可，好比下面的是針對按鈕的CSS樣式設置：

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

下面的是針對列表的CSS樣式設置 

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

若是要恢復對文字的截斷,則繼續設置CSS爲white-space: nowrap;

二、實現頁面加載時的隨機頁面背景過渡效果

jQuery Mobile中,當須要實現頁面加載時,能夠有不少的頁面加載事件可供使用。好比下面的CSS和JavaScript代碼，能夠實現頁面加載時的隨機頁面背景過渡效果。

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之間的隨機數
　    $('.my-page').removeClass().addClass('bg' + randombg);
});

三、禁用button

在有的狀況下，可能會須要禁止按鈕的加載事件，這個時候能夠繼續經過以下的設置實現：

$('#home-button').button("disable");

若是要恢復可用，則設置爲：

　$('#home-button').button("enable");

四、去掉頁面加載時的提示信息

若是在加載頁面時，不須要顯示頁面加載信息時，能夠經過設置一個屬性來取消顯示加載提示信息，以下：　

　$.mobile.pageLoading(true);

若是要繼續保持顯示頁面加載信息，則爲：

　$.mobile.pageLoading();

五、建立自定義主題

jQuery Mobile自己提供了A-E五種不一樣的主題，但能夠自定義主題，步驟以下：

1. 從jQuery Mobile的任意一個定義主題的CSS文件中，複製其內容到本身定義的CSS文件中。
2. 給要自定義的CSS主題一個恰當的名稱而且從新命名CSS文件，注意命名必須是(a-z)英文字母，好比你是從jQuery Mobile的主題c的樣式文件中複製的，則能夠將主題命名爲Z,則複製過來的內容中，好比要將.ui-btn-up-c改成.ui-btn-up-z,.ui-body-c改成.ui-body-z，如此類推。
3. 改變新創建的自定義主題的顏色和CSS文件。
4. 最後，須要在頁面中，應用新定義的主題樣式，以下：

   　<div data-role="page" data-theme="z"></div>

六、使用自定義字體

在移動Web應用中，有的時候須要更換字體，這樣的話，能夠經過使用@font-face方法實現，而且性能是十分好的。具體關於@font-face的使用，請參考http://www.sitepoint.com/the-fontface-jquery-plugin/這篇文章。

七、建立一個沒有文本只有圖片的按鈕

有時，可能想用一個沒有文本內容仍具備按鈕特性的一個按鈕。若是要在按鈕上隱藏文本，設置data-iconpos="notext"，例如：

<a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a>

八、打開一個無需使用Ajax頁面過渡的超連接

若是不須要使用Ajax打開一個頁面的連接，能夠設置連接的rel屬性，以下：

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

九、移除項目列表中的箭頭

默認狀況下，jQuery Mobile框架會爲每個列表項添加一個箭頭，想要禁用箭頭顯示，須要在想要移除列表項設置data-icon="false"。

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

十、設置頁面的背景顏色

怎樣在不修改jQuery Mobile樣式下設置一個頁面背景顏色的？聽起來很簡單，其實須要花幾分鐘時間才能解決。一般狀況下，須要在body元素中設置背景顏色，可是用jQuery Mobile框架，須要設置在ui-page類中。

.ui-page{
     background:#eee;
}