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

来源：互联网发布：圣菲概预算软件编辑：程序博客网时间：2024/06/06 16:25

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

01<script>
02  <!--
03$(document).bind("mobileinit",function(){
04});
05 
06$( function() {
07    //默认设置，一个小圈圈在转
08    $('#default').live('tap', function() {
09      $.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代码：

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