Bootstrap-dropdown-plugin

ブートストラップ-ドロップダウンプラグイン

ドロップダウンプラグインを使用すると、ナビゲーションバー、タブ、丸薬、ボタンなどのコンポーネントにドロップダウンメニューを追加できます。

'_このプラグイン機能を個別に含める場合は、 dropdown.js が必要です。 または、リンク：/bootstrap/bootstrap_plugins_overview [Bootstrap Plugins Overview]で説明されているように、_bootstrap.js_または縮小された_bootstrap.min.js_を含めることができます。_

使用法

ドロップダウンプラグインの非表示コンテンツを切り替えることができます-

• データ属性を使用-リンクまたはボタンに data-toggle = "dropdown" を追加して、以下に示すようにドロップダウンを切り替えます-

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>

   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>

</div>

• リンクをそのまま保持する必要がある場合（ブラウザがJavaScriptを有効にしていない場合に便利です）、* href = "＃" -の代わりに *data-target 属性を使用します

<div class = "dropdown">
   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/pagel">
      Dropdown
      <span class = "caret"></span>
   </a>

   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>

</div>

• Via JavaScript -JavaScriptを使用してドロップダウントグルを呼び出すには、次の方法を使用します-

$('.dropdown-toggle').dropdown()

例

• Navbar内*

次の例は、ナビゲーションバー内のドロップダウンメニューの使用方法を示しています-

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class="caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>
      </ul>
   </div>

</nav>

タブ内

次の例は、タブ内のドロップダウンメニューの使用方法を示しています-

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>

   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java
         <span class = "caret"></span>
      </a>

      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>

         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>

   </li>

   <li><a href = "#">PHP</a></li>
</ul>

オプション

オプションはありません。

方法

ドロップダウントグルには、ドロップダウンを表示または非表示にする簡単な方法があります。

$().dropdown('toggle')

例

次の例は、ドロップダウンプラグインメソッドの使用方法を示しています。

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div id = "myexample">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>

            <ul class = "dropdown-menu">
               <li><a id = "action-1" href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>

      </ul>
   </div>

</nav>

<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
   });
</script>