Demos: modify panel page to avoid global nav conflict Fixes #6653 - D…

…emos: conflict between global navmenu and panel examples on panel demo page
jquery-archive · Nov 18, 2013 · 79a0526 · 79a0526
1 parent 3ff32c1
commit 79a0526
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/demos/_assets/css/jqm-demos.css b/demos/_assets/css/jqm-demos.css
@@ -195,7 +195,15 @@
 	opacity: .4;
 	filter: Alpha(Opacity=40);
 }
-
+.jqm-demos .jqm-navmenu-panel.jqm-panel-page-nav {
+	display: none;
+	position: absolute;
+	top: 178px;
+	left: 12px;
+}
+.jqm-demos .jqm-navmenu-panel.jqm-panel-page-nav ul li:first-child a{
+	border-top: none;
+}
 /* Search */
 .jqm-search-panel .ui-panel-inner {
 	padding-top: 0;
@@ -316,6 +324,12 @@
 		-moz-box-shadow: none;
 		box-shadow: none;
 	}
+	.jqm-demos.jqm-panel-page .jqm-navmenu-panel {
+		display: none;
+	}
+	html .jqm-demos.jqm-panel-page .jqm-navmenu-panel.jqm-panel-page-nav {
+		display: block;
+	}
 	.jqm-demos .jqm-navmenu-panel .ui-panel-inner {
 		margin-top: 3em;
 		margin-bottom: 3em;

diff --git a/demos/_assets/js/jqm-demos.js b/demos/_assets/js/jqm-demos.js
@@ -78,7 +78,7 @@ $( document ).on( "pagecreate", ".jqm-demos", function( event ) {
 	})
 
 	$( ".jqm-navmenu-link" ).on( "click", function() {
-		page.find( ".jqm-navmenu-panel" ).panel( "open" );
+		page.find( ".jqm-navmenu-panel:not(.jqm-panel-page-nav)" ).panel( "open" );
 	});
 
 	// Turn off autocomplete / correct for demos search
@@ -97,12 +97,12 @@ $( document ).on( "pagecreate", ".jqm-demos", function( event ) {
 		icon: false,
 		autodividers: true,
 		autodividersSelector: function ( li ) {
-    		return "";
-  		},
-  		arrowKeyNav: true,
-  		enterToNav: true,
-  		highlight: true,
-  		submitTo: searchUrl
+			return "";
+		},
+		arrowKeyNav: true,
+		enterToNav: true,
+		highlight: true,
+		submitTo: searchUrl
 	}).filterable();
 
 	// Initalize search page list and remove collapsibles

diff --git a/demos/panel/index.php b/demos/panel/index.php
@@ -13,7 +13,7 @@
 	<script src="../../js/"></script>
 </head>
 <body>
-<div data-role="page" class="jqm-demos" data-quicklinks="true">
+<div data-role="page" class="jqm-demos jqm-panel-page" data-quicklinks="true">
 
 	<!-- default panel  -->
 	<div data-role="panel" id="defaultpanel">
@@ -180,6 +180,11 @@
 
 		<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 page or, in case you use external panels and/or fixed toolbars, to the page container (<code>body</code>). See an example of a <a href="../panel-responsive/" data-ajax="false">responsive panel</a> page.</p>
 
+		<div class="jqm-navmenu-panel jqm-panel-page-nav">
+			<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
+				<?php include( '../jqm-contents.php' ); ?>
+			</ul>
+		</div>
 	</div><!-- /content -->
 
 	<?php include( '../jqm-navmenu.php' ); ?>