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

最新推荐文章于 2025-08-13 21:05:35 发布

转载最新推荐文章于 2025-08-13 21:05:35 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/geomen/blog/75365

文章标签：

#javascript #ViewUI

本文深入解析了编程领域中，为何大部分程序员未能成功转型为架构师的原因，从技能需求、思维方式及实践经验三个方面展开讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

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

<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

转载于:https://my.oschina.net/geomen/blog/75365