查看: 1482|回复: 1

[技术交流] 5款jquery Mobile点击显示加载等待效果

[复制链接]
发表于 2015-7-29 15:09:54 | 显示全部楼层 |阅读模式
点击某个按钮或链接时,触发等待加载效果:
  1. <script>
  2.   <!--
  3. $(document).bind("mobileinit", function(){
  4. });

  5. $( function() {
  6.     //默认设置,一个小圈圈在转
  7.     $('#default').live( 'tap', function() {
  8.       $.mobile.loadingMessageTextVisible = false;
  9.       $.mobile.showPageLoadingMsg();
  10.     } );
  11.     //小圈子外围加矩形的背景
  12.     $('#loadingMessageTextVisible').live( 'tap', function() {
  13.     $.mobile.loadingMessageTextVisible = true;
  14.     $.mobile.loadingMessageTheme = 'a';
  15.         $.mobile.showPageLoadingMsg();
  16.     } );
  17.     //矩形背景样式为e
  18.     $('#loadingMessageTheme').live( 'tap', function() {
  19.     $.mobile.loadingMessageTextVisible = true;
  20.     $.mobile.loadingMessageTheme = 'e';
  21.         $.mobile.showPageLoadingMsg();
  22.     } );
  23.     //小圈子下面加上文字
  24.     $('#customText').live( 'tap', function() {
  25.     $.mobile.loadingMessageTextVisible = true;
  26.         $.mobile.showPageLoadingMsg( 'a', "Please wait..." );
  27.     } );
  28.     //只有文字,没有小圈子在转
  29.     $('#noSpinner').live( 'tap', function() {
  30.     $.mobile.loadingMessageTextVisible = true;
  31.         $.mobile.showPageLoadingMsg( 'a', "Please wait...", true );
  32.     } );

  33.   } );
  34.   -->
  35. </script>
复制代码
HTML代码:

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

使用道具 举报

发表于 2016-4-13 22:46:46 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表