make the minimum width of the multiselect configurable
This commit is contained in:
parent
b106686382
commit
5eb6071b04
|
@ -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; }
|
||||
|
|
|
@ -9,22 +9,25 @@
|
|||
'checked':[],
|
||||
'oncheck':false,
|
||||
'onuncheck':false,
|
||||
'minWidth': 'default;',
|
||||
};
|
||||
$.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);
|
||||
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);
|
||||
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue