mirror of
https://github.com/ExactTarget/fuelux.git
synced 2026-01-13 08:28:04 -05:00
89 lines
3.5 KiB
HTML
89 lines
3.5 KiB
HTML
<!-- dropdown-autoflip
|
|
================================================== -->
|
|
<h2 id="bundled-extensions-dropdown-autoflip" class="page-header">Auto-Flip Dropdowns <small>dropdown-autoflip.js</small></h2>
|
|
|
|
<p class="lead">Additional functionality added to drop-down menus that enables dropup menus instead of drop-down menus based on screen position.</p>
|
|
|
|
<h3 id="dropdown-autoflips-examples">Examples</h3>
|
|
<p>Add <code>data-flip="auto"</code> to a drop-down trigger <code>data-toggle="drop-down"</code>. (You may need to scroll up to trigger this functionality.) Place this menu at the bottom of the screen to implement a drop-up menu. </p>
|
|
<div class="fu-example section">
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger">Auto Flip Drop-down</button>
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" data-flip="auto">
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Drop-down</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" >
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div><!-- /example -->
|
|
|
|
{% highlight html %}
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger">Auto-Flip Drop-down</button>
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" data-flip="auto">
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Drop-down</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" >
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
{% endhighlight %}
|
|
|
|
<h3 id="dropdown-autoflips-alignment">Alignment</h3>
|
|
<p>By default, Fuel UX automatically positions the drop-down menu 100 percent from the top and along the right side of its parent. Remove <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to left align the drop-down menu.</p>
|
|
|
|
<h3 id="dropdown-autoflips-usage">Usage</h3>
|
|
<p>The dropdown-autoflip add-on determines whether to show a drop-down menu or a dropup menu by calculating the position on the screen and the edge of the viewport. If the positioning requires a drop-up menu, add <code>.dropup</code> to the <code>.dropdown-menu</code> element.</p>
|
|
|
|
<h3>Markup</h3>
|
|
<p>Add <code>data-flip="auto"</code> to a drop-down menu within a <code>class="fuelux"</code> container.</p>
|
|
{% highlight html %}
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger">Auto-Flip Drop-down</button>
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" data-flip="auto">
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Drop-down</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" >
|
|
...
|
|
</ul>
|
|
</div>
|
|
{% endhighlight %}
|
|
|
|
<h3>Event Listeners</h3>
|
|
<p>The auto-flip drop-down only receives events.</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 150px;">Event Type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>click</td>
|
|
<td>Receives clicks from <code>[data-toggle=dropdown][data-flip]</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>suggest</td>
|
|
<td>Fire the <code>suggest</code> event and pass in a drop-down menu <code>$('#dropdownMenu').</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!-- ./fu-table-responsive -->
|
|
|