Fork me on GitHub

Bootstrap 开关(switch)控件 - by Mattia Larentis (@SpiritualGuru)

尺寸(Size)

<div class="switch switch-large">
    <input type="checkbox" checked />
</div>

<div class="switch">
    <input type="checkbox" checked />
</div>

<div class="switch switch-small">
    <input type="checkbox" checked />
</div>

<div class="switch switch-mini">
    <input type="checkbox" checked />
</div>

颜色(Colors)

<div class="switch" data-on="primary" data-off="info">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="info" data-off="success">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="success" data-off="warning">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="warning" data-off="danger">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="danger" data-off="primary">
    <input type="checkbox" checked />
</div>

动画(Animation)

<div class="switch" data-animated="false">
    <input type="checkbox" checked />
</div>

禁用(Disabled)

<div class="switch">
   <input type="checkbox" checked disabled />
</div>

文本(Text)

<div class="switch" data-on-label="SI" data-off-label="NO">
    <input type="checkbox" checked />
</div>

HTML文本(HTML text)

<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
    <input type="checkbox" checked />
</div>

事件处理(Event handler) javascript

$('#mySwitch').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    console.log(e, $el, value);
});

Toggle State javascript



ON!
Toggle me!
OFF!
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false

销毁(Destroy) javascript



$('#destroy-switch').bootstrapSwitch('destroy');

创建(Create) javascript



Create
$('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();

禁用(Disabled) javascript



$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false);  // true || false

表单(Form) - try to use tab and space

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
            <input type="text" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="notification1">Notification 1</label>
        <div class="controls">
            <div class="switch" tabindex="0">
                <input id="notification1" type="checkbox" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="notification2">Notification 2</label>
        <div class="controls">
            <div class="switch" tabindex="0">
                <input id="notification2" type="checkbox" />
            </div>
        </div>
    </div>
</form>

模态对话(Modal)

<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
-----
<div class="modal-body">
    <div class="switch">
        <input type="checkbox" checked />
    </div>
</div>
下载

follow me - my site

Bootstrap Switch由Bootstrap中文网翻译整理