Enhanced multiSelect jquery plugin.
This commit is contained in:
parent
4cb760a924
commit
b23c03c190
|
@ -5,8 +5,6 @@
|
|||
ul.multiselectoptions {
|
||||
background-color:#fff;
|
||||
border:1px solid #ddd;
|
||||
border-bottom-left-radius:.5em;
|
||||
border-bottom-right-radius:.5em;
|
||||
border-top:none;
|
||||
box-shadow:0 1px 1px #ddd;
|
||||
padding-top:.5em;
|
||||
|
@ -14,6 +12,16 @@
|
|||
z-index:49;
|
||||
}
|
||||
|
||||
ul.multiselectoptions.down {
|
||||
border-bottom-left-radius:.5em;
|
||||
border-bottom-right-radius:.5em;
|
||||
}
|
||||
|
||||
ul.multiselectoptions.up {
|
||||
border-top-left-radius:.5em;
|
||||
border-top-right-radius:.5em;
|
||||
}
|
||||
|
||||
ul.multiselectoptions>li {
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
|
@ -30,11 +38,20 @@
|
|||
|
||||
div.multiselect.active {
|
||||
background-color:#fff;
|
||||
position:relative;
|
||||
z-index:50;
|
||||
}
|
||||
|
||||
div.multiselect.up {
|
||||
border-top:0 none;
|
||||
border-top-left-radius:0;
|
||||
border-top-right-radius:0;
|
||||
}
|
||||
|
||||
div.multiselect.down {
|
||||
border-bottom:none;
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
position:relative;
|
||||
z-index:50;
|
||||
}
|
||||
|
||||
div.multiselect>span:first-child {
|
||||
|
|
|
@ -1,3 +1,13 @@
|
|||
/**
|
||||
* @param 'createCallback' A function to be called when a new entry is created. Only argument to the function is the value of the 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){
|
||||
|
@ -5,16 +15,25 @@
|
|||
var settings = {
|
||||
'createCallback':false,
|
||||
'createText':false,
|
||||
'singleSelect':false,
|
||||
'title':this.attr('title'),
|
||||
'checked':[],
|
||||
'labels':[],
|
||||
'oncheck':false,
|
||||
'onuncheck':false,
|
||||
'minWidth': 'default;',
|
||||
};
|
||||
$.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=$('<div class="multiselect button"><span>'+settings.title+'</span><span>▾</span></div>');
|
||||
|
@ -30,18 +49,31 @@
|
|||
button.css('min-width',settings.minWidth);
|
||||
settings.minOuterWidth=button.outerWidth()-2;
|
||||
button.data('settings',settings);
|
||||
if(settings.checked.length>0){
|
||||
button.children('span').first().text(settings.checked.join(', '));
|
||||
|
||||
if(!settings.singleSelect && settings.checked.length>0){
|
||||
//button.children('span').first().text(settings.checked.join(', '));
|
||||
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';
|
||||
button.click(function(event){
|
||||
|
||||
var button=$(this);
|
||||
if(button.parent().children('ul').length>0){
|
||||
if(self.menuDirection === 'down') {
|
||||
button.parent().children('ul').slideUp(400,function(){
|
||||
button.parent().children('ul').remove();
|
||||
button.removeClass('active');
|
||||
});
|
||||
} else {
|
||||
button.parent().children('ul').fadeOut(400,function(){
|
||||
button.parent().children('ul').remove();
|
||||
button.removeClass('active').removeClass('up');
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
var lists=$('ul.multiselectoptions');
|
||||
|
@ -54,15 +86,19 @@
|
|||
event.stopPropagation();
|
||||
var options=$(this).parent().next().children();
|
||||
var list=$('<ul class="multiselectoptions"/>').hide().appendTo($(this).parent());
|
||||
var inputType = settings.singleSelect ? 'radio' : 'checkbox';
|
||||
function createItem(element,checked){
|
||||
element=$(element);
|
||||
var item=element.val();
|
||||
var id='ms'+multiSelectId+'-option-'+item;
|
||||
var input=$('<input type="checkbox"/>');
|
||||
var input=$('<input type="' + inputType + '"/>');
|
||||
input.attr('id',id);
|
||||
if(settings.singleSelect) {
|
||||
input.attr('name', 'ms'+multiSelectId+'-option');
|
||||
}
|
||||
var label=$('<label/>');
|
||||
label.attr('for',id);
|
||||
label.text(item);
|
||||
label.text(element.text() || item);
|
||||
if(settings.checked.indexOf(item)!=-1 || checked){
|
||||
input.attr('checked',true);
|
||||
}
|
||||
|
@ -70,33 +106,41 @@
|
|||
settings.checked.push(item);
|
||||
}
|
||||
input.change(function(){
|
||||
var groupname=$(this).next().text();
|
||||
var value = $(this).attr('id').substring(String('ms'+multiSelectId+'-option').length+1);
|
||||
var label = $(this).next().text().trim();
|
||||
if($(this).is(':checked')){
|
||||
if(settings.singleSelect) {
|
||||
settings.checked = [];
|
||||
settings.labels = [];
|
||||
$.each(self.find('option'), function() {
|
||||
$(this).removeAttr('selected');
|
||||
});
|
||||
}
|
||||
element.attr('selected','selected');
|
||||
if(settings.oncheck){
|
||||
if(settings.oncheck(groupname)===false){
|
||||
if(settings.oncheck(value)===false){
|
||||
$(this).attr('checked', false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
settings.checked.push(groupname);
|
||||
settings.checked.push(value);
|
||||
settings.labels.push(label);
|
||||
}else{
|
||||
var index=settings.checked.indexOf(groupname);
|
||||
var index=settings.checked.indexOf(value);
|
||||
element.attr('selected',null);
|
||||
if(settings.onuncheck){
|
||||
if(settings.onuncheck(groupname)===false){
|
||||
if(settings.onuncheck(value)===false){
|
||||
$(this).attr('checked',true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
settings.checked.splice(index,1);
|
||||
settings.labels.splice(index,1);
|
||||
}
|
||||
var oldWidth=button.width();
|
||||
if(settings.checked.length>0){
|
||||
button.children('span').first().text(settings.checked.join(', '));
|
||||
}else{
|
||||
button.children('span').first().text(settings.title);
|
||||
}
|
||||
button.children('span').first().text(settings.labels.length > 0
|
||||
? settings.labels.join(', ')
|
||||
: settings.title);
|
||||
var newOuterWidth=Math.max((button.outerWidth()-2),settings.minOuterWidth)+'px';
|
||||
var newWidth=Math.max(button.width(),settings.minWidth);
|
||||
var pos=button.position();
|
||||
|
@ -123,7 +167,7 @@
|
|||
var input=$('<input class="new">');
|
||||
li.append(input);
|
||||
input.focus();
|
||||
input.css('width',button.width());
|
||||
input.css('width',button.innerWidth());
|
||||
button.parent().data('preventHide',true);
|
||||
input.keypress(function(event) {
|
||||
if(event.keyCode == 13) {
|
||||
|
@ -132,7 +176,7 @@
|
|||
var value = $(this).val();
|
||||
var exists = false;
|
||||
$.each(options,function(index, item) {
|
||||
if ($(item).val() == value) {
|
||||
if ($(item).val() == value || $(item).text() == value) {
|
||||
exists = true;
|
||||
return false;
|
||||
}
|
||||
|
@ -143,15 +187,18 @@
|
|||
var li=$(this).parent();
|
||||
$(this).remove();
|
||||
li.text('+ '+settings.createText);
|
||||
li.before(createItem(this));
|
||||
li.before(createItem(this, true));
|
||||
if(self.menuDirection === 'up') {
|
||||
var list = li.parent();
|
||||
list.css('top', list.position().top-li.outerHeight());
|
||||
}
|
||||
var select=button.parent().next();
|
||||
var option=$('<option selected="selected"/>');
|
||||
option.attr('value',value);
|
||||
option.text($(this).val());
|
||||
select.append(option);
|
||||
option.text($(this).val());
|
||||
li.prev().children('input').trigger('click');
|
||||
button.parent().data('preventHide',false);
|
||||
if(settings.createCallback){
|
||||
if(typeof settings.createCallback === 'function'){
|
||||
settings.createCallback($(this).val());
|
||||
}
|
||||
}
|
||||
|
@ -169,20 +216,41 @@
|
|||
list.append(li);
|
||||
}
|
||||
var pos=button.position();
|
||||
if($(document).height() > button.offset().top+button.outerHeight() + list.children().length * button.height()) {
|
||||
list.css('top',pos.top+button.outerHeight()-5);
|
||||
list.css('left',pos.left+3);
|
||||
list.css('width',(button.outerWidth()-2)+'px');
|
||||
list.addClass('down');
|
||||
button.addClass('down');
|
||||
list.slideDown();
|
||||
} else {
|
||||
list.css('top', pos.top - list.height());
|
||||
list.css('left', pos.left+3);
|
||||
list.css('width',(button.outerWidth()-2)+'px');
|
||||
list.detach().insertBefore($(this));
|
||||
list.addClass('up');
|
||||
button.addClass('up');
|
||||
list.fadeIn();
|
||||
self.menuDirection = 'up';
|
||||
}
|
||||
list.click(function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
});
|
||||
$(window).click(function(){
|
||||
if(!button.parent().data('preventHide')){
|
||||
// How can I save the effect in a var?
|
||||
if(self.menuDirection === 'down') {
|
||||
button.parent().children('ul').slideUp(400,function(){
|
||||
button.parent().children('ul').remove();
|
||||
button.removeClass('active');
|
||||
button.removeClass('active').removeClass('down');
|
||||
});
|
||||
} else {
|
||||
button.parent().children('ul').fadeOut(400,function(){
|
||||
button.parent().children('ul').remove();
|
||||
button.removeClass('active').removeClass('up');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue