Jquery Mobile的页面刷新问题-蒲公英云

Jquery Mobile的页面刷新问题

Dear 丶 2022-08-26 14:25 281阅读 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

$.mobile.changePage( “#msgLocalListPage”, { transition: “flip”} );
$(“#crNewToList”).html(“
CR New to me List
$(“#crNewToList”).listview(“refresh”);

2）界面模板化

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

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