jquery mobile介面資料重新整理

標籤：style   c   class   blog   code   java   

jquery mobile介面資料重新整理

JQM裡面當我們更新了某些頁面標籤(如: listview, radiobuttons, checkboxes, select menus)裡的資料時,必須做refresh操作.

為什麼必須做refresh操作操作呢?因為JQM在做頁面渲染的時候,為了使樣式跟用戶端程式相似, 隱藏了原始的標籤然後用一些新的標籤和自訂的樣式來表現原標籤,其實新樣式的標籤已經不是原來的標籤,所以更新了資料必須做refresh操作. 

各類標籤的重新整理

1.Textarea fields

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

2.Text input fields

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

3.Buttons

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

4.Combobox or select dropdowns

<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

<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

<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

<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

<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

<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‘);