由于页面的控制和展现都放在了mobile客户端,所以UI的动态化就需要通过JS在客户端完成。针对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,这样就不要根据不同组件采用不同的界面刷新的方法,三个步骤:
- 把数据塞进模版里:$( "#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"} );
分享到:
相关推荐
jQuery Mobile是目前*流行的跨平台移动开发框架,本书以实例驱动讲解的方式,让零基础的读者也能轻松掌握jQuery Mobile下的应用开发。本书分为4篇,*篇是移动开发入门篇,介绍了jQuery Mobile、HTML 5和移动开发的...
构建跨平台APP-jQuery.Mobile移动应用实战
开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...
包括移动开发和入门, jQuery Mobile控件、布局、跨平台开发和实战,发布和推广应用等
目前移动操作系统呈现多个系统共存的局面,开发者如果要迅速地开发...使用JQueryMobile和HTML5做移动应用程序的开发,具有开发简单,发布周期短、跨平台跨设备的优点。本文对JQueryMobile和HTML5的应用做了介绍和分析。
jquery.mobile-1.4.5 jquery.mobile-1.4.5 jquery.mobile-1.4.5
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jQuery Mobile 开发跨平台移动应用
最新jquery.mobile-1.4.0 jquery.mobile-1.4.0.zip 含Demos 最新jquery.mobile-1.4.0-UI(jQuery+CSS+images+demos.index.html) jquery.mobile-1.4.0.min.js jquery.mobile-1.4.0.js jquery.mobile-1.4.0.min....
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
jquery-starterkit jQuery开发包jquery-starterkit jQuery开发包jquery-starterkit jQuery开发包jquery-starterkit jQuery开发包
struts2-jquery-plugin-3.1.0.jar
jquery mobile 简明 教程 demo 移动 开发 精通 入门 jquery mobile 开发 移动 开发 安卓 手机 开发
前端项目-jquerymobile-router,jquery mobile router是jquery mobile的一个插件,它通过与jquery mobile事件一起工作的客户端路由器/控制器来增强框架。
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
jquery-mobile-theme-174943-0
jquery-mobile-player.zip
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...