JS コンポーネントの使用方法 Bootstrap ContextMenu 右クリック menu_javascript スキル

今日はブートストラップの小さなコンポーネントのアプリケーションをまとめます。さて、さっそく本題に入りましょう。

1. ContextMenu の概要

要件の 1 つは、テーブルの行の順序付け、複数選択の順序付けのサポート、および非連続の複数選択です。それはどういう意味ですか？まず、達成する必要があるレンダリングを見てみましょう:

要件は、選択した行 6、8、および 9 を行 2 と行 3 の間に移動する必要があることです。ビジネスはさておき、純粋に技術的な観点から、最小限の操作で上記の効果を達成するために、ブロガーは 2 行目または 3 行目を右クリックできれば右クリック機能を考えました。右クリック メニュー機能を通じて選択した項目を選択するのが、行を対応する位置に移動する最も簡単な方法ではないでしょうか。やってみようということで、コンポーネントを探して「ブートストラップ 右クリック メニュー」を検索しました。慎重に検討した結果、最終的に ContextMenu コンポーネントを見つけました。その効果は問題ないと感じたので、それを使用する必要がある庭師の参考のためにここで共有しました。

ContextMenu オープンソース アドレス: https://github.com/sydcanem/bootstrap-contextmenu

デモを使用した ContextMenu: http://sydcanem.com/bootstrap-contextmenu/

2. コンテキストメニュー効果

初期の右クリック効果

プロジェクトに適用する

メニュー機能実行後

3. ContextMenu コード例
実際、とても簡単なことなので、使い方を見てみましょう。

1. 該当する文書を引用します。重要なものは、bootstrap-contextmenu.js と prettify.js

です。

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="/Content/boostrap-contextmenu/bootstrap-contextmenu.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>

2.HTMLの準備

  <div id="context-menu">
    <ul class="dropdown-menu" role="menu">
      <li><a tabindex="-1" href="#" operator="top">插入此行上面</a></li>
      <li><a tabindex="-1" href="#" operator="bottom">插入此行下面</a></li>
    </ul>
  </div>

3. JS の初期化

コードは難しいものではなく、テーブル行の操作ロジックがいくつかあるだけです。説明が必要なもの:

(1) テーブル行で削除と挿入を実行した後、右クリック メニュー機能を再初期化する必要があります。そうしないと、一度右クリックした後は機能しなくなります。

(2) メニュー機能項目が多い場合は、分割線を使用してグループ化する必要があります。 9d1f934341079c21cf67f67b315c4d5ebed06894275b65c1ab86501b08a632eb を追加するだけで完了です。

<div id="context-menu2">
     <ul class="dropdown-menu" role="menu">
       <li><a tabindex="-1">Action</a></li>
       <li><a tabindex="-1">Another action</a></li>
       <li><a tabindex="-1">Something else here</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1">Separated link</a></li>
     </ul>
    </div>

(3) メニューにマウスを移動して青い背景を表示したい場合は、別の CSS ファイルを参照する必要があります。

コードをコピー コードは次のとおりです:

http:/ /netdna.bootstrapdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

効果は次のとおりです:

上記は、bootstrap-ContextMenu コンポーネントの簡単な使用法です。完璧ではないかもしれませんが、一般的な右クリック メニューのニーズをうまく解決できます。