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

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

Xml代码  收藏代码
  1. <script>  
  2.   <!--  
  3. $(document).bind("mobileinit", function(){  
  4. });  
  5.   
  6. $( function() {  
  7.     //默认设置,一个小圈圈在转  
  8.     $('#default').live( 'tap', function() {  
  9.       $.mobile.loadingMessageTextVisible = false;  
  10.       $.mobile.showPageLoadingMsg();  
  11.     } );  
  12.     //小圈子外围加矩形的背景  
  13.     $('#loadingMessageTextVisible').live( 'tap', function() {  
  14.     $.mobile.loadingMessageTextVisible = true;  
  15.     $.mobile.loadingMessageTheme = 'a';  
  16.         $.mobile.showPageLoadingMsg();  
  17.     } );  
  18.     //矩形背景样式为e  
  19.     $('#loadingMessageTheme').live( 'tap', function() {  
  20.     $.mobile.loadingMessageTextVisible = true;  
  21.     $.mobile.loadingMessageTheme = 'e';  
  22.         $.mobile.showPageLoadingMsg();  
  23.     } );  
  24.     //小圈子下面加上文字  
  25.     $('#customText').live( 'tap', function() {  
  26.     $.mobile.loadingMessageTextVisible = true;  
  27.         $.mobile.showPageLoadingMsg( 'a', "Please wait..." );  
  28.     } );  
  29.     //只有文字,没有小圈子在转  
  30.     $('#noSpinner').live( 'tap', function() {  
  31.     $.mobile.loadingMessageTextVisible = true;  
  32.         $.mobile.showPageLoadingMsg( 'a', "Please wait...", true );  
  33.     } );  
  34.   
  35.   } );  
  36.   -->  
  37. </script>  



HTML代码: 

Xml代码  收藏代码
  1. <p><id="default" data-role="button">Default Loader</a></p>  
  2. <p><id="loadingMessageTextVisible" data-role="button">loadingMessageTextVisible = true</a></p>  
  3. <p><id="loadingMessageTheme" data-role="button">loadingMessageTheme = 'e'</a></p>  
  4. <p><id="customText" data-role="button">Custom Text</a></p>  
  5. <p><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 

posted @ 2014-07-16 09:16  技术狂  阅读(1001)  评论(0编辑  收藏  举报