details.js v1.4.0
details.js
Built to leverage Handlebars templates and JSON datasets. Improved animations and scrolling performance with Velocity. Responsive aware
Coded with care and love.
Demos
Multiple panels on top Single panel between rows Single panel replacing grid
Getting Started
Install using bower, or download project archive.
$ bower install --save details.js
# dependencies
$ bower install --save handlebars
$ bower install --save velocity
$ bower install --save imagesloaded # use imagesloaded.pkgd.min.js
Usage
$(function() {
var collection = $('.selector').details(
// extend default settings
);
});
Default Settings
{
dataset: {}, // JSON dataset to be compiled by Handlebars
fadein: true, // fade in on imagesloaded callback
fadeinSpeed: 800, // fade in speed in milliseconds
panel: {
classes: "", // additional CSS classes to be added to panel element
position: "top", // "top", "between rows" or "over grid"
stacked: true, // allow stacking of multiple panels (boolean)
speed: 400, // animation speed (int)
delay: 100, // open panel delay (int)
easing: {
open: "ease-out", // animation easing "ease-in", "ease-out" or "linear"
close: "ease-out" // animation easing "ease-in", "ease-out" or "linear"
},
},
scroll: {
offset: 0, // scroll top offset (int)
speed: 600, // scroll speed in milliseconds (int)
easing: "ease-out" // scroll easing "ease-in", "ease-out" or "linear"
},
onInit: $.noop, // function() { do something };
onOpen: $.noop, // …
onClose: $.noop, // …
onComplete: $.noop, // …
onStart: $.noop, // …
onEnd: $.noop // …
}
HTML data-attributes
Add any of these data attributes to elements in your template. (Optional)
data-role="close" <!-- close panel -->
data-role="previous" <!-- previous -->
data-role="=next" <!-- next -->
<!-- example -->
<a href="#" data-role="close">Close</a>
Callbacks and Public Methods
onInit
onInit: function() {} // called after grid template has been compiled
onOpen
onOpen: function() {} // called before transition starts
onClose
onClose: function() {} // called before transition starts
onComplete
onComplete: function(event) {} // called after transition ends
// event: "open", "close"
onStart
onStart: function() {} // called on first item view
onEnd
onEnd: function() {} // called on last item view
Calling methods programmatically
.close(element, callback); // @param: dom panel element, or undefined
// @param: callback fn
.open(element); // open panel, @param: dom grid element
// example using .close() method
var collection = $('.selector').details();
$('.selector').on('click', function(event) {
event.preventDefault();
collection.close(undefined, function() {});
});
// example using .open() method
var collection = $('.selector').details();
$(window).on('load', function() {
var element = $("figure:nth-child(2)");
collection.open(element);
});
Handlebars Templates
Handlebars provides the power necessary to build semantic templates effectively with no frustration. If you are not familiar with Handlebars, complete details can be found here.
Grid
Class item
is the only required class name below.
<script data-role="grid" type="text/x-handlebars-template">
{{#each items}}
<figure class="item"> <!-- figure or div tag -->
<!-- be creative -->
</figure>
{{/each}}
</script>
Panel
<script data-role="panel" type="text/x-handlebars-template">
<!-- be creative -->
</script>
JSON Dataset
The panel template uses the same dataset “context” as grid template. They are “connected” based on index position.
{
"items": [
// The data structure is entirely up to you.
{ "key": "value", … },
{ "key": "value", … }
…
]
}
CSS
/* required (don’t forget to add browser prefix) */
.selector { display: flex; flex-flow: row wrap; }
.selector .panel { width: 100%; position: relative; overflow: hidden; }
/* optional */
.selector .item { }
.selector .on { }
.selector .disabled { }
Dependencies
Browser Support
- Chrome
- Firefox
- Safari view issues
- IE 10+
License
This software is free to use under the MIT license.
9 years ago