jQuery Mobile動態重新整理頁面樣式

2019-12-12 23:59:01

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

在使用js或者jQuery獲取控制元件（例如：button、checkbox、radiobutton等）的值或者動態賦值時，也是需要先重新整理，否則無法更新最新的值

1

1、文字方塊/文字域動態重新整理

程式碼：

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

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

/*******其他文字型別也適用******/

$('#text').textinput();//動態重新整理程式碼

2

2、普通button動態重新整理

程式碼：

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

$('#button').button();//動態重新整理程式碼

3

3、特殊按鈕/框動態重新整理

（1）單選/複選

程式碼：

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

4

（2）滾軸控制元件

程式碼：

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

5

4、下拉選單

（1）普通下拉選單

程式碼：

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

$("#sel").selectmenu("refresh")//重新整理

6

（2）切換開關

程式碼：

</select>

var myswitch = $("#switch");

myswitch[0].selectedIndex = 1;

myswitch .slider("refresh");

7

5、列表檢視（ListView）

程式碼：

</ul>

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

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

8

6、導航欄（navbar）

首先需要了解的是，JQM預設沒有提供navbar的重新整理方法，需要手動補充

補充方式：

a、找到jquery的js檔案，開啟搜尋「navbar」

9

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

具體操作：在_create函數下方加一個refresh函數，程式碼如下：

refresh:function(){

this._create();

}

10

實際使用，程式碼及效果：

$("#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');//重新整理

11

對單獨介面或容器進行重新整理/重建當上面提及的重新整理方案無效時，或者同一個介面或容器中同時需要對多個控制元件進行重新整理，不妨嘗試下程式碼：$(容器/介面/元素).trigger('create');

12

小結：上面總結了，實際專案中出現頻率較高的動態重新整理方式，但在實際專案中可能還會遇到各種問題，歡迎大家留言交流！

jQuery Mobile動態重新整理頁面樣式

1

2

3

4

5

6

7

8

9

10

11

12

熱門文章