简单小结下bootstrap的select下拉框和alert对话框用法

最近真的是各种使用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的版本有对应匹配关系，你不能违背，否则会达不到理想效果.

参考官网的匹配关系说明：

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() {}
    }
  }
});

 

 

小结持续补充中。