javascript - How to make jquery knob readonly using jquery? - Stack Overflow

admin管理员组

文章数量:1323029

I'm using a jquery knob plugin. I want to make the knob readonly on button click.

(function() {
$(".dial").knob({
    'min':0,
    'max':360,
    'change' : function(degree){
        var img = $(".volume_bttn");
        if(radioSwitchState == 1)
        {
            img.css('-moz-transform', 'rotate('+degree+'deg)');
            img.css('-webkit-transform', 'rotate('+degree+'deg)');
            img.css('-o-transform', 'rotate('+degree+'deg)');
            img.css('-ms-transform', 'rotate('+degree+'deg)');
            var vol = ((degree)/360).toFixed(2);
            //console.log(vol);
            $("#jquery_jplayer_1").jPlayer("volume",(360-vol));
        }
    },
    'fgColor' : '#460E09',//460E09
    'bgColor' : "transparent",//transparent
    'width' : 107,
    'thickness' : 0.3,
    'displayInput' : false,
    'linecap' : 'butt'
    });
});

This is a code where I'm initializing the knob. How to make it readonly on button click?(I repeat)

I'm using a jquery knob plugin. I want to make the knob readonly on button click.

(function() {
$(".dial").knob({
    'min':0,
    'max':360,
    'change' : function(degree){
        var img = $(".volume_bttn");
        if(radioSwitchState == 1)
        {
            img.css('-moz-transform', 'rotate('+degree+'deg)');
            img.css('-webkit-transform', 'rotate('+degree+'deg)');
            img.css('-o-transform', 'rotate('+degree+'deg)');
            img.css('-ms-transform', 'rotate('+degree+'deg)');
            var vol = ((degree)/360).toFixed(2);
            //console.log(vol);
            $("#jquery_jplayer_1").jPlayer("volume",(360-vol));
        }
    },
    'fgColor' : '#460E09',//460E09
    'bgColor' : "transparent",//transparent
    'width' : 107,
    'thickness' : 0.3,
    'displayInput' : false,
    'linecap' : 'butt'
    });
});

This is a code where I'm initializing the knob. How to make it readonly on button click?(I repeat)

• javascript
• jquery
• jquery-knob

Share Improve this question Follow asked Aug 13, 2013 at 7:48 K CloudK Cloud 27111 gold badge55 silver badges1515 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Looking into the code you cannot use the $('.knob').trigger('configure', {}) to set the readOnly state after the knob has been created. The reasons for this is because "configure" event is bound to:

var cf = function (e, conf) { 
    var k;
    for (k in conf) {
        s.o[k] = conf[k];
    }
    s._carve().init();
    s._configure()
    ._draw();
};

As seen in this function, these are the only methods called. The "readOnly" option is only looked at once from what I can see when the knob is first created so changing this value after calling $('.knob').knob(); doesnt work.

You must set this value during creation:

$('.knob').knob({
    "readOnly":true
 });

From the jQuery Knob Documentation:

$('.dial').trigger(
    'configure',
    {
        "min":10,
        "max":40,
        "fgColor":"#FF0000",
        "skin":"tron",
        "cursor":true
    }
);

So you would end up with something like this:

$('.button').click(function() {
    $('.dial').trigger('configure', {"readOnly": true});
}

See if the trigger approach posted by @dodo works. If not, I've got two workarounds:

1. Attempt to unbind all of the relevant events (click, scroll, mouse down up etc)
2. Create a blank div with the same dimensions as your knob and overlay it above the knob. You will still see it, but all events will be caught by the div, making your knob 'readonly'.

$(".dial").knob({
    min: 1
    max: 10
    stopper: true,
    readOnly: true,//if true This will Set the Knob readonly cannot click
    release: function (value) {
      //Do something as you release the mouse
    }
})

本文标签： javascriptHow to make jquery knob readonly using jqueryStack Overflow