mirror of
https://github.com/ExactTarget/fuelux.git
synced 2026-04-26 03:00:10 -04:00
2038 lines
81 KiB
HTML
2038 lines
81 KiB
HTML
---
|
||
layout: default
|
||
title: Javascript
|
||
slug: javascript
|
||
lead: "Over a dozen reusable controls built to provide datepickers, pillboxes, trees, wizards, and much more."
|
||
---
|
||
|
||
|
||
|
||
<!-- checkbox
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="checkboxes" class="page-header">Checkboxes <small>checkboxes.js</small></h1>
|
||
|
||
<h2 id="checkboxes-examples">Examples</h2>
|
||
<p>Custom look and feel for checkbox element.</p>
|
||
|
||
<h4>Default (stacked)</h4>
|
||
<div class="bs-example">
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input type="checkbox" value="option1">
|
||
Custom checkbox unchecked on page load
|
||
</label>
|
||
</div>
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input checked="checked" type="checkbox" value="option2">
|
||
Custom checkbox checked on page load
|
||
</label>
|
||
</div>
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input disabled="disabled" type="checkbox" value="option3">
|
||
Disabled custom checkbox unchecked on page load
|
||
</label>
|
||
</div>
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input checked="checked" disabled="disabled" type="checkbox" value="option4">
|
||
Disabled custom checkbox checked on page load
|
||
</label>
|
||
</div>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input type="checkbox" value="">
|
||
Custom checkbox unchecked on page load
|
||
</label>
|
||
</div>
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input checked="checked" type="checkbox" value="">
|
||
Custom checkbox checked on page load
|
||
</label>
|
||
</div>
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input disabled="disabled" type="checkbox" value="">
|
||
Disabled custom checkbox unchecked on page load
|
||
</label>
|
||
</div>
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input checked="checked" disabled="disabled" type="checkbox" value="">
|
||
Disabled custom checkbox checked on page load
|
||
</label>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h4>Inline checkboxes</h4>
|
||
<p>Use the <code>.checkbox-inline</code> class on checkboxes for controls that appear on the same line.</p>
|
||
<div class="bs-example">
|
||
<label class="checkbox-custom checkbox-inline">
|
||
<input type="checkbox" value="option1"> 1
|
||
</label>
|
||
<label class="checkbox-custom checkbox-inline">
|
||
<input checked="checked" type="checkbox" value="option2"> 2
|
||
</label>
|
||
<label class="checkbox-custom checkbox-inline">
|
||
<input disabled="disabled" type="checkbox" value="option3"> 3
|
||
</label>
|
||
</div>
|
||
{% highlight html %}
|
||
<label class="checkbox-custom checkbox-inline">
|
||
<input type="checkbox" value="option1"> 1
|
||
</label>
|
||
<label class="checkbox-custom checkbox-inline">
|
||
<input checked="checked" type="checkbox" value="option2"> 2
|
||
</label>
|
||
<label class="checkbox-custom checkbox-inline">
|
||
<input disabled="disabled" type="checkbox" value="option3"> 3
|
||
</label>
|
||
{% endhighlight %}
|
||
|
||
<h4>Element toggling checkboxes</h4>
|
||
<p>Use the <code>data-toggle="{{selector}}"</code> to automatically show/hide elements matching the selector within the body upon check/uncheck.
|
||
<br/>(works with any <a href="http://api.jquery.com/category/selectors/">jQuery selector</a>)
|
||
</p>
|
||
<div class="bs-example">
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input data-toggle="#checkboxToggleID" type="checkbox" value="option1">
|
||
Toggles element with matching id.
|
||
</label>
|
||
</div>
|
||
<label class="checkbox-custom checkbox-inline">
|
||
<input data-toggle=".checkboxToggleCLASS" type="checkbox" value="option1">
|
||
Toggles elements with matching class.
|
||
</label>
|
||
|
||
<div class="alert bg-info" id="checkboxToggleID" style="display: none;">Id toggling container.</div>
|
||
<div class="alert bg-success checkboxToggleCLASS" style="display: none;">Class toggling container.</div>
|
||
<div class="alert bg-success checkboxToggleCLASS" style="display: none;">Class toggling container.</div>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="checkbox">
|
||
<label class="checkbox-custom">
|
||
<input data-toggle="#checkboxToggleID" type="checkbox" value="option1">
|
||
Toggles element with matching id.
|
||
</label>
|
||
</div>
|
||
<label class="checkbox-custom checkbox-inline">
|
||
<input data-toggle=".checkboxToggleCLASS" type="checkbox" value="option1">
|
||
Toggles elements with matching class.
|
||
</label>
|
||
|
||
<div class="alert bg-info" id="checkboxToggleID" style="display: none;">Id toggling container.</div>
|
||
<div class="alert bg-success checkboxToggleCLASS" style="display: none;">Class toggling container.</div>
|
||
<div class="alert bg-success checkboxToggleCLASS" style="display: none;">Class toggling container.</div>
|
||
{% endhighlight %}
|
||
|
||
<h4>Highlighting checkboxes</h4>
|
||
<p>Use the <code>.highlight</code> class to add a background highlight upon check.
|
||
</p>
|
||
<div class="bs-example">
|
||
<div class="checkbox highlight">
|
||
<label class="checkbox-custom">
|
||
<input type="checkbox" value="option1">
|
||
This block-level checkbox will be highlighted on check.
|
||
</label>
|
||
</div>
|
||
<label class="checkbox-custom checkbox-inline highlight">
|
||
<input type="checkbox" value="option2">
|
||
This inline checkbox will be highlighted on check.
|
||
</label>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="checkbox highlight">
|
||
<label class="checkbox-custom">
|
||
<input type="checkbox" value="option1">
|
||
This block-level checkbox will be highlighted on check.
|
||
</label>
|
||
</div>
|
||
<label class="checkbox-custom checkbox-inline highlight">
|
||
<input type="checkbox" value="option2">
|
||
This inline checkbox will be highlighted on check.
|
||
</label>
|
||
{% endhighlight %}
|
||
|
||
<h2 id="checkboxes-usage">Usage</h2>
|
||
<p>Upon page load, the checkbox code will automatically instantiate any checkboxes with class <code>.custom-checkbox</code> on the page, allowing them to function without any additional code. However, if added after page load they will need to be manually instantiated via javascript.</p>
|
||
|
||
<p>Initialize the checkbox manually via JavaScript:</p>
|
||
{% highlight js %}$('#MyCheckbox').checkbox();{% endhighlight %}
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().checkbox();</h4>
|
||
Activates your content as a custom checkbox.
|
||
|
||
<h4>.check()</h4>
|
||
<p>Checks the checkbox.</p>
|
||
{% highlight js %}$('#element').checkbox('check');{% endhighlight %}
|
||
|
||
<h4>.disable()</h4>
|
||
<p>Disables the checkbox.</p>
|
||
{% highlight js %}$('#element').checkbox('disable');{% endhighlight %}
|
||
|
||
<h4>.enable()</h4>
|
||
<p>Enables the checkbox.</p>
|
||
{% highlight js %}$('#element').checkbox('enable');{% endhighlight %}
|
||
|
||
<h4>.isChecked()</h4>
|
||
<p>Returns <code>true</code> or <code>false</code> depending on whether the checkbox is checked.</p>
|
||
{% highlight js %}$('#element').checkbox('isChecked');{% endhighlight %}
|
||
|
||
<h4>.toggle()</h4>
|
||
<p>Toggles the checkbox between checked/unchecked states.</p>
|
||
{% highlight js %}$('#element').checkbox('toggle');{% endhighlight %}
|
||
|
||
<h4>.uncheck()</h4>
|
||
<p>Unchecks the checkbox.</p>
|
||
{% highlight js %}$('#element').checkbox('uncheck');{% endhighlight %}
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- combobox
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="comboboxes" class="page-header">Comboboxes <small>combobox.js</small></h1>
|
||
<p class="lead">Combines an input and a dropdown for easy and flexible data selection.</p>
|
||
|
||
<h2 id="comboboxes-examples">Examples</h2>
|
||
<p>Wrap the input, dropdown trigger, and dropdown menu within <code>.fuelux .combobox</code></p>
|
||
<div class="bs-example">
|
||
|
||
<div id="MyCombobox" class="input-group input-append dropdown combobox">
|
||
<input type="text" class="form-control">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||
<ul class="dropdown-menu dropdown-menu-right">
|
||
<li data-value="1" data-selected="true"><a href="#">One</a></li>
|
||
<li data-value="2"><a href="#">Two</a></li>
|
||
<li data-value="3"><a href="#">Three</a></li>
|
||
<li data-value="4" ><a href="#">Four</a></li>
|
||
<li data-value="Item Five"><a href="#">Item Five</a></li>
|
||
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<h5>Sample Methods <small>(output sent to browser console)</small></h5>
|
||
<div class="btn-group">
|
||
<input id="btnComboboxGetSelectedItem" type="button" class="btn btn-default" value="log item"/>
|
||
<input id="btnComboboxSelectByValue" type="button" class="btn btn-default" value="set by value (1)"/>
|
||
<input id="btnComboboxSelectByIndex" type="button" class="btn btn-default" value="set by element index (1)"/>
|
||
<input id="btnComboboxSelectByText" type="button" class="btn btn-default" value="set by text (Four)"/>
|
||
</div>
|
||
<div class="btn-group">
|
||
<input id="btnComboboxSelectBySelector" type="button" class="btn btn-default"
|
||
value="set by CSS selector li[data-fizz=buzz] (6)"/>
|
||
<input id="btnComboboxDisable" type="button" class="btn btn-default" value="disable"/>
|
||
<input id="btnComboboxEnable" type="button" class="btn btn-default" value="enable"/>
|
||
</div>
|
||
|
||
</div><!-- /example -->
|
||
|
||
{% highlight html %}
|
||
<div id="MyCombobox" class="input-group input-append dropdown combobox">
|
||
<input type="text" class="form-control">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||
<ul class="dropdown-menu dropdown-menu-right">
|
||
<li data-value="1"><a href="#">One</a></li>
|
||
<li data-value="2"><a href="#">Two</a></li>
|
||
<li data-value="3"><a href="#">Three</a></li>
|
||
<li data-value="4" ><a href="#">Four</a></li>
|
||
<li data-value="Item Five"><a href="#">Item Five</a></li>
|
||
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h3 id="comboboxes-alignment">Alignment</h3>
|
||
<p>By default, a dropdown menu is automatically positioned 100% 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 dropdown menu.</p>
|
||
|
||
<h2 id="comboboxes-usage">Usage</h2>
|
||
<p>Via JavaScript, the combobox component toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item. When opened, the plugin also adds <code>.dropdown-backdrop</code> as a click area for closing dropdown menus when clicking outside the menu. 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>
|
||
|
||
<p>Trigger the combobox via JavaScript:</p>
|
||
{% highlight js %}$('#MyCombobox').combobox();{% endhighlight %}
|
||
|
||
<h3>Markup</h3>
|
||
<p>Add <code>class="combobox"</code> to an input and a dropdown within a <code>class="fuelux"</code> container.</p>
|
||
{% highlight html %}
|
||
<div class="input-group input-append dropdown combobox">
|
||
<input type="text" class="form-control">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||
<ul class="dropdown-menu dropdown-menu-right">
|
||
...
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h3>Options</h3>
|
||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-selected=""</code>.</p>
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 100px;">Name</th>
|
||
<th style="width: 100px;">type</th>
|
||
<th style="width: 50px;">default</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>selected</td>
|
||
<td>boolean</td>
|
||
<td>false</td>
|
||
<td>Declare value to initialize with</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().combobox(options)</h4>
|
||
Attaches a combobox to an input and a dropdown menu.
|
||
|
||
<h4>.combobox('disable')</h4>
|
||
<p>Disables the component</p>
|
||
{% highlight js %}$('#element').combobox('disable'){% endhighlight %}
|
||
|
||
<h4>.combobox('enable')</h4>
|
||
<p>Enables the component</p>
|
||
{% highlight js %}$('#element').combobox('enable'){% endhighlight %}
|
||
|
||
<h4>.combobox('selectedItem')</h4>
|
||
<p>Returns an object containing the jQuery data() contents of the selected item which includes <code>.data-*</code> attributes plus a text property with the items's visible text.</p>
|
||
{% highlight js %}$('#element').combobox('selectedItem'){% endhighlight %}
|
||
|
||
<h4>.combobox('selectByIndex')</h4>
|
||
<p>Set the selected item based on its index in the list (zero-based index). Convenience method for <code>.selectBySelector('li:eq({index})')</code></p>
|
||
{% highlight js %}$('#element').combobox('selectByIndex', '1'){% endhighlight %}
|
||
|
||
<h4>.combobox('selectByText')</h4>
|
||
<p>Set the selected item based on its text value</p>
|
||
{% highlight js %}$('#element').('selectByText', 'Four'){% endhighlight %}
|
||
|
||
<h4>.combobox('selectBySelector')</h4>
|
||
<p>Set the selected item based on a selector.</p>
|
||
{% highlight js %}$('#element').('selectBySelector', 'li[data-fizz=buzz]'){% endhighlight %}
|
||
|
||
<h4>.combobox('selectByValue')</h4>
|
||
<p>Set the selected item based on its value. Convenience method for <code>.selectBySelector('data-value={value}')</code> that requires the item to have a <code>.data-value="{value}"</code> attribute</p>
|
||
{% highlight js %}$('#element').('selectByValue', '1'){% endhighlight %}
|
||
|
||
<h3>Events</h3>
|
||
<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>changed</td>
|
||
<td>This event is fired when the value has changed (either by selecting an item from the list or updating the input value directly). Arguments are <code>event, data</code> where data represents the same object structure returned by the <code>selectedItem</code> method.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
<p>All dropdown events are fired at the <code>.dropdown</code>'s parent element.</p>
|
||
{% highlight js %}
|
||
$('#MyCombobox').on('changed', function () {
|
||
// do something…
|
||
})
|
||
{% endhighlight %}
|
||
</div>
|
||
|
||
|
||
|
||
<!-- dropdown-autoflip
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="dropdown-autoflips" class="page-header">Auto-Flip Dropdowns <small>dropdown-autoflip.js</small></h1>
|
||
|
||
<p class="lead">Additional functionality added to dropdown menus that enables dropup menus instead of dropdown menu based on screen position.</p>
|
||
|
||
<h2 id="dropdown-autoflips-examples">Examples</h2>
|
||
<p>Add <code>data-flip="auto"</code> to a dropdown trigger <code>data-toggle="dropdown"</code>. (You may need to scroll up to trigget this functionality.) The menu will need be "below the fold" at the bottom of the screen in order to become a dropup menu. </p>
|
||
<div class="bs-example">
|
||
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-danger">Auto Flip Dropdown</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 Dropdown</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 Dropdown</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 Dropdown</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, a dropdown menu is automatically positioned 100% 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 dropdown menu.</p>
|
||
|
||
<h2 id="dropdown-autoflips-usage">Usage</h2>
|
||
<p>The dropdown-autoflip add-on determines whether to show a dropdown menu or a dropup menu by calculating the position on the screen and the edge of the viewport. If a dropup menu is needed, <code>.dropup</code> is added to the <code>.dropdown-menu</code> element.</p>
|
||
|
||
<h3>Markup</h3>
|
||
<p>Add <code>data-flip="auto"</code> to a dropdown menu within a <code>class="fuelux"</code> container.</p>
|
||
{% highlight html %}
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-danger">Auto Flip Dropdown</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 Dropdown</span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu" >
|
||
...
|
||
</ul>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h3>Event Listeners</h3>
|
||
<p>The auto-flip dropdown only recieves 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>suggget</code> event and pass in a dropdown menu <code>$('#dropdownMenu').</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
</div>
|
||
|
||
|
||
|
||
<!-- infinite-scroll
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="infinite-scrolling" class="page-header">Infinite Scrolling <small>infinite-scroll.js</small></h1>
|
||
|
||
<h2 id="infinite-scrolling-examples">Examples</h2>
|
||
<p>Turn any element into an infinite scrolling region with content that loads on demand.</p>
|
||
|
||
<div class="bs-example">
|
||
<div class="infinitescroll" id="MyInfiniteScroll1" style="border: 1px solid #ccc; border-radius: 4px; float: left; height: 200px; padding: 6px 10px; width: 48%;"></div>
|
||
<div class="infinitescroll" id="MyInfiniteScroll2" style="border: 1px solid #ccc; border-radius: 4px; float: right; height: 200px; padding: 6px 10px; width: 48%;"></div>
|
||
<div style="clear:both;"></div>
|
||
</div>
|
||
|
||
<h2 id="infinite-scrolling-usage">Usage</h2>
|
||
<p>The infinite scroll control does not have a data API due to dependency on a dataSource.</p>
|
||
|
||
<p>Initialize the infinite scroll via JavaScript:</p>
|
||
{% highlight js %}
|
||
$('#MyInfiniteScroll').infinitescroll({
|
||
//dataSource is required to append additional content
|
||
dataSource: function(helpers, callback){
|
||
//passing back more content
|
||
callback({ content: '...' });
|
||
}
|
||
);{% endhighlight %}
|
||
|
||
<h3>Markup</h3>
|
||
<p>Simply place <code>class="infinitescroll"</code> on an element of your choosing (preferably a div or span).</p>
|
||
{% highlight html %}
|
||
<div class="infinitescroll"></div>
|
||
{% endhighlight %}
|
||
|
||
<h3>Options</h3>
|
||
<p>Options can be passed via Javascript upon initialization.</p>
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 100px;">Name</th>
|
||
<th style="width: 100px;">type</th>
|
||
<th style="width: 50px;">default</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>dataSource</td>
|
||
<td>function</td>
|
||
<td>null</td>
|
||
<td>Called whenever the user scrolls the specified percentage to the bottom. Arguments passed
|
||
are a <code>helpers</code> object and <code>callback</code> function. The <code>helpers</code>
|
||
object contains current <code>percentage</code> and <code>scrollTop</code> values. The
|
||
<code>callback</code> function is used to append more content to the element. Pass an object
|
||
back within the <code>callback</code> function structured as follows: <code>{ content: '...' }</code>
|
||
If you have no more additonal content to append, add the attribute <code>end: true</code> to that
|
||
object, which will append <code>'---------'</code> by default and prevent further dataSource calls. Passing a
|
||
string value for the <code>end</code> attribute will append that string instead of the default.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>hybrid</td>
|
||
<td>boolean OR object</td>
|
||
<td>false</td>
|
||
<td>Sets whether to use "hybrid mode," which requires the user to click a button before loading
|
||
additional content. If set to <code>true</code>, a default "load more" icon will be used within
|
||
the button. Additionally, it can be set to an object with the following structure:
|
||
<code>{ label: (string or jQuery obj) }</code> The <code>label</code> attribute's value will
|
||
then be appended within the button instead of the default icon.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>percentage</td>
|
||
<td>number</td>
|
||
<td>95</td>
|
||
<td>Percentage scrolled to the bottom before the dataSource function is called for more content.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().infinitescroll();</h4>
|
||
Attaches infinitescroll to an 'infinitescroll' classed div
|
||
|
||
<h4>.infinitescroll('disable');</h4>
|
||
<p>Disables the infinite scrolling region.</p>
|
||
{% highlight js %}$('#element').infinitescroll('disable');{% endhighlight %}
|
||
|
||
<h4>.infinitescroll('enable');</h4>
|
||
<p>Enables the infinite scrolling region.</p>
|
||
{% highlight js %}$('#element').infinitescroll('enable');{% endhighlight %}
|
||
|
||
<h4>.infinitescroll('end');</h4>
|
||
<p>Disables the infinite scrolling region and appends an "end" indicator.</p>
|
||
{% highlight js %}$('#element').infinitescroll('end');{% endhighlight %}
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 150px;">Parameter</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>content</td>
|
||
<td><i>Optional.</i> String or jQuery object that is appended as an "end" indicator. Default is <code>'---------'</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h4>.infinitescroll('fetchData');</h4>
|
||
<p>Tells the infinite scrolling region to make a call to dataSource for additional content.</p>
|
||
{% highlight js %}$('#element').infinitescroll('fetchData');{% endhighlight %}
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 150px;">Parameter</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>force</td>
|
||
<td><i>Optional.</i> Boolean dictating whether to bypass the button click in hybrid mode and immediately
|
||
call dataSoruce for more content. Default is <code>false</code>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- loader
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="loaders" class="page-header">Loaders <small>loader.js</small></h1>
|
||
|
||
<h2 id="loaders-examples">Examples</h2>
|
||
<p>Animation for visual indication of waiting time that can be customized to have many appearances.</p>
|
||
|
||
<div class="bs-example">
|
||
<div class="loader"></div>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="loader"></div>
|
||
{% endhighlight %}
|
||
|
||
<h4>Starting frame</h4>
|
||
<p>Use the <code>data-frame</code> attribute to set the initial animation frame (defaults to 1). Additionally, this attribute can be modified at any time to set the current frame.
|
||
<div class="bs-example">
|
||
<div class="loader" data-frame="5"></div>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="loader" data-frame="5"></div>
|
||
{% endhighlight %}
|
||
|
||
<h4>Controlling speed</h4>
|
||
<p>Use the <code>data-delay</code> attribute to alter animation speed (defaults to 150).
|
||
<div class="bs-example">
|
||
<div class="loader" data-delay="500"></div>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="loader" data-delay="500"></div>
|
||
{% endhighlight %}
|
||
|
||
<h4>Animation range</h4>
|
||
<p>Use the <code>data-begin</code> and <code>data-end</code> attributes to control at which frames the animation begins and ends, respectively. (Defaults are 1 and 8)
|
||
<div class="bs-example">
|
||
<div class="loader" data-begin="3" data-end="6"></div>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="loader" data-begin="3" data-end="6"></div>
|
||
{% endhighlight %}
|
||
|
||
<h2 id="loaders-usage">Usage</h2>
|
||
<p>If on the page initially, the loader will automatically begin to play upon the <code>$(document).ready();</code> event.</p>
|
||
|
||
<p>Initialize the loader via JavaScript:</p>
|
||
{% highlight js %}$('#MyLoader').loader();{% endhighlight %}
|
||
|
||
<h3>Markup</h3>
|
||
<p>Simply place <code>class="loader"</code> on a div. Easy, huh?</p>
|
||
{% highlight html %}
|
||
<div class="loader"></div>
|
||
{% endhighlight %}
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().loader();</h4>
|
||
Attaches loader to a 'loader' classed div
|
||
|
||
<h4>.loader('next');</h4>
|
||
<p>Increments the loader animation to the next frame</p>
|
||
{% highlight js %}$('#element').loader('next');{% endhighlight %}
|
||
|
||
<h4>.loader('pause');</h4>
|
||
<p>Pauses the loader animation at the current frame.</p>
|
||
{% highlight js %}$('#element').loader('pause');{% endhighlight %}
|
||
|
||
<h4>.loader('play');</h4>
|
||
<p>Plays the loader animation, resuming it if paused.</p>
|
||
{% highlight js %}$('#element').loader('play');{% endhighlight %}
|
||
|
||
<h4>.loader('prev');</h4>
|
||
<p>Decrements the loader animation to the previous frame.</p>
|
||
{% highlight js %}$('#element').loader('prev');{% endhighlight %}
|
||
|
||
<h4>.loader('reset');</h4>
|
||
<p>Resets the loader animation to the beginning frame.</p>
|
||
{% highlight js %}$('#element').loader('reset');{% endhighlight %}
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- placard
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="placards" class="page-header">Placards <small>placard.js</small></h1>
|
||
|
||
<h2 id="placards-examples">Examples</h2>
|
||
<p>Adds a popup element to inputs/textareas on focus, with additional options for explicit accept/cancel actions.</p>
|
||
|
||
<div class="bs-example">
|
||
<div class="placard" style="display: block;">
|
||
<div class="placard-popup"></div>
|
||
<input class="form-control placard-field" readonly="readonly" type="text"/>
|
||
</div>
|
||
|
||
<br/>
|
||
|
||
<div class="placard" data-ellipsis="true" style="display: block;">
|
||
<div class="placard-popup"></div>
|
||
<div class="placard-header"><h5>Header</h5></div>
|
||
<textarea class="form-control placard-field" readonly="readonly" rows="3"></textarea>
|
||
<div class="placard-footer">
|
||
<a class="placard-cancel" href="#">Cancel</a>
|
||
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 id="placards-usage">Usage</h2>
|
||
<p>The placard control will work automatically on click or can be initialized via Javascript.</p>
|
||
|
||
<p>Initialize the wizard via JavaScript:</p>
|
||
{% highlight js %}$('#MyPlacard').placard();{% endhighlight %}
|
||
|
||
<h3>Markup</h3>
|
||
<p>Use the following markup for a simple input OR textarea placard:</p>
|
||
{% highlight html %}
|
||
<div class="placard">
|
||
<div class="placard-popup"></div>
|
||
<input class="form-control placard-field" readonly="readonly" type="text"/>
|
||
</div>
|
||
{% endhighlight %}
|
||
{% highlight html %}
|
||
<div class="placard">
|
||
<div class="placard-popup"></div>
|
||
<textarea class="form-control placard-field" readonly="readonly"></textarea>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<p>For header and footer content, use the following input OR textarea placards:</p>
|
||
{% highlight html %}
|
||
<div class="placard" data-ellipsis="true" style="display: block;">
|
||
<div class="placard-popup"></div>
|
||
<div class="placard-header"><h5>Header</h5></div>
|
||
<input class="form-control placard-field" readonly="readonly" type="text"/>
|
||
<div class="placard-footer">
|
||
<a class="placard-cancel" href="#">Cancel</a>
|
||
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
|
||
</div>
|
||
</div>
|
||
{% endhighlight %}
|
||
{% highlight html %}
|
||
<div class="placard" data-ellipsis="true" style="display: block;">
|
||
<div class="placard-popup"></div>
|
||
<div class="placard-header"><h5>Header</h5></div>
|
||
<textarea class="form-control placard-field" readonly="readonly" rows="3"></textarea>
|
||
<div class="placard-footer">
|
||
<a class="placard-cancel" href="#">Cancel</a>
|
||
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
|
||
</div>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h3>Via data attributes</h3>
|
||
<p>Add <code>data-ellipsis="true"</code> to the placard element in order to enable ellipsis for overflow on the
|
||
input or textarea. NOTE: for textareas, Javascript is used to enable ellipsis. Make sure to use the
|
||
<code>.('getValue');</code> and <code>.('setValue');</code> methods for retrieving/setting value, as it is
|
||
manipulated upon focus gain/loss. Also, performance drops with larger textareas when ellipsis is enabled.
|
||
</p>
|
||
|
||
<h3>Options</h3>
|
||
<p>Options can be passed via Javascript upon initialization.</p>
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 100px;">Name</th>
|
||
<th style="width: 100px;">type</th>
|
||
<th style="width: 50px;">default</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>onAccept</td>
|
||
<td>function</td>
|
||
<td>undefined</td>
|
||
<td>Function to be called when the user indicates they want to <code>'accept'</code> changes. A
|
||
<code>helpers</code> object containing <code>previousValue</code> and current
|
||
<code>value</code> is passed as an argument. The default accept behaviors will not occur, leaving
|
||
it up to the developer to determine what happens next. Useful for validation purposes.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>onCancel</td>
|
||
<td>function</td>
|
||
<td>undefined</td>
|
||
<td>Function to be called when the user indicates they want to <code>'cancel'</code> changes. A
|
||
<code>helpers</code> object containing <code>previousValue</code> and current
|
||
<code>value</code> is passed as an argument. The default cancel behaviors will not occur, leaving
|
||
it up to the developer to determine what happens next. Useful for validation purposes.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>externalClickAction</td>
|
||
<td>string</td>
|
||
<td>cancel</td>
|
||
<td>Specifies what action occurs on an external click (click outside the placard element).</td>
|
||
</tr>
|
||
<tr>
|
||
<td>externalClickExceptions</td>
|
||
<td>array</td>
|
||
<td>[ ]</td>
|
||
<td>Array of <a href="http://api.jquery.com/category/selectors/">jQuery selector</a> strings. Anything that matches the selector (searched
|
||
globally) will not be counted as an external click. Useful for allowing other items to be clicked
|
||
without dismissing the placard.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>explicit</td>
|
||
<td>boolean</td>
|
||
<td>false</td>
|
||
<td>Requires the user explicitly select 'accept' or 'cancel' before the placard is dismissed.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>revertOnCancel</td>
|
||
<td>boolean OR number</td>
|
||
<td>-1</td>
|
||
<td>Dictates whether the placard reverts the entered value when a 'cancel' action occurs. -1 checks
|
||
for a <code>'.placard-accept'</code> element on initialization, setting this value to <code>true</code>
|
||
if present. Also accepts <code>true</code> or <code>false</code> values.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().placard();</h4>
|
||
Attaches placard to the placard markup.
|
||
|
||
<h4>.placard('getValue');</h4>
|
||
<p>Gets the current actual placard value.</p>
|
||
{% highlight js %}$('#element').placard('getValue');{% endhighlight %}
|
||
|
||
<h4>.placard('hide');</h4>
|
||
<p>Hides the placard popup.</p>
|
||
{% highlight js %}$('#element').placard('hide');{% endhighlight %}
|
||
|
||
<h4>.placard('setValue');</h4>
|
||
<p>Sets the current actual placard value.</p>
|
||
{% highlight js %}$('#element').placard('setValue');{% endhighlight %}
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 150px;">Parameter</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>value</td>
|
||
<td><i>Required.</i> String or number that the placard value will be set to.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h4>.placard('show');</h4>
|
||
<p>Shows the placard popup.</p>
|
||
{% highlight js %}$('#element').placard('show');{% endhighlight %}
|
||
|
||
<h3>Events</h3>
|
||
<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>accept</td>
|
||
<td>Fired when the user indicates the desire to 'accept' changes. If using the <code>onAccept</code>
|
||
option, this event fires after that function is called.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>cancel</td>
|
||
<td>Fired when the user indicates the desire to 'cancel' changes. If using the <code>onCancel</code>
|
||
option, this event fires after that function is called.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>hide</td>
|
||
<td>Fired when the placard is dismissed and the popup dissapears.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>show</td>
|
||
<td>Fired when the placard obtains focus and the popup appears.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
</div>
|
||
|
||
|
||
|
||
<!-- radio
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="radios" class="page-header">Radios <small>radios.js</small></h1>
|
||
|
||
<h2 id="radios-examples">Examples</h2>
|
||
<p>Customized look and feel for radio button element.</p>
|
||
|
||
<h4>Default (stacked)</h4>
|
||
<div class="bs-example">
|
||
<div class="radio">
|
||
<label class="radio-custom">
|
||
<input name="radioEx1" type="radio" value="option1">
|
||
Browser-independent radio unchecked on page load
|
||
</label>
|
||
</div>
|
||
<div class="radio">
|
||
<label class="radio-custom">
|
||
<input checked="checked" name="radioEx1" type="radio" value="option2">
|
||
Browser-independent radio checked on page load
|
||
</label>
|
||
</div>
|
||
<div class="radio">
|
||
<label class="radio-custom">
|
||
<input disabled="disabled" name="radioEx2" type="radio" value="option3">
|
||
Disabled browser-independent radio unchecked on page load
|
||
</label>
|
||
</div>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="radio">
|
||
<label class="radio-custom">
|
||
<input name="radioEx1" type="radio" value="option1">
|
||
Browser-independent radio unchecked on page load
|
||
</label>
|
||
</div>
|
||
<div class="radio">
|
||
<label class="radio-custom">
|
||
<input checked="checked" name="radioEx1" type="checkbox" value="option2">
|
||
Browser-independent radio checked on page load
|
||
</label>
|
||
</div>
|
||
<div class="radio">
|
||
<label class="radio-custom">
|
||
<input disabled="disabled" name="radioEx2" type="checkbox" value="option3">
|
||
Disabled browser-independent radio unchecked on page load
|
||
</label>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h4>Inline radio</h4>
|
||
<p>Use the <code>.radio-inline</code> classes on radios for controls that appear on the same line.</p>
|
||
<div class="bs-example">
|
||
<label class="radio-custom radio-inline">
|
||
<input name="radioEx2" type="radio" value="option1"> 1
|
||
</label>
|
||
<label class="radio-custom radio-inline">
|
||
<input checked="checked" name="radioEx2" type="radio" value="option2"> 2
|
||
</label>
|
||
<label class="radio-custom radio-inline">
|
||
<input disabled="disabled" name="radioEx2" type="radio" value="option3"> 3
|
||
</label>
|
||
</div>
|
||
{% highlight html %}
|
||
<label class="radio-custom radio-inline">
|
||
<input name="radioEx2" type="radio" value="option1"> 1
|
||
</label>
|
||
<label class="radio-custom radio-inline">
|
||
<input checked="checked" name="radioEx2" type="radio" value="option2"> 2
|
||
</label>
|
||
<label class="radio-custom radio-inline">
|
||
<input disabled="disabled" name="radioEx2" type="radio" value="option3"> 3
|
||
</label>
|
||
{% endhighlight %}
|
||
|
||
<h4>Element toggling radios</h4>
|
||
<p>Use the <code>data-toggle="{{selector}}"</code> to automatically show/hide elements matching the selector within the body upon check/uncheck.
|
||
<br/>(works with any <a href="http://api.jquery.com/category/selectors/">jQuery selector</a>)
|
||
</p>
|
||
<div class="bs-example">
|
||
<div class="radio">
|
||
<label class="radio-custom">
|
||
<input data-toggle="#radioToggleID" name="radioEx3" type="radio" value="option1">
|
||
Toggles element with matching id.
|
||
</label>
|
||
</div>
|
||
<label class="radio-custom radio-inline">
|
||
<input data-toggle=".radioToggleCLASS" name="radioEx3" type="radio" value="option1">
|
||
Toggles elements with matching class.
|
||
</label>
|
||
|
||
<div class="alert bg-info" id="radioToggleID" style="display: none;">Id toggling container.</div>
|
||
<div class="alert bg-success radioToggleCLASS" style="display: none;">Class toggling container.</div>
|
||
<div class="alert bg-success radioToggleCLASS" style="display: none;">Class toggling container.</div>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="radio">
|
||
<label class="radio-custom">
|
||
<input data-toggle="#radioToggleID" name="radioEx3" type="radio" value="option1">
|
||
Toggles element with matching id.
|
||
</label>
|
||
</div>
|
||
<label class="radio-custom radio-inline">
|
||
<input data-toggle=".radioToggleCLASS" name="radioEx3" type="radio" value="option1">
|
||
Toggles elements with matching class.
|
||
</label>
|
||
|
||
<div class="alert bg-info" id="radioToggleID" style="display: none;">Id toggling container.</div>
|
||
<div class="alert bg-success radioToggleCLASS" style="display: none;">Class toggling container.</div>
|
||
<div class="alert bg-success radioToggleCLASS" style="display: none;">Class toggling container.</div>
|
||
{% endhighlight %}
|
||
|
||
<h4>Highlighting checkboxes</h4>
|
||
<p>Use the <code>.highlight</code> class to add a background highlight upon check.
|
||
</p>
|
||
<div class="bs-example">
|
||
<div class="radio highlight">
|
||
<label class="radio-custom">
|
||
<input name="radioEx4" type="radio" value="option1">
|
||
This block-level radio will be highlighted on check.
|
||
</label>
|
||
</div>
|
||
<label class="radio-custom radio-inline highlight">
|
||
<input name="radioEx4" type="radio" value="option2">
|
||
This inline radio will be highlighted on check.
|
||
</label>
|
||
</div>
|
||
{% highlight html %}
|
||
<div class="radio highlight">
|
||
<label class="radio-custom">
|
||
<input name="radioEx4" type="radio" value="option1">
|
||
This block-level radio will be highlighted on check.
|
||
</label>
|
||
</div>
|
||
<label class="radio-custom radio-inline highlight">
|
||
<input name="radioEx4" type="radio" value="option2">
|
||
This inline radio will be highlighted on check.
|
||
</label>
|
||
{% endhighlight %}
|
||
|
||
<h2 id="radios-usage">Usage</h2>
|
||
<p>Upon page load, the radio code will automatically instantiate any radios with class <code>.custom-radio</code> on the page, allowing them to function without any additional code. However, if added after page load they will need to be manually instantiated via javascript.</p>
|
||
|
||
<p>Initialize the radio manually via JavaScript:</p>
|
||
{% highlight js %}$('#MyRadio').radio();{% endhighlight %}
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().radio();</h4>
|
||
Activates your content as a custom radio.
|
||
|
||
<h4>.check()</h4>
|
||
<p>Checks the radio.</p>
|
||
{% highlight js %}$('#element').radio('check');{% endhighlight %}
|
||
|
||
<h4>.disable()</h4>
|
||
<p>Disables the radio.</p>
|
||
{% highlight js %}$('#element').radio('disable');{% endhighlight %}
|
||
|
||
<h4>.enable()</h4>
|
||
<p>Enables the radio.</p>
|
||
{% highlight js %}$('#element').radio('enable');{% endhighlight %}
|
||
|
||
<h4>.isChecked()</h4>
|
||
<p>Returns <code>true</code> or <code>false</code> depending on whether the radio is checked.</p>
|
||
{% highlight js %}$('#element').radio('isChecked');{% endhighlight %}
|
||
|
||
<h4>.uncheck()</h4>
|
||
<p>Unchecks the radio.</p>
|
||
{% highlight js %}$('#element').radio('uncheck');{% endhighlight %}
|
||
</div>
|
||
|
||
|
||
|
||
<!-- repeater
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="repeaters" class="page-header">Repeaters <small>repeaters.js</small></h1>
|
||
|
||
<h2 id="repeaters-examples">Examples</h2>
|
||
<p>Data viewer with paging, sorting, and searching. Extensible with plugins for various renderings.</p>
|
||
|
||
<div class="bs-example">
|
||
<div class="repeater" data-staticheight="400px" id="MyRepeater">
|
||
<div class="repeater-header">
|
||
<div class="repeater-header-left">
|
||
<span class="repeater-title">Awesome Repeater</span>
|
||
<div class="repeater-search">
|
||
<div class="search input-group">
|
||
<input type="search" class="form-control" placeholder="Search"/>
|
||
<span class="input-group-btn">
|
||
<button class="btn btn-default" type="button">
|
||
<span class="glyphicon glyphicon-search"></span>
|
||
<span class="sr-only">Search</span>
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="repeater-header-right">
|
||
<div class="btn-group selectlist repeater-filters" data-resize="auto">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
<span class="selected-label"> </span>
|
||
<span class="caret"></span>
|
||
<span class="sr-only">Toggle Filters</span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li data-value="all" data-selected="true"><a href="#">all</a></li>
|
||
<li data-value="bug"><a href="#">bug</a></li>
|
||
<li data-value="dark"><a href="#">dark</a></li>
|
||
<li data-value="dragon"><a href="#">dragon</a></li>
|
||
<li data-value="electric"><a href="#">electric</a></li>
|
||
<li data-value="fairy"><a href="#">fairy</a></li>
|
||
<li data-value="fighting"><a href="#">fighting</a></li>
|
||
<li data-value="fire"><a href="#">fire</a></li>
|
||
<li data-value="flying"><a href="#">flying</a></li>
|
||
<li data-value="ghost"><a href="#">ghost</a></li>
|
||
<li data-value="grass"><a href="#">grass</a></li>
|
||
<li data-value="ground"><a href="#">ground</a></li>
|
||
<li data-value="ice"><a href="#">ice</a></li>
|
||
<li data-value="normal"><a href="#">normal</a></li>
|
||
<li data-value="poison"><a href="#">poison</a></li>
|
||
<li data-value="psychic"><a href="#">psychic</a></li>
|
||
<li data-value="rock"><a href="#">rock</a></li>
|
||
<li data-value="steel"><a href="#">steel</a></li>
|
||
<li data-value="water"><a href="#">water</a></li>
|
||
</ul>
|
||
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
|
||
</div>
|
||
<div class="btn-group repeater-views" data-toggle="buttons">
|
||
<label class="btn btn-default active">
|
||
<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
|
||
</label>
|
||
<label class="btn btn-default">
|
||
<input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="repeater-viewport">
|
||
<div class="repeater-canvas"></div>
|
||
<div class="loader repeater-loader"></div>
|
||
</div>
|
||
<div class="repeater-footer">
|
||
<div class="repeater-footer-left">
|
||
<div class="repeater-itemization">
|
||
<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
|
||
<div class="btn-group selectlist" data-resize="auto">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
<span class="selected-label"> </span>
|
||
<span class="caret"></span>
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li data-value="5"><a href="#">5</a></li>
|
||
<li data-value="10" data-selected="true"><a href="#">10</a></li>
|
||
<li data-value="20"><a href="#">20</a></li>
|
||
<li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
|
||
<li data-value="100"><a href="#">100</a></li>
|
||
</ul>
|
||
<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
|
||
</div>
|
||
<span>Per Page</span>
|
||
</div>
|
||
</div>
|
||
<div class="repeater-footer-right">
|
||
<div class="repeater-pagination">
|
||
<button type="button" class="btn btn-default btn-sm repeater-prev"><span class="glyphicon glyphicon-chevron-left"></span></button>
|
||
<span>Page</span>
|
||
<div class="repeater-primaryPaging active">
|
||
<div class="input-group input-append dropdown combobox">
|
||
<input type="text" class="form-control">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||
<ul class="dropdown-menu pull-right"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<input type="text" class="form-control repeater-secondaryPaging">
|
||
<span>of <span class="repeater-pages"></span></span>
|
||
<button type="button" class="btn btn-default btn-sm repeater-next"><span class="glyphicon glyphicon-chevron-right"></span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 id="repeaters-usage">Usage</h2>
|
||
<p>The repeater must be initialized via Javascript and have a dataSource to function properly.</p>
|
||
|
||
<p>Initialize the repeater via JavaScript:</p>
|
||
{% highlight js %}$('#MyPlacard').repeater();{% endhighlight %}
|
||
|
||
<h3>Markup</h3>
|
||
<p>Use the following markup to setup the repeater:</p>
|
||
<div class="truncate-highlight">
|
||
{% highlight html %}
|
||
<div class="repeater">
|
||
<div class="repeater-header">
|
||
<div class="repeater-header-left">
|
||
<span class="repeater-title">Awesome Repeater</span>
|
||
<div class="repeater-search">
|
||
<div class="search input-group">
|
||
<input type="search" class="form-control" placeholder="Search"/>
|
||
<span class="input-group-btn">
|
||
<button class="btn btn-default" type="button">
|
||
<span class="glyphicon glyphicon-search"></span>
|
||
<span class="sr-only">Search</span>
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="repeater-header-right">
|
||
<div class="btn-group selectlist repeater-filters" data-resize="auto">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
<span class="selected-label"> </span>
|
||
<span class="caret"></span>
|
||
<span class="sr-only">Toggle Filters</span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li data-value="all" data-selected="true"><a href="#">all</a></li>
|
||
<li data-value="some"><a href="#">some</a></li>
|
||
<li data-value="others"><a href="#">others</a></li>
|
||
<!-- Additional filter menu items can go here -->
|
||
</ul>
|
||
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
|
||
</div>
|
||
<div class="btn-group repeater-views" data-toggle="buttons">
|
||
<label class="btn btn-default active">
|
||
<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
|
||
</label>
|
||
<label class="btn btn-default">
|
||
<input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="repeater-viewport">
|
||
<div class="repeater-canvas"></div>
|
||
<div class="loader repeater-loader"></div>
|
||
</div>
|
||
<div class="repeater-footer">
|
||
<div class="repeater-footer-left">
|
||
<div class="repeater-itemization">
|
||
<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
|
||
<div class="btn-group selectlist" data-resize="auto">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
<span class="selected-label"> </span>
|
||
<span class="caret"></span>
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li data-value="5"><a href="#">5</a></li>
|
||
<li data-value="10" data-selected="true"><a href="#">10</a></li>
|
||
<li data-value="20"><a href="#">20</a></li>
|
||
<li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
|
||
<li data-value="100"><a href="#">100</a></li>
|
||
</ul>
|
||
<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
|
||
</div>
|
||
<span>Per Page</span>
|
||
</div>
|
||
</div>
|
||
<div class="repeater-footer-right">
|
||
<div class="repeater-pagination">
|
||
<button type="button" class="btn btn-default btn-sm repeater-prev"><span class="glyphicon glyphicon-chevron-left"></span></button>
|
||
<span>Page</span>
|
||
<div class="repeater-primaryPaging active">
|
||
<div class="input-group input-append dropdown combobox">
|
||
<input type="text" class="form-control">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||
<ul class="dropdown-menu pull-right"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<input type="text" class="form-control repeater-secondaryPaging">
|
||
<span>of <span class="repeater-pages"></span></span>
|
||
<button type="button" class="btn btn-default btn-sm repeater-next"><span class="glyphicon glyphicon-chevron-right"></span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endhighlight %}
|
||
</div>
|
||
|
||
<h3>Via data attributes</h3>
|
||
<p>Add <code>data-staticheight="true"</code> to the repeater element in order to enable the staticHeight option, which
|
||
will constrain the repeater to a set height dictated by CSS styles with scrollable data. If set to a number instead
|
||
(ex: <code>data-staticheight="400"</code>) the height will be that value in pixels. This option can also be set via
|
||
Javascript on initialization.
|
||
</p>
|
||
|
||
<h3>Options</h3>
|
||
<p>Options can be passed via Javascript upon initialization.</p>
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 100px;">Name</th>
|
||
<th style="width: 100px;">type</th>
|
||
<th style="width: 50px;">default</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>dataSource</td>
|
||
<td>function</td>
|
||
<td>empty function</td>
|
||
<td>This function is used to provide paging information and data for the repeater. It is called prior
|
||
to rendering the current view, passing a <code>options</code> object and <code>callback</code>
|
||
function. The callback function is ran once the appropriate information is gathered to complete
|
||
the rendering. More details on using <a href="#repeaters-dataSource">dataSource</a> can be found below.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>defaultView</td>
|
||
<td>string or number</td>
|
||
<td>-1</td>
|
||
<td>Specifies the initial view the repeater will render. This is usually a string value equivalent
|
||
to the desired repeater view plugin. If set to <code>-1</code>, the repeater will check the
|
||
<code>.repeater-views</code> button group for an <code>.active</code> class, using it's input
|
||
value as the defaultView setting.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>dropPagingCap</td>
|
||
<td>number</td>
|
||
<td>10</td>
|
||
<td>Specifies the number of items allowed within the <code>.repeater-primaryPaging</code> dropdown menu.
|
||
If the number of pages exceeds this amount the <code>.repeater-secondaryPaging</code> input will
|
||
instead be used.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>staticHeight</td>
|
||
<td>boolean or number</td>
|
||
<td>-1</td>
|
||
<td>Dictates whether the repeater is a set height with scrollable data. If set to <code>true</code>
|
||
the height will be based off of CSS styles applied to the repeater element. If set to a positive
|
||
<code>number</code>, that value will be applied as the height in pixels. If set to <code>-1</code>
|
||
the repeater will check for the <code>data-staticheight</code> attribute and use its value if
|
||
present.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().repeater();</h4>
|
||
Attaches repeater to the repeater markup.
|
||
|
||
<h4>.repeater('clear');</h4>
|
||
<p>Clears the repeater of current data. Accepts an <i>optional</i> <code>options</code> object as an argument, with
|
||
the attributes listed in the table below.</p>
|
||
{% highlight js %}$('#element').repeater('clear');{% endhighlight %}
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 150px;">Attribute</th>
|
||
<th>type</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>clearInfinite</td>
|
||
<td>boolean</td>
|
||
<td>If infinite scrolling is enabled, setting this to <code>true</code> will force a <code>preserve</code>
|
||
clear if <code>preserve</code> is also <code>true</code>. Default is <code>false</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>preserve</td>
|
||
<td>boolean</td>
|
||
<td>If set to <code>true</code>, rather than simply empty the repeater of data this will scan it for
|
||
any items with the <code>data-preserve</code> attribute and preserve them while removing all other
|
||
items. Default is <code>false</code>.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h4>.repeater('render');</h4>
|
||
<p>Renders the repeater data, making a call to the <a href="#repeaters-dataSource">dataSource</a> prior to doing so.
|
||
Accepts an <i>optional</i> <code>options</code> object as an argument, with the attributes listed in the table below.
|
||
</p>
|
||
{% highlight js %}$('#element').repeater('render');{% endhighlight %}
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 150px;">Attribute</th>
|
||
<th>type</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>changeView</td>
|
||
<td>string</td>
|
||
<td>If set to a string value this will change the current repeater view to be rendered. Default is
|
||
<code>undefined</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>clearInfinite</td>
|
||
<td>boolean</td>
|
||
<td>Passed to the <code>clear</code> method - see above for description.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>pageIncrement</td>
|
||
<td>number or null</td>
|
||
<td>If a number, determines the amount by which the current page will be incremented/decremented. If
|
||
<code>null</code> the current page will be reset to 0.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>preserve</td>
|
||
<td>boolean</td>
|
||
<td>Passed to the <code>clear</code> method - see above for description.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h4>.repeater('resize');</h4>
|
||
<p>Resizes the repeater based on staticHeight presence / value.</p>
|
||
{% highlight js %}$('#element').repeater('resize');{% endhighlight %}
|
||
|
||
<h3 id="repeaters-dataSource">Data Source</h3>
|
||
<p>The <code>dataSource</code> function is called prior to rendering data for the current view. It is passed a
|
||
<code>options</code> object and <code>callback</code> function as arguments. The <code>options</code> object
|
||
provides context for which data should be returned, and the <code>callback</code> is used to continue onward
|
||
with rendering.
|
||
</p>
|
||
|
||
<p>The options object can vary in content depending on which view plugin is being used, though many should share
|
||
these common attributes. Here is the standard <code>options</code> object format:</p>
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 100px;">Attribute</th>
|
||
<th style="width: 100px;">type</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>filter</td>
|
||
<td>object</td>
|
||
<td>Provides context for the selected <code>.repeater-filters</code> dropdown item, representing data
|
||
filtering. The object contains a <code>text</code> attribute for the displayed text, as well as
|
||
a <code>value</code> attribute for the selected item's value.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>pageIndex</td>
|
||
<td>number</td>
|
||
<td>Represents the current page of data.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>pageSize</td>
|
||
<td>number</td>
|
||
<td>Provides context for the selected <code>.repeater-itemization</code> dropdown item value, representing
|
||
number of data items to be displayed.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>search</td>
|
||
<td>string</td>
|
||
<td>Provides context for the entered <code>.repeater-search</code> search box, representing the desired
|
||
user search value. Only present if a search value has been entered.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>view</td>
|
||
<td>string</td>
|
||
<td>Provides context for the selected <code>.repeater-views</code> button group item, representing
|
||
the current view. Used to determine view-specific return data.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<p>The <code>dataSource's callback</code> function should be ran after gathering the desired data for rendering. It expects a
|
||
<code>data</code> object to be passed as an argument. This object's contents will vary depending on the view
|
||
plugin being used, however here are the common expected attributes:</p>
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 100px;">Attribute</th>
|
||
<th style="width: 100px;">type</th>
|
||
<th>description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>count</td>
|
||
<td>number</td>
|
||
<td>Tells the repeater how many items are being returned in the data, which is used as the
|
||
<code>.repeater-count</code> element's text value.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>end</td>
|
||
<td>number</td>
|
||
<td>Tells the repeater the end index of current displayed data items, which is used as the
|
||
<code>.repeater-end</code> element's text value.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>page</td>
|
||
<td>number</td>
|
||
<td>Sets the current repeater page. Also shown in the <code>.repeater-primaryPaging</code> or
|
||
<code>.repeater-secondaryPaging</code> element.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>pages</td>
|
||
<td>number</td>
|
||
<td>Tells the repeater how many pages of data are available, which is used as the <code>.repeater-pages</code>
|
||
element's text value.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>start</td>
|
||
<td>number</td>
|
||
<td>Tells the repeater the starting index of current displayed data items, which is used as the
|
||
<code>.repeater-start</code> element's text value.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h3 id="repeaters-plugins">Plugins</h3>
|
||
<p>The repeater has a view framework that can be extended with plugins to represent data in different ways. By default,
|
||
Fuel UX comes with two repeater view plugins (list and thumbnail), each providing additional options and requiring
|
||
different return data from the <a href="#repeaters-dataSource">dataSource</a> to render appropriately. For
|
||
information on using these plugins, visit the plugins page. Additionally, learn how to write your own repeater
|
||
plugin here.
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- search
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="search" class="page-header">Search Box <small>search.js</small></h1>
|
||
<p class="lead">Combines an input and a button to fire the <code>searched</code> event.</p>
|
||
|
||
<h2 id="search-examples">Examples</h2>
|
||
<p>Wrap the input and search button within <code>.fuelux .search</code></p>
|
||
<div class="bs-example">
|
||
|
||
<form class="search-form" role="search">
|
||
<div id="MySearch" class="search input-group">
|
||
<input type="search" class="form-control" placeholder="Search"/>
|
||
<span class="input-group-btn">
|
||
<button class="btn btn-default" type="button">
|
||
<span class="glyphicon glyphicon-search"></span>
|
||
<span class="sr-only">Search</span>
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</form>
|
||
|
||
<h5>Sample Methods</h5>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-default" id="btnSearchDisable" value="disable">disable</button>
|
||
<button type="button" class="btn btn-default" id="btnSearchEnable" value="enable">enable</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
{% highlight html %}
|
||
<form class="search-form" role="search">
|
||
<div id="MySearch" class="search input-group">
|
||
<input type="search" class="form-control" placeholder="Search"/>
|
||
<span class="input-group-btn">
|
||
<button class="btn btn-default" type="button">
|
||
<span class="glyphicon glyphicon-search"></span>
|
||
<span class="sr-only">Search</span>
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</form>
|
||
{% endhighlight %}
|
||
|
||
<h2 id="search-usage">Usage</h2>
|
||
<p>This is a simple input and button group that styles with a search icon and fires the <code>searched</code> event.</p>
|
||
|
||
<p>Trigger the search via JavaScript:</p>
|
||
{% highlight js %}$('#MySearch').search();{% endhighlight %}
|
||
|
||
<h3>Markup</h3>
|
||
<p>Wrap <code>class="search"</code> around an input and a button within a <code>class="fuelux"</code> container.</p>
|
||
{% highlight html %}
|
||
<div id="MySearch" class="search input-group">
|
||
<input type="search" class="form-control" placeholder="Search"/>
|
||
<span class="input-group-btn">
|
||
<button class="btn btn-default" type="button">
|
||
<span class="glyphicon glyphicon-search"></span>
|
||
<span class="sr-only">Search</span>
|
||
</button>
|
||
</span>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().search()</h4>
|
||
Attaches search to an input and a button group.
|
||
|
||
<h4>.search('disable')</h4>
|
||
<p>Disables the component</p>
|
||
{% highlight js %}$('#element').search('disable'){% endhighlight %}
|
||
|
||
<h4>.search('enable')</h4>
|
||
<p>Enables the component</p>
|
||
{% highlight js %}$('#element').search('enable'){% endhighlight %}
|
||
|
||
<h3>Events</h3>
|
||
<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>searched</td>
|
||
<td>This event is fired when enter has been pressed within the input or the button has been clicked.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>cleared</td>
|
||
<td>This event is fired when the input has been cleared.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
{% highlight js %}
|
||
$('#MySearchResults').on('searched', function () {
|
||
// load search results
|
||
})
|
||
{% endhighlight %}
|
||
|
||
</div>
|
||
|
||
<!-- selectlist
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="selectlist" class="page-header">Selectlist <small>selectlist.js</small></h1>
|
||
<p class="lead">A single select dropdown similar to the native <code>select</code> control.</p>
|
||
|
||
<h2 id="selectlist-examples">Examples</h2>
|
||
<p>Wrap the input and selectlist button within <code>.fuelux .selectlist</code></p>
|
||
<div class="bs-example">
|
||
|
||
<div id="MySelectlist" class="btn-group selectlist" data-resize="auto">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
<span class="selected-label"> </span>
|
||
<span class="caret"></span>
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li data-value="1"><a href="#">One</a></li>
|
||
<li data-value="2" data-selected="true"><a href="#">Two</a></li>
|
||
<li data-value="3"><a href="#">Three</a></li>
|
||
<li data-value="4" data-foo="bar" data-fizz="buzz"><a href="#">Buzz</a></li>
|
||
<li data-value="Item Five"><a href="#">Item Five</a></li>
|
||
</ul>
|
||
<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
|
||
</div>
|
||
|
||
<br/>
|
||
<br/>
|
||
<h5>Sample Methods <small>(output sent to browser console)</small></h5>
|
||
<div class="btn-group">
|
||
<input id="getSelectedItem" type="button" class="btn btn-default" value="log selected item/value"/>
|
||
<input id="selectByValue" type="button" class="btn btn-default" value="set by value (3)"/>
|
||
<input id="selectByIndex" type="button" class="btn btn-default" value="set by element index (zero-based) ('4')"/>
|
||
</div>
|
||
|
||
<div class="btn-group">
|
||
<input id="selectByText" type="button" class="btn btn-default" value="set by text ('One')"/>
|
||
<input id="selectBySelector" type="button" class="btn btn-default" value="set by CSS selector ('li[data-fizz=buzz]')"/>
|
||
<input id="enableSelectlist" type="button" class="btn btn-default" value="enable"/>
|
||
<input id="disableSelectlist" type="button" class="btn btn-default" value="disable"/>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div><!-- /example -->
|
||
|
||
{% highlight html %}
|
||
<div id="MySelectlist" class="btn-group selectlist" data-resize="auto">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
<span class="selected-label"> </span>
|
||
<span class="caret"></span>
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li data-value="1"><a href="#">One</a></li>
|
||
<li data-value="2" data-selected="true"><a href="#">Two</a></li>
|
||
<li data-value="3"><a href="#">Three</a></li>
|
||
<li data-value="4" data-foo="bar" data-fizz="buzz"><a href="#">Buzz</a></li>
|
||
<li data-value="Item Five"><a href="#">Item Five</a></li>
|
||
</ul>
|
||
<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h2 id="selectlist-usage">Usage</h2>
|
||
<p>This is a single select dropdown similar to the native <code>select</code> control.</p>
|
||
|
||
<p>Trigger the selectlist via JavaScript:</p>
|
||
{% highlight js %}$('#MySelectlist').selectlist();{% endhighlight %}
|
||
|
||
<h3>Markup</h3>
|
||
<p>Wrap <code>class="selectlist"</code> around an input and a button within a <code>class="fuelux"</code> container.</p>
|
||
{% highlight html %}
|
||
<div class="btn-group selectlist" data-resize="auto">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
<span class="selected-label"> </span>
|
||
<span class="caret"></span>
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu">
|
||
...
|
||
</ul>
|
||
<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().selectlist()</h4>
|
||
Attaches selectlist to an input and a button group.
|
||
|
||
<h4>.selectlist('disable')</h4>
|
||
<p>Disables the component</p>
|
||
{% highlight js %}$('#element').selectlist('disable'){% endhighlight %}
|
||
|
||
<h4>.selectlist('enable')</h4>
|
||
<p>Enables the component</p>
|
||
{% highlight js %}$('#element').selectlist('enable'){% endhighlight %}
|
||
|
||
<h4>.selectlist('selectedItem')</h4>
|
||
<p>Returns an object containing the jQuery data() contents of the selected item which includes <code>.data-*</code> attributes plus a text property with the items's visible text.</p>
|
||
{% highlight js %}$('#element').selectlist('selectedItem'){% endhighlight %}
|
||
|
||
<h4>.selectlist('selectByIndex')</h4>
|
||
<p>Set the selected item based on its index in the list (zero-based index). Convenience method for <code>.selectBySelector('li:eq({index})')</code></p>
|
||
{% highlight js %}$('#element').selectlist('selectByIndex', '1'){% endhighlight %}
|
||
|
||
<h4>.selectlist('selectByText')</h4>
|
||
<p>Set the selected item based on its text value</p>
|
||
{% highlight js %}$('#element').('selectByText', 'Four'){% endhighlight %}
|
||
|
||
<h4>.selectlist('selectBySelector')</h4>
|
||
<p>Set the selected item based on a selector.</p>
|
||
{% highlight js %}$('#element').('selectBySelector', 'li[data-fizz=buzz]'){% endhighlight %}
|
||
|
||
<h4>.selectlist('selectByValue')</h4>
|
||
<p>Set the selected item based on its value. Convenience method for <code>.selectBySelector('data-value={value}')</code> that requires the item to have a <code>.data-value="{value}"</code> attribute</p>
|
||
{% highlight js %}$('#element').('selectByValue', '1'){% endhighlight %}
|
||
|
||
|
||
<h3>Events</h3>
|
||
<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>changed</td>
|
||
<td>This event is fired when the value has changed by selecting an item from the list. Arguments are <code>event, data</code> where data represents the same object structure returned by the <code>selectedItem</code> method.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
{% highlight js %}
|
||
$('#MyselectlistResults').on('selectlisted', function () {
|
||
// load selectlist results
|
||
})
|
||
{% endhighlight %}
|
||
|
||
<!-- wizard
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<h1 id="wizard" class="page-header">Wizard <small>wizard.js</small></h1>
|
||
|
||
<h2 id="wizard-example">Examples</h2>
|
||
<p>Wrap the input and wizard button within <code>.fuelux .wizard</code></p>
|
||
<div class="bs-example">
|
||
|
||
<div id="MyWizard" class="wizard">
|
||
<ul class="steps">
|
||
<li class="active" data-step="1"><span class="badge badge-info">1</span>Campaign<span class="chevron"></span></li>
|
||
<li data-step="2"><span class="badge">2</span>Recipients<span class="chevron"></span></li>
|
||
<li data-step="3"><span class="badge">3</span>Template<span class="chevron"></span></li>
|
||
<li data-step="4"><span class="badge">4</span>Preview<span class="chevron"></span></li>
|
||
<li data-step="5"><span class="badge">5</span>Send<span class="chevron"></span></li>
|
||
</ul>
|
||
<div class="actions">
|
||
<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
|
||
<button class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
|
||
</div>
|
||
<div class="step-content">
|
||
<div class="step-pane active sample-pane alert" data-step="1">
|
||
<h4>Setup Campaign</h4>
|
||
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress.</p>
|
||
</div>
|
||
<div class="step-pane sample-pane alert" data-step="2">
|
||
<h4>Choose Recipients</h4>
|
||
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
|
||
</div>
|
||
<div class="step-pane sample-pane alert" data-step="3">
|
||
<h4>Design Template</h4>
|
||
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jÃcama salsify. </p>
|
||
</div>
|
||
<div class="step-pane sample-pane alert" data-step="4">
|
||
<h4>Preview Message</h4>
|
||
<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
|
||
</div>
|
||
<div class="step-pane sample-pane alert" data-step="5">
|
||
<h4>Send Message</h4>
|
||
<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<br/>
|
||
<h5>Sample Methods <small>(output sent to browser console)</small></h5>
|
||
<div class="btn-group">
|
||
<input type="button" class="btn btn-default" id="btnWizardPrev" value="prev">
|
||
<input type="button" class="btn btn-default" id="btnWizardNext" value="next">
|
||
<input type="button" class="btn btn-default" id="btnWizardStep" value="log current step index">
|
||
<input type="button" class="btn btn-default" id="btnWizardSetStep" value="jump to step 3 (recipients)">
|
||
<input type="button" class="btn btn-default" id="btnWizardAddSteps" value="add step (setup)">
|
||
<input type="button" class="btn btn-default" id="btnWizardRemoveStep" value="remove step (preview)">
|
||
</div>
|
||
|
||
</div><!-- /example -->
|
||
|
||
{% highlight html %}
|
||
<div id="MyWizard" class="wizard">
|
||
<ul class="steps">
|
||
<li class="active" data-step="1"><span class="badge badge-info">1</span>Campaign<span class="chevron"></span></li>
|
||
<li data-step="2"><span class="badge">2</span>Recipients<span class="chevron"></span></li>
|
||
<li data-step="3"><span class="badge">3</span>Template<span class="chevron"></span></li>
|
||
<li data-step="4"><span class="badge">4</span>Preview<span class="chevron"></span></li>
|
||
<li data-step="5"><span class="badge">5</span>Send<span class="chevron"></span></li>
|
||
</ul>
|
||
<div class="actions">
|
||
<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
|
||
<button class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
|
||
</div>
|
||
<div class="step-content">
|
||
<div class="step-pane active sample-pane" data-step="1">
|
||
<h4>Setup Campaign</h4>
|
||
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napcabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root watespinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sproucoriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress.</p>
|
||
</div>
|
||
<div class="step-pane sample-pane" data-step="2">
|
||
<h4>Choose Recipients</h4>
|
||
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seecollard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
|
||
</div>
|
||
<div class="step-pane sample-pane" data-step="3">
|
||
<h4>Design Template</h4>
|
||
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairiturnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki beaearthnut pea sierra leone bologi leek soko chicory celtuce parsley jÃcama salsify. </p>
|
||
</div>
|
||
<div class="step-pane sample-pane" data-step="4">
|
||
<h4>Preview Message</h4>
|
||
<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoaubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdocyarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnubroccoli arugula. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
|
||
</div>
|
||
<div class="step-pane sample-pane" data-step="5">
|
||
<h4>Send Message</h4>
|
||
<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbageCatsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierrleone bologi rutabaga tigernut.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h2 id="wizard-usage">Usage</h2>
|
||
<p>A wizard divides a complex goal into multiple steps by separating sub-tasks or content into panes. Panes can be added or removed. Completed steps can be clicked.</p>
|
||
|
||
<p>Trigger the wizard via JavaScript:</p>
|
||
{% highlight js %}$('#MyWizard').wizard();{% endhighlight %}
|
||
|
||
<h3>Markup</h3>
|
||
<p>Wrap <code>class="wizard"</code> around a list of steps, navigation, and content within a <code>class="fuelux"</code> container.</p>
|
||
{% highlight html %}
|
||
<div class="wizard">
|
||
<ul class="steps">
|
||
<li class="active" data-step="1"><span class="badge">1</span>Step 1<span class="chevron"></span></li>
|
||
</ul>
|
||
<div class="actions">
|
||
<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
|
||
<button class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
|
||
</div>
|
||
<div class="step-content">
|
||
<div class="step-pane active sample-pane" data-step="1">
|
||
....
|
||
</div>
|
||
....
|
||
</div>
|
||
</div>
|
||
{% endhighlight %}
|
||
|
||
<h3>Methods</h3>
|
||
<h4>$().wizard()</h4>
|
||
Attaches wizard to a list of steps, navigation, and content.
|
||
|
||
<h4>.wizard('previous')</h4>
|
||
<p>Moves to the previous step</p>
|
||
{% highlight js %}$('#element').wizard('previous'){% endhighlight %}
|
||
|
||
<h4>.wizard('next')</h4>
|
||
<p>Moves to the next step</p>
|
||
{% highlight js %}$('#element').wizard('next'){% endhighlight %}
|
||
|
||
<h4>.wizard('selectedItem')</h4>
|
||
<p>Returns the current step index</p>
|
||
{% highlight js %}
|
||
$('#element').wizard('selectedItem', {
|
||
step: 3
|
||
});
|
||
{% endhighlight %}
|
||
|
||
<h4>.wizard('addSteps')</h4>
|
||
<p>Add a pane or an array of panes to a wizard</p>
|
||
{% highlight js %}
|
||
$('#element').wizard('addSteps', index, remove,
|
||
[
|
||
{
|
||
badge: 'badge-customicon',
|
||
label: 'A Step Label',
|
||
pane: '<div>Content</div>'
|
||
}
|
||
]);
|
||
{% endhighlight %}
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 150px;">Parameter</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>index</td>
|
||
<td><i>Required.</i> The position where to start inserting pane(s). First pane is at position 1.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>remove</td>
|
||
<td><i>Optional.</i> The number of panes to be removed after adding panes. Default is 0.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><i>array</i></td>
|
||
<td>An array of content pane objects to be added at the <code>index</code>. Each pane can contain three strings: a <code>badge</code> class to be appended to the step's <code>class</code> attribute in order to override the default number, a <code>label</code> for the name of the step, and the <code>pane</code> of HTML content.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
<h4>.wizard('RemoveSteps')</h4>
|
||
<p>Remove a pane or multiple panes from a wizard. </p>
|
||
{% highlight js %}
|
||
$('#element').wizard('removeSteps', index, howMany);
|
||
{% endhighlight %}
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 150px;">Parameter</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>index</td>
|
||
<td><i>Required.</i> The position where to begin removing pane(s). First pane is at position 1.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>howMany</td>
|
||
<td><i>Optional.</i> The number of panes to be removed. Default is 1.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
|
||
|
||
<h3>Events</h3>
|
||
<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>change</td>
|
||
<td>This event fires immediately when the step changes, but before the new step has been shown. Use <code>event.preventDefault</code> to cancel the event.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>changed</td>
|
||
<td>This event is fired when the step has changed and is shown to the user.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>finished</td>
|
||
<td>This event is fired when the next button is clicked on the last step of the wizard.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>stepclick</td>
|
||
<td>This event is fired when a completed step is clicked. Use <code>event.preventDefault</code> to cancel the event.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- ./bs-table-responsive -->
|
||
{% highlight js %}
|
||
$('#Mywizard').on('change', function () {
|
||
// do something
|
||
})
|
||
{% endhighlight %}
|
||
|
||
</div> |