libs/js/jquery-mobile-1.2.0/docs/pages/loader.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Page Loading Widget</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17         <div data-role="page" class="type-interior">
  18         <script>
  19                 $(document).on("click", ".show-page-loading-msg", function() {
  20                         var $this = $( this ),
  21                                 theme = $this.jqmData("theme") || $.mobile.loader.prototype.options.theme,
  22                                 msgText = $this.jqmData("msgtext") || $.mobile.loader.prototype.options.text,
  23                                 textVisible = $this.jqmData("textvisible") || $.mobile.loader.prototype.options.textVisible,
  24                                 textonly = !!$this.jqmData("textonly");
  25                                 html = $this.jqmData("html") || "";
  26                         $.mobile.loading( 'show', {
  27                                         text: msgText,
  28                                         textVisible: textVisible,
  29                                         theme: theme,
  30                                         textonly: textonly,
  31                                         html: html
  32                         });
  33                 })
  34                 .on("click", ".hide-page-loading-msg", function() {
  35                         $.mobile.loading( 'hide' );
  36                 });
  37         </script>
  38
  39
  40                 <div data-role="header" data-theme="f">
  41                   <h1>Page Loading Widget</h1>
  42                   <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  43                   <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  44           </div><!-- /header -->
  45
  46           <div data-role="content">
  47                         <div class="content-primary">
  48                           <h2>The Page Loading Widget</h2>
  49
  50                           <p>The page loading dialog was previously configured globally with three settings <code>$.mobile.loadingMessage</code>, <code>$.mobile.loadingMessageTextVisible</code>, and <code>$.mobile.loadingMessageTheme</code> which are now deprecated. In addition to the methods for showing and hiding, <code>$.mobile.showPageLoadingMsg</code> and <code>$.mobile.hidePageLoadingMsg</code> are also deprecated.</p>
  51
  52         <p>The page loading widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. It can also be displayed manually for custom loading actions using the <code>$.mobile.loading</code> helper method (See the <a href="../api/methods.html">global method docs</a>).</p>
  53
  54         <p>To configure the loading dialog globally the following settings can be defined on its prototype during the <code>mobileinit</code> event.</p> Below are the defaults:
  55
  56         <pre>
  57           <code>
  58 $( document ).bind( 'mobileinit', function(){
  59   $.mobile.loader.prototype.options.text = "loading";
  60   $.mobile.loader.prototype.options.textVisible = false;
  61   $.mobile.loader.prototype.options.theme = "a";
  62   $.mobile.loader.prototype.options.html = "";
  63 });
  64           </code>
  65         </pre>
  66
  67         <p>These settings will be overridden by the deprecated settings to preserve backward compatibility. Once the deprecated settings are removed these defaults will only be superseded by the method params object described in the <a href="../api/methods.html">global method docs</a> under <code>$.mobile.loading</code>.</p>
  68
  69         <pre>
  70           <code>
  71 $.mobile.loading( 'show', {
  72         text: 'foo',
  73         textVisible: true,
  74         theme: 'z',
  75         html: ""
  76 });
  77           </code>
  78         </pre>
  79
  80         <h2>Loader examples</h2>
  81         <div data-role="controlgroup">
  82                 <button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="false" data-msgtext="" data-icon="arrow-r" data-iconpos="right">Default loader</button>
  83                 <button class="show-page-loading-msg" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Text only loader" data-icon="arrow-r" data-iconpos="right">Text only</button>
  84                 <button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme a" data-icon="arrow-r" data-iconpos="right">Theme a</button>
  85                 <button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme b" data-icon="arrow-r" data-iconpos="right">Theme b</button>
  86                 <button class="show-page-loading-msg" data-theme="c" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme c" data-icon="arrow-r" data-iconpos="right">Theme c</button>
  87                 <button class="show-page-loading-msg" data-theme="d" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme d" data-icon="arrow-r" data-iconpos="right">Theme d</button>
  88                 <button class="show-page-loading-msg" data-theme="e" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme e" data-icon="arrow-r" data-iconpos="right">Theme e</button>
  89                 <button class="show-page-loading-msg" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-icon="arrow-r" data-html="<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../_assets/images/jquery-logo.png' /><h2>is loading for you ...</h2></span>" data-iconpos="right">Custom HTML</button>
  90                 <button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Hide</button>
  91         </div>
  92
  93                         </div><!--/content-primary -->
  94
  95                         <div class="content-secondary">
  96
  97                                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
  98
  99                                         <h3>More in this section</h3>
 100
 101                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 102                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
 103                                                 <li><a href="page-anatomy.html">Anatomy of a page</a></li>
 104                                                 <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
 105                                                 <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
 106                                                 <li><a href="page-titles.html">Page titles</a></li>
 107                                                 <li><a href="page-links.html">Linking pages</a></li>
 108                                                 <li><a href="page-transitions.html">Page transitions</a></li>
 109                                                 <li data-theme="a"><a href="loader.html">Page loading widget</a></li>
 110                                 <li><a href="dialog/index.html">Dialogs</a></li>
 111                                 <li><a href="popup/index.html">Popups</a></li>
 112                                                 <li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
 113                                                 <li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
 114                                                 <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
 115                                                 <li><a href="page-scripting.html">Scripting pages</a></li>
 116                                                 <li><a href="phonegap.html">PhoneGap apps</a></li>
 117                                                 <li><a href="touchoverflow.html">touchOverflow feature</a></li>
 118                                                 <li><a href="pages-themes.html">Theming pages</a></li>
 119                                         </ul>
 120                                 </div>
 121                         </div>
 122
 123                 </div><!-- /content -->
 124
 125                 <div data-role="footer" class="footer-docs" data-theme="c">
 126                 <p class="jqm-version"></p>
 127                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 128                 </div>
 129         </div><!-- /page -->
 130 </body>
 131 </html>
 132