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

點擊某個按鈕或連接時,觸發等待加載效果: javascript

Xml代碼   收藏代碼
  1. <script>  
  2.   <!--  
  3. $(document).bind("mobileinit", function(){  
  4. });  
  5.   
  6. $( function() {  
  7.     //默認設置,一個小圈圈在轉  
  8.     $('#default').live( 'tap', function() {  
  9.       $.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代碼: css

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


http://my.oschina.net/geomen/blog/60259 


jqueryMobile插件仿iPhone滑動出現刪除按鈕 
http://www.oschina.net/code/snippet_152736_17798 

jquery mobile 側滑插件 
http://mmenu.frebsite.nl/ 

jQuery Mobile十大經常使用技巧 
http://blog.csdn.net/hezudao25/article/details/8052785 

jquery mobile 中文手冊API 
http://www.lampweb.org/jquerymobile/5/11.html 

JqueryMobile 動態添加元素css丟失的終極解決辦法 
http://blog.csdn.net/lgd5979/article/details/7161339 

Bootstrap中文網 
http://v3.bootcss.com/ 

jQuery插件庫 
http://www.jq22.com/ 


移動開發必備!15款jQuery Mobile插件 
http://www.csdn.net/article/2013-11-22/2817596-15-jquery-mobile-plugins-for-mobile-dev/1 html

相關文章
相關標籤/搜索