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>