6

私はこのコードをRailsで動作させようとしています：

$(elem).popover({
  title:"Brake activity",
  content: $("<div>").append( $("#slider").slider({ 
    range: "max",
    max: maxValue,
    min: maxValue / 5,
    value: maxValue / 2}) ).eq(0).outerHTML(),
  trigger: "manual"});

ほとんどすべてがうまくいきますが、スライダーは機能しません-無効になっているようです。無効にしたオプションをfalseに定義しても、同じ結果が得られました。メソッドouterHTML（）は、Getselected要素の外部HTMLから抽出されました。

スライダーがどのように表示されるかを示すスクリーンショットをアップロードしました：http：//i48.tinypic.com/24azpkm.png

4

1 に答える 1

7

考えられる問題

まず、プロパティに割り当てる値は、ポップオーバーでレンダリングされるときに要素にcontentラップされます。<p>スライダーに問題が発生している可能性があると思われます。

次に、他の Bootstrap コンポーネント (Modal など) とは異なり、Popover のコンテンツは永続的ではなく、その場でレンダリングされます。したがって、これまでに示した方法を考えると、スライダーに値を保持できるという問題が発生します。

解決策

可能なアプローチの 1 つは、ポップオーバーが表示または非表示になるたびに、コンテンツ (この場合はスライダー) をアタッチおよびデタッチすることです。残念ながら、ポップオーバーはイベントをトリガーしないため、これを手動で管理する必要があります。

最初に使用するスライダーをインスタンス化し、ポップオーバーのトグルを処理するスコープ内に保持します。

var $slider = $('<div>').slider({
  range: "max",
  max: maxValue,
  min: maxValue / 5,
  value: maxValue / 2
});

ポップオーバーが表示された直後に、次を使用してスライダーをアタッチできます。

$('.popover-content')
  .empty()
  .append($slider);

注:一度に複数のポップオーバーを開いている場合は、より具体的なセレクターを使用する必要があります。

popoverを非表示にする前に、スライダーを手動で切り離します。

$slider.detach();

これにより DOM から切り離されますが、そのデータはすべて保持されます。

トグルボタンを使用してポップオーバーをトリガーするデモを作成しました。ポップオーバーが最初に (表示されずに) 初期化され、 contentの初期値が指定されていないことに注意してください。

JSFiddle

于 2012-08-12T18:42:38.607 に答える