由于页面的控制和展现都放在了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 框架,简化了移动 Web 开发,使开发者能够快速创建跨平台、设备兼容的用户界面。本资源包含的"jquery-mobile移动开发源代码"是一个很好的入门实例,对于有 HTML 和 JavaScript 基础的开发者来说,是...
### jQuery Mobile 开发跨平台移动应用 #### 一、jQuery Mobile 概述 **1.1 本地应用还是Web应用** 随着移动互联网的发展,开发者面临着一个重要的选择:应该开发原生应用(Native App)还是Web应用?原生应用...
《jQuery Mobile 1.0.1:轻量级的移动Web开发框架》 在Web开发领域,jQuery Mobile是一个广泛使用的框架,特别适用于构建响应式、触摸友好的移动应用。本篇将深入探讨jQuery Mobile 1.0.1版本,包括其核心组件`...
`jQuery Mobile` 是一个基于 `jQuery` 库的轻量级、跨平台的框架,专为触摸设备设计,旨在简化移动 Web 开发。它提供了一套完整的用户界面(UI)组件和交互模式,允许开发者创建具有高度互动性和一致性的移动应用...
1. **统一的触控体验**:jQuery Mobile提供了一套跨平台的触控事件处理机制,确保在各种设备上的滑动、点击等操作有统一的反馈。 2. **自动页面导航**:通过数据-URL(data-url)属性和页面容器,jQuery Mobile可以...
**jQuery Mobile** 通过一套统一的 CSS 和 JavaScript 代码库来构建跨平台的移动应用。它利用 HTML5 和 CSS3 的最新特性,并通过 jQuery 的强大功能实现页面元素的动态加载和交互效果。 - **统一设计**:无论用户...
这个框架是基于流行的JavaScript库jQuery构建的,旨在简化跨平台开发,支持全球主流的移动设备和浏览器,包括iOS、Android、Windows Phone等。`jquery.mobile-1.4.5.zip` 文件包含了jQuery Mobile 1.4.5版本的所有...
版本1.3.2是该框架的一个重要里程碑,提供了丰富的功能和优化,使得开发者能够更加高效地创建跨平台、响应式的移动界面。 首先,jQuery Mobile的核心是其触控友好的UI组件库,包括导航栏、表单、按钮、滑块、网格...
jQuery Mobile 是一个专为触摸设备设计的前端框架,它简化了移动Web应用的开发,使得开发者能够快速构建用户界面,适用于多种智能手机和平板电脑。在这个压缩包文件"jquery.mobile-1.3.2.min"中,包含的核心组件是...
在移动应用开发中,将HTML5、jQuery Mobile和Android结合可以构建出跨平台的轻量级应用程序,尤其适合快速原型开发或对原生功能的轻度集成。本教程将聚焦于如何利用jQuery Mobile和HTML5来访问并操作Android设备上的...
jQuery Mobile的主要优点包括跨平台兼容性、一致的用户界面和简单的API,使得开发者可以快速构建功能丰富的移动应用。 在jqmDemo中,我们可以看到多个HTML文件,如iOS-Inspired.html、index.html、content.html、...
这个框架提供了丰富的 UI 组件和交互效果,使得开发者能够快速构建具有触控优化界面的跨平台应用。本案例将深入探讨如何使用 jQuery Mobile 创建一个简单的移动端原型设计。 ### 一、jQuery Mobile 的核心概念 1. ...
`jq-mobile`,全称为jQuery Mobile,是一款基于jQuery库开发的轻量级、跨平台的移动Web应用框架,专为触摸设备设计。它提供了丰富的UI组件和交互效果,便于开发者快速构建功能完善的、具有原生App体验的移动Web应用...
5. 动态加载与Ajax导航:jQueryMobile默认使用Ajax技术实现页面间的平滑过渡,但需注意处理页面依赖和初始化问题。 6. 自定义主题:使用Themeroller工具,可以快速定制符合品牌风格的主题色和样式。 7. 性能优化:...
它通过使用数据属性和链接增强技术,简化了页面导航和表单处理,使得开发者能够快速构建跨平台的移动应用。在新闻阅读器开发过程中,jQuery Mobile可以有效地处理新闻列表的滚动、点击事件以及页面间的切换,提升...
它基于 jQuery 和 jQuery UI,提供了丰富的组件、统一的事件处理以及优化的触控交互,使得开发者能够轻松创建跨平台、跨浏览器的移动应用。 首先,我们要理解jQuery Mobile的核心理念。它强调的是“Write Less, Do ...
jQuery Mobile是专门为移动设备设计的一套基于jQuery的库,它允许开发者使用统一的编程模型来构建跨平台的移动应用程序。 紧接着,文档的描述部分补充了这本书的详细信息,包括作者Jonathan Reid,出版社为O’...
JavaScript,jQuery Mobile和Node.js是现代网页开发中的关键技术,它们各自扮演着不同的角色,而将它们结合起来可以创建出强大的、跨平台的网页应用。在这个项目中,我们看到这三个技术的融合,为开发者提供了从桌面...
【标题】中的"W3school"、"jquery"、"jquerymobile"和"css"都是Web开发中的关键元素,它们代表了不同的技术栈和框架。以下是对这些知识点的详细阐述: **W3School**:这是一个非常知名的在线学习平台,提供丰富的...