bootstrap滑動開關插件使用

下載和演示插件地址

須要引入的css和js

1 <link rel="stylesheet" type="text/css" href="/css/common/bootstrap-switch.css">
2 <script src="js/common/jquery-1.11.1.min.js"></script>
3 <script type="text/javascript" src="/js/common/bootstrap-switch.js"></script>

html代碼

1 <div class="bootstrap-switch bootstrap-switch-large">
2     <input type="checkbox" name="mycheck"/>
3 </div>

js實現初始化代碼

 1 $('[name="status"]').bootstrapSwitch({  
 2         onText:"啓動",  
 3         offText:"中止",  
 4         onColor:"success",  
 5         offColor:"info",  
 6         size:"small",  
 7         onSwitchChange:function(event,state){  
 8             if(state==true){  
 9                 $(this).val("1");  
10             }else{  
11                 $(this).val("2");  
12            }  
13       }  
14 }) 

bootstrap-switch屬性

js屬性名	html屬性名	類型	描述	取值範圍	默認值
state	checked	Boolean	選中狀態	true、false	true
size	data-size	String	開關大小	null、mini、small、normal、large	null
animate	data-animate	Boolean	動畫效果	true、false	true
disabled	disabled	Boolean	禁用開關	ture、false	false
readonly	readonly	Boolean	開關狀態只讀，不能修改	true、false	false
indeterminate	data-indeterminate	Boolean	模態	true、false	false
inverse	data-inverse	Boolean	顛倒開關順序	true、false	false
radioAllOff	data-radio-all-off	Boolean	容許單選按鈕被用戶取消選中	true、false	false
onColor	data-on-color	String	左側開關顏色	primary、info、success、warning、danger、default	primary
offColor	data-off-color	String	右側開關顏色	primary、info、success、warning、danger、default	default
onText	data-on-text	String	左側開關顯示文本	String	ON
offText	data-off-text	String	右側開關顯示文本	String	OFF
labelText	data-label-text	String	開關中間顯示文本	String	 
handleWidth	data-handle-width	String|Number	開關左右2側的寬度	String|Number	auto
labelWidth	data-label-width	String|Number	開關中間的寬度	String|Number	auto
baseClass	data-base-class	String	開關基礎樣式	String	bootstrap-switch
wrapperClass	data-wrapper-class	String | Array	元素樣式容器	String | Array	wrapper
onInit		function	初始化開關	Function	function（event，state）｛｝
onSwitchChange		function	當開關狀態改變時觸發	Function	function（event，state）｛｝

覆蓋全局默認值：

 

$.fn.bootstrapSwitch.defaults.size = 'large';  
$.fn.bootstrapSwitch.defaults.onColor = 'success'; 

 

原文地址