libs/js/jquery-mobile-1.2.0/docs/pages/popup/options.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" class="ui-btn-active">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">Events</a></li>
  37                         </ul>
  38
  39                         <p>The popup plugin has the following options:</p>
  40
  41                 <dl>
  42
  43                         <dt><code>corners</code> <em>boolean</em></dt>
  44                         <dd>
  45                                 <p class="default">default: true</p>
  46                                 <p>Sets whether to draw the popup with rounded corners. This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;</code></p>
  47                                 <pre><code>$( ".selector" ).popup(<strong>{ corners: false }</strong>);</code></pre>
  48                         </dd>
  49
  50                         <dt><code>history</code> <em>boolean</em></dt>
  51                         <dd>
  52                                 <p class="default">default: true</p>
  53                                 <p>Sets whether to alter the url when a popup is open to support the back button. Also exposed as a data attribute: <code>data-history=&quot;false&quot;</code></p>
  54                                 <pre><code>$( ".selector" ).popup(<strong>{ history: false }</strong>);</code></pre>
  55                         </dd>
  56
  57                         <dt><code>initSelector</code> <em>CSS selector string</em></dt>
  58                         <dd>
  59                                 <p class="default">default: ":jqmData(role='popup')"</p>
  60                                 <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as popups. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
  61 <pre><code>$( document ).bind( "mobileinit", function(){
  62    <strong>$.mobile.popup.prototype.options.initSelector = ".mypopup";</strong>
  63 });
  64 </code></pre>
  65                         </dd>
  66
  67                         <dt><code>overlayTheme</code> <em>string</em></dt>
  68                         <dd>
  69                                 <p class="default">default: null</p>
  70                                 <p>Sets the color scheme (swatch) for the popup background, which covers the entire window. If not explicitly set, the background will be transparent.</p>
  71                                 <pre><code>$( ".selector" ).popup(<strong>{ overlayTheme: "a" }</strong>);</code></pre>
  72                                  <p>This option is also exposed as a data attribute: <code>data-overlay-theme=&quot;a&quot;</code></p>
  73                         </dd>
  74
  75                         <dt><code>positionTo</code> <em>string</em></dt>
  76                         <dd>
  77                                 <p class="default">default: "origin"</p>
  78                                 <p>Sets the element relative to which the popup will be centered. It has the following values:
  79                                         <table>
  80                                                 <tr><td class="enum-value"><code>"origin"</code></td><td>
  81                                                         When the popup opens, center over the coordinates passed to the <code>open()</code> call (see <a href="methods.html">methods</a> page).
  82                                                 </td></tr>
  83                                                 <tr><td class="enum-value"><code>"window"</code></td><td>
  84                                                         When the popup opens, center in the window.
  85                                                 </td></tr>
  86                                                 <tr><td class="enum-value">jQuery selector</td><td>
  87                                                         When the popup opens, create a jQuery object based on the selector, and center over it. The selector is filtered for elements that are visible with <code>":visible"</code>. If the result is empty, the popup will be centered in the window.
  88                                                 </td></tr>
  89                                         </table>
  90                                 </p>
  91                                  <p>This option is also exposed as a data attribute: <code>data-position-to=&quot;window&quot;</code></p>
  92                         </dd>
  93
  94                         <dt><code>shadow</code> <em>boolean</em></dt>
  95                         <dd>
  96                                 <p class="default">default: true</p>
  97                                 <p>Sets whether to draw a shadow around the popup. This option is also exposed as a data attribute: <code>data-shadow=&quot;false&quot;</code></p>
  98                                 <pre><code>$( ".selector" ).popup(<strong>{ shadow: false }</strong>);</code></pre>
  99                         </dd>
 100
 101                         <dt><code>theme</code> <em>string</em></dt>
 102                         <dd>
 103                                 <p class="default">default: null</p>
 104                                 <p>Sets the color scheme (swatch) for the popup contents. Unless explicitly set to <code>'none'</code>, the
 105                                 theme for the popup will be assigned the first time the popup is shown by inheriting the page theme or, failing that, by the hard-coded value <code>'c'</code>. If you set it to 'none', the popup will not have any theme at all, and will be transparent.</p>
 106                                 <pre><code>$( ".selector" ).popup(<strong>{ theme: "a" }</strong>);</code></pre>
 107                                  <p>This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>
 108                         </dd>
 109
 110                         <dt><code>tolerance</code> <em>string</em></dt>
 111                         <dd>
 112                                 <p class="default">default: "30,15,30,15"</p>
 113                                 <p>Sets the minimum distance from the edge of the window for the corresponding edge of the popup. By default, the values above will be used for the distance from the top, right, bottom, and left edge of the window, respectively.</p>
 114                                 <p>You can specify a value for this option in one of four ways:
 115                                         <ol>
 116                                                 <li>Empty string, null, or some other falsey value. This will cause the popup to revert to the above default values.</li>
 117                                                 <li>A single number. This number will be used for all four edge tolerances.</li>
 118                                                 <li>Two numbers separated by a comma. The first number will be used for tolerances from the top and bottom edge of the window, and the second number will be used for tolerances from the left and right edge of the window.</li>
 119                                                 <li>Four comma-separated numbers. The first will be used for tolerance from the top edge, the second for tolerance from the right edge, the third for tolerance from the bottom edge, and the fourth for tolerance from the left edge.</li>
 120                                         </ol>
 121                                 </p>
 122                         </dd>
 123
 124                         <dt><code>transition</code> <em>string</em></dt>
 125                         <dd>
 126                                 <p class="default">default: "none"</p>
 127                                 <p>Sets the default transition for the popup. The default value will result in no transition.</p>
 128                                 <p>If the popup is opened from a link, and the link has the <code>data-transition</code> attribute set, the value specified therein will override the value of this option at the time the popup is opened from the link.</p>
 129                         </dd>
 130
 131                 </dl>
 132
 133         </form>
 134         </div><!--/content-primary -->
 135
 136                                 <div class="content-secondary">
 137
 138                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 139
 140                                                         <h3>More in this section</h3>
 141
 142                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 143
 144                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
 145                                                                 <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
 146                                                                 <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
 147                                                                 <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
 148                                                                 <li><a href="../page-titles.html">Page titles</a></li>
 149                                                                 <li><a href="../page-links.html">Linking pages</a></li>
 150                                                                 <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
 151                                                                 <li><a href="../loader.html">Page loading widget</a></li>
 152                                                                 <li><a href="../dialog/index.html">Dialogs</a></li>
 153                                                                 <li data-theme="a"><a href="index.html">Popups</a></li>
 154                                                                 <li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
 155                                                                 <li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
 156                                                                 <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
 157                                                                 <li><a href="../page-scripting.html">Scripting pages</a></li>
 158                                                                 <li><a href="../phonegap.html">PhoneGap apps</a></li>
 159                                                                 <li><a href="../touchoverflow.html">touchOverflow feature</a></li>
 160                                                                 <li><a href="../pages-themes.html">Theming pages</a></li>
 161
 162                                                         </ul>
 163                                         </div>
 164                                 </div>
 165
 166 </div><!-- /content -->
 167
 168 <div data-role="footer" class="footer-docs" data-theme="c">
 169                 <p class="jqm-version"></p>
 170                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 171 </div>
 172
 173 </div><!-- /page -->
 174
 175 </body>
 176 </html>