跨平臺移動開發實戰（六）------Jquery mobile的動態化

由於頁面的控制和展現都放在了mobile客戶端，所以UI的動態化就需要通過JS在客戶端完成。針對JQM的動態化，主要用到以下兩個技術：

• JQM組件動態修改
• 界面模板化

1）JQM組件動態修改

常常需要動態修改JQM某些組件的顯示，由於它有獨立與JQuery的自制組件渲染機制，所以修改DOM後需要額外的措施才能refresh界面顯示，JQM這塊做得不太友好，每個組件的方式不一樣：

• Textarea fields
  

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

• Text input fields
  

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

• Buttons
  

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

• 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');

• Listviews
  

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

• 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');

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

• 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');

• 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');

值得注意的是調用refresh的時機，你有時會發生UI組件未初始化的問題，這時解決方法就是先changePage到這個page，再改html，最後再refresh，如下所示：

$.mobile.changePage( "#msgLocalListPage", { transition: "flip"} );
$("#crNewToList").html("<li id='crNewToListTitle' data-role='list-divider' role='heading'>CR New to me List</li>");
$("#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"} );