我使用了 Bootstrap 的多选。
我的问题是当我从选项中选择项目时。如果名称太长,则按钮宽度也会增加。
选择选项后如何处理按钮宽度。
我使用了 Bootstrap 的多选。
我的问题是当我从选项中选择项目时。如果名称太长,则按钮宽度也会增加。
选择选项后如何处理按钮宽度。
.multiselect
给你一个名为buttonWidth
. 当没有选择任何内容时,这将保持宽度更宽。你也可以在里面放一个 % 。您可以像这样设置宽度:
<script type="text/javascript">
$(document).ready(function() {
$('#yourcontrol').multiselect({
buttonWidth: '100px'
});
//caret is in the middle, switch it to right
$(".caret").css('float', 'right');
$(".caret").css('margin', '8px 0');
});
</script>
尝试使用下面的代码。
您可以在 css 中根据需要设置最大宽度。
Javascript:
$('#yourXYZID').multiselect({
buttonText: function(options)
{
var retStr = "";
if (options.length === 0) {
retStr = "None selected";
} else if(options.length <=3){
var textArray = [];
$.each(options,function(key,value){
textArray.push($.trim($(value).html()));
});
retStr = "<div class='pull-left restricted'>"+textArray.join(",")+"</div>";
} else {
retStr = options.length+" selected";
}
return retStr+" <b class='caret'></b>";
}
});
CSS:
.multiselect.dropdown-toggle.btn.btn-default > div.restricted {
margin-right: 5px;
max-width: 100px;
overflow: hidden;
}
另一种解决方法是,在 bootstrap-multiselect.js 文件的“buttonText”函数中,我们可以设置按钮文本长度,然后像这样返回:
if(selected.length>20){
return selected.substr(0, 20); //if the text is too long, then this if statement will be executed
}
else{
return selected.substr(0, selected.length - this.delimiterText.length);
}
/*Bootstrap adds extra characters for the selected option.For example: the length of the option 'peter' will actually be 14 because of the delimiter and extra spaces. So you may want to set a bigger number in the if statement*/
注意:在实际代码中,return 语句如下所示:
return selected.substr(0, selected.length - this.delimiterText.length);
我有同样的问题,我相信我以更快的方式解决了它。所以你有这样的多选实例化:
$('#anyID').multiselect({
然后是一些属性,例如
maxHeight:'300px'
好吧,如果您想在某个事件时更改按钮宽度。做这个:
buttonWidth:function(){
if(something happens)
return '300px'; // value chosen randomly
else
return "150px"; // value chosen randomly
},
这样你就会有
最终多选
$('#anyID').multiselect({
maxHeight:'300px',
buttonWidth:function(){
if(something happens)
return '300px'; // value chosen randomly
else
return "150px"; // value chosen randomly
},
)};