This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
/
options.html
127 lines (85 loc) · 6.61 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
<!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: "overlay"</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: "true"</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. If set to true, the fixed positioning is only applied if a feature test passes and will fallback to static positioning so the panel will scroll with the document. We recommend disabling 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 left or right over the panel. Also available via the <code>data-swipe-close</code> attribute on the panel.</dd>
<dt><code>theme</code> default: null</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.panelUnfixed</code> default: "ui-panel-unfixed"</dt>
<dd>Class added to the panel when fixed positioning is not applied.</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.openComplete</code> default: "ui-panel-open-complete"</dt>
<dd>Class added to the page when the panel animation is complete.</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 positioning of the panel.</dd>
<dt><code>classes.contentWrapOpen</code> default: "ui-panel-content-wrap-open"</dt>
<dd>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.</dd>
<dt><code>classes.wrapOpenComplete</code> default: "ui-panel-content-wrap-open-complete"</dt>
<dd>Class added to the page contents wrapper after the open animation is complete.</dd>
<dt><code>classes.wrapOpenClosed</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.pageBlock</code> default: "ui-panel-page-block"</dt>
<dd>Class added to the page container to suppress scrolling horizontally</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.cssTransform3d</code> default: "ui-panel-3dtransforms"</dt>
<dd>Class added to the page container when the 3D transform feature test is true.</dd>
</dl>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p class="jqm-version"></p>
<p>© 2012 jQuery Foundation and other contributors</p>
</div>
</div><!-- /page -->
</body>
</html>