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	var myswitch = $( "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内容：

01

//获取站内留言

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

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

04	function (data){

05

06	var html= '' ;

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>