点击某个按钮或链接时,触发等待加载效果:
HTML代码:
来源:
http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/loading.html
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> |
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 > |