Permalink
Browse files

[docs] Adding multi-level popup demo

  • Loading branch information...
1 parent 4f0ee71 commit b497bfe56a357b4685f2650830e0e0515c583490 @gabrielschulhof committed Feb 24, 2012
Showing with 101 additions and 5 deletions.
  1. +101 −5 docs/pages/popup/index.html
View
@@ -56,6 +56,7 @@
<p>Now on to some cool examples</p>
<a href="#popupInfo" data-rel="popup" data-role="button" data-inline="true">Tooltip</a>
<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="fade">Menu</a>
+ <a href="#popup-index-p2" data-role="button" data-inline="true">Menu on second page</a>
<a href="#popupLogin" data-rel="popup" data-role="button" data-inline="true">Form</a>
<a href="#popupPhoto" data-rel="popup" data-role="button" data-inline="true">Photo</a>
<a href="#popupDialog" data-rel="popup" data-role="button" data-inline="true">Dialog</a>
@@ -71,13 +72,30 @@
<div data-role="popup" id="popupMenu" data-overlay-theme="b">
<ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
- <li><a href="index.html">Add</a></li>
- <li><a href="index.html">Edit</a></li>
- <li><a href="index.html">Manage</a></li>
- <li><a href="index.html">Delete</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel1">Add</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel1">Edit</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel1">Manage</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel1">Delete</a></li>
</ul>
</div>
-
+
+ <div data-role="popup" id="popupMenuLevel1" data-overlay-theme="b">
+ <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
+ <li><a data-rel="popup" href="#popupMenuLevel2">Remove</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel2">Undo</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel2">Splice</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel2">Reticulate</a></li>
+ </ul>
+ </div>
+
+ <div data-role="popup" id="popupMenuLevel2" data-overlay-theme="b">
+ <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
+ <li><a href="index.html">Basics</a></li>
+ <li><a href="options.html">Options</a></li>
+ <li><a href="methods.html">Methods</a></li>
+ <li><a href="events.html">Events</a></li>
+ </ul>
+ </div>
<div data-role="popup" id="popupLogin" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
<form>
@@ -236,6 +254,84 @@
</div><!-- /page -->
+ <div data-role="page" class="type-interior" id="popup-index-p2">
+
+ <div data-role="header" data-theme="f">
+ <h1>Popup</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Popup</h2>
+
+ <a href="#popupMenuP2" data-rel="popup" data-role="button" data-inline="true" data-transition="fade">Menu</a>
+ <div data-role="popup" id="popupMenuP2" data-overlay-theme="b">
+ <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
+ <li><a data-rel="popup" href="#popupMenuLevel1P2">Add</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel1P2">Edit</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel1P2">Manage</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel1P2">Delete</a></li>
+ </ul>
+ </div>
+
+ <div data-role="popup" id="popupMenuLevel1P2" data-overlay-theme="b">
+ <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
+ <li><a data-rel="popup" href="#popupMenuLevel2P2">Remove</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel2P2">Undo</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel2P2">Splice</a></li>
+ <li><a data-rel="popup" href="#popupMenuLevel2P2">Reticulate</a></li>
+ </ul>
+ </div>
+
+ <div data-role="popup" id="popupMenuLevel2P2" data-overlay-theme="b">
+ <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
+ <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
+ <li><a href="index.html">Basics</a></li>
+ <li><a href="options.html">Options</a></li>
+ <li><a href="methods.html">Methods</a></li>
+ <li><a href="events.html">Events</a></li>
+ </ul>
+ </ul>
+ </div>
+
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+
+ <li data-role="list-divider">Pages &amp; Dialogs</li>
+ <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="../page-titles.html">Page titles</a></li>
+ <li><a href="../page-links.html">Linking pages</a></li>
+ <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
+ <li><a href="../page-dialogs.html">Dialogs</a></li>
+ <li data-theme="a"><a href="index.html">Popups</a></li>
+ <li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
+ <li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
+ <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
+ <li><a href="../page-scripting.html">Scripting pages</a></li>
+ <li><a href="../pages-themes.html">Theming pages</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2011 The jQuery Project</p>
+</div>
+
+</div><!-- /page -->
</body>
</html>

0 comments on commit b497bfe

Please sign in to comment.