Question

我正在使用jQuery Knobs来创建一些控制元素，到目前为止它的效果非常好。

现在我想在旋钮的中央有两个按钮。

要创建按钮，我会使用以下内容：

<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>

现在我不知道如何将这个按钮放在旋钮的中央。你有什么想法可以帮助我吗？

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

Answer 1

由于插件实际上没有实现任何前缀/后缀功能，我在绘制回调中构建了一个小黑客：

获取应用旋钮的输入元素的位置
构建两个跨度并在输入
移动新元素的位置以显示请求

考虑到旋钮元素是绝对定位的，所以现在新添加的元素不是像素完美的。

代码：

$(".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');
});

演示：http://jsfiddle.net/4ZSxK/

旋钮在中心显示按钮

1 个答案: