不忘初心
方得始终

bootstrap-multiselect(多选下拉框)样式修改

问题 bootstrap-multiselect是一款相当不错的bootstrap风格下拉框组件,但是它的某些样式我不是很喜欢,按钮文本和下拉符号 “” 都是居中的,且下拉列表的宽度也没有跟随变动。

示例

$(document).ready(function()  {        
    $('#example-dropRight').multiselect({            
        buttonWidth:   '400px',
        dropRight:  true        
    });    
});

需求

我不太喜欢这个样式,现在我希望按钮的文本和下拉符号 “” 都右对齐,同时下拉列表的宽度与自适应为按钮的宽度。

自定义自己的css编码,再引入就好了,一定要注意顺序

.multiselect-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-align: left;
}

.multiselect-wrapper button {
    text-align: left;
}

.multiselect-wrapper span {
    margin-left: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.multiselect-wrapper .dropdown-menu {
    width: 100%;
}

.multiselect-wrapper .caret {
    position: absolute;
    top: 13px;
    right: 10px;
    width: 0;
    height: 0;
}

.multiselect-wrapper label.checkbox,
.multiselect-wrapper label.radio {
    padding: 6px 20px 6px 30px !important;
    width: 100%;
}

JS 利用buttonContainer属性,以自定义的multiselect-wrapper替换默认的btn-group样式。

$(function() {
    $('.multiselect').multiselect({
        buttonWidth:   "100%",
        buttonContainer:   "<div class='multiselect-wrapper' />"
    });
});

HTML

<!DOCTYPE html>
<html>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf8" />
</head>

<body>
    <select name="department">
            <option value="true">物流部</option>
            <option value="false">设计部</option>
        </select>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
</body>

</html>

示例

示例

补充

bootstrap中对.dropdown-menu有个最小宽度的设定min-width: 160px,因此当buttonWidth低于160px时,下来列表的宽度并不会变化,如果有需求可以在.dropdown-menu中添加样式min-width: 自定义宽度

Bootstrap Multiselect 基本使用方法

简介

对比了不少的多选插件,因为项目基于Boostrap开发,最终选择:Bootstrap Multiselect

源码地址:https://github.com/davidstutz/bootstrap-multiselect

示例网址:http://davidstutz.github.io/bootstrap-multiselect

使用指南

添加引用

因为该插件基于jQuery和Bootstrap,先引用;然后引用插件所需的js和css文件。

<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

添加selectHtml代码,记住设置属性multiple="multiple"将其转换成多选。但是不用担心,不设置属性也可以正常使用,主要是为了保持html代码的一致性。

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

接下来只需要调用即可,示例使用默认方法,当然我们还可以设置更多的参数。

<!-- Initialize the plugin: -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });
</script>
赞(0) 支持我
未经允许不得转载:woytu » bootstrap-multiselect(多选下拉框)样式修改

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址