knapp.js

Knapp can take any shape color and size. Knapp iterates the provided node element, creates an array of objects, and outputs a “knapp” styled element ready to use. Demo

Getting Started

You may install knapp.js using package managers.

bower install knapp.js
npm install knapp.js

# knapp.min.js (minified version)

Usage

jQuery is not required

var example = new Knapp(document.querySelector('ul.example'), {
    selected: 1, // zero-based index
    onSelect: function(obj) {
        // console.log(obj);
    },
    onComplete: function(obj) {
        // console.log(obj);
    }
});

Default Settings

selected: 0 // zero-based index
onSelect: function(obj) {} // callback fn
onChange: function() {} // callback fn
onComplete: function(obj) {} // callback fn

Callbacks

onReady: function() {} // called once ready
onSelect: function(obj) {}  // called once an item has been selected
onChange: function() {} // called on seek, before transiton starts
onComplete: function(obj) {} // called on transition end

Public Methods

// add new items dynamically
.add(arr) // @param [Array of Objects]
          // Object keys: name, action and classlist

HTML data-attribute

Add data-knapp attribute to each element.

<!-- example -->
<ul class="example">
    <li class="bluebird" data-knapp="http://address.com">Mountain Bluebird</li>
    <li class="show" data-knapp="custom function">Snow Buting</li>
</ul>

CSS

TBD

License

This software is free to use under the MIT license.