POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/dropdowns.html

   1 <div class="bs-docs-section">
   2   <h1 id="dropdowns" class="page-header">Dropdowns <small>dropdown.js</small></h1>
   3
   4   <h2 id="dropdowns-examples">Examples</h2>
   5   <p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
   6
   7   <h3>Within a navbar</h3>
   8   <div class="bs-example">
   9     <nav id="navbar-example" class="navbar navbar-default navbar-static">
  10       <div class="container-fluid">
  11         <div class="navbar-header">
  12           <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
  13             <span class="sr-only">Toggle navigation</span>
  14             <span class="icon-bar"></span>
  15             <span class="icon-bar"></span>
  16             <span class="icon-bar"></span>
  17           </button>
  18           <a class="navbar-brand" href="#">Project Name</a>
  19         </div>
  20         <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
  21           <ul class="nav navbar-nav">
  22             <li class="dropdown">
  23               <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
  24                 Dropdown
  25                 <span class="caret"></span>
  26               </a>
  27               <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
  28                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
  29                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
  30                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
  31                 <li role="presentation" class="divider"></li>
  32                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
  33               </ul>
  34             </li>
  35             <li class="dropdown">
  36               <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
  37                 Dropdown
  38                 <span class="caret"></span>
  39               </a>
  40               <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
  41                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
  42                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
  43                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
  44                 <li role="presentation" class="divider"></li>
  45                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
  46               </ul>
  47             </li>
  48           </ul>
  49           <ul class="nav navbar-nav navbar-right">
  50             <li id="fat-menu" class="dropdown">
  51               <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
  52                 Dropdown
  53                 <span class="caret"></span>
  54               </a>
  55               <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
  56                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
  57                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
  58                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
  59                 <li role="presentation" class="divider"></li>
  60                 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
  61               </ul>
  62             </li>
  63           </ul>
  64         </div><!-- /.nav-collapse -->
  65       </div><!-- /.container-fluid -->
  66     </nav> <!-- /navbar-example -->
  67   </div> <!-- /example -->
  68
  69   <h3>Within pills</h3>
  70   <div class="bs-example">
  71     <ul class="nav nav-pills" role="tablist">
  72       <li role="presentation" class="active"><a href="#">Regular link</a></li>
  73       <li role="presentation" class="dropdown">
  74         <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
  75           Dropdown
  76           <span class="caret"></span>
  77         </a>
  78         <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
  79           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
  80           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
  81           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
  82           <li role="presentation" class="divider"></li>
  83           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
  84         </ul>
  85       </li>
  86       <li role="presentation" class="dropdown">
  87         <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
  88           Dropdown
  89           <span class="caret"></span>
  90         </a>
  91         <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
  92           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
  93           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
  94           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
  95           <li role="presentation" class="divider"></li>
  96           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
  97         </ul>
  98       </li>
  99       <li role="presentation" class="dropdown">
 100         <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
 101           Dropdown
 102           <span class="caret"></span>
 103         </a>
 104         <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
 105           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
 106           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
 107           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
 108           <li role="presentation" class="divider"></li>
 109           <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
 110         </ul>
 111       </li>
 112     </ul> <!-- /pills -->
 113   </div> <!-- /example -->
 114
 115
 116   <h2 id="dropdowns-usage">Usage</h2>
 117   <p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item.</p>
 118   <p>On mobile devices, opening a dropdown adds a <code>.dropdown-backdrop</code> as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. <strong class="text-danger">This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.</strong></p>
 119   <p>Note: The <code>data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.</p>
 120
 121   <h3>Via data attributes</h3>
 122   <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
 123 {% highlight html %}
 124 <div class="dropdown">
 125   <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 126     Dropdown trigger
 127     <span class="caret"></span>
 128   </button>
 129   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
 130     ...
 131   </ul>
 132 </div>
 133 {% endhighlight %}
 134   <p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
 135 {% highlight html %}
 136 <div class="dropdown">
 137   <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
 138     Dropdown trigger
 139     <span class="caret"></span>
 140   </a>
 141
 142   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
 143     ...
 144   </ul>
 145 </div>
 146 {% endhighlight %}
 147
 148   <h3>Via JavaScript</h3>
 149   <p>Call the dropdowns via JavaScript:</p>
 150 {% highlight js %}
 151 $('.dropdown-toggle').dropdown()
 152 {% endhighlight %}
 153   <div class="bs-callout bs-callout-info" id="callout-dropdowns-data-required">
 154     <h4><code>data-toggle="dropdown"</code> still required</h4>
 155     <p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p>
 156   </div>
 157
 158   <h3 id="dropdowns-options">Options</h3>
 159   <p><em>None</em></p>
 160
 161   <h3 id="dropdowns-methods">Methods</h3>
 162   <h4><code>$().dropdown('toggle')</code></h4>
 163   <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
 164
 165   <h3 id="dropdowns-events">Events</h3>
 166   <p>All dropdown events are fired at the <code>.dropdown-menu</code>'s parent element.</p>
 167   <p>All dropdown events have a <code>relatedTarget</code> property, whose value is the toggling anchor element.</p>
 168   <div class="table-responsive">
 169     <table class="table table-bordered table-striped bs-events-table">
 170       <thead>
 171         <tr>
 172           <th>Event Type</th>
 173           <th>Description</th>
 174         </tr>
 175       </thead>
 176       <tbody>
 177         <tr>
 178           <td>show.bs.dropdown</td>
 179           <td>This event fires immediately when the show instance method is called.</td>
 180         </tr>
 181         <tr>
 182           <td>shown.bs.dropdown</td>
 183           <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
 184         </tr>
 185         <tr>
 186           <td>hide.bs.dropdown</td>
 187           <td>This event is fired immediately when the hide instance method has been called.</td>
 188         </tr>
 189         <tr>
 190           <td>hidden.bs.dropdown</td>
 191           <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
 192         </tr>
 193       </tbody>
 194     </table>
 195   </div><!-- ./bs-table-responsive -->
 196 {% highlight js %}
 197 $('#myDropdown').on('show.bs.dropdown', function () {
 198   // do something…
 199 })
 200 {% endhighlight %}
 201 </div>