make the minimum width of the multiselect configurable

This commit is contained in:
Robin Appelman 2012-01-14 22:38:00 +01:00
parent b106686382
commit 5eb6071b04
2 changed files with 12 additions and 7 deletions

View File

@ -1,4 +1,5 @@
ul.multiselectoptions { z-index:49; position:absolute; background-color:#fff; padding-top:.5em; border:1px solid #ddd; border-top:none; -moz-border-radius-bottomleft:.5em; -webkit-border-bottom-left-radius:.5em; border-bottom-left-radius:.5em; -moz-border-radius-bottomright:.5em; -webkit-border-bottom-right-radius:.5em; border-bottom-right-radius:.5em; -moz-box-shadow:0 1px 1px #ddd; -webkit-box-shadow:0 1px 1px #ddd; box-shadow:0 1px 1px #ddd; }
ul.multiselectoptions>li{ white-space:nowrap; overflow: hidden; }
div.multiselect { padding-right:.6em; display:inline; position:relative; display:inline-block; vertical-align: bottom; }
div.multiselect.active { background-color:#fff; border-bottom:none; border-bottom-left-radius:0; border-bottom-right-radius:0; z-index:50; position:relative }
div.multiselect>span:first-child { margin-right:2em; float:left; }

View File

@ -9,23 +9,26 @@
'checked':[],
'oncheck':false,
'onuncheck':false,
'minWidth': 'default;',
};
$.extend(settings,options);
$.extend(settings,options);
var button=$('<div class="multiselect button"><span>'+settings.title+'</span><span>▾</span></div>');
if(settings.checked.length>0){
button.children('span').first().text(settings.checked.join(', '));
}
var span=$('<span/>');
span.append(button);
button.data('id',multiSelectId);
button.selectedItems=[];
this.hide();
this.before(span);
settings.minWidth=button.width();
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.checked.length>0){
button.children('span').first().text(settings.checked.join(', '));
}
button.click(function(event){
var button=$(this);
if(button.parent().children('ul').length>0){
@ -83,13 +86,14 @@
}
var newOuterWidth=Math.max((button.outerWidth()-2),settings.minOuterWidth)+'px';
var newWidth=Math.max(button.width(),settings.minWidth);
var pos=button.position();
button.css('height',button.height());
button.css('white-space','nowrap');
button.css('width',oldWidth);
button.animate({'width':newWidth},undefined,undefined,function(){
button.css('width','');
});
list.animate({'width':newOuterWidth});
list.animate({'width':newOuterWidth,'left':pos.left+3});
});
var li=$('<li></li>');
li.append(input).append(label);