基於Bootstrap的超酷jQuery開關按鈕插件

簡要教程

這是一款基於bootstrap的超酷jQuery開關按鈕插件。該開關按鈕插件可以將復選框和單選按鈕轉換為安卓樣式的開關按鈕。該插件可以設置開關按鈕的顏色、是否可用、顯示文本等屬性，還可以將開關按鈕放置到模態窗口中顯示。

使用方法

首先要在頁面中引入依賴文件： jquery、Bootstrap、Bootstrap Switch CSS和Bootstrap Switch JS。

<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>

然后在需要使用的地方添加checkbox：

<input type="checkbox" name="my-checkbox" checked>

通過下面的代碼來初始化該開關按鈕插件：

$("[name='my-checkbox']").bootstrapSwitch();
或者
$('input[name="my-checkbox"]').bootstrapSwitch({
        "onColor" : "success",
        "offColor" : "success",
        "onText" : "男",
        "offText" : "女"
    });

配置參數(Bootstrap 3)

參數名稱	屬性	類型	描述	參數值	默認值
state	checked	Boolean	checkbox的狀態	true, false	true
size	data-size	String	checkbox的尺寸大小	null, 'mini', 'small', 'normal', 'large'	null
animate	data-animate	Boolean	開關按鈕是否動畫	true, false	true
disabled	disabled	Boolean	Disable狀態	true, 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	允許用戶使用該radio按鈕執行unchecked操作	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	開關按鈕中間的Label文本	String	' '
handleWidth	data-handle-width	String | Number	開關按鈕左邊和右邊的寬度，單位像素	'auto' or Number	'auto'
labelWidth	data-label-width	String | Number	開關按鈕Label文本的寬度，單位像素	'auto' or Number	'auto'
baseClass	data-base-class	String	全局class前綴	String	'bootstrap-switch'
wrapperClass	data-wrapper-class	String | Array	包裹開關按鈕元素的class	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';

方法(Bootstrap 3)

在Bootstrap Switch中，每一個配置參數都是一個方法。

如果第二個參數被省略, 方法返回當前值。

你可以按下面的方式調用方法：

$('input[name="my-checkbox"]').bootstrapSwitch('state')
$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);

附加方法

 

方法名稱	方法描述
toggleState	切換開關按鈕的狀態
toggleAnimate	切換動畫的狀態
toggleDisabled	切換disabled狀態
toggleReadonly	切換readonly狀態
toggleIndeterminate	切換indeterminate狀態
toggleInverse	切換反向參數
destroy	銷毀Bootstrap開關按鈕

 

特殊行為

• state方法的第三個參數為可選參數skip，如果為true，switchChange事件將不被執行，默認值為false。
• toggleState方法的第二個參數為可選參數skip，如果為true，switchChange事件將不被執行，默認值為false。
• wrapperClass方法可以在第二個參數接收一個false值，這樣它將把class重置會默認。

事件(Bootstrap 3)

所有的事件都被添加到名稱空間中，在你執行事件的時候需要追加.bootstrapSwitch。你可以像下面這樣注冊事件：

$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});

 

事件名稱	事件描述	參數
init	在初始化時觸發。 'this'引用指向DOM元素。	event (jQuery Event object)
switchChange	在開關按鈕狀態改變時觸發。 'this'引用指向DOM元素。	event (jQuery Event object), state (true | false)