1.0.0 • Published 8 years ago
patch-panel v1.0.0
Patch Panel
Patch Panel makes responsive grid + panel layouts possible by displaying the corresponding panel for an item beneath the row it was clicked, regardless of items per row, width of items, or number of rows.
Demo
http://patchpanel.alecortega.com
Package Managers
// Bower
bower install patch-panel
// NPM
npm install patch-panelSettings
| Option | Type | Deault | Description |
|---|---|---|---|
| buttonSelector | string | '.patch-button' | Changes the selector that triggers the panel animation. |
| itemSelector | string | '.patch-item' | Changes the selector for all child items that make up the grid (items that are shown). |
| panelSelector | string | '.patch-panel' | Changes the selector for all panel items (panels are automatically hidden). |
| toggleSpeed | int | 300 | Changes the speed at which panels are animated. |
Initialization Example
$(element).patchpanel({
toggleSpeed: 600
});Gotchas
- All elements are automatically hidden upon initialization with jQuery. Since there's a delay between the DOM loading and javascript initializing, the panels may flicker from visible to hidden. You can avoid this by placing the following in your stylesheet:
.patch-panel {
display: none;
}Future Updates
- Better handling of events so that only two panels are triggered at any one time.
- Callback events for panel triggered, and panel finished collapsing.
- Handling of items of multiple heights.
- Add super simple stylesheet that adds proper styling.
Dependencies
jQuery 2.1
License
Copyright (c) 2015 Alec Ortega
Licensed under the MIT license.