/** * @param 'createCallback' A function to be called when a new entry is created. * Two arguments are supplied to this function: * The select element used and the value of the option. If the function * returns false addition will be cancelled. If it returns * anything else it will be used as the value of the newly added option. * @param 'createText' The placeholder text for the create action. * @param 'title' The title to show if no options are selected. * @param 'checked' An array containing values for options that should be * checked. Any options which are already selected will be added to this array. * @param 'labels' The corresponding labels to show for the checked items. * @param 'oncheck' Callback function which will be called when a * checkbox/radiobutton is selected. If the function returns false the input will be unchecked. * @param 'onuncheck' @see 'oncheck'. * @param 'singleSelect' If true radiobuttons will be used instead of * checkboxes. */ (function( $ ){ var multiSelectId=-1; $.fn.multiSelect=function(options) { multiSelectId++; var settings = { 'createCallback':false, 'createText':false, 'singleSelect':false, 'selectedFirst':false, 'sort':true, 'title':this.attr('title'), 'checked':[], 'labels':[], 'oncheck':false, 'onuncheck':false, 'minWidth': 'default;' }; var slideDuration = 0; $(this).attr('data-msid', multiSelectId); $.extend(settings,options); $.each(this.children(),function(i,option) { // If the option is selected, but not in the checked array, add it. if ( $(option).attr('selected') && settings.checked.indexOf($(option).val()) === -1 ) { settings.checked.push($(option).val()); settings.labels.push($(option).text().trim()); } // If the option is in the checked array but not selected, select it. else if ( settings.checked.indexOf($(option).val()) !== -1 && !$(option).attr('selected') ) { $(option).attr('selected', 'selected'); settings.labels.push($(option).text().trim()); } }); var button=$('
'+settings.title+'
'); var span=$(''); span.append(button); button.data('id',multiSelectId); button.selectedItems=[]; this.hide(); this.before(span); if(settings.minWidth=='default') { settings.minWidth=button.width(); } button.css('min-width',settings.minWidth); settings.minOuterWidth=button.outerWidth()-2; button.data('settings',settings); if(!settings.singleSelect && settings.checked.length>0) { button.children('span').first().text(settings.labels.join(', ')); } else if(settings.singleSelect) { button.children('span').first().text(this.find(':selected').text()); } var self = this; self.menuDirection = 'down'; function closeDropDown() { if(!button.parent().data('preventHide')) { // How can I save the effect in a var? if(self.menuDirection === 'down') { button.parent().children('ul').slideUp(slideDuration,function() { button.parent().children('ul').remove(); button.removeClass('active down'); $(self).trigger($.Event('dropdownclosed', settings)); }); } else { button.parent().children('ul').fadeOut(slideDuration,function() { button.parent().children('ul').remove(); button.removeClass('active up'); $(self).trigger($.Event('dropdownclosed', settings)); }); } } } button.click(function(event){ var button=$(this); if(button.parent().children('ul').length>0) { if(self.menuDirection === 'down') { button.parent().children('ul').slideUp(slideDuration,function() { button.parent().children('ul').remove(); button.removeClass('active down'); $(self).trigger($.Event('dropdownclosed', settings)); }); } else { button.parent().children('ul').fadeOut(slideDuration,function() { button.parent().children('ul').remove(); button.removeClass('active up'); $(self).trigger($.Event('dropdownclosed', settings)); }); } return; } // tell other lists to shut themselves var lists=$('ul.multiselectoptions'); lists.trigger($.Event('shut')); button.addClass('active'); event.stopPropagation(); var options=$(this).parent().next().children(); var list=$('