jquery mobile界面数据刷新

jquery mobile界面数据刷新

JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, checkboxes, select menus)里的数据时,必须做refresh操作.

为什么必须做refresh操作操作呢?因为JQM在做页面渲染的时候,为了使样式跟客户端程序相似, 隐藏了原始的标签然后用一些新的标签和自定义的样式来表现原标签,其实新样式的标签已经不是原来的标签,所以更新了数据必须做refresh操作.

 

各类标签的刷新

1.Textarea fields

1 2	$( 'body' ).prepend( '<textarea id="myTextArea"></textarea>' ); $( '#myTextArea' ).textinput();

2.Text input fields

1 2	$( 'body' ).prepend( '<input type="text" id="myTextField" />' ); $( '#myTextField' ).textinput();

3.Buttons

1 2	$( 'body' ).append( '<a href="" data-theme="e" id="myNewButton">testing</a>' ); $( '#myNewButton' ).button();

4.Combobox or select dropdowns

1 2 3 4 5 6 7 8 9 10

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

5.Listviews

1 2 3 4 5 6 7

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

6.Slider control

1 2 3 4 5 6

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

7.Toggle switch

1 2 3 4 5 6 7 8 9 10 11

<div data-role= "fieldcontain" > <label  for = "toggle" >Flip  switch :</label> <select name= "toggle"  id= "toggle"  data-role= "slider" > <option value= "off" >Off</option> <option value= "on" >On</option> </select> </div>    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

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

9.Checkboxes

1 2 3 4 5 6 7 8 9

<div data-role= "fieldcontain" > <fieldset data-role= "controlgroup" > <legend>Agree to the terms:</legend> <input type= "checkbox"  name= "checkbox-1"  id= "checkbox-1"  class= "custom"  /> <label  for = "checkbox-1" >I agree</label> </fieldset> </div>    $( '#checkbox-1' ).attr( 'checked' , true ).checkboxradio( 'refresh' );

 

JQM动态渲染各种问题的解决办法：

1、select动态渲染——“cannot call methods on selectmenu prior to initialization; attempted to call”

1 $('#selectID').selectmenu();
2 $('#selectID').selectmenu("refresh");

 

代码改变世界，我的《源代码》，我的世界！