bootstrap |
您所在的位置:网站首页 › select不可用属性 › bootstrap |
bootstrap-select中多选和模糊查询下拉框的示例分析
发布时间:2021-05-10 11:28:37
来源:亿速云
阅读:296
作者:小新
栏目:web开发
这篇文章主要介绍了bootstrap-select中多选和模糊查询下拉框的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 Bootstrap是什么Bootstrap是目前最受欢迎的前端框架,它是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,它还有一个响应最好的Grid系统,并且能够在手机端通用,而Bootstrap是使用许多可重用的CSS和JavaScript组件,可以帮助实现需要的几乎任何类型的网站的功能,此外,所有这些组件都是响应式的。 引入问题之前博主在实际开发中遇到了一个问题,就是需要既支持多选又同时支持模糊查询的下拉控件,大家所熟知的比较强大的下拉框插件bootstrap-select2,博主当时也参考过,但是发现它的多选效果做的比较差,类似这种, 这样的多选控件必须要控件足够长,如果选择超过一定限制就会出现样式崩溃,你懂的~后面我无意中发现了bootstrap-select插件,瞬间发现它很高大上呀!它即可以支持单选,又支持多选,最厉害的是竟然还自带模糊查询功能!先给大家展示下炫酷的效果吧: 这样的控件不用真是可惜了,后面博主找了很多文档和博客参考,但是发现很多都没有写清楚具体的用法,只是简单的摆一个例子,并没有太大的参考价值,博主通过研究官网的相关文档以及结合自身开发经验,把bootstrap-select的用法做一个清晰的梳理,供大家参考。 官方插件地址: http://silviomoreto.github.io/bootstrap-select Github地址: https://github.com/silviomoreto/bootstrap-select 应用示例(参考官方文档Basic examples)1.单选简单单选 选中默认是没有“√”的。 Mustard Ketchup Relish效果展示 分组单选 注意加入optgroup标签 Mustard Ketchup Relish Tent Flashlight Toilet Paper效果展示 2.多选框相比于单选框加入了一个multiple标签 Mustard Ketchup Relish效果展示 3.模糊查询添加一个data-live-search="true"的属性 Hot Dog Fries Soda Burger Shake Smile效果展示 4.多选限制添加属性data-max-options="2"或者在初始化时用maxOptionsText做限制 Mustard Ketchup Relish或者在初始化selectpicker时设置maxOptionsText $('.selectpicker').selectpicker({ 'selectedText':'cat', 'maxOptionsText':2; })效果展示 5.自定义按钮的文本通过属性title来控制。 选择框文本 Mustard Ketchup Relish效果展示 选择显示单条文本 意思就是选中相应的option,就展示option的title,比如选中"Burger, Shake and a Smile",文本框内显示Combo 2。 Hot Dog, Fries and a Soda Burger, Shake and a Smile Sugar, Spice and all things nice效果展示 6.多选框格式化选择文本通过属性 data-selected-text-format 来控制选中的值的显示 可选的值有如下4个: 1.values: 逗号分隔的选定值列表(系统默认); 2.count: 如果选择了一个项,则显示选项值。如果选择多于一个,则显示所选项的数量,如选择2个,则下拉框显示2个已被选中; 3.count > x: 当count的值小于x时,展示逗号分隔的选定值列表;当count>x时,显示x个被选中; 4.static:无论选中什么,都只展示默认的选中文本。 下面给几个简单示例 Mustard Ketchup Relish Onions效果展示 Mustard Ketchup Relish Onions效果展示 7.样式选择按钮样式 通过data-style来设置按钮的样式 ... ... ... ... ...效果展示 单选框样式 这里要注意一下,单选框默认是没有多选框的选中之后的"√"图标的,如果想要加上这个图标的话,需要在样式中加入show-tick即可。 Mustard Ketchup Relish效果展示 菜单的箭头 Bootstrap的菜单箭头也可以被添加进来,需要加入样式show-menu-arrow,个人感觉差别不大 Mustard Ketchup Relish效果展示 style样式自定义 bootstrap-select的样式不是死的,可以自定义style样式,类似最基本的css样式添加。 .special { font-weight: bold !important; color: #fff !important; background: #bc0000 !important; text-transform: uppercase; } Mustard Ketchup Relish效果展示 宽度(Width) 1.引用bootstrap的样式 Mustard Ketchup Relish2.使用data-width属性,来定义宽度,可选的值有以下4个auto:select的宽度由option中内容宽度最宽的哪个决定;fit:select的宽度由实际选中的option的宽度决定;100px:select的宽度定义为100px;50%:select的宽度设置为父容器宽度的50%。 cow bullaaaaaaaaaaaa ASD Bla Ble cow bullaaaaaaaaaaaa ASD Bla Ble cow bull ASD Bla Ble cow bull ASD Bla Ble效果展示:从左至右依次为“auto”,“fit","100px","50%"。 8.自定义option1.添加图标 用data-icon给option添加小图标,实现比较炫酷的效果 Ketchup Mustard Relish效果展示 如果想要获取更多样式可参考bootstrap官网的图标库,给个网址www.runoob.com/bootstrap/b… 2.插入HTML 用data-content可以在option中插入html元素,实现想要的效果。 Relish效果展示 3.插入二级标题 用data-subtext实现二级标题,实现提示或者其他效果,如果要在select中也展示二级标题,要在初始化selectpicker时要设置showSubtext为true。 Ketchup Mustard Relish效果展示 $('.selectpicker').selectpicker({ 'selectedText':'cat', 'showSubtext':true }) Ketchup Mustard Relish效果展示 9.自定义下拉菜单1.菜单显示项大小 通过data-size属性来限制菜单显示的条数,比如说option有8条,我们只展示5条,其余的通过滚动条显示。 apple banana group orange cherry mango pineapple lychee效果展示(只展示前5个,后面的可以拖动滚动条查看) 2.全选和全不选 通过设置data-actions-box="true"来添加全选和全不选的按钮 Mustard Ketchup Relish效果展示 当然这个按钮的文本也是可以自定制的 只需要在初始化时设置即可 $('.selectpicker').selectpicker({ 'selectedText':'cat', 'noneSelectedText':'请选择', 'deselectAllText':'全不选', 'selectAllText': '全选', })效果展示 3.添加数据分割线 设置data-divider="true"添加数据分割线。 Mustrad Ketchup Relish Mustrad Ketchup Relish效果展示 4.添加菜单头 用data-header为下拉菜单设置菜单头 Mustard Ketchup Relish效果展示 5.设置菜单的上浮或者下浮 通过设置dropupAuto来设置菜单的上下浮动,dropupAuto默认为true,自动确定是否应显示的菜单上面或下面的选择框,如果设置为false,系统会加入一个dropup样式的上拉框。 $('.selectpicker').selectpicker({ 'selectedText':'cat', 'dropupAuto':false }) Mustard Ketchup Relish效果展示 10.不可用在对应的控件上加入disabled即可实现 1.设置select不可用 这里select按钮失效,不能点击 Mustard Ketchup Relish效果展示 2.设置option不可用 这里option设置属性为disabled的将无法选中 Mustard Ketchup Relish效果展示 3.设置optiongroup不可用 这里是一个optiongroup将无法选中 Mustard Ketchup Relish Tent Flashlight Toilet Paper效果展示 感谢你能够认真阅读完这篇文章,希望小编分享的“bootstrap-select中多选和模糊查询下拉框的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习! 推荐阅读: MongoDB模糊查询操作的示例分析 python Django中models进行模糊查询的示例免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 bootstrap bootstrap-select 上一篇新闻:Nginx+Keepalived如何实现双机主备 下一篇新闻:php数组如何移除第一个元素 猜你喜欢 css3中动画性能高的原因是什么 css上下文选择器有多少种类型 css里定位指的是什么意思 css中如何将内联元素转换为块元素 css语言中怎么使用后代选择器 css如何降低背景透明度 如何使用css样式把图片改为灰色 css如何实现图片放大缩小动画 css如何改变一个图片高度和宽度 css3怎么让animation动画停止 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |