BootStrap插件使用总结

BootStrap插件使用总结

记录下Bootstrap一些常用的插件使用方法，千万要注意插件的版本！

1、Bootstrap Switch

开关控件。相比checkbox，switch就要好看的多了。在bootstrap-switch下载即可，添加css文件，按照amd规范引入.js文件即可，不再过多赘述。

require.config({
    waitSeconds : 0,
    paths : {
        //一些库文件
        jquery : '../lib/jquery/jquery-2.1.4.min',
        bootstrap : '../lib/bootstrap/js/bootstrap.min',
        bootstrapSwitcher : '../lib/bootstrap/plugins/switcher/js/bootstrap-switch.min',
        'bootstrapSlider' : '../lib/bootstrap/plugins/slider/bootstrap-slider.min'
    },
    shim : {
        'bootstrap' : {
            deps : ['jquery'],
            exports : 'bootstrap'
        },
        'bootstrapSwitcher' : {
            deps : ['jquery'],
            exports : 'bootstrapSwitcher'
        },
        'bootstrapSlider' : {
            deps : ['jquery'],
            exports : 'bootstrapSlider'
        }
    }
});

使用方法：

//html
"checkbox" name="XXX" id="" checked>
//js
require(['jquery', 
'bootstrap', 
'bootstrapSwitcher', 
'bootstrapSlider'], function(
$, 
bootstrap, 
bootstrapSwitcher,
 bootstrapSlider){
    $(document).ready(function(){
        //初始化Switch
        $("[type='checkbox']").bootstrapSwitch();
        //注册switchChange事件，注意后缀
        $('input[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state){
            var domId = this.id;//dom ID
            var domClass = this.className;//className
            console.log(this); // DOM元素
            console.log(event); // jQuery事件
            console.log(state); // true | false
        });

    });
})

其他的配置项及事件说明见：http://www.bootstrap-switch.org/

---

2、Bootstrap Slider

滑动条。下载地址：https://github.com/seiyria/bootstrap-slider，这里介绍的就非常详细了。跟Switch插件使用方法一样，添加css样式及对应.js文件即可。

2.1 options

名称	类型	默认值	说明
id	string	“”	slider元素id
min	float	0	最小值
max	float	10	最大值
step	float	1	增长步长
precision	float	默认值为步长的小数点位数	小数点后显示的位数。默认值为步长的小数点位数
orientation	string	‘horizontal’	slider的方向，包括’vertical’和’horizontal’
value	float,array	5	初始值。使用array定义slider的数值范围
range	bool	false	使用范围slider。当初始值为array，此属性可选。
tooltip	string	‘show’	拖动时是否显示提示、隐藏提示，或者一直显示tooltip。’show’、’hide’,’always’

2.2 methods

https://github.com/seiyria/bootstrap-slider。参见英文主页，就不做翻译搬运工啦！

2.3 events

https://github.com/seiyria/bootstrap-slider。参见英文主页，就不做翻译搬运工啦！

使用示例：

//html
 <input id="temp" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14">
 //js
        $('#temp').slider({
            formatter : function(value){
                return '温度: ' + value;
            }
        });
        $("#temp").on("slide", function(slideEvt){
            var temp = slideEvt.value;

        });