jquery switch

最新推荐文章于 2024-07-26 03:35:47 发布

转载最新推荐文章于 2024-07-26 03:35:47 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LiuFengH/p/10876485.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Bootstrap Switch插件创建可定制的开关按钮。通过设置onText、offText、onColor和offColor属性，可以改变开关按钮的显示文本和颜色。此外，还演示了如何使用JavaScript监听开关状态变化并打印相关信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>

    </head>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link href="https://unpkg.com/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <script type="text/javascript"  src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap-switch"></script>
 
    <body>
            <input type="checkbox" data-value="id" class="switch" />    data-on-text="open"
             ontext offtext
              size   null, 'mini', 'small', 'normal', 'large'
              onColor offColor    'primary', 'info', 'success', 'warning', 'danger', 'default'
    </body>

    <script stype="javascript/text">

        $(".switch").bootstrapSwitch({
             onText: "Open",           
             offText: "Close",           
             onColor: "success",    
            offColor: "primary",
            onSwitchChange: function(event, state) {
                console.log(this); // DOM element
                console.log(event); // jQuery event
                console.log(state); // true | false
                console.log($(this).data('value'));
                state=false;
            }
        });
        $(".switch").bootstrapSwitch("size" ,"large").bootstrapSwitch('state',true);