-
Notifications
You must be signed in to change notification settings - Fork 60
/
Copy pathpage.xml
226 lines (217 loc) · 11.1 KB
/
page.xml
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="../entries2html.xsl" ?>
<entry name="page" namespace="fn" type="widget" widgetnamespace="mobile" event-prefix="page" init-selector=":jqmData(role='page')">
<title>Page Widget</title>
<desc>Primary unit of content.</desc>
<longdesc>
<h2>Pages</h2>
<p>The page widget is responsible for managing a single item in jQuery Mobile's page-based architecture. It is designed to support either single page widgets within a HTML document, or multiple local internal linked page widgets within a HTML document.</p>
<p>The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
<p>The page widget will auto-enhance its content upon creation. This means that it will instantiate widgets on its child elements by invoking <a href="/enhanceWithin/"><code>.enhanceWithin()</code></a> on itself.</p>
<h3>Dialogs</h3>
<p>The <placeholder name="name"/> widget has the option <code>dialog</code> which you can set to <code>true</code> to obtain a page styled like a dialog, such as in the example below:
<pre><code><![CDATA[
<div data-role="page" data-dialog="true">
<div data-role="header">
<h2>Are you sure?</h2>
</div>
<div class="ui-content" role="main">
<h2>Are you sure you wish to exit the application?</h2>
<p>You have unsaved changes. If you exit without saving them, you will lose them.</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" id="exit-button" class="ui-btn ui-btn-b ui-shadow ui-corner-all">Exit</a>
</div>
<div class="ui-block-b">
<a href="#" id="cancel-button" class="ui-btn ui-shadow ui-corner-all">Cancel</a>
</div>
</div>
</div>
</div>
]]></code></pre>
<iframe src="/resources/page/example0.html" style="width:100%;height:420px;border:0px"></iframe></p>
<p id="closing-dialog">You can programmatically close a page styled as a dialog by navigating to another page. For example, you can use the <code>pagecontainer</code> <a href="/pagecontainer/#method-change"><code>change</code></a> method:
<pre><code><![CDATA[
$( ":mobile-pagecontainer" ).pagecontainer( "change", "somepage.html" );
]]></code></pre></p>
<p>You can also simply go back:
<pre><code><![CDATA[
$.mobile.back();
]]></code></pre></p>
</longdesc>
<added>1.0</added>
<options>
<option name="classes" type="Object">
<default>{}</default>
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="closeBtn" type="String" default='"left"' example-value='"none"'>
<desc>This option is provided by the <code>dialog</code> extension.
<p>Sets the position of the dialog close button in the header.</p>
<p>Possible values:
<dl>
<dt>"left"</dt>
<dd>The button will be placed on the left edge of the titlebar.</dd>
<dt>"right"</dt>
<dd>The button will be placed on the right edge of the titlebar.</dd>
<dt>"none"</dt>
<dd>The dialog will not have a close button.</dd>
</dl>
</p>
<p>This option is also exposed as a data attribute: <code>data-close-btn</code>.</p>
</desc>
</option>
<option name="closeBtnText" default='"Close"' example-value='"Fermer"'>
<desc>This option is provided by the <code>dialog</code> extension.
<p>Customizes the text of the close button which is helpful for translating this into different languages. The close button is displayed as an icon-only button by default so the text isn't visible on-screen, but is read by screen readers so this is an important accessibility feature.</p>
<p>This option is also exposed as a data attribute: <code>data-close-btn-text="Fermer"</code>.</p>
</desc>
<type name="String" />
</option>
<option name="contentTheme" type="String" default="null, inherited from parent" example-value='"b"' deprecated="1.4.0">
<desc>
<div class="warning">
<p><strong>Note:</strong>This option is deprecated in 1.4.0 and will be removed in 1.5.0.</p>
</div>
<p>Sets the color scheme (swatch) for the content <code>div</code> of the <placeholder name="name" /> widget. It accepts a single letter from a-z that maps to the swatches included in your theme.</p>
<p>Possible values: swatch letter (a-z).</p>
<p>This option is also exposed as a data attribute: <code>data-content-theme="b"</code>.</p>
</desc>
</option>
<option name="corners" type="Boolean" default="true" example-value="false">
<desc>This option is provided by the <code>dialog</code> extension.
<p>Sets whether to draw the dialog with rounded corners.</p>
<p>This option is also exposed as a data attribute: <code>data-corners="false"</code>.</p>
</desc>
</option>
<xi:include href="../includes/widget-option-defaults.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="degradeInputs" deprecated="1.4.0">
<desc>
<div class="warning">
<p><strong>Note:</strong>This option is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use <a href="/global-config/#degradeInputs"><code>$.mobile.degradeInputs</code></a> instead.</p>
</div>
</desc>
</option>
<option name="dialog" type="Boolean" default="false" example-value="true">
<desc>This option is provided by the <code>dialog</code> extension.
<p>Sets whether the page should be styled like a dialog.</p>
<p>This option is also exposed as a data attribute: <code>data-dialog="true"</code>.</p>
</desc>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="domCache" default="false" example-value="true">
<desc>
<p>Sets whether to keep the page in the DOM after the user has navigated away from it.</p>
<p>This option is also exposed as a data attribute: <code>data-dom-cache="true"</code>.</p>
</desc>
<type name="Boolean" />
</option>
<xi:include href="../includes/widget-option-initSelector.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="keepNative" default="null" example-value='".do-not-enhance"' deprecated="1.4.0">
<desc>
<div class="warning">
<p><strong>Note:</strong>This option is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use <code>$.mobile.keepNative</code> instead.</p>
</div>
<p>The value of this option is a selector that will be used in addition to the <a href="#option-keepNativeDefault">keepNativeDefault</a> option to prevent elements matching it from being enhanced.</p>
<p>This option is also exposed as a data attribute: <code>data-keep-native=".do-not-enhance</code>.</p>
</desc>
<type name="Selector" />
</option>
<option name="keepNativeDefault" default='":jqmData(role='none'), :jqmData(role='nojs')"' example-value='".do-not-enhance"' deprecated="1.4.0">
<desc>
<div class="warning">
<p><strong>Note:</strong>This option is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use <code>$.mobile.keepNative</code> instead.</p>
</div>
<p>The value of this option is a selector that will be used to prevent elements matching it from being enhanced.</p>
<p>This option is also exposed as a data attribute: <code>data-keep-native-default=".do-not-enhance</code>.</p>
</desc>
<type name="Selector" />
</option>
<option name="overlayTheme" type="String" default='"a"' example-value='"b"'>
<desc>This option is provided by the <code>dialog</code> extension.
<p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch "a" content color by default, but the data-overlay-theme attribute can be added to the element to set the overlay to any swatch letter.</p>
<p> Possible values: swatch letter (a-z)</p>
<p>This option is also exposed as a data attribute: <code>data-overlay-theme="b"</code>.</p>
</desc>
</option>
<option name="theme" default='"a"' example-value='"b"'>
<desc>
Sets the color scheme (swatch) for the <placeholder name="name" /> widget. It accepts a single letter from a-z that maps to the swatches included in your theme.
<p>Possible values: swatch letter (a-z).</p>
<p>This option is also exposed as a data attribute: <code>data-theme="b"</code>.</p>
</desc>
<type name="String" />
</option>
</options>
<events>
<event name="beforecreate">
<argument name="event" type="Event">
</argument>
<desc><p>Triggered before a page is created. If one of the handlers returns false, the page is not created.</p>
</desc>
</event>
<event name="create">
<argument name="event" type="Event">
</argument>
<desc><p>Triggered after a page has been created and enhancements to the page have been made.</p>
</desc>
</event>
</events>
<methods>
<method name="bindRemove">
<desc>Instruct the page to remove itself when it is hidden.
<p>Pages have both <code>data-external-page="true"</code> and <code>data-dom-cache="false"</code> when you call bindRemove(), otherwise the method will do nothing.</p>
</desc>
<signature example-params="function() { alert( 'Page hidden' ); }">
<argument name="callback" type="Function">
<desc>An optional callback to replace the internal handling of the page removal. The internal callback only removes the page if it is not being hidden as part of a same-page transition.</desc>
</argument>
</signature>
</method>
<method name="keepNativeSelector" return="Selector" deprecated="1.4.0">
<desc>
<div class="warning">
<p><strong>Note:</strong>This method is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. The new <a href="/global-config/#keepNative">keepNative</a> option replaces it.</p>
</div>
<p>Returns the selector used to filter elements which are not to be enhanced.</p>
</desc>
</method>
<method name="removeContainerBackground" deprecated="1.4.0">
<desc>
<div class="warning">
<p><strong>Note:</strong>This method is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.</p>
</div>
<p>Removes the background swatch from the page widget's container (usually the body).</p>
</desc>
</method>
<method name="setContainerBackground" example-params='"b"' deprecated="1.4.0">
<desc>
<div class="warning">
<p><strong>Note:</strong>This method is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.</p>
</div>
<p>Sets a new background swatch for the page widget's container (usually the body).</p>
</desc>
<argument name="theme" type="String">
</argument>
</method>
</methods>
<example>
<desc>A basic example of a page.</desc>
<html><![CDATA[
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page header (optional): Example page</h1>
</div>
<div role="main" class="ui-content">
<h2>Page content</h2>
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h1>Page footer (optional)</h1>
</div>
</div>
]]></html>
</example>
<category slug="widgets"/>
</entry>