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>