在Twitter中使用farbtastic colorpicker Bootstrap的彈出

在基於Twitter Bootstrap的用戶界面中，我有多個按鈕應觸發popover產生farbtastic colorpicker。目前，我有它連接到<body />標籤和委託它的按鈕：在Twitter中使用farbtastic colorpicker Bootstrap的彈出

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進行現場演示。

非常感謝您提供任何有用的想法！

來源

2012-11-29 hielsnoppe

事件在這兩者之間我解決了自己的問題，這就是我的解決方案看起來像（見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); 
      }); 
     }); 
    }); 
});

來源

2012-12-06 09:21:56 hielsnoppe

關於第一個問題，重視在.btn

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

來源

2012-11-29 12:38:10 silviomoreto

我之前嘗試過，並讓我有空的彈出窗口。以這種方式應用farbtastic要困難得多，但我很樂意看到一個可行的例子。不管怎樣，謝謝你！ – hielsnoppe

在Twitter中使用farbtastic colorpicker Bootstrap的彈出

回答

相關問題