2013年04月03日

当我们使用Ajax或者javascript动态在页面上添加元素后，如添加select控件的option元素，添加ul的li元素。添加之后我们会发现，它们显示的样式不是jQuery Mobile的炫酷样式了，而变成了很丑陋的元素样式。如下图所示：

 

代码如下：

[html]   view plain copy

1. <</SPAN>script>  
2.     function myFunction() {  
3.         var ul = document.getElementById("myul");  
4.         var li1 = "<</SPAN>li data-role="fieldcontain">信息2</</SPAN>li>";  
5.         var li2 = "<</SPAN>li data-role="fieldcontain">信息3</</SPAN>li>";  
6.         ul.innerHTML += li1;  
7.         ul.innerHTML += li2;  
8.     }  
9. </</SPAN>script>  
10.   
11.   
12.  <</SPAN>ul data-role="listview" data-inset="true" id="myul">  
13.          <</SPAN>li data-role="list-divider">信息列表</</SPAN>li>  
14.          <</SPAN>li data-role="fieldcontain">信息1</</SPAN>li>  
15.  </</SPAN>ul>  

可以看到，jQuery Mobile并没有对于新添加的元素进行渲染。这种情况下就需要对元素的样式进行刷新。

刷新代码如下：

[html]   view plain copy

1. <</SPAN>script>  
2.     function myFunction() {  
3.         var ul = document.getElementById("myul");  
4.         var li1 = "<</SPAN>li data-role="fieldcontain">信息2</</SPAN>li>";  
5.         var li2 = "<</SPAN>li data-role="fieldcontain">信息3</</SPAN>li>";  
6.         ul.innerHTML += li1;  
7.         ul.innerHTML += li2;  
8.           
9.         //刷新jQuery Mobile样式  
10.         $('#myul').listview('refresh');  
11.     }  
12. </</SPAN>script>  

其实最重要的一句刷新代码是：$('#myul').listview('refresh');

刷新后的效果如下图所示：

 

注意：在使用js或者jQuery获取控件（例如：button、checkbox、radiobutton等）的值时，也是需要先刷新，否则无法获取到最新的值。

下面列出常用的标签的refresh操作，其他的可以举一反三。
1.  Listview的refresh操作:
$('#mylistid').listview('refresh');

2. select menu的refresh操作:
var myselect = $("#myselect");
myselect[0].selectedIndex = 2;
myselect.selectmenu("refresh");

3. Checkboxes的refresh操作:
$("#mycheckboxid").attr("checked",true).checkboxradio("refresh");

4. Radio buttons的refresh操作:
$("#myradioid").attr("checked",true).checkboxradio("refresh");

 

新加的：来自：http://hi.baidu.com/life_to_you/item/bf3621365fa5974b033edcbc

各类标签的刷新

1.Textarea fields

1 2	$( 'body' ).prepend( ' ' ); $( '#myTextArea' ).textinput();

2.Text input fields

1 2	$( 'body' ).prepend( '' ); $( '#myTextField' ).textinput();

3.Buttons

1 2	$( 'body' ).append( 'testing' ); $( '#myNewButton' ).button();

4.Combobox or select dropdowns

1 2 3 4 5 6 7 8 9 10

for = "sCountry" >Country: "">Where You Live:"ad">Andorra"ae">United Arab Emirates   var   myselect = $( "#sCountry" ); myselect[0].selectedIndex = 3; myselect.selectmenu( 'refresh' );

5.Listviews

1 2 3 4 5 6 7

"myList"data-role="listview"data-inset="true"> Acura Audi BMW   $( '#mylist' ).listview( 'refresh' );

6.Slider control

1 2 3 4 5 6

"fieldcontain">   for = "slider-2" >Input slider: "range"id="slider-2"value="25"min="0"max="100"/>   $( '#slider-2' ).val(80).slider( 'refresh' );

7.Toggle switch

1 2 3 4 5 6 7 8 9 10 11

"fieldcontain">   for = "toggle" >Flip switch : "off">Off"on">On   var   myswitch = $( "#toggle" ); myswitch[0].selectedIndex = 1; myswitch .slider( "refresh" );

8.Radio buttons

1 2 3 4 5 6 7 8 9 10 11 12 13

"fieldcontain">      "controlgroup"data-type="horizontal">        Layout view:            "radio"name="radio-view"value="list"/>            for="radio-view-a">List            "radio"name="radio-view"value="grid"/>            for="radio-view-b">Grid            "radio"name="radio-view"value="gallery"/>            for="radio-view-c">Gallery        $( "input[value=grid]" ).attr( 'checked' , true ).checkboxradio( 'refresh' );

9.Checkboxes

1 2 3 4 5 6 7 8 9

"fieldcontain"> "controlgroup"> Agree to the terms: "checkbox"name="checkbox-1"id="checkbox-1"class="custom"/>   for = "checkbox-1" >I agree   $( '#checkbox-1' ).attr( 'checked' , true ).checkboxradio( 'refresh' );