今日は、ブートストラップのウィジェットの適用を要約しましょう。わかりました、ナンセンスについて話さないでください、ポイントに到達しましょう。
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.対応するファイルを参照します。重要なのは、2つのBootstrap-ContextMenu.jsとprettify.jsです
<script src = "/scripts/jquery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </scrip> <scrip = "/content/boottrap-contextmenu/boottrap-ctrap-cottextmenu.js"> </script> </script src = "http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"> </script>
2。HTML準備
<div id = "context-menu"> <ul role = "menu"> <li> <a tabindex = "-1" href = "＃" operator = "top">この行の上に挿入</a> </li> <li> <1 "href ="＃ "operator =" bottom> interse
3。JS初期化
コードは難しくありません。テーブルロウ操作のロジックにすぎません。説明する場所：
（1）テーブルの行に削除と挿入を実行した後、右クリックメニュー関数を再目的化する必要があります。それ以外の場合、右クリックした後、それは機能しなくなります。
（2）多くのメニュー関数項目がある場合は、分割行を使用してそれらをグループ化する必要があります。 <li> </li>を追加するだけです。
<div id = "context-menu2"> <ul role = "menu"> <li> <a tabindex = "-1"> action </a> </li> <li> <a tabindex = "-1">別のアクション</</li> <li> <a tabindex = "-1">リンク</a> </li> </div>
（3）マウスをメニューに移動して青い背景を表示する場合は、別のCSSファイルを参照する必要があります。
コードコピーは次のとおりです。<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel = "styleSheet">
効果は次のとおりです。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記は、Bootstrap-ContextMenuコンポーネントの単純な使用です。完璧ではないかもしれませんが、一般的な右クリックメニュー要件のためにうまく解決できます。