Jquery Mobile的页面刷新问题

Dear 丶 2022-08-26 14:25 203阅读 0赞

由于页面的控制和展现都放在了mobile客户端，所以UI的动态化就需要通过JS在客户端完成。针对JQM的动态化，主要用到以下两个技术：

*  JQM组件动态修改
 *  界面模板化

**1）JQM组件动态修改**

常常需要动态修改JQM某些组件的显示，由于它有独立与JQuery的自制组件渲染机制，所以修改DOM后需要额外的措施才能refresh界面显示，JQM这块做得不太友好，每个组件的方式不一样：

*  Textarea fields  
    
    
    **\[javascript\]**  [view plain][] [copy][view plain]
    
    1.  $('body').prepend('<textarea id="myTextArea"></textarea>');  
    2.  $('\#myTextArea').textinput();  
 *  Text input fields  
    
    
    **\[javascript\]**  [view plain][] [copy][view plain]
    
    1.  $('body').prepend('<input type="text" id="myTextField" />');  
    2.  $('\#myTextField').textinput();  
 *  Buttons  
    
    
    **\[javascript\]**  [view plain][] [copy][view plain]
    
    1.  $('body').append('<a href="" data-theme="e" id="myNewButton">testing</a>');  
    2.  $('\#myNewButton').button();  
 *  Combobox or select dropdowns  
    
    
    **\[javascript\]**  [view plain][] [copy][view plain]
    
    1.  <label **for**="sCountry">Country:</label>  
    2.  <select name="sCountry" id="sCountry">  
    3.  <option value="">Where You Live:</option>  
    4.  <option value="ad">Andorra</option>  
    5.  <option value="ae">United Arab Emirates</option>  
    6.  </select>  
    7.    
    8.  **var** myselect = $("\#sCountry");  
    9.  myselect\[0\].selectedIndex = 3;  
    10. myselect.selectmenu('refresh');  
 *  Listviews  
    
    
    **\[javascript\]**  [view plain][] [copy][view plain]
    
    1.  <ul id="myList" data-role="listview" data-inset="true">  
    2.  <li>Acura</li>  
    3.  <li>Audi</li>  
    4.  <li>BMW</li>  
    5.  </ul>  
    6.    
    7.  $('\#mylist').listview('refresh');  
 *  Slider control  
    
    
    **\[javascript\]**  [view plain][] [copy][view plain]
    
    1.  <div data-role="fieldcontain">  
    2.  <label **for**="slider-2">Input slider:</label>  
    3.  <input type="range" id="slider-2" value="25" min="0" max="100" />  
    4.  </div>  
    5.    
    6.  $('\#slider-2').val(80).slider('refresh');  
 *  Toggle switch  
    
    
    **\[javascript\]**  [view plain][] [copy][view plain]
    
    1.  <div data-role="fieldcontain">  
    2.  <label **for**="toggle">Flip **switch**:</label>  
    3.  <select name="toggle" id="toggle" data-role="slider">  
    4.  <option value="off">Off</option>  
    5.  <option value="on">On</option>  
    6.  </select>  
    7.  </div>  
    8.    
    9.  **var** myswitch = $("\#toggle");  
    10. myswitch\[0\].selectedIndex = 1;  
    11. myswitch .slider("refresh");  
 *  Radio buttons  
    
    
    **\[javascript\]**  [view plain][] [copy][view plain]
    
    1.  <div data-role="fieldcontain">  
    2.      <fieldset data-role="controlgroup" data-type="horizontal">  
    3.        <legend>Layout view:</legend>  
    4.            <input type="radio" name="radio-view" value="list" />  
    5.            <label **for**="radio-view-a">List</label>  
    6.            <input type="radio" name="radio-view" value="grid" />  
    7.            <label **for**="radio-view-b">Grid</label>  
    8.            <input type="radio" name="radio-view" value="gallery" />  
    9.            <label **for**="radio-view-c">Gallery</label>  
    10.     </fieldset>  
    11. </div>  
    12.   
    13. $("input\[value=grid\]").attr('checked',**true**).checkboxradio('refresh');  
 *  Checkboxes  
    
    
    **\[javascript\]**  [view plain][] [copy][view plain]
    
    1.  <div data-role="fieldcontain">  
    2.  <fieldset data-role="controlgroup">  
    3.  <legend>Agree to the terms:</legend>  
    4.  <input type="checkbox" name="checkbox-1" id="checkbox-1" **class**="custom" />  
    5.  <label **for**="checkbox-1">I agree</label>  
    6.  </fieldset>  
    7.  </div>  
    8.    
    9.  $('\#checkbox-1').attr('checked',**true**).checkboxradio('refresh');

**值得注意的是调用refresh的时机，你有时会发生UI组件未初始化的问题，这时解决方法就是先changePage到这个page，再改html，最后再refresh，如下所示：**

**\[javascript\]**  [view plain][] [copy][view plain]

1.  $.mobile.changePage( "\#msgLocalListPage", \{ transition: "flip"\} );  
2.  $("\#crNewToList").html("<li id='crNewToListTitle' data-role='list-divider' role='heading'>CR New to me List</li>");  
3.  $("\#crNewToList").listview("refresh");

**2）界面模板化**

在客户端也能基于模版技术来动态化页面显示，这里我使用了一个jquery template plugin：https://github.com/jquery/jquery-tmpl/，demo和doc里面都有，我就不多说，这里我想强调的是关于页面刷新，如果需要重复动态显示某一个page，我推荐把整个page都放在模版里，每次动态显示时都create这个page，这样就不要根据不同组件采用不同的界面刷新的方法，三个步骤：

1.  把数据塞进模版里：$( "\#crFilterTemplate" ).tmpl( data ).appendTo(document.body);
2.  create 一次性page：$("\#crFilterPage").attr( "data-" + $.mobile.ns + "external-page", true ).one( 'pagecreate', $.mobile.\_bindPageRemove );
3.  change page：$.mobile.changePage( "\#crFilterPage", \{ transition: "flip"\} );
4.

[view plain]: http://blog.csdn.net/cutesource/article/details/7769724#