71

Bootstrap 3 を使用して、ドロップダウン メニューをカーソルに配置し、コードから開くにはどうすればよいですか?

行のコンテキスト メニューとしてテーブルで使用する必要があります。

4

4 に答える 4

93

可能です。良いスタートを切るために、動作するデモを作成しました。

動作デモ (表の行を右クリックして動作を確認します)

最初にドロップダウン メニューを作成し、非表示にして次のように変更しpositionますabsolute。

#contextMenu {
  position: absolute;
  display:none;
}

contextmenu次に、イベントをテーブルの行にバインドして、ドロップダウン/コンテキスト メニューを表示し、カーソルに配置します。

var $contextMenu = $("#contextMenu");

$("body").on("contextmenu", "table tr", function(e) {
   $contextMenu.css({
      display: "block",
      left: e.pageX,
      top: e.pageY
   });
   return false;
});

次に、ユーザーがドロップダウン/コンテキスト メニューを非表示にするオプションを選択すると、次のようになります。

$contextMenu.on("click", "a", function() {
   $contextMenu.hide();
});
于 2013-09-06T21:41:42.670 に答える
9

KyleMitのコードにいくつかの変更を加えました:

  • 「on document click」ハンドラーを「foreach」から移動
  • 「foreach」を削除し、セレクターにイベントを追加するだけです
  • 「ドキュメント コンテキスト メニュー」のメニューを非表示

  • 通過イベント

    $("#myTable tbody td").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu) {
    var msg = "You selected the menu item '" + selectedMenu.text() +
        "' on the value '" + invokedOn.text() + "'";
    alert(msg);
},
onMenuShow: function(invokedOn) {
    var tr = invokedOn.closest("tr");
    $(tr).addClass("warning");
},
onMenuHide: function(invokedOn) {
    var tr = invokedOn.closest("tr");
    $(tr).removeClass("warning");
} });

http://jsfiddle.net/dmitry_far/cgqft4k3/

于 2015-07-08T23:04:53.027 に答える