【问题标题】:jquery knob not updating via webbsocketsjquery 旋钮未通过 webbsockets 更新
【发布时间】:2016-02-27 00:22:35
【问题描述】:

我通过 websockets 获取旋钮值,并且能够通过 document.elementId 在 html 页面上显示该值。 但是,然后我尝试根据此值更新旋钮,但没有发生

    <table id="speedTable">
        <tr>
            <td>revolutions</td></tr>
            <tr><td id="revolutions"></td>

        </tr>
    </table>

    <input type="text" class="dial" id="revdial" value="0" data-width="120" data-thickness="0.4" >

</div>


$(document).ready(function() {

   $('.dial').knob({
        'min': 0,
            'max': 100,
            'step': 1,
            'readOnly': false,
            'linecap': 'round',
            'displayInput': true,
        'displayPrevious': false,
            'angleOffset': -125,
            'angleArc': 250
    });

    $('#revolutions).trigger('configure', {
        'draw': function (v) {
            v=parseInt(document.getElementById('revolutions').value);

            if (v > 2050 ) {
                this.o.fgColor='red';
                $("#revdial").css("color", "red");

            }
            if (v <= 2030 ) {
                this.o.fgColor='#87CEEB';
                $("#revdial").css("color", "#87CEEB");
                           }
            if (v > 2000  && v<=2030) {
                this.o.fgColor='#87CEEB';
                $("#revdial").css("color", "#87CEEB");

            }
        },
        'format': function (v) {
            return v + ' %';
        }
    });
    $('#revdial').trigger('change');
});

请帮忙。谢谢你

【问题讨论】:

  • 您需要只使用jquery旋钮还是可以使用任何其他替代插件?
  • 任何插件都可以使用
  • 你看到我下面的答案了吗?这适合你还是错过了什么?

标签: jquery websocket jquery-knob round-slider


【解决方案1】:

根据您的 cmets,我基于 jQuery roundSlider 插件准备了一个类似于您的要求的演示。请查看下面的演示,它可以根据您的要求进一步定制。

DEMO

更多详情请查看demosdocumentation 页面。

【讨论】:

    猜你喜欢
    • 2019-12-17
    • 1970-01-01
    • 1970-01-01
    • 2011-01-06
    • 2014-04-02
    • 2014-05-10
    • 1970-01-01
    • 1970-01-01
    • 2011-06-16
    相关资源
    最近更新 更多