点击某个按钮或链接时,触发等待加载效果:
<script>
<!--
$(document).bind("mobileinit", function(){
});
$( function() {
//默认设置,一个小圈圈在转
$('#default').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = false;
$.mobile.showPageLoadingMsg();
} );
//小圈子外围加矩形的背景
$('#loadingMessageTextVisible').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessageTheme = 'a';
$.mobile.showPageLoadingMsg();
} );
//矩形背景样式为e
$('#loadingMessageTheme').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessageTheme = 'e';
$.mobile.showPageLoadingMsg();
} );
//小圈子下面加上文字
$('#customText').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg( 'a', "Please wait..." );
} );
//只有文字,没有小圈子在转
$('#noSpinner').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg( 'a', "Please wait...", true );
} );
} );
-->
</script>
HTML代码:
<p><a id="default" data-role="button">Default Loader</a></p>
<p><a id="loadingMessageTextVisible" data-role="button">loadingMessageTextVisible = true</a></p>
<p><a id="loadingMessageTheme" data-role="button">loadingMessageTheme = 'e'</a></p>
<p><a id="customText" data-role="button">Custom Text</a></p>
<p><a id="noSpinner" data-role="button">No Spinner</a></p>
http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/loading.html
http://my.oschina.net/geomen/blog/60259
jqueryMobile插件仿iPhone滑动出现删除按钮
http://www.oschina.net/code/snippet_152736_17798
jquery mobile 侧滑插件
http://mmenu.frebsite.nl/
jQuery Mobile十大常用技巧
http://blog.csdn.net/hezudao25/article/details/8052785
jquery mobile 中文手册API
http://www.lampweb.org/jquerymobile/5/11.html
JqueryMobile 动态添加元素css丢失的终极解决办法
http://blog.csdn.net/lgd5979/article/details/7161339
Bootstrap中文网
http://v3.bootcss.com/
jQuery插件库
http://www.jq22.com/
移动开发必备!15款jQuery Mobile插件
http://www.csdn.net/article/2013-11-22/2817596-15-jquery-mobile-plugins-for-mobile-dev/1
分享到:
相关推荐
在移动Web开发中,jQuery Mobile是一个非常流行的框架,它提供了丰富的UI组件和交互效果,使得在手机和平板设备上构建响应式、触摸友好的网页变得简单。本篇将深入探讨如何利用jQuery Mobile和Ajax实现滚动加载内容...
- **增强页面(Enhancement)**:当页面加载时,jQuery Mobile 自动检测并增强元素,提供触屏友好的交互效果。 - **事件(Events)**:jQuery Mobile 提供了特定的事件,如 `pageinit`(页面初始化)和 `tap`(轻触...
**jQuery图片延迟加载技术详解** 在网页设计中,图片加载是一项关键任务,尤其对于内容丰富的网站,如果所有图片一次性加载,可能会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发人员引入了“图片...
在探讨如何让jQuery Mobile不在显示其加载界面之前,首先需要了解什么是jQuery Mobile以及它的加载界面出现的条件和原因。 jQuery Mobile是一款基于jQuery的JavaScript库,专为移动应用开发而设计,可以用来创建...
jQuery Mobile 有一套专门针对触摸事件的API,如`vclick`(模拟点击)、`swipe`(滑动)和`pagechange`(页面变化)。这些事件可以帮助你实现更丰富的交互效果。 八、主题系统 jQuery Mobile 使用主题系统...
书中的源码部分则为读者提供了动手实践的机会,通过解压并研究`jQueryMobile权威指南源码.zip`,读者可以将理论知识应用于实际,进一步提升技能。 总之,《jQuery Mobile权威指南》是学习和掌握jQuery Mobile的宝贵...
### 基于jQuery Mobile的雅虎新闻应用详解 #### 一、项目概述与功能特点 本项目是一款基于jQuery Mobile框架构建的雅虎新闻阅读应用,主要针对移动设备设计,旨在提供一种轻量级的新闻浏览体验。通过利用jQuery ...
总结一下,在使用jQuery Mobile框架进行页面开发时,如果需要在用户界面显示加载中效果,并确保在所有内容加载完毕后才关闭这个效果,推荐的实现方法是: 1. 使用`document.ready`事件来初始化页面布局和绑定必要的...
4. **预加载页面**:使用 `$.mobile.loadPage()` 预先加载页面,减少用户等待时间。 综上所述,jQuery Mobile 提供了丰富的组件和强大的功能,帮助开发者快速构建具有优秀用户体验的移动应用。结合其强大的事件处理...
5. **触控事件**:为了适应移动设备,jQuery Mobile 添加了针对触控操作的事件,如`vclick`(模拟鼠标点击)、`swipe`(滑动)、`taphold`(长按)。这些事件使得在触摸屏设备上实现复杂交互变得简单。 6. **性能...
3. **Font-face字体替换**:在jQuery Mobile应用中,font-face是最简便且性能良好的字体加载方法。 4. **额外jQuery调用**:在引入移动插件之前放置jQuery命令,确保它们在库加载前执行。 5. **基础页面模板**:...
3. **轻量化设计**:alpha版本的jQuery Mobile仅包含12KB的JavaScript和6KB的CSS,实现快速加载和高效运行。 4. **标记驱动配置**:无需复杂的JavaScript配置,通过HTML标记即可定义组件样式和行为。 5. **渐进...
- **触控优化**: jQuery Mobile 针对触控设备进行了专门优化,确保在手机和平板电脑上的滑动、点击等操作流畅自然。 - **页面结构和路由**: 使用数据属性(如 `data-role` 和 `data-url`)来定义页面结构和页面间...
例如,当读者翻到某一页时,如果该页内容需要从服务器获取,jQuery的$.ajax()或$.get()、$.post()方法可以方便地进行异步数据交换,提高用户体验,减少等待时间。 在《jQuery电子杂志》中,可能还运用了jQuery插件...
在jQuery Mobile中,导航通常是通过链接(`<a>`元素)来完成的,这些链接会被框架自动转换为Ajax导航,从而实现平滑的页面过渡效果,减少加载时间和用户等待时间。同时,框架还提供了工具栏(header、footer)、导航...
- 预加载下一张图片,减少用户等待时间。 - 使用事件节流或防抖技术,避免在短时间内频繁触发滑动事件。 总的来说,“jQuery手机腾讯网左右滚动切换效果”是一个结合了HTML、CSS和jQuery技术的实用示例,展示了如何...
标题中的“使用jQuery mobile NuGet让你的网站在移动设备上同样精彩”指的是通过引入jQuery Mobile库,使用NuGet包管理器来优化网站在移动设备上的显示效果。jQuery Mobile是一个轻量级、高度可定制的触控UI框架,...
2. **单一页面结构**:jQuery Mobile 使用单一页面架构,通过 AJAX 技术实现页面之间的平滑过渡,减少了页面加载时间和用户等待时间。 3. **可自定义的主题系统**:jQuery Mobile 提供了一套主题引擎,允许开发者...
这通常涉及到CSS3的触摸事件处理和手势识别,以及JavaScript库(如jQuery Mobile或Hammer.js)的帮助,来实现平滑的触摸反馈和动画效果。 自适应设计,也称为响应式设计,是使网站在不同设备上都能呈现良好视觉效果...