Overview

Version 2.0.0

Dropdown is designed to be robust and extensible. It can be used independently or embedded into another plugin such as List Controller.

The general idea is to display a view inline with the target element. A Backbone.View, jQuery/HTML String, or Array are all acceptable types of "views". An array will be converted into a DropdownMenuView.

Install

npm install backbone-dropdown

General Use

Vanilla

new Dropdown({

    // required
    renderTo: $("#my-button"),
    view: myBackboneView,

    // options
    w: 200,
    trigger: 'click',
    align: 'bottomRight',
    autoCenter: false,
    theme: 'default',
    closeOnEsc: true,
    delay: 1000
});

jQuery

// jQuery
$("#my-button").dropdown(view, opts);

Menu Array

This is the most powerful view in Dropdown with many different features such as nesting, dividers, filtering, icons, multiple action events, and more. See the options documentation for details.

Open Menu

$('#menu').dropdown([
    { divider: 'My Menu'},
    { label:'Item 1', val: 1 },
    { label:'Item 2', val: 2 },
    { label:'Item 3', val: 3 },
    'divider',
    { label:'Item 4', val: 4 },
], {
    w:120,
    align: 'bottom',
    onClick: function(item){
        console.log(item)
    }
})

Backbone View Backbone.View

Dropdown can be used as a thin display wrapper for any Backbone view. Once the view has been initialized, pass it to dropdown as the view

My Account

var MyAccount = Backbone.View.extend({

    attributes:{style: 'padding: .5em 1em;'},

    render: function(){
        this.$el.html('<h2>My Account</h2><p>This is a backbone view loaded inside of a dropdown.<br><br>
            <a class="dd">Click here</a> to see a nested dropdown view</p>');
        this.$('a').dropdown("A nested dropdown. You can have multiple nested dropdowns.
        But dont't get too crazy or your users may not be very happy ;)");
        return this;
    }
})

var myAccount = new MyAccount();

$('#myaccount').dropdown(myAccount, {w: 300})

Each time the dropdown is opened, myAccount.render() will be called.

Text Tooltip String/jQuery

Dropdown can also be used as a simple tooltip.

$('#simple-tooltip').dropdown('This is a tooltip', {
    align: 'topRight',
    trigger: 'hover'
});

This tooltip will be dynamically generated each time it opens.

$('#simple-tooltip-dynamic').dropdown(function(){
    return 'This is dynamic: '+(new Date).toString();
}, {
    align: 'top',
    w: 220,
    trigger: 'hover'
});

Options

Checkout demo/index.js

License

MIT © Kevin Jantzer