博客

jQuery Mobile Flipswitch enable()方法

  • Post category:jquery

jQuery Mobile Flipswitch是一种用于移动设备的自定义开关控件，利用这个控件可以让用户通过滑动手势来切换开关状态。enable()方法是用于启用或禁用Flipswitch控件的方法。

调用enable()方法后，如果传入参数为true，则启用Flipswitch；如果参数为false，则禁用Flipswitch。启用Flipswitch后，用户可以通过滑动手势来切换开关状态；禁用Flipswitch后，用户将无法使用该控件。

下面是启用Flipswitch的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Flipswitch enable()方法</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="fieldcontain">
        <label for="flip-1">启用/禁用Flipswitch：</label>
        <select name="flip-1" id="flip-1" data-role="flipswitch" data-on-text="启用" data-off-text="禁用" data-wrapper-class="custom-size-flipswitch">
            <option value="off">禁用</option>
            <option value="on">启用</option>
        </select>
    </div>
    <button id="enable" onclick="enable()">启用Flipswitch</button>
    <button id="disable" onclick="disable()">禁用Flipswitch</button>
    <script>
        function enable() {
            $("#flip-1").flipswitch("enable", true);
        }
        function disable() {
            $("#flip-1").flipswitch("enable", false);
        }
    </script>
</body>
</html>

上面的示例代码中，利用了jQuery Mobile的Flipswitch控件，并添加了两个按钮：启用Flipswitch、禁用Flipswitch。在点击这两个按钮时，分别调用了enable()和disable()方法，来启用或禁用Flipswitch控件。注意，在调用这两个方法时，需要首先通过jQuery的选择器选中Flipswitch控件，然后再调用它的enable()方法。

下面是禁用Flipswitch的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Flipswitch enable()方法</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="fieldcontain">
        <label for="flip-1">启用/禁用Flipswitch：</label>
        <select name="flip-1" id="flip-1" data-role="flipswitch" data-on-text="启用" data-off-text="禁用" data-wrapper-class="custom-size-flipswitch">
            <option value="off">禁用</option>
            <option value="on">启用</option>
        </select>
    </div>
    <button id="disable" onclick="disable()">禁用Flipswitch</button>
    <script>
        function disable() {
            $("#flip-1").flipswitch("enable", false);
        }
    </script>
</body>
</html>

上面的示例代码中，和之前的示例代码类似，利用了jQuery Mobile的Flipswitch控件，并添加了一个按钮：禁用Flipswitch。在点击这个按钮时，调用了disable()方法，来禁用Flipswitch控件。需要注意的是，调用enable()方法时，第二个参数传入的是false，来表示禁用Flipswitch。

Tags: