最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Enable and disable jquery knob dynamically - Stack Overflow

programmeradmin2浏览0评论

I'm using the excellent jQuery knob plugin. However, I need to dynamically enable/disable the element depending on user input. There is support for having a disabled state on page load which have the effect that no mouse (or touch) events are bound to the canvas element. Does anyone know how to resolve this issue, that is, how to (after page load) bind and unbind these mouse event listeners?

Ideally I would like to do something like this (on a disabled knob)

$('.button').click(function() {
    $('.knob').enable();
});

Edit: I ended up rewriting the source which binds/unbinds the mouse and touch events. The solution is not perfect so I leave the question open if someone perhaps have a better (cleaner) solution.

I'm using the excellent jQuery knob plugin. However, I need to dynamically enable/disable the element depending on user input. There is support for having a disabled state on page load which have the effect that no mouse (or touch) events are bound to the canvas element. Does anyone know how to resolve this issue, that is, how to (after page load) bind and unbind these mouse event listeners?

Ideally I would like to do something like this (on a disabled knob)

$('.button').click(function() {
    $('.knob').enable();
});

Edit: I ended up rewriting the source which binds/unbinds the mouse and touch events. The solution is not perfect so I leave the question open if someone perhaps have a better (cleaner) solution.

Share Improve this question edited Jan 11, 2013 at 15:10 olif asked Jan 11, 2013 at 13:24 olifolif 3,3092 gold badges26 silver badges24 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

html

<input class="knobSlider" data-readOnly="true">
<button id="testBtn">clickHere</button>

script

in doc ready,

$(".knobSlider").knob();
$("#testBtn").click(function(){
    $(".knobSlider").siblings("canvas").remove();
    if($(".knobSlider").attr("data-readOnly")=='true'){
        $(".knobSlider").unwrap().removeAttr("data-readOnly readonly").data("kontroled","").data("readonly",false).knob();
    }
    else{
        $(".knobSlider").unwrap().attr("data-readOnly",true).data("kontroled","").data("readonly",true).knob();
    }
});

For reference you can use my jsfiddle link > http://jsfiddle/EG4QM/ (check this in firefox, because of some external resource load problem in chrome)

If someone doesn't like how the accepted answer destroys and recreates the internal canvas element, then checkout my approach:

https://jsfiddle/604kj5g5/1/

Essentially, check the draw() implementation (I also remend listening on value changes in the draw method instead of the change and release, which work for and click and mousewheel events respectively, which imo is inconvenient).

var $input = $("input");

var knobEnabled = true;
var knobPreviousValue = $input.val();

$input.knob({
  draw: function () { 
    if (knobPreviousValue === $input.val()) {
      return;
    }

    if (!knobEnabled) {
      $input.val(knobPreviousValue).trigger("change");
      return;
    }

    knobPreviousValue = $input.val();

    console.log($input.val()); 
  },
});

Try this to disable the control. I'm still trying to find a way to enable it back

 $("#btnDisable").click(function(){
      $("#knob").off().prev().off();
    });
发布评论

评论列表(0)

  1. 暂无评论