jquery mobile 方法收集.


1、在列表項和按鈕上禁用文本截斷
     如果你的列表項或者按鈕上是一個很長的文本,它將會被jQuery Mobile自動截斷,要禁用這個截斷設置,需要在CSS選擇器上添加屬性"white-space:normal"。例如,在按鈕禁止截斷:
     .ui-btn-text{
          white-space:normal;
     }
     在列表項上禁止截斷:
     .ui-li-desc{
          white-space:norma;
     }
     應用自動截斷,在元素上面設置"white-space:normal:nowrap"。    

2、在頁面加載時隨機顯示背景
     jQuery Mobile擁有一系列在頁面加載時觸發的初始化事件,下面是每次頁面加載完成后隨機顯示一個背景。
     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、禁用按鈕
     $('#home-button').button("disable");
     設置按鈕可用
     $('#home-button').button("enable");
     4、禁止加載時彈出信息
     每次加載一個不同的頁面時都會觸發彈出消息,確實很煩人,要禁用這種情況的發生,添加如下代碼
$.mobile.pageLoading(true);
默認情況下是可見的
$.mobile.pageLoading();
     5、自定義主題
     jQuery Mobile框架有5款主題,主題A,主題B,主題C,主題D和主題E。但你也可以輕松為你的web app
     創建一個主題。步驟如下:
     (1)從jQuery Mobile CSS文件中復制任何一個主題粘貼到你自己的CSS文件中。
     (2)給你的主題和CSS選擇器合理命名。例如,你復制了主題C,而你想命名你的主題為主題Z,重命名.ui-btn-up-c為.ui-btn-up-z等等。
     (3)、修改自定義主題的顏色和樣式
     (4)、應用你的自定義主題到任一元素上,僅需設置data-theme屬性為z,例如:
<div data-role="page" data-theme="z">
     6、應用自定義字體
     你當用jQuery Mobile構建一個web app時,想用一些特殊字體,你會發現用@font-face自定義字體是一個令人相當滿意的方法。
     7、創建一個沒有文本只有圖片的按鈕
     有時,你可能想用一個沒有文本內容仍具有按鈕特性的一個按鈕。要在按鈕上隱藏文本,設置data-iconpos="notext",例如:
<a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a>
     8、打開一個無需使用Ajax頁面過渡的超鏈接
     <a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a>
     9、移除項目列表中的箭頭
     默認情況下,jQuery Mobile框架會為每一個列表項添加一個箭頭,想要禁用箭頭顯示,需要在你想要移除列表項設置data-icon="false"。
     <li data-icon="false"><a href="contact.html">Contact Us</a></li>
     10、設置頁面的背景顏色
怎樣在不修改jQuery Mobile樣式下設置一個頁面背景顏色的?聽起來很簡單,其實需要花幾分鍾時間才能解決。通常情況下,你需要在body元素中設置背景顏色,但是用jQuery Mobil框架,你需要設置在ui-page類中。
     .ui-page{
          background:#eee;
     }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM