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

Commit f634cb3

Browse files
toddparkertoddparker
committed
Nav re-work of the popup examples and index.
1 parent 39f500a commit f634cb3

File tree

4 files changed

+38
-41
lines changed

4 files changed

+38
-41
lines changed

‎docs/pages/popup/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,8 @@ <h3 class="ui-title">Are you sure you want to delete this page?</h3>
151151
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="../../_assets/images/colorful-city.jpg" alt="Colorful city">
152152
</div>
153153

154-
<p>Learn how to work with advanced popup techniques: scalable images, iframes and videos in popups here:</p>
154+
<h3>Advanced popup techniques</h3>
155+
<p>Learn how to customize and extend popups by working with the API, custom scripts, and styles.</p>
155156
<a href="popup-images.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Scaling images</a>
156157
<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>
157158
<a href="popup-panel.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right">Overlay panels</a>
@@ -340,7 +341,7 @@ <h2>Note: Chaining of popups not allowed</h2>
340341
<p>The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a <code>data-rel="popup"</code> inside a popup will not do anything at all.</p>
341342
<p>This also means that custom select menus will not work inside popups, because they are themselves implemented using popups. If you place a select menu inside a popup, it will be rendered as a native select menu, even if you specify <code>data-native-menu="false"</code>.</p>
342343

343-
344+
<div align="right"><a href="popup-images.html" data-ajax="false" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="false" align="right">Advanced popup examples</a>
344345
</div>
345346

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

‎docs/pages/popup/popup-iframes.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020
<div data-role="page" class="type-interior">
2121

2222
<div data-role="header" data-theme="f">
23-
<h1>Popup iframes</h1>
23+
24+
<p style="margin-bottom:-20px;"><a href="index.html">Popups &#8594;</a></p>
25+
<h1>Popups with iframes</h1>
2426
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
2527
<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
2628
</div><!-- /header -->

‎docs/pages/popup/popup-images.html

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,26 @@ <h1>Popup images</h1>
2727

2828
<div data-role="content" class="ui-body">
2929
<div class="content-primary">
30-
31-
<h2 class="ui-title">Advanced popup examples</h4>
32-
33-
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
34-
<a href="popup-images.html" data-role="button" data-transition="fade" class="ui-btn-active">Images</a>
35-
<a href="popup-iframes.html" data-role="button" data-transition="fade">Iframes</a>
36-
<a href="popup-panel.html" data-role="button" data-transition="fade">Panel</a>
37-
</div>
3830

39-
<h2>Scaling images</h2>
31+
<p style="margin-bottom:-20px;"><a href="index.html">Popups &#8594;</a></p>
32+
<h2>Scaling images: Lightbox examples</h2>
4033

4134
<p>The framework CSS contains rules that make images that are immediate children of the popup scale to fit the screen. Because of the absolute positioning of the popup container and screen, the height is not adjusted to screen height on all browsers. You can prevent vertical scrolling with a simple script that sets the <code>max-height</code> of the image.</p>
4235

43-
<p>In the two examples below the divs with <code>data-role="popup"</code> have a class of <code>photopopup</code>. The handler is bound to the <code>popupbeforeposition</code> event, which ensures the image is not only scaled before it is shown but also when the window is resized (e.g. orientation change). In this code example the height is reduced by 60 to take a top and bottom tolerance of 30 pixels into account.</p>
36+
<p>In the two examples below the divs with <code>data-role="popup"</code> have a class of <code>photopopup</code>. </p>
37+
38+
<a href="#popupPhotoLandscape" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Photo landscape</a>
39+
<a href="#popupPhotoPortrait" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true" data-transition="fade">Photo portrait</a>
40+
41+
<div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
42+
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="../../_assets/images/photo-landscape.jpg" alt="Photo landscape">
43+
</div>
44+
45+
<div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
46+
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="../../_assets/images/photo-portrait.jpg" alt="Photo portrait">
47+
</div>
48+
49+
<p>The handler is bound to the <code>popupbeforeposition</code> event, which ensures the image is not only scaled before it is shown but also when the window is resized (e.g. orientation change). In this code example the height is reduced by 60 to take a top and bottom tolerance of 30 pixels into account.</p>
4450

4551
<pre><code>
4652
$( document ).on( "pageinit", function() {
@@ -54,16 +60,7 @@ <h2>Scaling images</h2>
5460

5561
</code></pre>
5662

57-
<a href="#popupPhotoLandscape" data-rel="popup" data-position-to="window" data-role="button">Photo landscape</a>
58-
<a href="#popupPhotoPortrait" data-rel="popup" data-position-to="window" data-role="button" data-transition="fade">Photo portrait</a>
59-
60-
<div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
61-
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="../../_assets/images/photo-landscape.jpg" alt="Photo landscape">
62-
</div>
63-
64-
<div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
65-
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="../../_assets/images/photo-portrait.jpg" alt="Photo portrait">
66-
</div>
63+
6764

6865
</div><!--/content-primary -->
6966

‎docs/pages/popup/popup-panel.html

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,22 @@ <h1>Popup panel</h1>
2828
<div data-role="content" class="ui-body">
2929
<div class="content-primary">
3030

31-
<h2 class="ui-title">Advanced popup examples</h4>
32-
33-
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
34-
<a href="popup-images.html" data-role="button" data-transition="fade">Images</a>
35-
<a href="popup-iframes.html" data-role="button" data-transition="fade">Iframes</a>
36-
<a href="popup-panel.html" data-role="button" data-transition="fade" class="ui-btn-active">Panel</a>
37-
</div>
31+
<p style="margin-bottom:-20px;"><a href="index.html">Popups &#8594;</a></p>
32+
<h2>Overlay panels</h2>
33+
34+
<p>Taking customization further, here is an example of a popup that has been customized to look like a vertical panel with three mini buttons:</p>
3835

39-
<h2>Panel</h2>
36+
<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>
37+
38+
<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>
44+
</div>
4045

41-
<p>This is the markup for a vertical panel with three mini buttons:</p>
46+
<p>Here is the HTML markup for the button and panel:</p>
4247
<pre><code>
4348
&lt;a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button"&gt;Panel right&lt;/a&gt;
4449

@@ -83,15 +88,7 @@ <h2>Panel</h2>
8388
}
8489
</code></pre>
8590

86-
<a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button">Panel</a>
87-
88-
<div data-role="popup" id="popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
89-
<div class="inner">
90-
<button data-theme="b" data-icon="back" data-mini="true">Back</button>
91-
<button data-theme="b" data-icon="grid" data-mini="true">Menu</button>
92-
<button data-theme="b" data-icon="search" data-mini="true">Search</button>
93-
</div>
94-
</div>
91+
9592

9693

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

0 commit comments

Comments
 (0)