jquery-mobile/docs/panels/options.html at old-docs · allsteady/jquery-mobile · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jQuery Mobile Docs - Slide Panel</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="ui-responsive-panel">


			<div data-role="header" data-theme="f">
				<h1>Panels</h1>
				<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
				<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
			</div><!-- /header -->
			<div data-role="content">
				<h2>Panels</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>

				<dl>

					<dt><code>animate</code> default: true</dt>
					<dd>Sets whether the panel will animate when opening and closing. If set to false, the panel will just appear and disappear without animation. This is recommended for fastest performance. Also available via the <code>data-animate</code> attribute on the panel container.</dd>

					<dt><code>dismissible</code> default: true</dt>
					<dd>Sets whether the panel can be closed by clicking outside onto the page. Also available via the <code>data-dismissible</code> attribute on the link that opens the panel.</dd>

					<dt><code>display</code> default: "reveal"</dt>
					<dd>The relationship of the panel to the page contents. Can either push the page over ("reveal"), re-flow the content to fit the panel content as a column ("push"), or sit over the content ("overlay"). Also available via the <code>data-display</code> attribute on the link that opens the panel.</dd>

					<dt><code>initSelector</code> default: ":jqmData(role='panel')"</dt>
					<dd>The role (or and valid jQuery selector) used to trigger auto-initialization of the panel widget.</dd>

					<dt><code>position</code> default: "left"</dt>
					<dd>The side of the screen the panel appears on. Values can be "left" or "right". Also available via the <code>data-position</code> attribute on the link that opens the panel.</dd>

					<dt><code>positionFixed</code> default: false</dt>
					<dd>Sets whether the panel has fixed positioning so the contents are in view even if the page is scrolled down. This also allows the page to scroll while the panel stays fixed. We recommend not to enable this feature when panels are used withing Android apps because of poor performance and display issues. Also available via the <code>data-position-fixed</code> attribute on the panel.</dd>

					<dt><code>swipeClose</code> default: true</dt>
					<dd>Sets whether the panel can be closed by swiping over the panel or, if <code>dismissible=true</code>, the page content and toolbars. Also available via the <code>data-swipe-close</code> attribute on the panel.</dd>

					<dt><code>theme</code> default: "c"</dt>
					<dd>Theme swatch for the panel. Can be any valid swatch letter in your theme (a-z). Also available via the <code>data-theme</code> attribute on the panel container.</dd>

				</dl>

				<h3>Classes Option</h3>
				<p>The <code>classes</code> option define the structural classnames that the plugin uses. This is only configurable via JavaScript because it expects an object literal value.</p>

				<dl>
					<dt><code>classes.panel</code> default: "ui-panel"</dt>
					<dd>Class added to the panel.</dd>

					<dt><code>classes.panelOpen</code> default: "ui-panel-open"</dt>
					<dd>Class added to the panel when opening. Used for targeting hardware acceleration only during transitions.</dd>

					<dt><code>classes.panelClosed</code> default: "ui-panel-closed"</dt>
					<dd>Class added to the panel when closed.</dd>

					<dt><code>classes.panelFixed</code> default: "ui-panel-fixed"</dt>
					<dd>Class added to the panel when fixed positioning is applied.</dd>

					<dt><code>classes.panelInner</code> default: "ui-panel-inner"</dt>
					<dd>Class added to the panel contents wrapper div.</dd>

					<dt><code>classes.modal</code> default: "ui-panel-dismiss"</dt>
					<dd>Class added to the overlay on the page to dismiss the panel when hidden.</dd>

					<dt><code>classes.modalOpen</code> default: "ui-panel-dismiss-open"</dt>
					<dd>Class added to the invisible overlay over the page when the panel is open. Used to dismiss the panel.</dd>

					<dt><code>classes.pagePanel</code> default: "ui-page-panel"</dt>
					<dd>Class added to the page container when a panel widget is present.</dd>

					<dt><code>classes.pagePanelOpen</code> default: "ui-page-panel-open"</dt>
					<dd>Class added to the page when a panel is open.</dd>

					<dt><code>classes.contentWrap</code> default: "ui-panel-content-wrap"</dt>
					<dd>Class added to the wrapper injected around the page contents (header, content, footer), needed for transitioning the page contents. Fixed toolbars are not wrapped.</dd>

					<dt><code>classes.contentWrapOpen</code> default: "ui-panel-content-wrap-open"</dt>
					<dd>Class added to the page contents wrapper when the panel is opening.</dd>

					<dt><code>classes.contentWrapClosed</code> default: "ui-panel-content-wrap-closed"</dt>
					<dd>Class added to the page contents wrapper after the close animation is complete.</dd>

                    <dt><code>classes.contentFixedToolbar</code> default: "ui-panel-fixed-toolbar-wrap"</dt>
					<dd>Class added to fixed header and footer, needed for transitioning fixed toolbars.</dd>

					<dt><code>classes.contentFixedToolbarOpen</code> default: "ui-panel-content-fixed-toolbar-open"</dt>
					<dd>Class added to fixed toolbars when the panel is opening.</dd>

					<dt><code>classes.contentFixedToolbarClosed</code> default: "ui-panel-content-fixed-toolbar-closed"</dt>
					<dd>Class added to fixed toolbars after the close animation is complete.</dd>

					<dt><code>classes.animate</code> default: "ui-panel-animate"</dt>
					<dd>Class added to the panel, page contents wrapper and fixed toolbars when option <code>animate</code> is <code>true</code> and the 3D transform feature test returns <code>true</code>.</dd>
				</dl>


			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
				<p class="jqm-version"></p>
				<p>Copyright 2013 The jQuery Foundation</p>
			</div>


		</div><!-- /page -->
	</body>
</html>