`

Bootstrap 开关(switch)控件

 
阅读更多

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
function(event, state) {}
onSwitchChange   Function Callback function to execute on switch state change. If false is returned, the status will be reverted, otherwise nothing changes Function
function(event, state) {}
  • 大小: 2.9 KB
分享到:
评论

相关推荐

    bootstrap-switch开关控件

    Bootstrap Switch控件是一种在Web开发中广泛使用的交互元素,它为用户提供了一种直观的方式来切换两种状态,例如开启或关闭某个选项。这个控件基于流行的前端框架Bootstrap,通过结合jQuery库来增强其功能和用户体验...

    bootstrap的switch控件需要引入的js和css文件

    总之,Bootstrap Switch 提供了美观的交互式开关控件,通过引入 `bootstrap-switch.min.css` 和 `bootstrap-switch.min.js` 文件,结合适当的 JavaScript 初始化,可以在项目中轻松实现这一功能。记得根据项目需求...

    bootstrap-switch bootstrap 开关

    总的来说,Bootstrap Switch 是一个强大的工具,它能够帮助开发者快速地在 Bootstrap 项目中添加功能丰富的开关控件,提升用户体验。通过灵活的配置和事件处理,你可以根据项目需求定制出满足各种场景的开关组件。

    最新开关按钮 bootstrap-switch

    Bootstrap Switch 是一个基于 Bootstrap 框架的组件,它扩展了原生的 HTML 开关(checkbox)元素,将其转换为一种交互式、可定制的开关控件。在 Web 应用开发中,这样的控件非常实用,因为它可以直观地表示二元选择...

    bootstrap-switch使用

    网上的bootstrap-switch使用不便,因此整理了我在项目上所使用的开关控件,结合bootstrap框架使用

    bootstrap-switch-master

    Bootstrap Switch 是其生态系统中的一个扩展,主要关注于提供一种美观且易于使用的开关控件,适用于各种状态切换场景,比如开启/关闭功能、选择选项等。 在"bootstrap-switch-master"的压缩包中,我们可以找到以下...

    Bootstrap开关(switch)控件学习笔记分享

    // 然后使用这些值来配置switch控件 }); ``` 总的来说,Bootstrap开关控件提供了一种灵活的方式来创建具有吸引力的交互式开/关选择器,适用于各种Web应用程序和移动设备界面。通过自定义样式和JavaScript事件处理...

    前端项目-angular-bootstrap-switch.zip

    在本文中,我们将深入探讨基于AngularJS的前端项目——"angular-bootstrap-switch",这是一个利用jQuery插件实现的引导开关指令。这个项目旨在为AngularJS应用提供一个易于使用的、可定制的开关组件,使得用户界面...

    bootstrapSwitch

    2. **易用性**:通过简单的HTML标记和JavaScript初始化,开发者可以在页面上快速添加和配置BootstrapSwitch控件。例如,只需在复选框或单选按钮上添加`data-toggle="switch"`属性即可。 3. **事件驱动**:Bootstrap...

    BootstrapSwitch将复选框和单选按钮变成切换开关

    BootstrapSwitch是一款基于Bootstrap框架的插件,它能够将HTML中的复选框(checkbox)和单选按钮(radio button)转化为视觉效果更佳、交互性更强的切换开关(toggle switch)。这个转换过程使得用户界面更加直观,...

    bootstrap-switch

    bootstrap-switch开关控件,里面包含了bootstrap-switch的css和bootstrap-switch.js两个主要的文件,使用时只需要引入这两个文件,然后初始化$('[name="status"]').bootstrapSwitch({ size:"mini", onSwitchChange:...

    Bootstrap Switch 开关控制插件

    Bootstrap Switch 是一个基于Bootstrap框架的扩展插件,它为用户提供了一种美观且易于使用的开关(toggle)控制,常用于在两种状态之间切换,比如开/关、是/否或者真/假等二元选择。这个插件使得网页设计更加直观,...

    bootstrap switch开关组件使用方法详解

    Bootstrap Switch 开关组件是基于 Bootstrap 框架的开关控件,提供了灵活且美观的开关控件解决方案。以下是 Bootstrap Switch 开关组件的使用方法详解: 基本使用 首先,需要在 HTML 文档中引入 Bootstrap 和 ...

    仿ios开关选择控件效果

    1. **布局设计**:在XML布局文件中,创建一个包含开关的元素,如`SwitchCompat`(对于Android)或`bootstrap-switch`(对于Web前端)。这些组件提供了基础的开关结构,并且可以自定义样式。 2. **事件监听**:添加...

    bootstrap界面demo

    在"bootstrap-switch-master"这个子文件夹中,我们可以推测这可能是一个专门关于Bootstrap开关组件(Bootstrap Switch)的示例或库。Bootstrap Switch是一种可切换的复选框,外观类似物理开关,可以用于二选一的选项...

    preference方式实现的仿iPhone开关

    - `<SwitchPreference>`标签用于创建开关控件,它有`android:key`(用于识别偏好项的唯一标识)、`android:title`(显示的标题)、`android:summary`(描述信息)等属性。例如: ```xml <SwitchPreference ...

    后台管理模板 bootstrap框架

    6. `forms_switch.html`:开关控件的实现,这种元素常用于开启/关闭某种功能,或者进行简单的二选一选择。 7. `pages_data_table.html`:数据表格页面,Bootstrap提供了响应式的数据表格,可以方便地展示大量数据,...

Global site tag (gtag.js) - Google Analytics