Skip to content

marksmccann/boost-js-dropdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Boost JS Dropdown Build Status

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

Name Default Description
activeClass "is-open" the class added to the trigger and dropdown when open
onOpen null a callback function called after the dropdown opens
onClose null a callback function called after the dropdown closes
onInit null a callback function called after the dropdown is initialized

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.

About

A style-free dropdown plugin for jQuery and Boost JS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published