libs/js/jquery-mobile-1.2.0/docs/pages/popup/events.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 - Popup</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
  19                 <div data-role="header" data-theme="f">
  20                 <h1>Popup</h1>
  21                 <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  22                 <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  23         </div><!-- /header -->
  24
  25         <div data-role="content" class="ui-body">
  26                 <div class="content-primary">
  27
  28                 <form action="#" method="get">
  29
  30                         <h2>Popup</h2>
  31
  32                         <ul data-role="controlgroup" data-type="horizontal" class="localnav">
  33                                 <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
  34                                 <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
  35                                 <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
  36                                 <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
  37                         </ul>
  38
  39                         <p>The popup plugin has the following custom events:</p>
  40
  41         <dl>
  42
  43                 <dt><code>popupbeforeposition</code> triggered after a popup has completed preparations for opening, but has not yet opened</dt>
  44                 <dd>
  45
  46                         <pre><code>
  47 $( ".selector" ).bind({
  48    popupbeforeposition: function(event, ui) { ... }
  49 });
  50                         </code></pre>
  51                         <p>This event is triggered when the popup has completed preparations for appearing on the screen. At this point the popup has not started the animations and it has not yet calculated the coordinates where it will appear on the screen. Handling this event gives an opportunity to modify the content of the popup before it appears on the screen. For example, the content can be scaled or parts of it can be hidden or removed if it is too wide or too tall.</p>
  52                 </dd>
  53
  54                 <dt><code>popupafteropen</code> triggered after a popup has completely opened</dt>
  55                 <dd>
  56
  57                         <pre><code>
  58 $( ".selector" ).bind({
  59    popupafteropen: function(event, ui) { ... }
  60 });
  61                         </code></pre>
  62                         <p>This event is triggered when the popup has completely appeared on the screen, meaning that all associated animations have completed.</p>
  63                 </dd>
  64
  65                 <dt><code>popupafterclose</code> triggered when a popup has completely closed</dt>
  66                 <dd>
  67
  68                         <pre><code>
  69 $( ".selector" ).bind({
  70    popupafterclose: function(event, ui) { ... }
  71 });
  72                         </code></pre>
  73                         <p>This event is triggered when the popup has completely disappeared from the screen, meaning that all associated animations have completed.</p>
  74                 </dd>
  75
  76         </dl>
  77
  78         </form>
  79         </div><!--/content-primary -->
  80
  81                                 <div class="content-secondary">
  82
  83                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
  84
  85                                                         <h3>More in this section</h3>
  86
  87                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
  88
  89                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
  90                                                                 <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
  91                                                                 <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
  92                                                                 <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
  93                                                                 <li><a href="../page-titles.html">Page titles</a></li>
  94                                                                 <li><a href="../page-links.html">Linking pages</a></li>
  95                                                                 <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
  96                                                                 <li><a href="../loader.html">Page loading widget</a></li>
  97                                                                 <li><a href="../dialog/index.html">Dialogs</a></li>
  98                                                                 <li data-theme="a"><a href="index.html">Popups</a></li>
  99                                                                 <li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
 100                                                                 <li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
 101                                                                 <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
 102                                                                 <li><a href="../page-scripting.html">Scripting pages</a></li>
 103                                                                 <li><a href="../phonegap.html">PhoneGap apps</a></li>
 104                                                                 <li><a href="../touchoverflow.html">touchOverflow feature</a></li>
 105                                                                 <li><a href="../pages-themes.html">Theming pages</a></li>
 106
 107                                                         </ul>
 108                                         </div>
 109                                 </div>
 110
 111 </div><!-- /content -->
 112
 113 <div data-role="footer" class="footer-docs" data-theme="c">
 114                 <p class="jqm-version"></p>
 115                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 116 </div>
 117
 118 </div><!-- /page -->
 119
 120 </body>
 121 </html>