jQuery-Knob
jQuery-Knob copied to clipboard
aterrien
Can't modify readOnly option
I created the knob inputs in the document.ready event (with readonly set at the default false value).
I want to set the readonly option to true for all the .knob objects when i click on a buttton. The click event is well triggered and bind and I trigger the configure event of the knob as written just after, but i still can click and change the value of the input... is it my code, or just that i can't change the readonly value after the knob's creation ?
$('.knob').trigger('configure',{'readOnly': true});
Waiting for an answer, Thanks for any help...
I haven't found an answer and being honnest I haven't search as well... I needed this functionality for a scolar project and this project had to be finish in June so I stopped searching and did with the existing functionality.
To make it work you need to add a few lines to the code.
In line # 74 you need to call the "_listen" method. Like this:
var cf = function (e, conf) {
var k;
for (k in conf) {
s.o[k] = conf[k];
}
s.init();
s._configure()
._listen()
._draw();
};
Then, in the "_listen" method at line arround # 320 just add these few lines in the "else":
} else {
this.$c.unbind("mousedown");
this.$c.unbind("touchstart");
this.$.attr('readonly', 'readonly');
}
Then you need to call the change:
$('.knob').trigger('configure',{'readOnly': true});
not yet, for up and down arrows are still not readonly
add this line in the "else" in the "_listen" method:
this.i.unbind("keydown");
The hack still works.. the only difference is that the line numbers have changed. From Line #74 to #80. From Line #320 to #419.
For others who are also looking at this issue,
if you update the _listen function to look like this, the scroll wheel and arrow keys will function as intended.
this._listen = function () {
if (!this.o.readOnly) {
this.$.removeAttr('readonly');
this.$c.unbind('mousedown');
this.$c.unbind('touchstart');
this.$.unbind('keydown');
this.$c.unbind("mousewheel DOMMouseScroll");
this.$.unbind("mousewheel DOMMouseScroll");
this.$.unbind('keyup');
this.$c
.bind(
"mousedown",
function (e) {
e.preventDefault();
s._xy()._mouse(e);
}
)
.bind(
"touchstart",
function (e) {
e.preventDefault();
s._xy()._touch(e);
}
);
this.listen();
} else {
this.$c.unbind('mousedown');
this.$c.unbind('touchstart');
this.$.unbind('keydown');
this.$c.unbind("mousewheel DOMMouseScroll");
this.$.unbind("mousewheel DOMMouseScroll");
this.$.attr('readonly', 'readonly');
}
if (this.relative) {
$(window).resize(function () {
s._carve().init();
s._draw();
});
}
return this;
};
