Added panel option, to change root panel element.

Resolves #66. Thanks to Modika for the original source work.
acolangelo · Nov 11, 2014 · a0d94bd · a0d94bd
1 parent 6a416fe
commit a0d94bd
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -75,7 +75,6 @@ The following options are set via an `object` passed into the constructor functi
 
 ***
 
-
 ###<a href="#options-menu" id="options-menu">menu</a>
 
 A selector string pointing to the desired menu element.
@@ -85,6 +84,15 @@ A selector string pointing to the desired menu element.
 
 ***
 
+###<a href="#options-panel" id="options-panel">panel</a>
+
+A selector string pointing to the desired root panel element. Point this to the element containing all content that should go into the panel.
+
+- **Data Type:** `string`
+- **Default Value:** `body`
+
+***
+
 ###<a href="#options-trigger" id="options-trigger">trigger</a>
 
 A selector string pointing to the menu-triggering element.

diff --git a/docs/index.html b/docs/index.html
@@ -128,6 +128,15 @@ <h3><a href="#options-menu">menu</a></a></h3>
 				</div>
 			</div>
 
+			<div class="spec first" id="options-panel">
+				<h3><a href="#options-panel">panel</a></a></h3>
+				<p>A selector string pointing to the desired root panel element. Point this to the element containing all content that should go into the panel.</p>
+				<div class="details">
+					<p><strong>Data Type:</strong> <code>string</code></p>
+					<p><strong>Default Value:</strong> <code>body</code></p>
+				</div>
+			</div>
+
 			<div class="spec" id="options-trigger">
 				<h3><a href="#options-trigger">trigger</a></h3>
 				<p>A selector string pointing to the menu-triggering element.</p>

diff --git a/docs/js/example-jRespond.min.js b/docs/js/example-jRespond.min.js
diff --git a/docs/js/script.min.js b/docs/js/script.min.js
diff --git a/jquery.jpanelmenu.js b/jquery.jpanelmenu.js
@@ -12,6 +12,7 @@
 		var jP = {
 			options: $.extend({
 				menu: '#menu',
+				panel: 'body',
 				trigger: '.menu-trigger',
 				excludedPanelContent: 'style, scfript',
 				clone: true,
@@ -163,11 +164,11 @@
 
 			setMenuState: function(open) {
 				var position = (open)?'open':'closed';
-				$('body').attr('data-menu-position', position);
+				$(jP.options.panel).attr('data-menu-position', position);
 			},
 
 			getMenuState: function() {
-				return $('body').attr('data-menu-position');
+				return $(jP.options.panel).attr('data-menu-position');
 			},
 
 			menuIsOpen: function() {
@@ -446,14 +447,14 @@
 
 			setupMarkup: function() {
 				$('html').addClass('jPanelMenu');
-				$('body > *').not(jP.menu + ', ' + jP.options.excludedPanelContent).wrapAll('<div class="' + jP.panel.replace('.','') + '"/>');
+				$(jP.options.panel + ' > *').not(jP.menu + ', ' + jP.options.excludedPanelContent).wrapAll('<div class="' + jP.panel.replace('.','') + '"/>');
 				var menu = ( jP.options.clone )?$(jP.options.menu).clone(jP.options.keepEventHandlers):$(jP.options.menu);
-				menu.attr('id', jP.menu.replace('#','')).insertAfter('body > ' + jP.panel);
+				menu.attr('id', jP.menu.replace('#','')).insertAfter(jP.options.panel + ' > ' + jP.panel);
 			},
 
 			resetMarkup: function() {
 				$('html').removeClass('jPanelMenu');
-				$('body > ' + jP.panel + ' > *').unwrap();
+				$(jP.options.panel + ' > ' + jP.panel + ' > *').unwrap();
 				$(jP.menu).remove();
 			},