p92345681
/
peff48bpz
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '7b148613a7'
${ noResults }
peff48bpz/vote/assets/plugins/jPanelMenu/docs/index.html

714 lines
37 KiB
Raw Blame History

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>jPanelMenu | A jQuery Plugin</title>
<meta name="viewport" content="initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57-precomposed.png" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main">
<h1 class="logo"><a href="." class="ss-list">jPanelMenu</a></h1>
<a href="#menu" class="menu-trigger ss-icon">&#xED50;</a>
<nav>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#inner-workings">Inner-Workings</a></li>
<li><a href="#animation">Animation</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#api">API</a></li>
<li><a href="#tips">Tips &amp; Examples</a></li>
<li><a href="#license">License</a></li>
<li><a href="#changelog">Changelog</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<div class="content">
<section class="intro">
<h2 id="overview"><a href="#">Version 1.4.1</a></h2>
<div class="text">
<p>jPanelMenu is a <a href="http://jquery.com">jQuery</a> plugin for easily creating and managing off-canvas content.</p>
<p class="jPM-specific">Just click on the menu button (the top left of this page) to see it in action.</p>
<p>Check out the <a href="#changelog">changelog</a> to see what&rsquo;s new.</p>
</div>
<div class="download">
<p><a href="jquery.jpanelmenu.js" title="jPanelMenu 1.4.0" class="button ss-download">Download jPanelMenu</a></p>
<p>Or <a href="https://github.com/acolangelo/jPanelMenu" title="Github | jPanelMenu">view the project on Github</a></p>
</div>
</section>
<section>
<h2 id="usage"><a href="#usage">How Do I Use This Thing?</a></h2>
<p>Start off by including the jPanelMenu.js file in your page. (Bonus points for using the minified version [jPanelMenu.min.js], or for bundling the jPanelMenu code into your own JavaScript file to reduce size and <abbr title="Hypertext Transfer Protocol">HTTP</abbr> requests.)</p>
<p>Build your page as you normally would (the source order does not matter), and instantiate jPanelMenu by calling the plugin constructor function.</p>
<pre>var jPM = $.<span class="jQuery-constructor">jPanelMenu</span>();</pre>
<p>By default, jPanelMenu will look for an element with an ID of <code>menu</code> to use as the menu, and elements with a class of <code>menu-trigger</code> to use as the trigger(s). Either use these IDs and classes on your elements, or pass a custom selector string pointing jPanelMenu to your menu and trigger elements in an object into the constructor function call, as follows:</p>
<pre>var jPM = $.<span class="jQuery-constructor">jPanelMenu</span>({
menu: '#custom-menu-selector',
trigger: '.custom-menu-trigger-selector'
});</pre>
<p class="caption"><strong>Note:</strong> Check out the <a href="#options">options section</a> for more customizable goodness like the above.</p>
<p>After jPanelMenu has been instantiated (make sure to save the returned object to a variable, as shown above), it&rsquo;s time to turn it on!</p>
<pre class="javascript">jPM.<span class="function">on</span>();</pre>
<p>After that, jPanelMenu will be functioning, and that&rsquo;s it!</p>
<p>If you want to take things to the next level, keep reading.</p>
</section>
<section>
<h2 id="inner-workings"><a href="#inner-workings">How Does This Thing Work?</a></h2>
<p>When jPanelMenu is <a href="#api-on" title="jPanelMenu | API | on">turned on</a>, two <code>&lt;div&gt;</code> elements are created. The menu element (with an ID of <code>jPanelMenu-menu</code>), and the panel element (with a class of <code>jPanelMenu-panel</code>). In addition, a class of <code>jPanelMenu</code> is applied to the <code>&lt;html&gt;</code> tag.</p>
<p>The menu, <code>#jPanelMenu-menu</code>, contains the elements targeted by the menu selector passed into the jPanelMenu constructor function. By default, the targeted menu element is cloned into <code>#jPanelMenu-menu</code>, and is not removed from its original position in the <abbr title="Document Object Model">DOM</abbr>. This action can be overridden with the <code><a href="#options-clone" title="jPanelMenu | Options| clone">clone</a></code> option.</p>
<p>The panel, <code>.jPanelMenu-panel</code>, contains all of the content in the element specified by the <code><a href="#options-panel" title="jPanelMenu | Options| panel">panel</a></code> option (except for the elements specified by the <code><a href="#options-excludedPanelContent" title="jPanelMenu | Options| excludedPanelContent">excludedPanelContent</a></code> option). The selected content is moved, not cloned, into <code>.jPanelMenu-panel</code>.</p>
<p>To style or select the menu, use the following selector: <code>#jPanelMenu-menu</code>.</p>
<p>To style or select the content panel, use the following selector: <code>.jPanelMenu-panel</code>.</p>
<p>When jPanelMenu is <a href="#api-off" title="jPanelMenu | API | off">turned off</a>, the two <code>&lt;div&gt;</code> elements are removed, all of the content inside <code>.jPanelMenu-panel</code> is moved back into the <code>&lt;body&gt;</code> element, and the class of <code>jPanelMenu</code> is removed from the <code>&lt;html&gt;</code> tag.</p>
</section>
<section>
<h2 id="animation"><a href="#animation">Does It Animate?</a></h2>
<p>Of course! (If you want it to, there&rsquo;s an <a href="#options" title="jPanelMenu | Options">option</a> for that.)</p>
<p>Animation is handled by <abbr title="Cascading Style Sheets">CSS</abbr> transitions, for browsers with support. <abbr title="Cascading Style Sheets">CSS</abbr> transitions are hardware-accelerated on supporting devices, so the animations are silky smooth.</p>
<p>For browsers that do not support <abbr title="Cascading Style Sheets">CSS</abbr> transitions, the jQuery animation engine is used as a fallback.</p>
</section>
<section>
<h2 id="options"><a href="#options">Options</a></h2>
<p>The following options are set via an <code>object</code> passed into the constructor function call, as shown below.</p>
<pre>var jPM = $.<span class="jQuery-constructor">jPanelMenu</span>({
menu: '#menu',
trigger: '.menu-trigger',
duration: 300
});</pre>
<div class="spec first" id="options-menu">
<h3><a href="#options-menu">menu</a></a></h3>
<p>A selector string pointing to the desired menu element.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
<p><strong>Default Value:</strong> <code>#menu</code></p>
</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>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
<p><strong>Default Value:</strong> <code>.menu-trigger</code></p>
</div>
</div>
<div class="spec" id="options-excludedPanelContent">
<h3><a href="#options-excludedPanelContent">excludedPanelContent</a></h3>
<p>A selector string specifying which elements within the <code>&lt;body&gt;</code> element should <strong>not</strong> be pushed into <code>.jPanelMenu-panel</code>. The selector string may contain any selector, not just tags.</p>
<p>Generally, <code>&lt;style&gt;</code> and <code>&lt;script&gt;</code> tags should not be moved from their original location, but in certain circumstances (mostly advertising), <code>&lt;script&gt;</code> tags may need to move with the page content.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
<p><strong>Default Value:</strong> <code>style, script</code></p>
</div>
</div>
<div class="spec" id="options-clone">
<h3><a href="#options-clone">clone</a></h3>
<p>A boolean value specifying whether or not the targeted menu element should be cloned to create <code>#jPanelMenu-menu</code>, or simply moved in the <abbr title="Document Object Model">DOM</abbr>.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>boolean</code></p>
<p><strong>Accepted Values:</strong> <code>true</code> or <code>false</code></p>
<p><strong>Default Value:</strong> <code>true</code></p>
</div>
</div>
<div class="spec" id="options-direction">
<h3><a href="#options-direction">direction</a></h3>
<p>A string specifying which direction the menu should open from.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
<p><strong>Accepted Values:</strong> <code>left</code> or <code>right</code></p>
<p><strong>Default Value:</strong> <code>left</code></p>
</div>
</div>
<div class="spec" id="options-openPosition">
<h3><a href="#options-openPosition">openPosition</a></h3>
<p>The measurement value for the open position of the menu. Can be set as a pixel, percentage, or <code>em</code> value.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
<p><strong>Examples:</strong> <code>250px</code>, <code>75%</code>, <code>20em</code></p>
<p><strong>Default Value:</strong> <code>250px</code></p>
</div>
</div>
<div class="spec" id="options-animated">
<h3><a href="#options-animated">animated</a></h3>
<p>A boolean value specifying whether or not the opening and closing of the menu should be animated.</p>
<p>When using the <abbr title="Application Programming Interface">API</abbr> functions <code><a href="#api-open" title="jPanelMenu | API | open()">open()</a></code>, <code><a href="#api-close" title="jPanelMenu | API | close()">close()</a></code>, and <code><a href="#api-trigger" title="jPanelMenu | API | trigger()">trigger()</a></code>, this setting can be overridden by passing in <code>true</code> as the parameter. More info in the <a href="#api" title="jPanelMenu | API">API section</a>.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>boolean</code></p>
<p><strong>Accepted Values:</strong> <code>true</code> or <code>false</code></p>
<p><strong>Default Value:</strong> <code>true</code></p>
</div>
</div>
<div class="spec" id="options-closeOnContentClick">
<h3><a href="#options-closeOnContentClick">closeOnContentClick</a></h3>
<p>A boolean value specifying whether or not the menu should be closed when clicking on the panel content.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>boolean</code></p>
<p><strong>Accepted Values:</strong> <code>true</code> or <code>false</code></p>
<p><strong>Default Value:</strong> <code>true</code></p>
</div>
</div>
<div class="spec" id="options-keyboardShortcuts">
<h3><a href="#options-keyboardShortcuts">keyboardShortcuts</a></h3>
<p>An option that allows you to control if keyboard shortcuts are enabled, and if they are, which keys do what.</p>
<p>Setting this option to <code>false</code> will disable keyboard shortcuts entirely. To enable keyboard shortcuts, pass in an <code>array</code> of <code>objects</code>. Each enabled key gets its own <code>object</code> in the <code>array</code> and each object should be structured as follows:</p>
<pre class="javascript">{
code: 27, /* Keycode of enabled key */
open: true /* Boolean (true or false), specifying whether or not key should open the menu */
close: false /* Boolean (true or false), specifying whether or not key should close the menu */
}</pre>
<div class="details">
<p><strong>Data Type:</strong> <code>array</code> or <code>boolean</code></p>
<p><strong>Accepted Values:</strong> <code>array</code> or <code>false</code></p>
<p><strong>Default Value:</strong></p>
<pre>[
{
code: 27, /* Escape Key */
open: false,
close: true
},{
code: 37, /* Left Arrow Key */
open: false,
close: true
},{
code: 39, /* Right Arrow Key */
open: true,
close: true
},{
code: 77, /* M Key */
open: true,
close: true
}
]</pre>
</div>
</div>
<div class="spec" id="options-duration">
<h3><a href="#options-duration">duration</a></h3>
<p>The time, in milliseconds, which it should take to open and close the menu, when animated.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>int</code></p>
<p><strong>Default Value:</strong> <code>150</code></p>
</div>
</div>
<div class="spec" id="options-openDuration">
<h3><a href="#options-openDuration">openDuration</a></h3>
<p>The time, in milliseconds, which it should take to open the menu, when animated. If set, this overrides the duration option.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>int</code></p>
<p><strong>Default Value:</strong> Inherited from <code><a href="#options-duration" title="jPanelMenu | Options | duration">duration</a></code></p>
</div>
</div>
<div class="spec" id="options-closeDuration">
<h3><a href="#options-closeDuration">closeDuration</a></h3>
<p>The time, in milliseconds, which it should take to close the menu, when animated. If set, this overrides the duration option.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>int</code></p>
<p><strong>Default Value:</strong> Inherited from <code><a href="#options-duration" title="jPanelMenu | Options | duration">duration</a></code></p>
</div>
</div>
<div class="spec" id="options-easing">
<h3><a href="#options-easing">easing</a></h3>
<p>The easing function to use when animating the opening and closing of the menu.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
<p><strong>Accepted Values:</strong> <code>linear</code>, <code>ease</code>, <code>ease-in</code>, <code>ease-out</code>, <code>ase-in-out</code></p>
<p><strong>Default Value:</strong> <code>ease-in-out</code></p>
</div>
</div>
<div class="spec" id="options-openEasing">
<h3><a href="#options-openEasing">openEasing</a></h3>
<p>The easing function to use when animating the opening of the menu. If set, this overrides the easing option.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
<p><strong>Accepted Values:</strong> <code>linear</code>, <code>ease</code>, <code>ease-in</code>, <code>ease-out</code>, <code>ase-in-out</code></p>
<p><strong>Default Value:</strong> Inherited from <code><a href="#options-easing" title="jPanelMenu | Options | easing">easing</a></code></p>
</div>
</div>
<div class="spec" id="options-closeEasing">
<h3><a href="#options-closeEasing">closeEasing</a></h3>
<p>The easing function to use when animating the closing of the menu. If set, this overrides the easing option.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
<p><strong>Accepted Values:</strong> <code>linear</code>, <code>ease</code>, <code>ease-in</code>, <code>ease-out</code>, <code>ase-in-out</code></p>
<p><strong>Default Value:</strong> Inherited from <code><a href="#options-easing" title="jPanelMenu | Options | easing">easing</a></code></p>
</div>
</div>
<div class="spec" id="options-before">
<h3><a href="#options-before">before</a></h3>
<p>Called before the menu is opened or closed, regardless of animation state.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
<div class="spec" id="options-beforeOpen">
<h3><a href="#options-beforeOpen">beforeOpen</a></h3>
<p>Called before the menu is opened, regardless of animation state.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
<div class="spec" id="options-beforeClose">
<h3><a href="#options-beforeClose">beforeClose</a></h3>
<p>Called before the menu is closed, regardless of animation state.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
<div class="spec" id="options-after">
<h3><a href="#options-after">after</a></h3>
<p>Called after the menu is opened or closed, regardless of animation state.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
<div class="spec" id="options-afterOpen">
<h3><a href="#options-afterOpen">afterOpen</a></h3>
<p>Called after the menu is opened, regardless of animation state.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
<div class="spec" id="options-afterClose">
<h3><a href="#options-afterClose">afterClose</a></h3>
<p>Called after the menu is closed, regardless of animation state.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
<div class="spec" id="options-beforeOn">
<h3><a href="#options-beforeOn">beforeOn</a></h3>
<p>Called before the plugin is turned on (when <code><a href="#api-on" title="jPanelMenu | API | on">on( )</a></code> is called).</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
<div class="spec" id="options-afterOn">
<h3><a href="#options-afterOn">afterOn</a></h3>
<p>Called after the plugin is turned on (when <code><a href="#api-on" title="jPanelMenu | API | on">on( )</a></code> is called).</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
<div class="spec" id="options-beforeOff">
<h3><a href="#options-beforeOff">beforeOff</a></h3>
<p>Called before the plugin is turned off (when <code><a href="#api-off" title="jPanelMenu | API | off">off( )</a></code> is called).</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
<div class="spec" id="options-afterOff">
<h3><a href="#options-afterOff">afterOff</a></h3>
<p>Called after the plugin is turned off (when <code><a href="#api-off" title="jPanelMenu | API | off">off( )</a></code> is called).</p>
<div class="details">
<p><strong>Data Type:</strong> <code>function</code></p>
<p><strong>Default Value:</strong> <code>function(){ }</code></p>
</div>
</div>
</section>
<section>
<h2 id="api"><a href="#api">API</a></h2>
<p>The following are the methods and properties of the object returned by the jPanelMenu constructor function call. In the following example, these would be the methods and properties of <code>jPM</code>.</p>
<pre>var jPM = $.<span class="jQuery-constructor">jPanelMenu</span>();
jPM.<span class="function">on</span>();
jPM.<span class="function">trigger</span>(true);</pre>
<div class="spec" id="api-on">
<h3><a href="#api-on">on(&nbsp;)</a></h3>
<p>Initializes a jPanelMenu instance. Sets up the markup, styles, listeners, and interactions, according to the options passed into the constructor function.</p>
<div class="details">
<p><strong>Returns:</strong> <code>null</code></p>
</div>
</div>
<div class="spec" id="api-off">
<h3><a href="#api-off">off(&nbsp;)</a></h3>
<p>Destroys a jPanelMenu instance. Resets the markup and styles, removes listeners and interactions.</p>
<div class="details">
<p><strong>Returns:</strong> <code>null</code></p>
</div>
</div>
<div class="spec" id="api-trigger">
<h3><a href="#api-trigger">trigger(&nbsp;<code>animated</code>&nbsp;)</a></h3>
<p>Triggers the opening or closing of the menu, depending on the current state (open or closed).</p>
<div class="details">
<p><strong>Parameters:</strong></p>
<div class="param">
<p><code>animated</code></p>
<p>A boolean value that determines whether or not to animate the action. The action will animate if set to <code>true</code>, and will not animate if set to <code>false</code>. If no value is set, the value of the <code><a href="#options-animated" title="jPanelMenu | Options | animated">animated</a></code> option will be used.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>boolean</code></p>
<p><strong>Accepted Values:</strong> <code>true</code> or <code>false</code></p>
</div>
</div>
<p><strong>Returns:</strong> <code>null</code></p>
</div>
</div>
<div class="spec" id="api-open">
<h3><a href="#api-open">open(&nbsp;<code>animated</code>&nbsp;)</a></h3>
<p>Triggers the opening of the menu.</p>
<div class="details">
<p><strong>Parameters:</strong></p>
<div class="param">
<p><code>animated</code></p>
<p>A boolean value that determines whether or not to animate the action. The action will animate if set to <code>true</code>, and will not animate if set to <code>false</code>. If no value is set, the value of the <code><a href="#options-animated" title="jPanelMenu | Options | animated">animated</a></code> option will be used.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>boolean</code></p>
<p><strong>Accepted Values:</strong> <code>true</code> or <code>false</code></p>
</div>
</div>
<p><strong>Returns:</strong> <code>null</code></p>
</div>
</div>
<div class="spec" id="api-close">
<h3><a href="#api-close">close(&nbsp;<code>animated</code>&nbsp;)</a></h3>
<p>Triggers the closing of the menu.</p>
<div class="details">
<p><strong>Parameters:</strong></p>
<div class="param">
<p><code>animated</code></p>
<p>A boolean value that determines whether or not to animate the action. The action will animate if set to <code>true</code>, and will not animate if set to <code>false</code>. If no value is set, the value of the <code><a href="#options-animated" title="jPanelMenu | Options | animated">animated</a></code> option will be used.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>boolean</code></p>
<p><strong>Accepted Values:</strong> <code>true</code> or <code>false</code></p>
</div>
</div>
<p><strong>Returns:</strong> <code>null</code></p>
</div>
</div>
<div class="spec" id="api-isOpen">
<h3><a href="#api-isOpen">isOpen(&nbsp;)</a></h3>
<p>Checks the current state of the menu. Returns <code>true</code> if the menu is currently open, and <code>false</code> if it is closed.</p>
<div class="details">
<p><strong>Returns:</strong> <code>boolean</code>, <code>true</code> or <code>false</code></p>
</div>
</div>
<div class="spec" id="api-menu">
<h3><a href="#api-menu">menu</a></h3>
<p>A property equal to the raw selector string of the created menu object.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
</div>
</div>
<div class="spec" id="api-getMenu">
<h3><a href="#api-getMenu">getMenu(&nbsp;)</a></h3>
<p>Returns a <code>jQuery Object</code> containing the created menu object.</p>
<div class="details">
<p><strong>Returns:</strong> <code>jQuery Object</code></p>
</div>
</div>
<div class="spec" id="api-panel">
<h3><a href="#api-panel">panel</a></h3>
<p>A property equal to the raw selector string of the created panel object.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
</div>
</div>
<div class="spec" id="api-getPanel">
<h3><a href="#api-getPanel">getPanel(&nbsp;)</a></h3>
<p>Returns a <code>jQuery Object</code> containing the created panel object.</p>
<div class="details">
<p><strong>Returns:</strong> <code>jQuery Object</code></p>
</div>
</div>
<div class="spec" id="api-setPosition">
<h3><a href="#api-setPosition">setPosition(&nbsp;<code>position</code>&nbsp;)</a></h3>
<p>Sets the measurement value for the open position of the menu. Can be set as a pixel, percentage, or <code>em</code> value.</p>
<div class="details">
<p><strong>Data Type:</strong> <code>string</code></p>
<p><strong>Examples:</strong> <code>250px</code>, <code>75%</code>, <code>20em</code></p>
<p><strong>Returns:</strong> <code>null</code></p>
</div>
</div>
</section>
<section>
<h2 id="tips"><a href="#tips">Tips, Best Practices, and Other Good Ideas (with Examples)</a></h2>
<p>jPanelMenu was built to be very open-ended and allow a lot of customization for each implementation. A lot of the customization of jPanelMenu implementations will start with the easy hooks provided by the plugin.</p>
<p>When jPanelMenu is <a href="#api-on" title="jPanelMenu | API | on">turned on</a>, the following elements are created (or classes applied, in the case of the <code>&lt;html&gt;</code> tag):</p>
<pre>&lt;html class="jPanelMenu"&gt;
&lt;head&gt;
<span class="plain-text">...</span>
&lt;/head&gt;
&lt;body&gt;
&lt;div id="jPanelMenu-menu" /&gt;
&lt;div class="jPanelMenu-panel" /&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p class="caption"><strong>Note:</strong> Content abbreviated for simplicity.</p>
<p>In addition, there are a few helpful things to know that will improve specific implementations, regardless of use case.</p>
<h3 id="tips-styling"><a href="#tips-styling" title="Styling jPanelMenu">Stylin&rsquo;</a></h3>
<p>There are no default graphical styles injected into your page by jPanelMenu, because, as a developer who loves complete control over my pages, there is nothing I dislike more than plugins which do that. Therefore, all graphical styling is up to you, and jPanelMenu makes it very easy.</p>
<p>When jPanelMenu is <a href="#api-on" title="jPanelMenu | API | on">turned on</a>, two <code>&lt;div&gt;</code> elements are created. The menu element (selector: <code>#jPanelMenu-menu</code>), and the panel element (selector: <code>.jPanelMenu-panel</code>). In addition, a class of <code>jPanelMenu</code> is applied to the <code>&lt;html&gt;</code> tag.</p>
<p>The background color of <code>.jPanelMenu-panel</code> is set by the plugin, and its value is inherited from the <code>&lt;body&gt;</code> element&rsquo;s <code>background-color</code>.</p>
<p>If the <code>&lt;body&gt;</code> element&rsquo;s <code>background-color</code> is not set, the <code>&lt;html&gt;</code> element&rsquo;s <code>background-color</code> is used. If neither is set, the <code>background-color</code> is set to white.</p>
<h3 id="tips-progressive-enhancement"><a href="#tips-progressive-enhancement" title="Progressive Enhancement with jPanelMenu">Progressive Enhancement</a></h3>
<p>Users without JavaScript (whether they have turned it off or are using a device without it) will obviously not get the interactions provided by jPanelMenu. It&rsquo;s a good idea to take a <a href="http://www.alistapart.com/articles/understandingprogressiveenhancement/" title="Progressive Enhancement | A List Apart">&ldquo;progressive enhancement&rdquo;</a> approach, and build your site to work without JavaScript and jPanelMenu.</p>
<p>A great way to do this is to use the hooks provided to you by jPanelMenu. When jPanelMenu is <a href="#api-on" title="jPanelMenu | API | on">turned on</a>, the class <code>jPanelMenu</code> is applied to the <code>&lt;html&gt;</code> tag (conversely, when jPanelMenu is <a href="#api-off" title="jPanelMenu | API | off">turned off</a>, this class is removed).</p>
<p>Build your site as you normally would, without JavaScript and without styles specific to JavaScript interactions or plugins. Restrict all jPanelMenu-specific styles and script actions to elements that are descendents of <code>.jPanelMenu</code>. Styles such as those which hide elements that are unnecessary with jPanelMenu enabled, or scripting actions specific to jPanelMenu functions, should use the <code>.jPanelMenu</code> selector to ensure that their effects only take hold when jPanelMenu is enabled.</p>
<p class="jPM-specific">That idea was used to create this page. Take a look at what this page looks like <a href="" title="Disable jPanelMenu" id="trigger-off">with jPanelMenu turned off</a> (particularly the navigation) to see this principle in action. Notice how all of the navigation is accessible in the <a href="#" title="jPanelMenu">header of the page</a>, and no content is lost.</p>
<h3 id="tips-jrespond"><a href="#tips-jrespond" title="jPanelMenu and jRespond &mdash; Perfect Together">jPanelMenu and jRespond &mdash; Perfect Together</a></h3>
<p>I'm a <strong>huge</strong> fan of <a href="https://github.com/ten1seven/jRespond" title="jRespond | Github">jRespond</a>, which is &ldquo;a simple way to globally manage JavaScript on responsive websites.&rdquo;</p>
<p>jRespond and jPanelMenu are the perfect couple &mdash; use jRespond to enable and disable jPanelMenu at the appropriate breakpoints, creating a truly great experience. That&rsquo;s how I almost always use jPanelMenu, and I suggest you give it a shot, too.</p>
<p>Responsive design is awesome on its own, but add responsive behavior to the mix, and you&rsquo;ve made something incredible.</p>
<p>Check out the <a href="examples/jrespond/index.html" title="jPanelMenu Example | jPanelMenu with jRespond">example</a> of how to use jRespond with jPanelMenu, which includes a basic how-to, code snippets, and helpful tips.</p>
<p><a href="examples/jrespond/index.html" title="jPanelMenu Example | jPanelMenu with jRespond" class="button example"><span class="ss-icon">&#x1F440;</span> View Example</a></p>
</section>
<section>
<h2 id="license"><a href="#license">License</a></h2>
<p>jPanelMenu is distributed freely under the <a href="http://opensource.org/licenses/MIT" title="Open Source Initiative OSI &dash; The MIT License">MIT License</a>, so you&rsquo;re free to use this plugin on any and all projects.</p>
</section>
<section>
<h2 id="changelog"><a href="#changelog">Changelog</a></h2>
<dl>
<dt id="changelog-1.4.1"><a href="#changelog-1.4.1">1.4.1</a></dt>
<dd>
<p><time>November 11th, 2014</time></p>
<ul>
<li>Added <code>touchend</code> listeners for better touch support.</li>
</ul>
</dd>
<dt id="changelog-1.4.0"><a href="#changelog-1.4.0">1.4.0</a></dt>
<dd>
<p><time>November 11th, 2014</time></p>
<ul>
<li>Added new option: <code><a href="#options-closeOnContentClick" title="jPanelMenu | Options | closeOnContentClick">closeOnContentClick</a></code></li>
<li>Added <code><a href="#options-panel" title="jPanelMenu | Options | panel">panel</a></code> option.</li>
<li>Added <code><a href="#options-clone" title="jPanelMenu | Options | clone">clone</a></code> option.</li>
<li>Added <code><a href="#options-clone" title="jPanelMenu | API | setPosition">setPosition(&nbsp;)</a></code> API method.</li>
<li>Removed support for fixed positioning within the panel. CSS transforms and fixed positioning <a href="http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/">do not get along well, per the spec</a>. If fixed positioning is needed, use <a href="https://github.com/acolangelo/jPanelMenu/blob/master/jquery.jpanelmenu-legacy.js">the legacy build</a> in the jPanelMenu repository.</li>
<li>Updated <code>.jPanelMenu-panel</code> to be positioned statically.</li>
<li>Updated background handling so that all properties are transferred to the <code>.jPanelMenu-panel</code> appropriately.</li>
<li>Updated key press preventers to include typing within a <code>&lt;select&gt;</code> field.</li>
<li>Fixed event propagation up to the document.</li>
<li>Fixed an issue causing links under the menu button to be triggered inadvertently.</li>
<li>Fixed an issue with loop styles and the Ember.js framework.</li>
</ul>
</dd>
<dt id="changelog-1.3.0"><a href="#changelog-1.3.0">1.3.0</a></dt>
<dd>
<p><time>February 4th, 2013</time></p>
<ul>
<li>Added new option: <code><a href="#options-closeOnContentClick" title="jPanelMenu | Options | closeOnContentClick">closeOnContentClick</a></code></li>
</ul>
</dd>
<dt id="changelog-1.2.0"><a href="#changelog-1.2.0">1.2.0</a></dt>
<dd>
<p><time>February 3rd, 2013</time></p>
<ul>
<li>Added new callback options: <code><a href="#options-beforeOn" title="jPanelMenu | Options | beforeOn">beforeOn</a></code>, <code><a href="#options-afterOn" title="jPanelMenu | Options | afterOn">afterOn</a></code>, <code><a href="#options-beforeOff" title="jPanelMenu | Options | beforeOff">beforeOff</a></code>, <code><a href="#options-afterOff" title="jPanelMenu | Options | afterOff">afterOff</a></code></li>
</ul>
</dd>
<dt id="changelog-1.1.1"><a href="#changelog-1.1.1">1.1.1</a></dt>
<dd>
<p><time>February 3rd, 2013</time></p>
<ul>
<li>Fixed a conflict between <a href="#options-keyboardShortcuts">keyboard shortcuts</a> and text inputs. (Thanks to <a href="https://github.com/stoeffel">stoeffel</a>.)</li>
<li>Renamed JavaScript resources to be more friendly for future development.</li>
</ul>
</dd>
<dt id="changelog-1.1.0"><a href="#changelog-1.1.0">1.1.0</a></dt>
<dd>
<p><time>December 7th, 2012</time></p>
<ul>
<li>Added <a href="#options-direction">directional control</a>. Panel can now slide left or right.</li>
<li>Removed unnecessary trigger check condition. (Thanks to <a href="https://twitter.com/jimmynotjim">James Wilson</a>!)</li>
</ul>
</dd>
<dt id="changelog-1.0.0"><a href="#changelog-1.0.0">1.0.0</a></dt>
<dd>
<p><time>November 4th, 2012</time></p>
<ul>
<li>First release of jPanelMenu.</li>
</ul>
</dd>
</dl>
</section>
<section>
<h2 id="about"><a href="#about">Who Made This Wonderful Little Plugin?</a></h2>
<p>jPanelMenu was created, and is maintained, by <a href="http://acolangelo.com" title="Anthony Colangelo | Web Design &amp; Development">Anthony Colangelo</a>.</p>
<p>You can find him (<a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">@acolangelo</a>) on <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">Twitter</a> and <a href="https://github.com/acolangelo" title="Github | Anthony Colangelo (@acolangelo)">Github</a>.</p>
</section>
</div>
<footer class="main">
<small>&copy; 2012 <a href="http://acolangelo.com" title="Anthony Colangelo | Web Design &amp; Development">Anthony Colangelo</a></small>
</footer>
<script src="http://use.typekit.net/koc4rlq.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<!--
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36076455-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
-->
<!--
This is a concatenated and minifed file containing all scripts necessary to run this page.
View my uncompressed script for this page at http://jpanelmenu.com/js/script.js
Other Included Files:
http://jpanelmenu.com/js/lib/modernizr-2.6.1.min.js
http://jpanelmenu.com/js/lib/respond.js
http://jpanelmenu.com/js/lib/highlight.min.js
http://jpanelmenu.com/js/lib/jquery-1.9.0.js
http://jpanelmenu.com/js/lib/jquery.jpanelmenu.min.js
http://jpanelmenu.com/js/lib/plugins.js
http://jpanelmenu.com/js/script.js
-->
<script src="js/script.min.js"></script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink