Skip to content

Commit c315fc6

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: updated panel open on swipe demo.
1 parent b344ef9 commit c315fc6

File tree

1 file changed

+59
-94
lines changed

1 file changed

+59
-94
lines changed

‎docs/demos/demos/panels/panel-swipe-open.html‎

Lines changed: 59 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -29,27 +29,34 @@
2929
});
3030
</script>
3131
<style>
32-
.nav-search .ui-btn-up-a {
33-
background-image:none;
34-
background-color:#333333;
32+
/* Swipe works with mouse as well but often causes text selection. */
33+
#demo-page * {
34+
-webkit-user-select: none;
35+
-moz-user-select: none;
36+
-ms-user-select: none;
37+
-o-user-select: none;
38+
user-select: none;
3539
}
36-
.nav-search .ui-btn-inner {
37-
border-top: 1px solid #888;
38-
border-color: rgba(255,255,255,.1);
40+
/* Arrow only buttons in the header. */
41+
#demo-page .ui-header .ui-btn {
42+
background: none;
43+
border: none;
44+
top: 9px;
3945
}
40-
.nav-search .ui-btn.ui-first-child {
41-
border-top-width: 0;
42-
background: #111;
46+
#demo-page .ui-header .ui-btn-inner {
47+
border: none;
4348
}
44-
.userform { padding:.8em 1.2em; }
45-
.userform h2 { color:#555; margin:0.3em 0 .8em 0; padding-bottom:.5em; border-bottom:1px solid rgba(0,0,0,.1); }
46-
.userform label { display:block; margin-top:1.2em; }
47-
.switch .ui-slider-switch { width: 6.5em !important }
48-
.ui-grid-a { margin-top:1em; padding-top:.8em; margin-top:1.4em; border-top:1px solid rgba(0,0,0,.1); }
49+
/* Content styling. */
50+
dl { font-family: "Times New Roman", Times, serif; padding: 1em; }
51+
dt { font-size: 2em; font-weight: bold; }
52+
dt span { font-size: .5em; color: #777; margin-left: .5em; }
53+
dd { font-size: 1.25em; margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; }
54+
.back-btn { float: right; margin: 0 2em 1em 0; }
4955
</style>
5056
</head>
5157
<body>
52-
<div data-role="page" class="jqm-demos ui-responsive-panel" id="demo-page">
58+
59+
<div data-role="page" class="jqm-demos" id="demo-intro">
5360

5461
<div data-role="header" class="jqm-header" data-theme="f">
5562
<h1>jQuery Mobile</h1>
@@ -61,100 +68,58 @@ <h1>jQuery Mobile</h1>
6168

6269
<h1>Open panel on swipe</h1>
6370

64-
<p>By default panels can be closed with a swipe on the page. In this demo we show how you can also open a panel with a swipe. This not part of the framework, because in case of multiple panels we wouldn't know which one to open.</p>
65-
66-
<p>This page has two reveal menus, one at each side. Both can be opened with swipe.</p>
71+
<p>By default panels can be closed by swiping in the direction of the open panel. In this demo we show how you can also open a panel with swipe. This is not part of the framework, because in case of multiple panels we wouldn't know which one to open.</p>
6772

68-
<p><a href="#left-panel" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">left panel</a>
69-
<a href="#right-panel" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">right panel</a></p>
73+
<p>The demo page has two menus, one at each side. Both can be opened with swipe or with the buttons in the header.</p>
7074

71-
<div data-demo-js="true"></div><!--/demo-html -->
75+
<a href="#demo-page" class="jqm-button" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">Open demo</a>
76+
77+
<div data-demo-html="#demo-page" data-demo-js="true" data-demo-css="true"></div><!--/demo-html -->
7278

7379
</div><!-- /content -->
7480

81+
<div data-role="footer" class="jqm-footer" data-theme="c">
82+
<p class="jqm-version"></p>
83+
<p>Copyright 2013 The jQuery Foundation</p>
84+
</div><!-- /jqm-footer -->
7585

76-
<div data-role="panel" id="left-panel" data-theme="a">
77-
78-
<ul data-role="listview" data-theme="a" class="nav-search">
79-
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
80-
<li><a href="#demo-landing-page">Accessibility</a></li>
81-
<li><a href="#demo-landing-page">Accordions</a></li>
82-
<li><a href="#demo-landing-page">Ajax navigation model</a></li>
83-
<li><a href="#demo-landing-page">Anatomy of a page</a></li>
84-
<li><a href="#demo-landing-page">Animation events</a></li>
85-
<li><a href="#demo-landing-page">Automatic listview dividers</a></li>
86-
<li><a href="#demo-landing-page">Buttons</a></li>
87-
<li><a href="#demo-landing-page">Button icons</a></li>
88-
<li><a href="#demo-landing-page">Caching pages</a></li>
89-
<li><a href="#demo-landing-page">Checkbox</a></li>
90-
<li><a href="#demo-landing-page">Collapsible content</a></li>
91-
<li><a href="#demo-landing-page">Collapsible lists</a></li>
92-
<li><a href="#demo-landing-page">Data attribute reference</a></li>
93-
<li><a href="#demo-landing-page">Dialogs</a></li>
94-
<li><a href="#demo-landing-page">Disabling form elements</a></li>
95-
<li><a href="#demo-landing-page">Dynamically injecting pages</a></li>
96-
<li><a href="#demo-landing-page">Events API</a></li>
97-
<li><a href="#demo-landing-page">Flip switch</a></li>
98-
<li><a href="#demo-landing-page">Features overview</a></li>
99-
<li><a href="#demo-landing-page">Fixed toolbars</a></li>
100-
<li><a href="#demo-landing-page">Forms intro</a></li>
101-
<li><a href="#demo-landing-page">Form element gallery</a></li>
102-
<li><a href="#demo-landing-page">Fullscreen toolbars</a></li>
103-
<li><a href="#demo-landing-page">Footer toolbars</a></li>
104-
<li><a href="#demo-landing-page">Global options (mobileinit)</a></li>
105-
<li><a href="#demo-landing-page">Grouped buttons</a></li>
106-
<li><a href="#demo-landing-page">Header toolbars</a></li>
107-
<li><a href="#demo-landing-page">Hiding elements accessibly</a></li>
108-
<li><a href="#demo-landing-page">HTML formatting</a></li>
109-
</ul>
110-
111-
</div><!-- /panel -->
112-
113-
114-
<div data-role="panel" data-position="right" id="right-panel" data-theme="b">
115-
116-
<form class="userform">
117-
<h2>Create new user</h2>
118-
<label for="name">Name</label>
119-
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
120-
121-
<label for="email">Email</label>
122-
<input type="email" name="email" id="status" value="" data-clear-btn="true" data-mini="true">
123-
124-
<label for="password">Password:</label>
125-
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
126-
127-
<div class="switch">
128-
<label for="status">Status</label>
129-
<select name="status" id="slider" data-role="slider" data-mini="true">
130-
<option value="off">Inactive</option>
131-
<option value="on">Active</option>
132-
</select>
133-
</div>
134-
135-
<div class="ui-grid-a">
136-
<div class="ui-block-a"><a href="#" data-rel="close" data-role="button" data-theme="c" data-mini="true">Cancel</a></div>
137-
<div class="ui-block-b"><a href="#" data-rel="close" data-role="button" data-theme="b" data-mini="true">Save</a></div>
138-
</div>
139-
</form>
140-
141-
</div><!-- /panel -->
142-
86+
<?php include( '../../nav.html' ); ?>
14387

14488
</div><!-- /page -->
14589

146-
<div data-role="page" id="demo-landing-page">
90+
<div data-role="page" id="demo-page" data-theme="d">
14791

148-
<div data-role="header" class="jqm-header" data-theme="f">
149-
<h1>Landing page</h1>
92+
<div data-role="header" data-theme="b">
93+
<h1>Swipe left or right</h1>
94+
<a href="#left-panel" data-theme="d" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
95+
<a href="#right-panel" data-theme="d" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open right panel</a>
15096
</div><!-- /header -->
15197

15298
<div data-role="content">
153-
<p>This is just a landing page.</p>
154-
155-
<a href="#demo-page" data-rel="back" data-role="button" data-inline="true" data-mini="true" data-icon="back" data-iconpos="left">Back</a>
99+
100+
<dl>
101+
<dt>Swipe <span>verb</span></dt>
102+
<dd><b>1.</b> to strike or move with a sweeping motion</dd>
103+
</dl>
104+
105+
<a href="#demo-intro" data-rel="back" class="back-btn" data-role="button" data-mini="true" data-inline="true" data-icon="back" data-iconpos="right">Back to demo intro</a>
106+
156107
</div><!-- /content -->
157108

109+
<div data-role="panel" id="left-panel" data-theme="b">
110+
111+
<p>Left reveal panel.</p>
112+
<a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>
113+
114+
</div><!-- /panel -->
115+
116+
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="c">
117+
118+
<p>Right push panel.</p>
119+
<a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>
120+
121+
</div><!-- /panel -->
122+
158123
</div><!-- /page -->
159124
</body>
160125
</html>

0 commit comments

Comments
 (0)