Prettybox JQuery Plugin

This pluggin renders multi-select HTML element as box with selectable items. Plugin uses JQuery UI CSS themes and can be customized by your custom JQuery Templates and CSS.

Prettybox Options

Option Default Description
prettyBoxTemplateName 'prettyBoxTemplate' JQuery Template compiled template name which uses to render box
hideSelect true Hide initial select html element
boxTitle 'No title' Box title
boxEmptyMessage 'Nothing selected' Message for empty box
dropdownEmptyMessage 'Nothing to select' message for empty dropdown
selectButtonCaption 'Select' Box select button caption
closeDropdownOnOuterClick true close dropdown by clicking out of box (html.click() subscription)
boxMinWidth '200px' Min box width
dropdownWidth '300px' Dropdown width

Demo

Prettybox created with default settings. This also sample of long items select.
        
function () {
    $('#long_color').prettybox();
}   
Prettybox created with custom settings. It don't hide initial select element.
        
$('#color').prettybox({
    boxTitle: 'Color',
    boxEmptyMessage: 'Any',
    boxMinWidth: '150px',
    dropdownWidth: '200px',
    hideSelect:false
}); 
Set of prettyboxes.
        
$('.group1').prettybox();