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

最新推荐文章于 2023-10-10 16:37:54 发布

转载最新推荐文章于 2023-10-10 16:37:54 发布 · 2.8k 阅读

标签

#jquery #mobile #function

jqueryMobile 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用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>