A jQuery plugin that provides snapping functionality to a set of panels within your interface.
Check out the homepage at http://guidobouman.github.io/jquery-panelsnap or the demos folder for a working demo that explains most of the features present in the plugin.
The most basic setup will bind to body and snap all sections.
Javascript:
<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.customEvents.js"></script>
<script src="/path/to/jquery.panelSnap.js"></script>
<script>
$('body').panelSnap();
</script>
</head>
<body>
<section>
...
</section>
<section>
...
</section>
<section>
...
</section>
</body>
</html>The following is a list of available options. The values are their defaults within the plugin.
var options = {
$menu: false,
menuSelector: 'a',
panelSelector: 'section',
namespace: '.panelSnap',
onSnapStart: function(){},
onSnapFinish: function(){},
directionThreshold: 50,
slideSpeed: 200
};
$('.panel_container').panelSnap(options);$menu:
jQuery object referencing a menu that contains menu items
menuSelector:
A string containing the css selector to menu items (scoped within the menu)
panelSelector:
A string containg the css selector to panels (scoped within the container)
namespace:
A string containing the jQuery event namespace that's being used
onSnapStart:
A callback function that is being fired before a panel is being snapped
onSnapStop:
A callback function that is being fired after a panel was snapped
directionThreshold:
An integer specifying the ammount of pixels required to scroll before the plugin detects a direction and snaps to the next panel.
slideSpeed:
The ammount of miliseconds in which the plugin snaps to the desired panel
<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.customEvents.js"></script>
<script src="/path/to/jquery.panelSnap.js"></script>
<script>
var options = {
$menu: $('header .menu')
};
$('.panel_container').panelSnap(options);
</script>
</head>
<body>
<header>
<div class="menu">
<a href="/first" data-panel="first">First</a>
<a href="/second" data-panel="second">Second</a>
<a href="/third" data-panel="third">Third</a>
</div>
</header>
<div class="panel_container">
<section data-panel="first">
...
</section>
<section data-panel="second">
...
</section>
<section data-panel="third">
...
</section>
</div>
</body>