Skip to content

Commit df39411

Browse files
agcolomagcolom
committed
Panel: Added external panel and enhancement
Fixes gh-362 Closes gh-370
1 parent 36f523c commit df39411

File tree

1 file changed

+49
-19
lines changed

1 file changed

+49
-19
lines changed

‎entries/panel.xml

+49-19
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,36 @@
3535
<p>To avoid blinks when opening a panel, we force hardware acceleration on WebKit browsers. The CSS that is used to do this can cause issues with buttons and form elements on the page if their container has a CSS multi-column layout (<code>column-count</code>). To resolve this you have to set the following rule for the element or its container:</p>
3636

3737
<pre><code><![CDATA[
38-
-webkit-transform: translate3d(0,0,0);
38+
-webkit-transform: translate3d( 0, 0, 0 );
3939
]]></code></pre>
4040

41+
<h3>External Panels</h3>
42+
<p>Since jQuery Mobile 1.4.0, it is also possible to have external panels. This means that you can now have panels located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page. This can be handy when you want to use the same panel on more than one page. </p>
43+
44+
<p>Here is an example of an external panel:</p>
45+
46+
<pre><code><![CDATA[
47+
<div data-role="page">
48+
<!-- header -->
49+
<!-- content -->
50+
<!-- footer -->
51+
</div><!-- page -->
52+
53+
<div data-role="panel" id="mypanel">
54+
<!-- panel content goes here -->
55+
</div><!-- /panel -->
56+
]]></code></pre>
57+
58+
<p>The panel can be enhanced manually as follows:</p>
59+
60+
<pre><code><![CDATA[
61+
$( function() {
62+
$( "#mypanel" ).panel();
63+
} );
64+
]]></code></pre>
65+
66+
<p>Note that if the panel contains other jQuery Mobile widgets, such as listviews, these will need to be enhanced manually as well.</p>
67+
4168
<h3>Panel markup conventions</h3>
4269
<p>A panel consists of a container with a <code><![CDATA[data-role="panel"]]></code> attribute and a unique <code>ID</code>. This <code>ID</code> will be referenced by the link or button to open and close the panel. The most basic panel markup looks like this:</p>
4370

@@ -194,44 +221,44 @@ $( "#idofpanel" ).panel( "close" );
194221
<desc>Class added to the panel, page contents wrapper and fixed toolbars when option animate is true and the 3D transform feature test returns <code>true</code>.</desc>
195222
<type name="String" />
196223
</option>
197-
<option name="classes.contentFixedToolbar" default='"ui-panel-fixed-toolbar-wrap"'>
224+
<option name="classes.contentFixedToolbar" default='"ui-panel-fixed-toolbar-wrap"' removed="1.4">
198225
<desc>
199-
<p><strong>Note: This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</strong></p>
226+
<div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div>
200227
<p>Class added to the page container to suppress scrolling horizontally</p>
201228
</desc>
202229
<type name="String" />
203230
</option>
204-
<option name="classes.contentFixedToolbarClosed" default='"ui-panel-content-fixed-toolbar-closed"'>
231+
<option name="classes.contentFixedToolbarClosed" default='"ui-panel-content-fixed-toolbar-closed"' removed="1.4">
205232
<desc>
206-
<p><strong>Note: This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</strong></p>
233+
<div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div>
207234
<p>Class added to fixed toolbars after the close animation is complete.</p>
208235
</desc>
209236
<type name="String" />
210237
</option>
211-
<option name="classes.contentFixedToolbarOpen" default='"ui-panel-content-fixed-toolbar-open"'>
238+
<option name="classes.contentFixedToolbarOpen" default='"ui-panel-content-fixed-toolbar-open"' removed="1.4">
212239
<desc>
213-
<p><strong>Note: This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</strong></p>
240+
<div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div>
214241
<p>Class added to fixed toolbars when the panel is opening.</p>
215242
</desc>
216243
<type name="String" />
217244
</option>
218-
<option name="classes.contentWrap" default='"ui-panel-content-wrap"'>
245+
<option name="classes.contentWrap" default='"ui-panel-content-wrap"' removed="1.4">
219246
<desc>
220-
<p><strong>Note: This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</strong></p>
247+
<div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div>
221248
<p>Class added to the wrapper injected around the page contents (header, content, footer), needed for positioning of the panel.</p>
222249
</desc>
223250
<type name="String" />
224251
</option>
225-
<option name="classes.contentWrapClosed" default='"ui-panel-content-wrap-closed"'>
252+
<option name="classes.contentWrapClosed" default='"ui-panel-content-wrap-closed"' removed="1.4">
226253
<desc>
227-
<p><strong>Note: This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</strong></p>
254+
<div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div>
228255
<p>Class added to the page contents wrapper after the close animation is complete.</p>
229256
</desc>
230257
<type name="String" />
231258
</option>
232-
<option name="classes.contentWrapOpen" default='"ui-panel-content-wrap-open"'>
259+
<option name="classes.contentWrapOpen" default='"ui-panel-content-wrap-open"' removed="1.4">
233260
<desc>
234-
<p><strong>Note: This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</strong></p>
261+
<div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div>
235262
<p>Class added to the wrapper injected around the page contents (header, content, footer) when the panel is opening. Used for targeting hardware acceleration only during transitions.</p>
236263
</desc>
237264
<type name="String" />
@@ -245,24 +272,27 @@ $( "#idofpanel" ).panel( "close" );
245272
<type name="String" />
246273
</option>
247274
<option name="classes.pageContainer" default='"ui-panel-page-container"'>
248-
<desc></desc>
275+
<desc>Class applied to the page container.</desc>
276+
<type name="String" />
249277
</option>
250278
<option name="classes.pageContentPrefix" default='"ui-panel-page-content"'>
251279
<desc>Used for wrapper and fixed toolbars position, display and open classes.</desc>
280+
<type name="String" />
252281
</option>
253282
<option name="classes.pageFixedToolbar" default='"ui-panel-fixed-toolbar"'>
254-
<desc></desc>
283+
<desc>Class applied to any fixed toolbars.</desc>
284+
<type name="String" />
255285
</option>
256-
<option name="classes.pagePanel" default='"ui-page-panel"'>
286+
<option name="classes.pagePanel" default='"ui-page-panel"' removed="1.4">
257287
<desc>
258-
<p><strong>Note: This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</strong></p>
288+
<div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div>
259289
<p>Class added to the page container when a panel widget is present.</p>
260290
</desc>
261291
<type name="String" />
262292
</option>
263-
<option name="classes.pagePanelOpen" default='"ui-page-panel-open"'>
293+
<option name="classes.pagePanelOpen" default='"ui-page-panel-open"' removed="1.4">
264294
<desc>
265-
<p><strong>Note: This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</strong></p>
295+
<div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div>
266296
<p>Class added to the page when a panel is open.</p>
267297
</desc>
268298
<type name="String" />

0 commit comments

Comments
 (0)