Droplist turns this:
or this:
in to this:
$( ".droplist" ).droplist();
If you'd rather hide the elements at the end of your list; just pass the overflow
option with a value of right
.
$( ".droplist" ).droplist({ overflow: 'right' });
You can also either hide the ellipsis by passing ellipsis: false
$( ".droplist" ).droplist({ ellipsis: false });
or replace the default …
with a symbol of your choosing like so: ellipsis: '»'
.
$( ".droplist" ).droplist({ ellipsis: '»' });
But most likely, that boring caret is getting on your nerves and you want to override it. If you're using the Font Awesome icon library, it's as simple passing in the icon class of your choice like so:
$( ".droplist" ).droplist({ dropicon: 'fa-toggle-down' });
I'm Brian Rhea. I build things for the internet at Mocavo and live in Louisville, Colorado with my wife and three kids. If you have questions or would like to improve upon the plugin, you're most likely to find me on Twitter.
Big ups to the very talented Brett Wagner for the inspiration and UI design. We both hope this plugin makes your day a little easier.
All code licensed under the MIT License. In other words you are basically free to do whatever you want. Please don't remove my name from the source code, but who does that anyway?