跨平台移动开发实战（六）------Jquery mobile的动态化

转自：http://blog.csdn.net/cutesource/article/details/7769724

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

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

1）JQM组件动态修改

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

• Textarea fields
  
  [javascript] view plaincopy

  1. $('body').prepend('<textarea id="myTextArea"></textarea>');  
  2. $('#myTextArea').textinput();  
• Text input fields
  
  [javascript] view plaincopy

  1. $('body').prepend('<input type="text" id="myTextField" />');  
  2. $('#myTextField').textinput();  
• Buttons
  
  [javascript] view plaincopy

  1. $('body').append('<a href="" data-theme="e" id="myNewButton">testing</a>');  
  2. $('#myNewButton').button();  
• Combobox or select dropdowns
  
  [javascript] view plaincopy

  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 plaincopy

  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 plaincopy

  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 plaincopy

  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 plaincopy

  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 plaincopy

  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 plaincopy

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"} );