Question

在基于Twitter Bootstrap的用户界面中，我有多个按钮，可触发popover，产生farbtastic colorpicker。目前我已将其附加到<body />标记并将其委托给按钮：

HTML

<div id="body" style="text-align:center;">

<a class="btn" rel="popover">First</a>
<a class="btn" rel="popover">Second</a>

<div id="colorpicker">
    <input type="color" id="color" />
    <div class="my-farbtastic"></div>
</div>

</div>

的JavaScript

$(document).ready(function() {
    $("body").popover({
        trigger: "click",
        placement: "bottom",
        title: "Colorpicker",
        content: $("#colorpicker"),
        selector: "a[rel=popover]",
        html: true
    }).on("click", "a[rel=popover]", function() {
        $("#colorpicker").find(".my-farbtastic").farbtastic("#color");
    });
});

通过这种方法，我有两个问题：

弹出窗口不会出现在相应按钮旁边，而是与<body />标记对齐。
只有在第一次触发弹出窗口时，colorpicker才有效。之后，所有基于JavaScript的功能都将丢失。

请参阅this jsFiddle了解即时演示。

提前感谢您对此有任何有用的想法！

Answer 1

在我之间我自己解决了问题，这就是我的解决方案的样子（也见version 11 of the jsFiddle）：

<强> HTML

<div id="body" style="text-align:center;">
    <input type="text" rel="colorpicker" data-tool="first" />
    <input type="text" rel="colorpicker" data-tool="second" />
</div>

<强>的JavaScript

$(document).ready(function() {
    $("input[rel=colorpicker]").each(function(i, input) {
        $this = $(input);
        return $this.popover({
            title: "Colorpicker <i class='icon-remove pull-right'></i>",
            trigger: "click",
            placement: "bottom",
            html: true,
            content: "<div id='colorpicker-" + $this.data("tool") + "'>"
            + "<div class='color-picker'></div>"
            + "</div>"
        }).on("click", function() {
            $this = $(this);
            $target = $("#colorpicker-" + $this.data("tool"));
            $target.find(".color-picker").farbtastic(function(color) {
                $this.val(color).css("background-color", color);
            });
        });
    });
});

Answer 2

关于第一个问题，请在.btn

中附加活动

$(".btn").popover({
        trigger: "click",
        placement: "bottom",
        title: "Colorpicker",
        content: $("#colorpicker"),
        html: true
    })

在Twitter Bootstrap的popovers中使用farbtastic colorpicker

2 个答案: