Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit f67f0bf

Browse files
jaspermdegrootjaspermdegroot
committed
Docs (popup): update panel example
1 parent 87890f4 commit f67f0bf

File tree

4 files changed

+37
-53
lines changed

4 files changed

+37
-53
lines changed

‎docs/pages/popup/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ <h3>Advanced popup techniques</h3>
155155
<p>Learn how to customize and extend popups by working with the API, custom scripts, and styles.</p>
156156
<a href="popup-images.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Scaling images</a>
157157
<a href="popup-iframes.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Map + video iframes</a>
158-
<a href="popup-panel.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Overlay panels</a>
158+
<a href="popup-panels.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Overlay panels</a>
159159

160160
<h2>Calling the popup plugin</h2>
161161

‎docs/pages/popup/popup-examples.css

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
#popupPanel-popup {
2-
width: 80%;
3-
max-width: 200px !important;
42
right: 0 !important;
53
left: auto !important;
64
}
75
#popupPanel {
8-
border-left: 1px solid #444;
9-
margin-left: -1px;
10-
background: rgba(0,0,0,.6);
11-
position: relative;
12-
width: 100%;
13-
height: 100%;
6+
width: 200px;
7+
border: 1px solid #000;
8+
border-right: none;
9+
background: rgba(0,0,0,.5);
10+
margin: -1px 0;
1411
}
15-
#popupPanel .inner {
16-
position: absolute;
17-
top: 0;
18-
left: 0;
19-
right: 0;
20-
padding: 45px 15px 15px;
21-
}
22-
#popupPanel .inner .ui-btn {
23-
margin: 0 0 1em 0;
12+
#popupPanel .ui-btn {
13+
margin: 2em 15px;
2414
}

‎docs/pages/popup/popup-examples.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,10 @@ $( document ).on( "pageinit", function() {
8484

8585
$( "#popupPanel" ).on({
8686
popupbeforeposition: function() {
87-
var height = $( window ).height();
87+
var h = $( window ).height();
88+
8889
$( "#popupPanel" )
89-
.css( "height", height )
90+
.css( "height", h );
9091
}
9192
});
9293

‎docs/pages/popup/popup-panel.html renamed to ‎docs/pages/popup/popup-panels.html

Lines changed: 26 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>jQuery Mobile Docs - Popup panel</title>
6+
<title>jQuery Mobile Docs - Popup panels</title>
77
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
88
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
99

@@ -20,7 +20,7 @@
2020
<div data-role="page" class="type-interior">
2121

2222
<div data-role="header" data-theme="f">
23-
<h1>Popup panel</h1>
23+
<h1>Popup panels</h1>
2424
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
2525
<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
2626
</div><!-- /header -->
@@ -36,59 +36,52 @@ <h2>Overlay panels</h2>
3636
<a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Open panel</a>
3737

3838
<div data-role="popup" id="popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
39-
<div class="inner">
40-
<button data-theme="b" data-icon="back" data-mini="true">Back</button>
41-
<button data-theme="b" data-icon="grid" data-mini="true">Menu</button>
42-
<button data-theme="b" data-icon="search" data-mini="true">Search</button>
43-
</div>
39+
<button data-theme="a" data-icon="back" data-mini="true">Back</button>
40+
<button data-theme="a" data-icon="grid" data-mini="true">Menu</button>
41+
<button data-theme="a" data-icon="search" data-mini="true">Search</button>
4442
</div>
4543

4644
<p>Here is the HTML markup for the button and panel:</p>
4745
<pre><code>
48-
&lt;a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button"&gt;Panel right&lt;/a&gt;
46+
&lt;a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button"&gt;Open panel&lt;/a&gt;
4947

5048
&lt;div data-role="popup" id="popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0"&gt;
5149

52-
&lt;div class="inner"&gt;
53-
54-
&lt;button data-theme="b" data-icon="back" data-mini="true"&gt;Back&lt;/button&gt;
55-
&lt;button data-theme="b" data-icon="grid" data-mini="true"&gt;Menu&lt;/button&gt;
56-
&lt;button data-theme="b" data-icon="search" data-mini="true"&gt;Search&lt;/button&gt;
57-
58-
&lt;/div&gt;
50+
&lt;button data-theme="a" data-icon="back" data-mini="true"&gt;Back&lt;/button&gt;
51+
&lt;button data-theme="a" data-icon="grid" data-mini="true"&gt;Menu&lt;/button&gt;
52+
&lt;button data-theme="a" data-icon="search" data-mini="true"&gt;Search&lt;/button&gt;
5953

6054
&lt;/div&gt;
6155
</code></pre>
6256

63-
<p>To style the panel, and attach it to the right edge, the following CSS is used:</p>
57+
<p>To style the panel, and attach it to the right edge, the following CSS is used. Note that <code>#popupPanel-popup</code> is the ID of the container div generated by the framework.</p>
6458
<pre><code>
6559
#popupPanel-popup {
66-
width: 90%;
67-
max-width: 200px !important;
6860
right: 0 !important;
6961
left: auto !important;
7062
}
7163
#popupPanel {
72-
border-left: 1px solid #444;
73-
margin-left: -1px;
74-
background: rgba(0,0,0,.6);
75-
position: relative;
76-
width: 100%;
77-
height: 100%;
78-
}
79-
#popupPanel .inner {
80-
position: absolute;
81-
top: 0;
82-
left: 0;
83-
right: 0;
84-
padding: 45px 15px 15px;
64+
width: 200px;
65+
border: 1px solid #000;
66+
border-right: none;
67+
background: rgba(0,0,0,.5);
68+
margin: -1px 0;
8569
}
86-
#popupPanel .inner .ui-btn {
87-
margin: 0 0 1em 0;
70+
#popupPanel .ui-btn {
71+
margin: 2em 15px;
8872
}
8973
</code></pre>
9074

75+
<p>Because the popup container is positioned absolute, you can't make the panel full height with <code>height:100%;</code>. This small script sets the height of the popup to the actual screen height.
76+
<pre><code>
77+
$( "#popupPanel" ).on({
78+
popupbeforeposition: function() {
79+
var h = $( window ).height();
9180

81+
$( "#popupPanel" ).css( "height", h );
82+
}
83+
});
84+
</code></pre>
9285

9386

9487
</div><!--/content-primary -->

0 commit comments

Comments
 (0)