bootstrap-switch開關按鈕表單插件

bootstrap-switch插件這是一個針對Bootstrap實現的開關（switch）按鈕控件，能夠支持尺寸、顏色等屬性的自定義。開關式按鈕在國內網站上使用的並非不少，Bootstrap 的應用在國外很是流行，不知道是咱們不喜歡仍是使用它很麻煩很難適合網站來使用。但這種開頭式按鈕在手機等移動設備上的應用是最普遍的，屏幕的特性促使它更好的發展。

功能說明：

我這就介紹chekbox與radio的兩個表單的簡單使用，其餘更多的效果與功能能夠瀏覽demo，點擊按鈕以滑動的方式進行on/off切換。

使用說明：

1.引入CSS與JS文件

<link rel="stylesheet" href="static/stylesheets/bootstrap-switch.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>                
<script src="static/js/bootstrap-switch.js"></script>

2.html內容添加

<div class="make-switch" data-on="info" data-off="success">
                    <input type="checkbox" checked>
                </div>
                <div class="make-switch" data-on="success" data-off="warning">
                    <input type="checkbox" checked>
                </div>
                <div class="make-switch" data-on="warning" data-off="danger">
                    <input type="checkbox" checked>
                </div>
                <div class="make-switch" data-on="danger" data-off="default">
                    <input type="checkbox" checked>
                </div>
                <div class="make-switch" data-on="default" data-off="primary">
                    <input type="checkbox" checked>
                </div>

make-switch:對使用插件的checkbox添加CSS樣式。

data-on：爲on狀態時的CSS樣式。

data-off:爲off狀態時的CSS樣式。

radio單選框的使用：

<label for="option11">Option 1</label>
                        <div class="make-switch radio2">
                            <input id="option11" type="radio" name="radio2" value="option11">
                        </div>
                        <label for="option12">Option 2</label>
                        <div class="make-switch radio2">
                            <input id="option12" type="radio" name="radio2" value="option12" checked="checked">
                        </div>
                        <label for="option13">Option 3</label>
                        <div class="make-switch radio2">
                            <input id="option13" type="radio" name="radio2" value="option13">
                        </div>

radio單選框的使用方法是相同的，由於單選框先中其中一個是其餘狀態都要改變，因此要添加相應的JS代碼；

<script>
    $('.radio2').on('switch-change', function () {
        $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
    });
</script>

這樣咱們就以簡單的實現咱們想要的開關按鈕效果了。

特效包下載地址：http://www.jsctrlc.com/texiao/36.html