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>