ブートストラップドロップダウンメニューの章では、ドロップダウンメニューについて説明しますが、相互作用の部分は含まれません。この章では、ドロップダウンメニューの相互作用について詳しく説明します。ドロップダウンプラグインを使用して、ドロップダウンメニューを任意のコンポーネント(ナビゲーションバー、タブ、カプセルナビゲーションメニュー、ボタンなど)に追加できます。
プラグインの機能を個別に参照する場合は、DropDown.jsを参照する必要があります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
1。使用法
ドロップダウンメニュー(ドロップダウン)プラグインの非表示コンテンツを切り替えることができます。
1。データ属性を使用します:データ-toggle = "ドロップダウン"をリンクまたはボタンに追加して、下に示すようにドロップダウンメニューを切り替えます。
<div> <a data-toggle = "dropdown" href = "#">ドロップダウントリガー</a> <ul role = "menu" aria-labelledby = "dlabel"> ... </ul> </div>
リンクをそのままにしておく必要がある場合(ブラウザがJavaScriptを有効にしない場合に役立つ)、href = "#"の代わりにデータターゲットプロパティを使用します。
<div> <a id = "dlabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">ドロップダウンメニュー(ドロップダウン)<span> </span> </a> <ul chole = "メニュー" aria-labelledby = "dlabel"> ...
2。JavaScriptを介して:JavaScriptを切り替えるには、次の方法を使用してください。
$( '。ドロップダウントグル')。ドロップダウン()
2。ドロップダウンメニューの簡単な例
一般に使用すると、コードはコンポーネントメソッドと同じです。
//宣言的使用法<div> <ボタンData-toggle = "Dropdown">ドロップダウンメニュー<span> </span> </button> <ul> <li> <a href = "#"> home </a> </li> <li> href = "#"> bout </a> </li> </ul> </div>
宣言的使用法の重要なコア:
1.末梢容器にパッケージを使用します。
2。内部クリックボタンイベントのバインディングデータ-toggle = "ドロップダウン"。
3.メニュー要素を使用します。
//ボタンがコンテナの外側にある場合、データターゲットを介してバインドできます。 <button id = "btn" data-toggle = "dropdown" data-target = "#dropdown"> javascriptコールでは、プロパティがなく、メソッドは使いやすくありません。以下は4つの基本的なイベントです。 //メニューメソッドをドロップダウンしますが、それでもデータが必要です - *$( '#btn')。ドロップダウン(); $( '#btn')。ドロップダウン( 'トグル');
ドロップダウンメニューは、ポップアップの前、ポップアップ後、閉じる前、閉じた後の4種類のイベントをサポートします。
//イベント、その他の同様の$( '#dropdown')。
3。タブページのドロップダウンメニューの使用
<!Doctype html> <html> <head> <title> bootstrapインスタンス - ドロップダウンメニュー付きタグページ</title> <link href = "/css/bootstrap.min.css src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <p>ドロップダウンメニュー付きタグページhref = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> </li> <li> <a data-toggle = "ドロップダウン" href = "#"> java href = "#"> jmeter </a> </li> <li> <a href = "#"> ejb </a> </li> <li> <a href = "#">署名されたリンク</a> </li> </li> <li> <a href = "#"
複製画像:
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。