Jquery Mobile基础知识-样式更新

为什么80%的码农都做不了架构师？>>>   

1.select选项中的值要根据后台取出来的值设置为默认选中状态，比如：

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

这样页面显示是不会让行option作为选中状态的，要在后面加上一句：

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

更新下select状态~

2.复选按钮：

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

向页面插入复选框后，有时会出现：

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

这是说没有实例话的意思，可以这样：

$('#f-list').append(html);
$("input[type=checkbox]").checkboxradio(); //主要加这句 2012-7-3
$('#f-list').checkboxradio("refresh");
$.mobile.changePage($("#invite-page"));

3.单选按钮组:

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

4.滑动条：

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

5.开关 (they use slider):

var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");

6.可折叠列表(collapsibles）：

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

7.样式嵌套（collapsible里嵌套button 或listview里嵌套button）:

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

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

 样式嵌套的例子：

js内容：

//获取站内留言
$("#primsgview").live("pagebeforecreate", function(){
	$.getJSON(tongxue.website+"profile/getprivatemsg",
		function(data){
		
			var html='';
			if(typeof(data) != 'object'){
				html+='<h3>暂无站内信</h3>',
				$("#msglist").html(html);
			}else{
				$.each(data, function(Index,msg){
					
				   html+='<div data-role="collapsible" data-theme="c" data-content-theme="c" class="msginfo">';	
		           html+='<h3>'+msg.username+' 于 '+msg.sendtime+'</h3><p> '+msg.content+' </p>',
			       html+='<div class="ui-grid-a">';
			       html+='  <div class="ui-block-a">';
			       html+='     	<a href="#delmsg" data-rel="dialog" data-role="button" class="delmsg" data-theme="c" id="'+msg.mid+'">删除</a>';
			       html+='  </div>';
			       html+='  <div class="ui-block-b">';
			       html+='     <a href="#reply" data-rel="dialog" data-role="button" data-theme="b" id="'+msg.fromid+'" class="replyname">回复</a>';
			       html+='</div></div></div>';
				});
		       $("#msglist").html(html).trigger("pagecreate");
		       
				//$("#primsgview").trigger("pagecreate");
				//$("ul").listview("refresh");
				//$("#msglist").buttonMarkup();
				$('#msglist').collapsibleset('refresh');
			}
				$.mobile.changePage($("#primsgview"));
		}
	);
});

HTML内容：

<div data-role="collapsible-set" id="msglist">
<!-- 消息显示位置 -->
</div>

转载于:https://my.oschina.net/geomen/blog/60259