1

我正在使用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/

4

1 回答 1

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/

于 2014-06-23T10:21:06.880 回答