jQWidgets jqxGauge LinearGauge disable() 方法(1)

📌 相关文章

📜 jQWidgets jqxGauge LinearGauge disable() 方法(1)

📅 最后修改于: 2023-12-03 15:02:18.789000 🧑 作者: Mango

jQWidgets jqxGauge LinearGauge disable() 方法

简介

disable()方法是基于jQWidgets框架的jqxGauge和jqxLinearGauge组件中可用的方法。使用此方法可以将测量仪表盘或线性仪表盘设为不可用状态，即禁用用户对仪表盘进行交互和更改。

语法

$('#gaugeContainer').jqxGauge('disable');

或者

$('#lineargaugeContainer').jqxLinearGauge('disable');

返回值

无返回值。

示例

以下示例演示如何使用disable()方法来禁用jqxGauge组件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>禁用 jqxGauge 测量仪表盘</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css">

    <!-- 引入脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdata.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxgauge.js"></script>
</head>

<body>
    <div id="gaugeContainer" style="width: 240px; height: 240px;"></div>

    <script>
        // 初始化测量仪表盘
        $('#gaugeContainer').jqxGauge({
            ranges: [{
                startValue: 0,
                endValue: 60,
                style: {
                    fill: '#4cb848',
                    stroke: '#4cb848'
                }
            }, {
                startValue: 60,
                endValue: 120,
                style: {
                    fill: '#fad00b',
                    stroke: '#fad00b'
                }
            }, {
                startValue: 120,
                endValue: 180,
                style: {
                    fill: '#e23838',
                    stroke: '#e23838'
                }
            }],
            ticksMinor: { interval: 5, size: '5%' },
            ticksMajor: { interval: 10, size: '10%' },
            value: 40
        });

        // 禁用测量仪表盘
        $('#gaugeContainer').jqxGauge('disable');
    </script>
</body>

</html>

以上示例中，我们使用disable()方法将测量仪表盘设为不可用状态。此时，用户将无法通过点击或拖动测量仪表盘进行更改。

以下示例演示如何使用disable()方法来禁用jqxLinearGauge组件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>禁用 jqxLinearGauge 线性仪表盘</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css">

    <!-- 引入脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdata.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxgauge.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxlineargauge.js"></script>
</head>

<body>
    <div id="lineargaugeContainer" style="width: 240px; height: 60px;"></div>

    <script>
        // 初始化线性仪表盘
        $('#lineargaugeContainer').jqxLinearGauge({
            ranges: [{
                startValue: 0,
                endValue: 20,
                style: {
                    fill: '#4cb848',
                    stroke: '#4cb848'
                }
            }, {
                startValue: 20,
                endValue: 40,
                style: {
                    fill: '#fad00b',
                    stroke: '#fad00b'
                }
            }, {
                startValue: 40,
                endValue: 60,
                style: {
                    fill: '#e23838',
                    stroke: '#e23838'
                }
            }],
            ticksMinor: { interval: 1, size: '5%' },
            ticksMajor: { interval: 2, size: '10%' },
            min: 0,
            max: 60,
            value: 30
        });

        // 禁用线性仪表盘
        $('#lineargaugeContainer').jqxLinearGauge('disable');
    </script>
</body>

</html>

在以上示例中，我们使用disable()方法将线性仪表盘设为不可用状态。此时，用户将无法通过点击或拖动线性仪表盘进行更改。

注意事项

disable()方法仅适用于jqxGauge和jqxLinearGauge组件。
调用disable()方法将禁用用户对仪表盘或线性仪表盘进行交互和更改。但仪表盘或线性仪表盘的状态仍然可以通过value()方法进行更改。

参考资料

jQWidgets API Documentation