Boost JS dropdown

A style-free dropdown plugin for jQuery and Boost JS. While other plugins style your dropdown for you, this plugin only handles the functionality, leaving the layout and styling up to you.

Installation

Install with npm:

npm install boost-js-dropdown

Install in browser:

<script src="https://cdn.rawgit.com/marksmccann/boost-js-dropdown/v0.0.1/dist/dropdown.min.js"></script>

Usage

Create Plugin

var boost = require('boost-js');
// var boost = $.fn.boost; (browser install)

var dropdown = require('boost-js-dropdown');
// var dropdown = $.fn.boost.dropdown; (browser install)

$.fn.dropdown = boost( dropdown.plugin, dropdown.defaults );

Markup Structure

<a href="#dropdown" data-role="trigger">Dropdown</a>
<ul id="dropdown">
    <li><a href="#">Action 1</a></li>
    <li><a href="#">Action 2</a></li>
    <li><a href="#">Action 3</a></li>
</ul>

Note: the dropdown does not have to be a list of actions, it can be any element with whatever content you want.

Instantiate Plugin

$('#dropdown').dropdown();

Options

Usage

$('#dropdown').dropdown({
    onInit: function() {
        console.log( this.id ); // 'dropdown'
    }
});

- or -

<ul id="dropdown" ... data-active-class="open">...</ul>

API

open( fn )

Opens the dropdown. fn: optional callback function called after opening.

instance.open();

close( fn )

Closes the dropdown. fn: optional callback function called after closing.

instance.close();

toggle( fn )

Closes the dropdown if it is open and vice versa. fn: optional callback function.

instance.toggle();

isOpen()

Determines if dropdown is open or not.

instance.isOpen();

trigger

The trigger element.

instance.trigger;

Running Tests

$ npm install && npm test

License

Copyright © 2016, Mark McCann. Released under the MIT license.