最近真的是各种使用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" οnchange="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的版本有对应匹配关系,你不能违背,否则会达不到理想效果.
参考官网的匹配关系说明:
Bootbox version | Min. Bootstrap version | Max. Bootstrap | Min. jQuery | Notes |
---|---|---|---|---|
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() {} } } });
小结持续补充中。