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
.
npm install backbone-dropdown
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);
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.
$('#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
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
var MyAccount = Backbone.View.extend({ attributes:{style: 'padding: .5em 1em;'}, render: function(){ this.$el.html(' My Account
This is a backbone view loaded inside of a dropdown.
'); 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})
Click here to see a nested dropdown view
Each time the dropdown is opened, myAccount.render()
will be called.
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' });
Checkout demo/index.js
MIT © Kevin Jantzer