`
hyshucom
  • 浏览: 808294 次
文章分类
社区版块
存档分类
最新评论

跨平台移动开发实战(六)------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"} );


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics