Skip to content

Commit 48a1de8

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: copy editing of panel fixed positioning demo.
1 parent be0180f commit 48a1de8

File tree

2 files changed

+42
-58
lines changed

2 files changed

+42
-58
lines changed

‎docs/widgets/panels/index.php

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,7 @@
116116

117117
<p>The panel will be displayed with the <code>position:absolute</code> CSS property, meaning it will scroll with the page. When a panel is opened the framework checks to see if the bottom of the panel contents is in view. If not, it scrolls to the top of the page.</p>
118118

119-
<p>You can set a panel to <code>position:fixed</code>, so its contents will appear no matter how far down the page you're scrolled, by adding the <code>data-position-fixed="true"</code> attribute to the panel. The framework also checks to see if the panel contents will fit within the viewport before applying the fixed positioning because this property would prevent the panel contents from scrolling and using <code>overflow</code> is not well supported enough to use at this time. If the panel contents are too long to fit within the viewport, the framework will simply display the panel without absolute positioning.</p>
120-
121-
<a href="panel-fixed.php" class="jqm-button" data-ajax="false" data-role="button" data-mini="true" data-inline="true" data-icon="arrow-r" data-iconpos="right">Panel fixed positioning example</a>
119+
<p>You can set a panel to <code>position:fixed</code>, so its contents will appear no matter how far down the page you're scrolled, by adding the <code>data-position-fixed="true"</code> attribute to the panel. The framework also checks to see if the panel contents will fit within the viewport before applying the fixed positioning because this property would prevent the panel contents from scrolling and make it inaccessible. <code>overflow</code> is not well supported enough to use at this time. If the panel contents are too long to fit within the viewport, the framework will simply display the panel without fixed positioning. See an example of <a href="panel-fixed.php" data-ajax="false">panels with fixed positioning</a>.</p>
122120

123121
<h2 id="panel-styling">Styling panels</h2>
124122

@@ -168,9 +166,7 @@
168166

169167
<h4>Applying a preset breakpoint</h4>
170168

171-
<p>Included in the widget styles is a breakpoint preset for this behavior that kicks in at 55em (880px). This breakpoint is not applied by default to make it easier for you to write custom breakpoints that work best for your content and design. To apply the breakpoint preset, add the <code>ui-responsive-panel</code> class to the <em>page wrapper</em> (not the panel).</p>
172-
173-
<a href="panel-fixed.php" class="jqm-button" data-ajax="false" data-role="button" data-mini="true" data-inline="true" data-icon="arrow-r" data-iconpos="right">Panel responsive example</a>
169+
<p>Included in the widget styles is a breakpoint preset for this behavior that kicks in at 55em (880px). This breakpoint is not applied by default to make it easier for you to write custom breakpoints that work best for your content and design. To apply the breakpoint preset, add the <code>ui-responsive-panel</code> class to the <em>page wrapper</em> (not the panel). See an example of a <a href="panel-fixed.php" data-ajax="false">responsive panel</a> page.</p>
174170

175171
</div><!-- /content -->
176172

‎docs/widgets/panels/panel-fixed.php

Lines changed: 40 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
<script src="../../../js/"></script>
1414
<style>
1515
.nav-search .ui-btn-up-a {
16-
background-image:none;
17-
background-color:#333333;
16+
background-image: none;
17+
background-color: #333;
1818
}
1919
.nav-search .ui-btn-inner {
2020
border-top: 1px solid #888;
@@ -37,9 +37,6 @@
3737
display: block;
3838
margin-top: 1.2em;
3939
}
40-
.switch .ui-slider-switch {
41-
width: 6.5em !important;
42-
}
4340
.ui-grid-a {
4441
margin-top: 1em;
4542
padding-top: .8em;
@@ -54,22 +51,22 @@
5451
<div data-role="header" data-theme="f" data-position="fixed">
5552
<h1>Fixed header</h1>
5653
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
57-
<a href="#add-form" data-icon="plus" data-iconpos="notext">Add</a>
54+
<a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
5855
</div><!-- /header -->
5956
6057
<div data-role="content" class="jqm-content">
6158
62-
<h1>Panel</h1>
59+
<h1>Panels</h1>
6360
6461
<h2>Fixed positioning</h2>
6562
66-
<p>This is a typical page that has two buttons in the header bar that open panels. The left button opens a left menu with the reveal display mode. The right button opens a form in a right overlay panel. We also set position fixed for the header and footer on this page.</p>
63+
<p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the reveal display mode. The right panel opens as overlay. For both panels we set <code>data-position-fixed="true"</code>. We also set position fixed for the header and footer on this page.</p>
6764
68-
<p>The left panel contains a long menu to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled.</p>
65+
<p>The left panel contains a long menu to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled. In the right panel there is a short form that shows the fixed positioning.</p>
6966
7067
<h2>Responsive</h2>
7168
72-
<p>To make this responsive, the panel stays open and causes the page to re-flow at wider widths. This allows both the menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page.</p>
69+
<p>To make this responsive, you can make the page re-flow at wider widths. This allows both the reveal panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page.</p>
7370
7471
<a href="./" class="jqm-button" data-ajax="false" data-role="button" data-mini="true" data-inline="true" data-icon="arrow-l" data-iconpos="left">Back to Panels</a>
7572
@@ -85,35 +82,37 @@
8582
8683
<ul data-role="listview" data-theme="a" class="nav-search">
8784
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
88-
<li><a href="#panel-fixed-page2">Accessibility</a></li>
89-
<li><a href="#panel-fixed-page2">Accordions</a></li>
90-
<li><a href="#panel-fixed-page2">AJAX navigation model</a></li>
91-
<li><a href="#panel-fixed-page2">Anatomy of a page</a></li>
92-
<li><a href="#panel-fixed-page2">Animation events</a></li>
93-
<li><a href="#panel-fixed-page2">Automatic listview dividers</a></li>
94-
<li><a href="#panel-fixed-page2">Buttons</a></li>
95-
<li><a href="#panel-fixed-page2">Button icons</a></li>
96-
<li><a href="#panel-fixed-page2">Caching pages</a></li>
97-
<li><a href="#panel-fixed-page2">Checkbox</a></li>
98-
<li><a href="#panel-fixed-page2">Collapsible content</a></li>
99-
<li><a href="#panel-fixed-page2">Collapsible lists</a></li>
100-
<li><a href="#panel-fixed-page2">Data attribute reference</a></li>
101-
<li><a href="#panel-fixed-page2">Dialogs</a></li>
102-
<li><a href="#panel-fixed-page2">Disabling form elements</a></li>
103-
<li><a href="#panel-fixed-page2">Dynamically injecting pages</a></li>
104-
<li><a href="#panel-fixed-page2">Events API</a></li>
105-
<li><a href="#panel-fixed-page2">Flip switch</a></li>
106-
<li><a href="#panel-fixed-page2">Features overview</a></li>
107-
<li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
108-
<li><a href="#panel-fixed-page2">Forms intro</a></li>
109-
<li><a href="#panel-fixed-page2">Form element gallery</a></li>
110-
<li><a href="#panel-fixed-page2">Fullscreen toolbars</a></li>
111-
<li><a href="#panel-fixed-page2">Footer toolbars</a></li>
112-
<li><a href="#panel-fixed-page2">Global options (mobileinit)</a></li>
113-
<li><a href="#panel-fixed-page2">Grouped buttons</a></li>
114-
<li><a href="#panel-fixed-page2">Header toolbars</a></li>
115-
<li><a href="#panel-fixed-page2">Hiding elements accessibly</a></li>
116-
<li><a href="#panel-fixed-page2">HTML formatting</a></li>
85+
<li><a href="#panel-fixed-page2">Accordion</a></li>
86+
<li><a href="#panel-fixed-page2">AJAX Navigation</a></li>
87+
<li><a href="#panel-fixed-page2">Autocomplete</a></li>
88+
<li><a href="#panel-fixed-page2">Buttons</a></li>
89+
<li><a href="#panel-fixed-page2">Checkboxes</a></li>
90+
<li><a href="#panel-fixed-page2">Collapsibles</a></li>
91+
<li><a href="#panel-fixed-page2">Controlgroup</a></li>
92+
<li><a href="#panel-fixed-page2">Dialogs</a></li>
93+
<li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
94+
<li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
95+
<li><a href="#panel-fixed-page2">Footer toolbar</a></li>
96+
<li><a href="#panel-fixed-page2">Form elements</a></li>
97+
<li><a href="#panel-fixed-page2">Grids</a></li>
98+
<li><a href="#panel-fixed-page2">Header toolbar</a></li>
99+
<li><a href="#panel-fixed-page2">Icons</a></li>
100+
<li><a href="#panel-fixed-page2">Links</a></li>
101+
<li><a href="#panel-fixed-page2">Listviews</a></li>
102+
<li><a href="#panel-fixed-page2">Loader overlay</a></li>
103+
<li><a href="#panel-fixed-page2">Navbar</a></li>
104+
<li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
105+
<li><a href="#panel-fixed-page2">Pages</a></li>
106+
<li><a href="#panel-fixed-page2">New</span></a></li>
107+
<li><a href="#panel-fixed-page2">Popup</a></li>
108+
<li><a href="#panel-fixed-page2">Radio buttons</a></li>
109+
<li><a href="#panel-fixed-page2">Select</a></li>
110+
<li><a href="#panel-fixed-page2">Slider, single</a></li>
111+
<li><a href="#panel-fixed-page2">New</span></a></li>
112+
<li><a href="#panel-fixed-page2">New</span></a></li>
113+
<li><a href="#panel-fixed-page2">New</span></a></li>
114+
<li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
115+
<li><a href="#panel-fixed-page2">Transitions</a></li>
117116
</ul>
118117
119118
</div><!-- /panel -->
@@ -122,25 +121,14 @@
122121
123122
<form class="userform">
124123
125-
<h2>Create new user</h2>
124+
<h2>Login</h2>
126125
127-
<label for="name">Name</label>
126+
<label for="name">Username:</label>
128127
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
129128
130-
<label for="email">Email</label>
131-
<input type="email" name="email" id="status" value="" data-clear-btn="true" data-mini="true">
132-
133129
<label for="password">Password:</label>
134130
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
135131
136-
<div class="switch">
137-
<label for="status">Status</label>
138-
<select name="status" id="slider" data-role="slider" data-mini="true">
139-
<option value="off">Inactive</option>
140-
<option value="on">Active</option>
141-
</select>
142-
</div>
143-
144132
<div class="ui-grid-a">
145133
<div class="ui-block-a"><a href="#" data-rel="close" data-role="button" data-theme="c" data-mini="true">Cancel</a></div>
146134
<div class="ui-block-b"><a href="#" data-rel="close" data-role="button" data-theme="b" data-mini="true">Save</a></div>

0 commit comments

Comments
 (0)