2

Twitter Bootstrapに基づくユーザーインターフェイスには、非常に優れたカラーピッカーpopoverを生成するトリガーとなる複数のボタンがあります。現時点では、タグに添付してボタンに委任しています。<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");
    });
});

このアプローチでは、2つの問題があります。

  • ポップオーバーはそれぞれのボタンの横には表示されませんが、<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 に答える