Knob show buttons in the center

Question

I'm using jQuery Knobs to create a few control elments and so far it is working great.

Now i d like to have two buttons in the center of the knob.

To create the button i would use something like this:

<button type="button" style="border-radius:150px 150px 0px 0px; width:150px;height:75px;" value="0" name="btn8">Name</button>
<button type="button" style="border-radius:0px 0px 150px 150px; width:150px;height:75px;" value="0" name="btn8">Name</button>

Right now i have no idea how to place this buttons in the center of the knob. Do you have any ideas that could help me?

http://jsfiddle.net/52VtD/6457/

Answer 1

Since that the plugin actually not implement any prefix/suffix feature, I built a little hack so in the draw callback it:

• get the position of the input element on which knob is applied
• build two spans and append/prepend them at the input
• move the position of the new elements to let appear them requested

Consider that the knob element is absolutely positioned, so the newly appended elements, for now, are not pixel perfect.

Code:

$(".knob").knob({
    width: 150,
    fgColor: '#B80000',
    displayInput: true,
    displayPrevious: false,
    cursor: 10,
    thickness: .1,
    step: 1,
    stopper: true,
    release: function (value) {
        console.log("set knob value to : " + value);
    },
    draw: function () {
        if ($(this.i).siblings(".kb-buttons").length > 0) return
        var pos1 = parseInt($(this.i).css("marginLeft").replace('px', ''));
        var pos2 = parseInt($(this.i).css("marginTop").replace('px', ''));
        var $elem = $("<span>Btn2</span>").addClass("kb-buttons");
        $elem.insertAfter(this.i).css({
            position: "absolute",
            marginLeft: (pos1 + 25) + "px",
            marginTop: (pos2 + 55) + "px"
        });
        var $elem = $("<span>Btn1</span>").addClass("kb-buttons");
        $elem.insertBefore(this.i).css({
            position: "absolute",
            marginLeft: (pos1 + 25) + "px",
            marginTop: (pos2 - 25) + "px"
        });
    }
});

$("body").on("click", ".kb-buttons", function () {
    alert('click');
});

Demo: http://jsfiddle.net/4ZSxK/