转: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
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>
相关推荐
在本文中,我们将深入探讨基于AngularJS的前端项目——"angular-bootstrap-switch",这是一个利用jQuery插件实现的引导开关指令。这个项目旨在为AngularJS应用提供一个易于使用的、可定制的开关组件,使得用户界面...
BootstrapSwitch是一款基于Bootstrap框架的插件,它能够将HTML中的复选框(checkbox)和单选按钮(radio button)转化为视觉效果更佳、交互性更强的切换开关(toggle switch)。这个转换过程使得用户界面更加直观,...
在Bootstrap的原生组件中,虽然提供了按钮组(button groups)和单选按钮(radio buttons)等选项,但Bootstrap Switch 提供了一种更符合现代UI设计趋势的样式,将这些选择以滑动开关的形式呈现,这在移动设备上尤其...
- 初始化开关:通过JavaScript选择需要转换为开关的元素,并调用`.bootstrapSwitch()`方法初始化。 ```javascript $('input[type=checkbox]').bootstrapSwitch(); ``` - 配置选项:可以使用数据属性或...
4. **bootstrap-switch**:这个插件将 HTML 的复选框和单选按钮转换为滑动开关,提供了一种更直观的用户交互方式,适用于移动设备或需要简单二选一操作的场景。 5. **bootstrap-select**:它改进了原生的下拉选择框...
Bootstrap开关(switch)控件是基于流行的前端框架Bootstrap的一个扩展组件,主要用于创建具有开关效果的按钮,常用于模拟开/关状态的选择。这个控件在移动设备应用中尤其常见,因为它的滑动交互方式非常适合触屏操作...
3. **事件监听**:可以添加JavaScript事件监听器来响应开关状态的改变,如`switchChange.bootstrapSwitch`事件。 4. **API控制**:提供了一系列的JavaScript方法来操作开关,比如`toggleState()`用于切换状态,`...
Bootstrap Switch是Bootstrap框架的一个扩展,它将复选框和单选按钮转换为开关样式,增加了可切换的视觉效果,常用于开关设置。 5. **css3Dashboard** 一个基于CSS3的仪表板模板,提供了丰富的UI元素和布局,适用...
这通常通过`.switch`类或者第三方插件如Bootstrap Switch来实现。开关可以方便地切换两个状态,如开/关,是/否等,且支持自定义颜色和文字。 “固定导航”是另一个重要的特性,它确保导航栏在页面滚动时始终保持在...
7. **表单**:Bootstrap提供了预设样式的表单元素,如`form-control`类用于输入框,`btn`类用于按钮,以及`form-check`和`form-switch`用于复选框和切换开关。 8. **模态框**:`modal`组件允许在页面上弹出交互式...
3. `forms_elements.html`:这可能是关于表单元素的展示,包括输入框、选择框、复选框、按钮等,Bootstrap提供了统一的样式处理,使表单更加整洁、易用。 4. `other.html`:可能包含了一些未归类或者不常见的组件,...
- **forms_switch.html**:提供了开关按钮(toggle switch)的设计,常用于切换设置状态。 4. **权限控制**: - **pages_rabc.html**:可能涉及到角色基础的权限控制(Role-Based Access Control),这是一种常见...
`.form-control`类是所有表单控件的基础,`.form-label`用于创建标签,`.form-check`和`.form-switch`则用于复选框和切换开关。 七、导航(Navigation) 1. 导航栏(Navbar):`.navbar`类是导航栏的基础,可以与其他...
而“components-forms.html”和“components-switches.html”分别展示了表单组件和开关(switch)组件的实现,这些都是后台管理界面中常见的交互元素。它们的源码可以作为参考,快速构建自己的表单和切换按钮。 ...
4. **表单元素**:KingAdmin提供了各种表单控件,如输入框(Input)、选择器(Select)、日期选择器(Datepicker)、开关(Switch)等,这些组件都遵循一致的设计风格,且可与其他库(如Bootstrap、jQuery UI)兼容...