首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 移动开发 > 移动开发 >

jquery Mobile点击展示加载等待效果

2013-10-10 
jquery Mobile点击显示加载等待效果 点击某个按钮或链接时,触发等待加载效果:现在贴出一个小例子的完整代

jquery Mobile点击显示加载等待效果

 点击某个按钮或链接时,触发等待加载效果:

现在贴出一个小例子的完整代码,其中包含了各种等待加载效果,


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" type="text/css"href="css/jquery.mobile-1.3.2.min.css"><script type="text/javascript" src="js/jquery-1.6.4.min.js"></script><script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script></head><script type="text/javascript">$(document).bind("mobileinit", function() {});$(function() {//默认设置,一个小圈圈在转$('#default').live('click', function() {//alert("ok");$.mobile.loadingMessageTextVisible = false;$.mobile.showPageLoadingMsg();});//小圈子外围加矩形的背景$('#loadingMessageTextVisible').live('click', function() {$.mobile.loadingMessageTextVisible = true;$.mobile.loadingMessageTheme = 'a';$.mobile.showPageLoadingMsg();});//矩形背景样式为e$('#loadingMessageTheme').live('click', function() {$.mobile.loadingMessageTextVisible = true;$.mobile.loadingMessageTheme = 'e';$.mobile.showPageLoadingMsg();});//小圈子下面加上文字$('#customText').live('click', function() {$.mobile.loadingMessageTextVisible = true;$.mobile.showPageLoadingMsg('a', "Please wait...");});//只有文字,没有小圈子在转$('#noSpinner').live('click', function() {$.mobile.loadingMessageTextVisible = true;$.mobile.showPageLoadingMsg('a', "Please wait...", true);});});</script><body><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></body></html>


热点排行