ドロップダウン メニューを使用してコンテキスト メニューを実装するブートストラップの詳細な例

この記事は、ブートストラップでコンテキスト メニューを実装するためのドロップダウン メニューの使用に関する関連情報を主に紹介します。この記事が必要な方の参考になれば幸いです。

ドロップダウンメニューを使用してコンテキストメニューを実装するブートストラップの詳細な説明

以前に書きました:

いわゆるコンテキストメニュー、一般的なメニューとの違いは次のとおりです:

右ボタンによってトリガーされて表示されますマウスの右クリック

マウス 他をクリックするとメニューが消える

実装方法:

トリガー条件のない通常のドロップダウンメニューをHTMLで定義し、このメニューの親コンテナのリスナーを記述するそれを達成するために。

コード:

<p id="settingInGraph"> 
              <ul class="dropdown-menu" role="menu" 
                aria-labelledby="dropdownMenu" id="contextMenu"> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务指派</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务监听</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务表单</a></li> 
                <li class="pider"></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a></li> 
              </ul> 
            </p>

$("#settingInGraph").mousedown(function(e) { 
if (3 == e.which) { 
     document.oncontextmenu = function() {return false;} 
     $("#contextMenu").hide(); 
     $("#contextMenu").attr("style","display: block; position: fixed; top:" 
     + e.pageY 
     + "px; left:" 
     + e.pageX 
     + "px; width: 180px;"); 
     $("#contextMenu").show(); 
     } 
}); 
$("#settingInGraph").click(function(e) { 
$("#contextMenu").hide();              });

関連する推奨事項:

レスポンシブフレームワークの説明Bootstrapグリッドシステム

Bootstrapツリーコントロールの使用経験を共有する

ブートストラップページネーターの説明例 ページング プラグインを使用する 2 つの方法

以上がドロップダウン メニューを使用してコンテキスト メニューを実装するブートストラップの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。