Jquery Mobile基礎知識-樣式更新

1.select選項中的值要根據後臺取出來的值設置爲默認選中狀態，比如：

1	$('#select-choice-1').html('<option value="'+data.key+'" selected="selected">'+data.value+'</option>');

這樣頁面顯示是不會讓行option作爲選中狀態的，要在後面加上一句：

1	$('#select-choice-1').selectmenu("refresh");

更新下select狀態~

2.複選按鈕：

1	$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

向頁面插入複選框後，有時會出現：

1	Uncaught cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'

這是說沒有實例話的意思，可以這樣：

1	$('#f-list').append(html);

2	$("input[type=checkbox]").checkboxradio(); //主要加這句 2012-7-3

3	$('#f-list').checkboxradio("refresh");

4	$.mobile.changePage($("#invite-page"));

3.單選按鈕組:

1	$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

4.滑動條：

1	$("input[type=range]").val(60).slider("refresh");

5.開關 (they use slider):

1	varmyswitch = $("select#bar");

2	myswitch[0].selectedIndex = 1;

3	myswitch .slider("refresh");

6.可摺疊列表(collapsibles）：

1	$('.selector').collapsibleset('refresh');

7.樣式嵌套（collapsible裏嵌套button 或listview裏嵌套button）:

1	$("#msglist").html(html).trigger("pagecreate");

JS插入HTML後加上trigger("pagecreate");

樣式嵌套的例子：

js內容：

01

//獲取站內留言

02	$("#primsgview").live("pagebeforecreate", function(){

03	$.getJSON(tongxue.website+"profile/getprivatemsg",

04	function(data){

05

06	varhtml='';

07	if(typeof(data) != 'object'){

08	html+='<h3>暫無站內信</h3>',

09	$("#msglist").html(html);

10

}else{

11	$.each(data, function(Index,msg){

12

13	html+='<div data-role="collapsible" data-theme="c" data-content-theme="c" class="msginfo">';

14	html+='<h3>'+msg.username+' 於 '+msg.sendtime+'</h3><p> '+msg.content+' </p>',

15	html+='<div class="ui-grid-a">';

16	html+='  <div class="ui-block-a">';

17	html+='      <a href="#delmsg" data-rel="dialog" data-role="button" class="delmsg" data-theme="c" id="'+msg.mid+'">刪除</a>';

18	html+='  </div>';

19	html+='  <div class="ui-block-b">';

20	html+='     <a href="#reply" data-rel="dialog" data-role="button" data-theme="b" id="'+msg.fromid+'" class="replyname">回覆</a>';

21	html+='</div></div></div>';

22

});

23	$("#msglist").html(html).trigger("pagecreate");

24

25	//$("#primsgview").trigger("pagecreate");

26	//$("ul").listview("refresh");

27	//$("#msglist").buttonMarkup();

28	$('#msglist').collapsibleset('refresh');

29

}

30	$.mobile.changePage($("#primsgview"));

31

}

32

);

33

});

HTML內容：

1	<div data-role="collapsible-set"id="msglist">

2	<!-- 消息顯示位置 -->

3

</div>