转:http://www.jsctrlc.com/texiao/36.html
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>
以下为设置参数:
尺寸(Size)
ON
OFF
ON
OFF
ON
OFF
ON
OFF
<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)
ON
OFF
ON
OFF
ON
OFF
ON
OFF
ON
OFF
<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)
ON
OFF
<div class="switch" data-animated="false"> <input type="checkbox" checked /> </div>
禁用(Disabled)
ON
OFF
<div class="switch"> <input type="checkbox" checked disabled /> </div>
文本(Text)
SI
NO
<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
ON
OFF
$('#mySwitch').on('switch-change', function (e, data) { var $el = $(data.el) , value = data.value; console.log(e, $el, value); });
Toggle State javascript
ON
OFF
$('#toggle-state-switch').bootstrapSwitch('toggleState'); $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
销毁(Destroy) javascript
ON
OFF
Destroy me!
$('#destroy-switch').bootstrapSwitch('destroy');
创建(Create) javascript
Create
$('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();
禁用(Disabled) javascript
ON
OFF
Is active? Toggle activation! Disable! Activate!
$('#disable-switch').bootstrapSwitch('isActive'); $('#disable-switch').bootstrapSwitch('toggleActivation'); $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
表单(Form) - try to use tab and space
Email
Notification 1
ON
OFF
Notification 2
ON
OFF
<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>
<!-- saved from url=(0042)http://www.bootcss.com/p/bootstrap-switch/ -->
Bootstrap 开关(switch)控件 - by Mattia Larentis (@SpiritualGuru)
尺寸(Size)
ON
OFF
ON
OFF
ON
OFF
ON
OFF
<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)
ON
OFF
ON
OFF
ON
OFF
ON
OFF
ON
OFF
<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)
ON
OFF
<div class="switch" data-animated="false"> <input type="checkbox" checked /> </div>
禁用(Disabled)
ON
OFF
<div class="switch"> <input type="checkbox" checked disabled /> </div>
文本(Text)
SI
NO
<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
ON
OFF
$('#mySwitch').on('switch-change', function (e, data) { var $el = $(data.el) , value = data.value; console.log(e, $el, value); });
Toggle State javascript
ON
OFF
ON!
Toggle me!
OFF!
$('#toggle-state-switch').bootstrapSwitch('toggleState'); $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
销毁(Destroy) javascript
ON
OFF
Destroy me!
$('#destroy-switch').bootstrapSwitch('destroy');
创建(Create) javascript
Create
$('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();
禁用(Disabled) javascript
ON
OFF
Is active? Toggle activation! Disable! Activate!
$('#disable-switch').bootstrapSwitch('isActive'); $('#disable-switch').bootstrapSwitch('toggleActivation'); $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
表单(Form) - try to use tab and space
Email
Notification 1
ON
OFF
Notification 2
ON
OFF
<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>
Bootstrap Switch由Bootstrap中文网翻译整理