simple select box jQuery plugin
HTML
<select class="whoa">
<option value="1">One</option>
<option value="2">Two</option>
<option value="2">Two</option>
<option value="4">cuatro</option>
<option value="3">Three</option>
</select>
CSS
/* wrapping element */
.select-box-wrap {
}
/* selected text + arrow wrapper */
.select-box-dropdown-toggler {
}
/* selected text */
.select-box-selected {
}
/* toggler arrow */
.select-box-arrow {
}
/* dropdown wrapper */
.select-box-dropdown {
}
/* list of options (ul) */
.select-box-option-list {
}
/* option */
.select-box-option {
}
JavaScript
(function( $ ) {
// Helpers
// Allows to render super simple templates:
//
// renderTemplate("Hello, {name}!", {
// name : "John"
// }); // returns "Hello, John"
//
var renderTemplate = function ( str, attrArr ) {
if ( !attrArr ) return str;
for ( var key in attrArr ) {
str = str.replace("{" + key + "}", attrArr[key]);
}
return str;
};
// default templates
var wrapTemplate = "<div class='{class}'>{content}</div>",
optionsListTemplate = "<ul class='{class}'>{content}</ul>",
optionTemplate = "<li class='{class}'>{content}</li>";
// DOM manipulation
$.fn.selectBox = function( opts ) {
opts = opts || {};
// defaults
opts = $.extend({
boxTemplate : wrapTemplate,
boxClass : "select-box-wrap",
dropdownTogglerTemplate : wrapTemplate,
dropdownTogglerClass : "select-box-dropdown-toggler",
selectedTemplate : wrapTemplate,
selectedClass : "select-box-selected",
arrowTemplate : wrapTemplate,
arrowClass : "select-box-arrow",
arrowContent : "▼",
dropDownTemplate : wrapTemplate,
dropDownClass : "select-box-dropdown",
optionsListTemplate : optionsListTemplate,
optionListClass : "select-box-option-list",
optionTemplate : optionTemplate,
optionClass : "select-box-option"
}, opts );
return this.each( function() {
var selectBox = $(this),
options = selectBox.find('option'),
html = [],
i = 0, len = options.length,
currentOption, currentOptionClasses,
currentOptionContent;
// Hide...