最近真的是各种使用bootstrap,使用它来进行美化,所以也用到了一些各种各样的小问题,用法不难但较为琐碎,也罢,小结一下作为笔记~~~~~~~~
1)使用bootstrap-select
如果你受够html原生的丑陋的select下拉框,又懒得自己去重写样式,不妨试试bootstrap-select了。
首先,引入bootstrap的css和js很重要。bootstrap.min.js和bootstrap.css
而你想要使用bootstrap-select的话,还必须引入独立的样式bootstrap-select.css和js:bootstrap-select.js
然后,这样写:
<select id="hourEnd" class="selectpicker" onchange="getDate()"> <option value="unselected">结束时间</option> <option value="1">12:00</option> <option value="2">24:00</option> </select>
class="selectpicker"这句是关键,这就给select下拉框赋予了bootstrap的样式
最后,这样还不行,必须在$(function(){...})里面激活:
$(function() { $('.selectpicker').selectpicker({ style: 'btn-success', size: 10 }); });
其中,style用来指定select的具体样式,size指定最多显示的选项个数(不代表最多的选项个数,是指不需要滑动滚动条的时候显示的option个数)。而这句是依赖于bootstrap-select.js的。
注意:使用了bootstrap-select的样式以后,Html解析的并不再是传统的select标签,而是一个复杂的按钮,具体的可以查看源码来看看,这就导致了一些问题。
如果要动态加载option的话,再写完加载逻辑后,要加上$('.selectpicker').selectpicker('refresh');才会生效。
使某一项选中,也不能使用传统的$option.attr('selected', true),需要查看源代码之后,找到选中项的位置,再把你想显示的项替换当前选中项所在的span,如:
$("button[data-id='selectId']").find("span[class='filter-option pull-left']").html('你想要选中的项的文本');
更多与普通select下拉框不同的jquery语法待发现………………
2)使用bootbox的弹出框
初衷也是觉得传统的alert弹出框太丑。。并且bootbox也是依赖于bootstrap的!
简单说下使用方法:
首先,当然是要引入bootstrap的css和js了;
第二步,引入bootbox.min.js,这里需要注意bootbox的版本和bootstrap的版本有对应匹配关系,你不能违背,否则会达不到理想效果.
参考官网的匹配关系说明:
4.x.x Latest | 3.0.0 | 3.0.0 | 1.9.1 | Current release. Entirely rewritten to support Bootstrap 3.0.0 |
3.x.x | 2.2.2 | 2.3.2 | 1.8.3 | Last version to support Bootstrap 2 |
2.x.x | 2.0.0 | 2.0.4 | 1.7.1 | As you can see, Bootstrap 2.1.x was never officially supported |
1.x.x | 1.3.0 | 1.4.0 | 1.7.1 | Don’t download this version of Bootbox—it’s old |
这个不需要写页面元素,直接在Js中写就ok.如:
bootbox.alert({ size:'small', buttons: { ok: { label: '确定', className: 'btn-warning'//按钮样式 } }, message: '所选日期超过当前日期!', } );
一些具体的参数其实跟它支持的confirm(确认框)和dialog(对话框)是相通的,下面补充下确认框的示例:
bootbox.confirm({ size:'small', buttons: { confirm: { label: '确认', className: 'btn-warning' }, cancel: { label: '取消', className: 'btn-default' } }, message: '确认删除么?', callback: function(result) { if(result) { bootbox.alert('点击确认按钮了'); } else { bootbox.alert('点击取消按钮了'); } }, //title: "bootbox confirm也可以添加标题哦", });
可根据dialog的示例参数来参考设置你想要的参数:
bootbox.dialog({ // dialog的内容 message: "I am a custom dialog", // dialog的标题 title: "Custom title", // 退出dialog时的回调函数,包括用户使用ESC键及点击关闭 onEscape: function() {}, // 是否显示此dialog,默认true show: true, // 是否显示body的遮罩,默认true backdrop: true, // 是否显示关闭按钮,默认true closeButton: true, // 是否动画弹出dialog,IE10以下版本不支持 animate: true, // dialog的类名 className: "my-modal", // dialog底端按钮配置 buttons: { // 其中一个按钮配置 success: { // 按钮显示的名称 label: "Success!", // 按钮的类名 className: "btn-success", // 点击按钮时的回调函数 callback: function() {} }, // 另一个按钮配置 "Danger!": { className: "btn-danger", callback: function() {} } } });
小结持续补充中。
相关推荐
通过 bootstrap-select 插件,该实例中除了自带的demo实例外还加上了自己添加的通过拼音搜索汉字实例
bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...
主要为大家详细介绍了Bootstrap框架下下拉框select搜索功能,感兴趣的小伙伴们可以参考一下
bootstrap-select下拉框
bootstrap树控件使用树形控件在下拉框select中显示,实现树形下拉框
b o otstrapselect下拉框所用的js,和css文件。。。。。
使用bootstrap实现多选下拉框
JQ JS javascript bootstrap 带搜索 下拉框 select
bootstrap4c-chosen是一款Bootstrap4下拉框功能强化插件。该插件在原生bootstrap4下拉框的基础上,新增了搜索、选项分组、多选等功能,非常实用。
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
基于bootstrap的下拉框筛选,数据导入下拉框后,可输入数据查找筛选
这是一款Bootstrap 4 select下拉框功能扩展和美化jquery插件。该插件扩展了Bootstrap 4原生select下拉框的功能,可以进行多选,带搜索框等,并且对Bootstrap 4原生select下拉框进行了样式美化。
bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能,多选功能,搜索功能,自定义内容和图标等多种功能,非常强大。
bootstrap的标头select下拉框筛选数据相关的js和css,bootstrap-table-filter-control.js、bootstrap-table-filter-control.css,发现网上很少提供这个js的下载。
bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选、多选、模糊搜索、...
这是一款基于bootstrap4封装的消息对话框组件。该消息组件包括dialog,alert,confirm,input,success,error,notice。并且对话框支持鼠标或手指触摸拖拽。
bootstrap的多选下拉框控件,通过对多选框的渲染,在下拉框中实现多选