jQuery Mobile動態刷新頁面樣式

當我們使用Ajax或者javascript動態在頁面上添加元素後,如添加select控制項的option元素,添加ul的li元素。添加之後顯示的樣式不是jQuery Mobile的樣式了

在使用js或者jQuery獲取控制項(例如:button、checkbox、radiobutton等)的值或者動態賦值時,也是需要先刷新,否則無法更新最新的值

工具/原料

jquery mobile
Myeclipse2014

方法/步驟

1、文本框/文本域動態刷新

代碼:

//$('#div_test').html('<textarea id="text"></textarea>');

$('#div_test').html('<input id="text" type="text" />');

/*******其他文本類型也適用******/

$('#text').textinput();//動態刷新代碼

2、普通button動態刷新

代碼:

$('body').append('<a href="" id="button">button</a>');

$('#button').button();//動態刷新代碼

3、特殊按鈕/框動態刷新

(1)單選/複選

代碼:

$("#a").attr("checked",true).checkboxradio("refresh");

(2)滑塊控制項

代碼:

$('#points').val(50).slider('refresh');

4、下拉列表

(1)普通下拉列表

代碼:

<select id="sel" data-native-menu="false"></select><!--data-native-menu="false"讓下拉列表繼承JQM樣式-->

$("#sel").html("<option>111</option><option>222</option>");

$("#sel").selectmenu("refresh")//刷新

(2)切換開關

代碼:

<select name="switch" id="switch" data-role="slider">

<option value="on">On</option>

<option value="off">Off</option>

</select>

var myswitch = $("#switch");

myswitch[0].selectedIndex = 1;

myswitch .slider("refresh");

5、列表視圖(ListView)

代碼:

<ul id="list" data-role="listview">

</ul>

$("#list").html('<li><a href="#">法國</a></li><li><a href="#">德國</a></li>');

$("#list").listview('refresh');

6、導航欄(navbar)

首先需要了解的是,JQM默認沒有提供navbar的刷新方法,需要手動補充

補充方式:

a、找到jquery的js文件,打開搜尋「navbar」

b、在$.widget( "mobile.navbar", $.mobile.widget, {}中添加refresh函數

具體操作:在_create函數下方加一個refresh函數,代碼如下:

refresh:function(){

this._create();

}

實際使用,代碼及效果:

$("#nav").html('<ul><li><a href="#anylink">首頁</a></li>'+

'<li><a href="#anylink">頁面二</a></li><li><a href="#anylink">搜尋</a></li></ul>').

$("#nav").navbar('refresh');//刷新

對單獨界面或容器進行刷新/重建

當上面提及的刷新方案無效時,或者同一個界面或容器中同時需要對多個控制項進行刷新,不妨嘗試下

代碼:

$(容器/界面/元素).trigger('create');

小結:

上面總結了,實際項目中出現頻率較高的動態刷新方式,但在實際項目中可能還會遇到各種問題,歡迎大家留言交流!

相關文章

  1. 怎樣為Jquery Mobile的頁面添加按鈕圖標

    我們之前說過怎樣製作簡單的Jquery Mobile頁面,這次我來分享一下怎樣為按鈕添加圖標,並確定圖標的位置. 方法/步驟 我們要新建一個HTML5的頁面,並在頁面應用jquery mobile的c ...
  2. 如何使用jquery mobile設置不同樣式的下拉框

    下拉框作為一種常用的控制項,經常使用在系統中,可以進行單選,也可以進行多選.jquery mobile中的樣式類和屬性,可以設計出不同樣式的下拉框,如微型下拉框.禁用單項下拉框.下拉標籤居左的下拉框等. ...
  3. 如何使用jquery mobile製作不同樣式的按鈕

    jquery mobile中包含了不同主題的皮膚,可以根據不同場景獲取不同樣式的控制項.其中,按鈕是一種常用的控制項,可以使用ui-btn.ui-btn-a.ui-btn-b等樣式.下面利用一個實例說明j ...
  4. 解決JQuery Mobile切換頁面白屏問題

    如何解決JQuery Mobile切換頁面白屏問題, 為什麼會出現JQuery Mobile切換頁面白屏的這個問題.本經驗告訴你. 方法/步驟 在用JQuery Mobile開發的過程中, 總是遇到一 ...
  5. 使用Jquery Mobile框架製作可以跳轉的簡單頁面

    時下,用HTML製作手機端的頁面很是流行,下面小編就教大家用jquery Mobile框架,製作可以實現簡單跳轉的頁面. 方法/步驟 首先我們需要打開Deaweaver軟體,新建一個html5文件,並 ...
  6. jquery控制頁面樣式

    jquery的使用 工具/原料 sublime Text 電腦 方法/步驟 <!DOCTYPE html> <html> <head> <meta chars ...
  7. 如何去除Jquery Mobile時自帶樣式

    jQuery Mobile是jQuery 在手機上和平板設備上的版本.jQuery Mobile 不僅會給主流移動平台帶來jQuery核心庫,而且會發布一個完整統一的jQuery移動UI框架.支持全球 ...
  8. jQuery Mobile 教程:頁面切換動畫

    本文介紹使用jQuery Mobile 頁面切換動畫,淡入淡出效果,翻頁效果,流效果 ,彈窗效果,滑動效果 滑動淡出效果 上滑動效果 下滑動效果 翻頁效果 無過渡效果 逆轉效果 方法/步驟 <! ...
  9. 如何使用jquery mobile設置按鈕的陰影樣式

    有時為了美化按鈕,需要給按鈕添加陰影效果,讓其看起來更有立體感.jquery mobile中可以根據自帶的樣式類設置按鈕陰影,使用的是ui-shadow樣式類,這個樣式類一般是用在按鈕上.下面利用一個 ...
  10. 如何使用jquery mobile設計出不同樣式的複選框

    複選框一般是用來進行多選的,但是也有用在其他的地方,比如登錄界面上的忘記密碼.jquery mobile中有很多不同的樣式類,可以直接使用自帶的樣式類美化複選框,還可以選擇不同的主題,設置對應的背景色 ...
  11. 如何使用jquery mobile樣式類設置網格並展示

    jquery mobile有很多可以使用的組件,有按鈕.複選框.單選按鈕.網格.表格.下拉框和日期時間等.其中,網格可以根據不同樣式,控制不同組件展示,jquery mobile中的網格是使用Grid ...
  12. jQuery Mobile十大常用技巧

    在本文中,將介紹使用jQuery Mobile開發的一些常用的技巧,閱讀對象為已經使用過jQuery Mobile進行開發的移動Web開發者. 方法/步驟 禁止截斷過長的列表和按鈕內容 在jQuery ...
  13. jQuery Mobile教程:[3]使用組件

    連結和頁面只是移動網頁設計中一個很小的部分,APP程序(比如採用Object-C,C#,java等在Android或者IOS設備上創建的本地應用程式)快速增長的同時產生了豐富的控制項和組件(例如菜單欄, ...
  14. 移動端開發--頁面樣式重置的幾個知識點

    移動端開發--頁面樣式重置的幾個知識點,僅供參考, 方法/步驟 1.-webkit-tap-highlight-color   -webkit-tap-highlight-color:rgba(0,0 ...
  15. 用實例學習jQuery Mobile系列之一HelloWorld

    寫在前面 這裡是本人學習jQuery Mobile的過程,現在將學習過程中的實例一一展現出來,希望能幫到更多的新手.本系列中實例都經過了本人的親自測試. 在介紹過程中有不對的地方或不嚴謹的地方,歡予以 ...
  16. jquery mobile如何搭建第一個手機網站?

    現在移動互聯發展很快,尤其是前端框架比較多,下面我向大家介紹的勢jq mobile的入門知識以及頁面之間的跳轉問題,可以說,只要懂了入門知識,後面搭建手機網站才能得心應手. 方法/步驟 首先要引入文件 ...
  17. 用實例學習jQuery Mobile系列之二多頁切換

    本文是用實例學習jQuery Mobile系列教程的第二課. 本例子演示了jQuery Mobile多頁間的切換.演示了頁面切換時的多種動畫效果. 演示了把超連結顯示為按鈕方式的方法.演示了內連結和外 ...
  18. 什麼是 jQuery Mobile

    jQuery Mobile 是創建移動 web 應用程式的框架. jQuery Mobile 適用於所有流行的智慧型手機和平板電腦. jQuery Mobile 使用 HTML5 和 CSS3 通過盡可 ...
  19. 怎麼使用JQuery Mobile開發移動網站

    現在越來越多的人用網站來做手機app, 這樣的好處是, 可以做一個網站,基本上可以做到多個平台android, ios, wp, 都可以使用. 這裡使用JQueryMobile來當做前台的框架. 只是 ...
  20. jQuery Mobile 教程Collapsible Set Dialog屬性

    jQuery Data 屬性 jQuery Mobile 使用 HTML5 data-* 屬性為移動設備創建"對觸摸友好的"美觀的外觀. 在下面的參考列表中,粗體值規定默認值. 方 ...