jquery Mobile點擊顯示加載等待效果

點擊某個按鈕或鏈接時，觸發等待加載效果：

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><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