Jquery 在Twitter引导中使用farbtastic colorpicker'；s爆米花

在基于的用户界面中，我有多个按钮，可以触发一个

popover

，产生一个。目前，我已将其附加到

标签上，并将其委托给按钮：

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>

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

使用这种方法，我有两个问题：

• popover不会出现在相应按钮旁边，而是与
  标记对齐
• 只有在第一次触发popover时，colorpicker才会工作。之后，所有基于JavaScript的功能都将丢失

请参阅以获取实时演示

---

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

关于第一个问题，请在

.btn

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

---

在此期间，我自己解决了问题，这就是我的解决方案（另请参见）：

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>

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

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

$（文档）.ready（函数（）{
$（“输入[rel=colorpicker]”）。每个（函数（i，输入）{
$this=$（输入）；
返回$this.popover({
标题：“颜色选择器”，
触发：“点击”，
位置：“底部”，
是的，
内容：“”
+ ""
+ ""
}).on（“单击”，函数（）{
$this=$（this）；
$target=$（“#颜色选择器-”+$this.data（“工具”）；
$target.find（“.color picker”）.farbtastic（函数（颜色）{
$this.val（color.css（“背景色”，color）；
});
});
});
});

我以前试过这个，但我有一个空的popover。用这种方法应用farbtastic要困难得多，但我很高兴看到一个有效的例子。无论如何谢谢你！