3

最近、Twitterの新しいBootstrap2.0.1とそのJavascriptポップオーバーの使用を開始しました。

一度に複数のポップオーバーを表示できないようにスクリプトを作成したいと思います。つまり、何らかの理由で新しいポップオーバーが生成されると（たとえば、クライアントがポップオーバーのある新しい要素をクリックまたはホバーすると）、以前に表示されたすべてのポップオーバーが最初に非表示になります。

これが私のウェブページのすべてのポップオーバーを最初に設定する関数です：

$(function (){
    $("[rel=popover]").popover({placement:'left', trigger:'click', html:true});
});

私が必要としているのは、すべてのポップオーバーを非表示にする関数を作成することだと思います。すべてのポップオーバーを表示する前にその関数を呼び出して、一度に1つのポップオーバーのみが表示されるようにします。関数は次のようになります。

function hidePopovers(){
    $(function (){
        $("[rel=popover]").popover('hide');
    });
}

しかし、私の問題は、このhidePopovers関数を呼び出す場所（または方法）を理解することです。ポップオーバーがトリガーされたとき、ポップオーバーが表示される前に呼び出したいです。ヘルプ？

ああ、混乱を解消するために、新しいBootstrapには「クリック」トリガーがあり、クリックするとポップオーバーを表示できます。詳細については、こちらをご覧ください。

どうもありがとう！

4

2 に答える 2

9

あなたが解決すべき問題として提示したことを考えるとhide()、ページ上で選択する可能性のあるすべてのポップオーバー要素でメソッドを実行するよりも、最後に開いたポップオーバーへの参照を単純に保存する方がはるかに効率的だと思います。私が理解している限りでは、最初に開くポップオーバーは 1 つだけにする必要があるため、非表示にするポップオーバーは 1 つだけにする必要があります。

以下はトリックを行います：

var $visiblePopover;

$('body').on('click', '[rel="popover"]', function() {
  var $this = $(this);

  // check if the one clicked is now shown
  if ($this.data('popover').tip().hasClass('in')) {

    // if another was showing, hide it
    $visiblePopover && $visiblePopover.popover('hide');

    // then store reference to current popover
    $visiblePopover = $this;

  } else { // if it was hidden, then nothing must be showing
    $visiblePopover = '';
  }
});​

JSFiddle

技術的には、デリゲート ハンドラーがアタッチされている (コード例'body'で使用されている) セレクターを、ページのより具体的な要素に変更する可能性があります。ページ上のポップオーバーのサブセット。

たとえば、ポップオーバーが近づきすぎて表示される特定のフォームがあり、ページ上の他のポップアップが衝突/オーバーラップしない場合、フォーム (例: '#some_form_id') のみを選択すると、フォーム内のポップアップのみが表示されます。振る舞いをします。

JSFiddle

注: この後者の例では、保存された参照を変更して、接続されている jQuery 化された DOM 要素ではなく、実際の Popover オブジェクトのみを使用するようにコードを少し最適化しました。

于 2012-08-25T06:28:03.067 に答える
1

これをテストしていませんが、次のようなものが機能する可能性があります。

トリガーを手動に設定します。クリック イベントをリッスンし、クリック時に hidePopovers() を呼び出して、クリックされたポップオーバーを表示します。

$(function (){
    function hidePopovers(){
        $(function (){
            $("[rel=popover]").popover('hide');
        });
    }
    $("[rel=popover]").popover({placement:'left', trigger:'manual', html:true});
    $("[rel=popover]").click(function() { hidePopovers(); $(this).popover('show');});
});
于 2012-08-24T21:27:57.770 に答える