2

在基于Twitter Bootstrap的用户界面中，我有多个按钮应该触发一个popoverfarbtastic 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 />标签对齐。
  • 颜色选择器仅在第一次触发弹出框时起作用。之后，所有基于 JavaScript 的功能都将丢失。

有关现场演示，请参阅此 jsFiddle。

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

4

2 回答 2

2

在这之间我自己解决了这个问题，这就是我的解决方案的样子（另见jsFiddle 的第 11 版）：

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);
            });
        });
    });
});
于 2012-12-06T09:21:56.597 回答
0

关于第一个问题，把事件附在.btn

$(".btn").popover({
        trigger: "click",
        placement: "bottom",
        title: "Colorpicker",
        content: $("#colorpicker"),
        html: true
    })
于 2012-11-29T12:38:10.893 回答