BootStrap插件使用总结

Posted 2022-11-26 召唤师峡谷

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
<input type="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;

        );