Bootstrap 开关(switch)控件
http://www.bootcss.com/p/bootstrap-switch/
https://github.com/Bttstrp/bootstrap-switch
$(function(){ $("#mySwitch").bootstrapSwitch({ state:true, size:'large', onColor:'success', offColor:'danger', onText:'开', offText:'关', onSwitchChange:function(event, state){ if(state==true){ var id = $(this).attr("id"); console.log(id); console.log("true"); }else{ console.log("false"); } } }); });
Name | Attribute | Type | Description | Values | Default |
state | checked | Boolean | The checkbox state | true, false | true |
size | data-size | String | The checkbox size | null, 'mini', 'small', 'normal', 'large' | null |
animate | data-animate | Boolean | Animate the switch | true, false | true |
disabled | disabled | Boolean | Disable state | true, false | false |
readonly | readonly | Boolean | Readonly state | true, false | false |
indeterminate | data-indeterminate | Boolean | Indeterminate state | true, false | false |
inverse | data-inverse | Boolean | Inverse switch direction | true, false | false |
radioAllOff | data-radio-all-off | Boolean | Allow this radio button to be unchecked by the user | true, false | false |
onColor | data-on-color | String | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | 'primary' |
offColor | data-off-color | String | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | 'default' |
onText | data-on-text | String | Text of the left side of the switch | String | 'ON' |
offText | data-off-text | String | Text of the right side of the switch | String | 'OFF' |
labelText | data-label-text | String | Text of the center handle of the switch | String | ' ' |
handleWidth | data-handle-width | String | Number | Width of the left and right sides in pixels | 'auto' or Number | 'auto' |
labelWidth | data-label-width | String | Number | Width of the center handle in pixels | 'auto' or Number | 'auto' |
baseClass | data-base-class | String | Global class prefix | String | 'bootstrap-switch' |
wrapperClass | data-wrapper-class | String | Array | Container element class(es) | String | Array | 'wrapper' |
onInit | Function | Callback function to execute on initialization | Function |
|
|
onSwitchChange | Function | Callback function to execute on switch state change. If false is returned, the status will be reverted, otherwise nothing changes | Function |
|
相关推荐
Bootstrap Switch控件是一种在Web开发中广泛使用的交互元素,它为用户提供了一种直观的方式来切换两种状态,例如开启或关闭某个选项。这个控件基于流行的前端框架Bootstrap,通过结合jQuery库来增强其功能和用户体验...
总之,Bootstrap Switch 提供了美观的交互式开关控件,通过引入 `bootstrap-switch.min.css` 和 `bootstrap-switch.min.js` 文件,结合适当的 JavaScript 初始化,可以在项目中轻松实现这一功能。记得根据项目需求...
总的来说,Bootstrap Switch 是一个强大的工具,它能够帮助开发者快速地在 Bootstrap 项目中添加功能丰富的开关控件,提升用户体验。通过灵活的配置和事件处理,你可以根据项目需求定制出满足各种场景的开关组件。
Bootstrap Switch 是一个基于 Bootstrap 框架的组件,它扩展了原生的 HTML 开关(checkbox)元素,将其转换为一种交互式、可定制的开关控件。在 Web 应用开发中,这样的控件非常实用,因为它可以直观地表示二元选择...
网上的bootstrap-switch使用不便,因此整理了我在项目上所使用的开关控件,结合bootstrap框架使用
Bootstrap Switch 是其生态系统中的一个扩展,主要关注于提供一种美观且易于使用的开关控件,适用于各种状态切换场景,比如开启/关闭功能、选择选项等。 在"bootstrap-switch-master"的压缩包中,我们可以找到以下...
// 然后使用这些值来配置switch控件 }); ``` 总的来说,Bootstrap开关控件提供了一种灵活的方式来创建具有吸引力的交互式开/关选择器,适用于各种Web应用程序和移动设备界面。通过自定义样式和JavaScript事件处理...
在本文中,我们将深入探讨基于AngularJS的前端项目——"angular-bootstrap-switch",这是一个利用jQuery插件实现的引导开关指令。这个项目旨在为AngularJS应用提供一个易于使用的、可定制的开关组件,使得用户界面...
2. **易用性**:通过简单的HTML标记和JavaScript初始化,开发者可以在页面上快速添加和配置BootstrapSwitch控件。例如,只需在复选框或单选按钮上添加`data-toggle="switch"`属性即可。 3. **事件驱动**:Bootstrap...
BootstrapSwitch是一款基于Bootstrap框架的插件,它能够将HTML中的复选框(checkbox)和单选按钮(radio button)转化为视觉效果更佳、交互性更强的切换开关(toggle switch)。这个转换过程使得用户界面更加直观,...
bootstrap-switch开关控件,里面包含了bootstrap-switch的css和bootstrap-switch.js两个主要的文件,使用时只需要引入这两个文件,然后初始化$('[name="status"]').bootstrapSwitch({ size:"mini", onSwitchChange:...
Bootstrap Switch 是一个基于Bootstrap框架的扩展插件,它为用户提供了一种美观且易于使用的开关(toggle)控制,常用于在两种状态之间切换,比如开/关、是/否或者真/假等二元选择。这个插件使得网页设计更加直观,...
Bootstrap Switch 开关组件是基于 Bootstrap 框架的开关控件,提供了灵活且美观的开关控件解决方案。以下是 Bootstrap Switch 开关组件的使用方法详解: 基本使用 首先,需要在 HTML 文档中引入 Bootstrap 和 ...
1. **布局设计**:在XML布局文件中,创建一个包含开关的元素,如`SwitchCompat`(对于Android)或`bootstrap-switch`(对于Web前端)。这些组件提供了基础的开关结构,并且可以自定义样式。 2. **事件监听**:添加...
在"bootstrap-switch-master"这个子文件夹中,我们可以推测这可能是一个专门关于Bootstrap开关组件(Bootstrap Switch)的示例或库。Bootstrap Switch是一种可切换的复选框,外观类似物理开关,可以用于二选一的选项...
- `<SwitchPreference>`标签用于创建开关控件,它有`android:key`(用于识别偏好项的唯一标识)、`android:title`(显示的标题)、`android:summary`(描述信息)等属性。例如: ```xml <SwitchPreference ...
6. `forms_switch.html`:开关控件的实现,这种元素常用于开启/关闭某种功能,或者进行简单的二选一选择。 7. `pages_data_table.html`:数据表格页面,Bootstrap提供了响应式的数据表格,可以方便地展示大量数据,...