This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
/
options.html
142 lines (112 loc) · 5.95 KB
/
options.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Popup</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
<script src="../../../js/jquery.js"></script>
<script src="../../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Popup</h1>
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
<h2>Popup</h2>
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>The popup plugin has the following options:</p>
<dl>
<dt><code>overlayTheme</code> <em>string</em></dt>
<dd>
<p class="default">default: null</p>
<p>Sets the color scheme (swatch) for the popup border and background. If initially unset, and the popup is used
in association with a link that has <code>data-rel="popup"</code> set, this attribute will be set when the popup
is invoked from the link.</p>
<pre><code>$('.selector').popup(<strong>{ overlayTheme: "a" }</strong>);</code></pre>
<p>This option is also exposed as a data attribute: <code>data-overlay-theme="a"</code></p>
</dd>
<dt><code>theme</code> <em>string</em></dt>
<dd>
<p class="default">default: null</p>
<p>Sets the color scheme (swatch) for the popup contents. If initially unset, and the popup is used
in association with a link that has <code>data-rel="popup"</code> set, this attribute will be set when the popup
is invoked from the link.</p>
<pre><code>$('.selector').popup(<strong>{ theme: "a" }</strong>);</code></pre>
<p>This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
</dd>
<dt><code>initSelector</code> <em>CSS selector string</em></dt>
<dd>
<p class="default">default: ":jqmData(role='popup')"</p>
<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>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.popup.prototype.options.initSelector = ".mypopup";</strong>
});
</code></pre>
</dd>
<dt><code>shadow</code> <em>boolean</em></dt>
<dd>
<p class="default">default: true</p>
<p>Sets whether to draw a shadow around the popup. This option is also exposed as a data attribute: <code>data-shadow="true"</code></p>
<pre><code>$('.selector').popup(<strong>{ shadow: true }</strong>);</code></pre>
</dd>
<dt><code>corners</code> <em>boolean</em></dt>
<dd>
<p class="default">default: true</p>
<p>Sets whether to draw the popup with rounded corners. This option is also exposed as a data attribute: <code>data-corners="true"</code></p>
<pre><code>$('.selector').popup(<strong>{ corners: true }</strong>);</code></pre>
</dd>
<dt><code>fade</code> <em>boolean</em></dt>
<dd>
<p class="default">default: true</p>
<p>Sets whether the popup's background fades as the popup appears. This option is also exposed as a data attribute: <code>data-fade="true"</code></p>
<pre><code>$('.selector').popup(<strong>{ fade: true }</strong>);</code></pre>
</dd>
<dt><code>transition</code> <em>string</em></dt>
<dd>
<p class="default">default: $.mobile.defaultDialogTransition</p>
<p>Sets the <a href="../page-transitions.html">transition</a> to use as the popup appears. This option is also exposed as a data attribute: <code>data-transition="pop"</code></p>
<pre><code>$('.selector').popup(<strong>{ transition: "pop" }</strong>);</code></pre>
</dd>
</dl>
</form>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Pages & Dialogs</li>
<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
<li><a href="../page-titles.html">Page titles</a></li>
<li><a href="../page-links.html">Linking pages</a></li>
<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
<li><a href="../page-dialogs.html">Dialogs</a></li>
<li data-theme="a"><a href="index.html">Popups</a></li>
<li><a href="../page-cache.html">Prefetching & caching pages</a></li>
<li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
<li><a href="../page-scripting.html">Scripting pages</a></li>
<li><a href="../pages-themes.html">Theming pages</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>