深入了解jQuery Mobile-3装载器

介绍

　　当jQuery Mobile通过Ajax加载内容或用于自定义通知时，会显示一个小的加载叠加层。

标准loader

　　$( document ).on( "click", ".show-page-loading-msg", function() {
    　　　 var $this = $( this ),
        　　theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
        　　msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
        　　textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
       　　 textonly = !!$this.jqmData( "textonly" );
       　　 html = $this.jqmData( "html" ) || "";
   　　 　$.mobile.loading( "show", {
            　　text: msgText,
           　　 textVisible: textVisible,
            　　theme: theme,
         　　   textonly: textonly,
          　　  html: html
   　　 });
　　})
　　.on( "click", ".hide-page-loading-msg", function() {
    　　　　$.mobile.loading( "hide" );
　　});

　　<button class="show-page-loading-msg" data-textonly="false" data-textvisible="false" data-msgtext="" data-inline="true">Icon (default)</button>
　　<button class="show-page-loading-msg" data-textonly="false" data-textvisible="true" data-msgtext="" data-inline="true">Icon + text</button>
　　<button class="show-page-loading-msg" data-textonly="true" data-textvisible="true" data-msgtext="Text only loader" data-inline="true">Text only</button>
　　<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>

自定义loader

　　<button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-inline="true" data-html="<span class="ui-bar ui-shadow ui-overlay-d ui-corner-all"><img src="../_assets/img/jquery-logo.png"><h2>is loading for you ...</h2></span>" data-iconpos="right">Custom HTML</button>
　　<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>