Version 2.2.0
Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.
Fuel UX Controls Clean and lightweight UI controls for modern web projects
Checkbox
Customized look and feel for checkbox element.
Combobox
Combines input and dropdown for easy and flexible data selection.
Datagrid
Renders data in a table with paging, sorting, and searching.
Pillbox
Easily manage selected items with color-coded text labels.
Radio
Customized look and feel for radio button element.
Search
Combines input and button for integrated search interaction.
Select
Extends button dropdown with additional functionality for setting and retrieving the selected item.
Spinner
Provides convenient numeric input with increment and decrement buttons.
Tree
Provides a visual display of hierarchical node data.
Wizard
Easily define a multi-step process that needs to be completed in a specific order.
Checkbox checkbox.js
Example
Below is a working checkbox example.
Using checkbox
Call the checkbox via javascript (optional):
$('#myCheckbox').checkbox()
Methods
Fuel UX's checkbox exposes the following methods:
| Method | Description |
|---|---|
| disable | Disables the checkbox |
| enable | Enables the checkbox |
| toggle | Toggles the checked state of the checkbox |
Markup
You can activate checkbox on your page easily without having to write a single line of javascript. Just
set class="checkbox-custom" on a label and include an i tag with
class="checkbox" like the example markup below and the checkbox will activate
automatically.
<label class="checkbox checkbox-custom"><input type="checkbox"><i class="checkbox"></i>Item One</label>
Combobox combobox.js
Example
Below is a working combobox example.
Using combobox
Call the combobox via javascript (optional):
$('#myCombobox').combobox()
Methods
Fuel UX's combobox exposes the following methods:
| Method | Description |
|---|---|
| disable | Disable the combobox |
| enable | Enable the combobox |
| selectedItem | Returns an object containing the jQuery data() contents of the selected item which includes data-* attributes plus
a text property with the items's visible text.
|
| setByIndex | Set the selected item based on its index in the list (zero-based index). Convenience method for
setBySelector('li:eq({index})') |
| setByText | Set the selected item based on its text value |
| setBySelector | Set the selected item based on a selector. For example: $('#myCombobox').select('setBySelector','li[data-fizz=buzz]');
|
| setByValue | Set the selected item based on its value. Convenience method for setBySelector('data-value={value}')
that requires the item to have a data-value="{value}" attribute
|
Events
Fuel UX's combobox control exposes the following events:
| Event | Description |
|---|---|
| changed | 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 event, data where data represents
the same object structure returned by the selectedItem method.
|
Markup
You can activate combobox on your page easily without having to write a single line of javascript. Just
set class="combobox" on a div like the example markup below and the combobox will activate
automatically.
<div class="input-append dropdown combobox"> <input class="span2" type="text"><button class="btn" data-toggle="dropdown"><i class="caret"></i></button> <ul class="dropdown-menu"> <li><a href="#">Item One</a></li> <li><a href="#">Item Two</a></li> <li><a href="#">Item Three</a></li> <li class="divider"></li> <li><a href="#">Item After Divider</a></li> </ul> </div>
Datagrid datagrid.js
Example
Below is a working datagrid example.
|
Geographic Data Sample
|
|---|
Using datagrid
Call the datagrid via javascript:
$('#MyGrid').datagrid({ dataSource: dataSource, stretchHeight: true })
Data Source
Provide a data source to the datagrid to supply column information and data. Your data source must support the following two methods.
| Name | Parameters | Description |
|---|---|---|
| columns | (none) | Returns an array of objects containing column information |
| data | options (object), callback (function) | The options parameter contains search, sortProperty, sortDirection, pageIndex, and pageSize. Retrieve data then call callback with an object containing data, start, end, count, pages, and page. View the source of this page for an example static data source. |
Methods
Fuel UX's datagrid exposes a method for reloading the grid.
| Method | Description |
|---|---|
| reload | This method causes the datagrid to reload the data from the dataSource and return
to the first page.
|
Options
| Options | Description | Default Value |
|---|---|---|
| dataSource | See Data Source section above | null (must be provided) |
| dataOptions | Options for current data to be displayed | { pageIndex: 0, pageSize: 10 } |
| stretchHeight | Introduced in version 2.2. Enables stretchHeight rendering. This sets the datagrid's height to a stable height, matching its parent element. The appearance of the datagrid becomes much more consistent while rendering and displaying different numbers of rows. Rows will scroll within the table when they exceed the available height. | false |
| loadingHTML | HTML for loading indicator | (bootstrap progress indicator) |
| itemsText | Text for plural items | items |
| itemText | Text for singular item | item |
Events
Fuel UX's datagrid exposes an event for hooking into its functionality.
| Event | Description |
|---|---|
| loaded | This event is fired after the grid loads or reloads data |
Markup
Your initial datagrid markup should look like the example markup below. You can reconfigure the datagrid by omitting or moving some of the features, such as search and paging controls.
<table id="MyGrid" class="table table-bordered datagrid"> <thead> <tr> <th> <span class="datagrid-header-title">Geographic Data Sample</span> <div class="datagrid-header-left"> </div> <div class="datagrid-header-right"> <div class="input-append search"> <input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button> </div> </div> </th> </tr> </thead> <tfoot> <tr> <th> <div class="datagrid-footer-left" style="display:none;"> <div class="grid-controls"> <span><span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span></span> <select class="grid-pagesize"><option>10</option><option>20</option><option>50</option><option>100</option></select> <span>Per Page</span> </div> </div> <div class="datagrid-footer-right" style="display:none;"> <div class="grid-pager"> <button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button> <span>Page</span> <div class="input-append dropdown combobox"> <input class="span1" type="text"><button class="btn" data-toggle="dropdown"><i class="caret"></i></button> <ul class="dropdown-menu"></ul> </div> <span>of <span class="grid-pages"></span></span> <button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button> </div> </div> </th> </tr> </tfoot> </table>
Pillbox pillbox.js
Example
Below is a working pillbox example.
- Item One
- Item Two
- Item Three
- Item Four
- Item Five
- Item Six
- Item Seven
Using pillbox
Call the pillbox via javascript (optional):
$('#MyPillbox').pillbox()
Methods
Fuel UX's pillbox exposes a method for retrieving selected item data.
| Method | Description |
|---|---|
| items | Returns an array of objects, one per item, each containing the jQuery data() contents of the
item which includes data-*
attributes plus a text property with the label's visible text
|
Markup
You can activate the pillbox on your page easily without having to write a single line of javascript.
Just set class="pillbox" on a div like the example markup below and the pillbox will
activate automatically.
<div id="MyPillbox" class="pillbox"> <ul> <li data-value="foo">Item One</li> <li class="status-success">Item Two</li> <li class="status-warning">Item Three</li> <li class="status-important">Item Four</li> <li class="status-info">Item Five</li> <li class="status-success">Item Six</li> <li>Item Seven</li> </ul> </div>
Radio radio.js
Example
Below is a working radio example.
Using radio
Call the radio via javascript (optional):
$('#myRadio').radio()
Methods
Fuel UX's radio exposes the following methods:
| Method | Description |
|---|---|
| disable | Disable the radio |
| enable | Enable the radio |
Markup
You can activate radio on your page easily without having to write a single line of javascript. Just set
class="radio-custom" on a label and include an i tag with class="radio" like
the example markup below and the radio will activate automatically.
<label class="radio radio-custom"><input type="radio"><i class="radio"></i>Item One</label>
Search search.js
Example
Below is a working search control example. Click (after entering text) to see your search text.
Using search
Call the search via javascript (optional):
$('#MySearch').search()
Methods
| Method | Description |
|---|---|
| disable | Disables the search control |
| enable | Enables the search control |
Markup
You can activate the search control on your page easily without having to write a single line of
javascript. Just set class="search" on a div like the example markup below and the search
will activate automatically.
<div id="MySearch" class="input-append search"> <input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button> </div>
Events
Fuel UX's search control exposes two events for hooking into its functionality.
| Event | Description |
|---|---|
| searched | This event is fired when a search has been performed. Arguments are event,
searchText |
| cleared | This event is fired when the search has been cleared. |
Select select.js
Example
Below is a working select example.
Using select
Call the select via javascript (optional):
$('#mySelect').select()
Methods
Fuel UX's select exposes the following methods:
| Method | Description |
|---|---|
| disable | Disable the select |
| enable | Enable the select |
| resize | Resize the select width based on the longest item in the list. This can be accomplished
automatically using data-resize="auto" as well
|
| selectedItem | Returns an object containing the jQuery data() contents of the selected item which includes data-* attributes plus
a text property with the items's visible text
|
| setByIndex | Set the select item based on its index in the list (zero-based index). Convenience method for
setBySelector('li:eq({index})') |
| setByText | Set the selected item based on its text value |
| setBySelector | Set the selected item based on a selector. For example: $('#mySelect').select('setBySelector','li[data-fizz=buzz]');
|
| setByValue | Set the selected item based on its value. Convenience method for setBySelector('data-value={value}')
that requires the item to have a data-value="{value}" attribute
|
Events
Fuel UX's select control exposes the following events:
| Event | Description |
|---|---|
| changed | This event is fired when the selected item has changed. Arguments are event, data
where data represents the same object structure returned by the selectedItem
method.
|
Markup
You can activate select on your page easily without having to write a single line of javascript. Just set
class="select" on a div like the example markup below and the select will activate
automatically.
<div class="select btn-group" data-resize="auto"> <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label"></span><span class="caret"></span></button> <ul class="dropdown-menu"> <li data-value="1"><a href="#">One</a></li> <li data-value="2"><a href="#">Two</a></li> <li data-value="3" data-selected="true"><a href="#">Three</a></li> <li data-value="4" data-fizz="buzz"><a href="#">Four</a></li> </ul> </div>
Spinner spinner.js
Example
Below is a working spinner example.
Using spinner
Call the spinner via javascript:
$('#MySpinner').spinner()
Methods
Fuel UX's spinner exposes several methods for disabling, enabling, setting values, and retrieving values from the spinner.
| Method | Description |
|---|---|
| value | Sets or returns the spinner value. As an example, $('#MySpinner').spinner('value')
would return spinner value and $('#MySpinner').spinner('value',
37) would set spinner value to 37.
|
| disable | Disable the spinner. |
| enable | Enable the spinner. |
Options
Fuel UX's spinner includes several convenient options for spinner behavioral preferences and value limits.
| Options | Description | Default Value |
|---|---|---|
| value | Sets the initial spinner value. | 1 |
| min | Sets the minimum spinner value. | 1 |
| max | Sets the maximum spinner value. | 999 |
| step | Sets the increment by which the value in the spinner will change each time the spinner buttons are pressed. | 1 |
| hold | If true the spinner will react to its buttons being pressed and held down. |
true |
| speed | Spinner speed when buttons are held down. The options include:
"fast","medium","slow".
|
"medium" |
| disabled | Spinner will be disabled when it is created. | false |
Events
| Event | Description |
|---|---|
| changed | 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 event, value where value is
the current value of the spinner.
|
Markup
Your spinner markup should look like the example markup below.
<div id="MySpinner" class="spinner">
<input type="text" class="input-mini spinner-input">
<div class="spinner-buttons btn-group btn-group-vertical">
<button class="btn spinner-up">
<i class="icon-chevron-up"></i>
</button>
<button class="btn spinner-down">
<i class="icon-chevron-down"></i>
</button>
</div>
</div>
Tree tree.js
Example
Below is a working tree example.
Using tree
Call the tree via javascript:
$('#MyTree').tree({ dataSource: dataSource })
Data Source
Provide a data source to the tree to supply population information and data. Your data source must support the following methods.
| Name | Parameters | Description |
|---|---|---|
| data | options (object), callback (function) | The options parameter contains any data required to by the data source. Retrieve data then call callback with an object containing data. View the source of this page for an example static data source. |
Methods
Fuel UX's tree exposes a method for retrieving selected items.
| Method | Description |
|---|---|
| selectedItems | This method returns an array containing selected items and associated data |
Options
Fuel UX's tree includes several convenient options for tree behavioral preferences.
| Options | Description | Default Value |
|---|---|---|
| multiSelect | Allows multiple tree items to be selected at once. | false |
| loadingHTML | Sets the html that appears when a folder is selected and is hidden when the contents are loaded. | "Loading..." |
| cacheItems | When a folder is closed and re-opened sub-items will not be refreshed. | true |
Events
Fuel UX's tree control exposes the following events:
| Event | Description |
|---|---|
| loaded | This event is fired when sub-content has been is loaded. |
| selected | This event is fired when item/items has been selected. An object containing {info:
data} is returned. data represents an array of selected items
|
| opened | This event is fired when a sub-folder is opened. An object containing folder information is returned. |
| closed | This event is fired when a sub-folder is closed. An object containing folder information is returned. |
Markup
Your tree markup should look like the example markup below.
<div id="MyTree" class="tree">
<div class = "tree-folder" style="display:none;">
<div class="tree-folder-header">
<i class="icon-folder-close"></i>
<div class="tree-folder-name"></div>
</div>
<div class="tree-folder-content"></div>
<div class="tree-loader" style="display:none"></div>
</div>
<div class="tree-item" style="display:none;">
<i class="tree-dot"></i>
<div class="tree-item-name"></div>
</div>
</div>
Wizard wizard.js
Example
Below is a working wizard example.
- 1Step 1
- 2Step 2
- 3Step 3
- 4Step 4
- 5Step 5
Using wizard
Call the wizard via javascript (optional):
$('#myWizard').wizard()
Methods
Fuel UX's wizard exposes the following methods:
| Method | Description |
|---|---|
| previous | Moves to the previous step |
| next | Moves to the next step |
| selectedItem | Returns the current step index |
Events
Fuel UX's wizard control exposes the following events:
| Event | Description |
|---|---|
| change | This event fires immediately when the step changes, but before the new step has been shown. Use
event.preventDefault to cancel the event.
|
| changed | This event is fired when the step has changed and is shown to the user. |
| finished | This event is fired when the next button is clicked on the last step of the wizard. |
Markup
You can activate wizard on your page easily without having to write a single line of javascript. Just set
class="wizard" on a div like the example markup below and the select will activate
automatically.
<div id="myWizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">This is step 1</div>
<div class="step-pane" id="step2">This is step 2</div>
<div class="step-pane" id="step3">This is step 3</div>
<div class="step-pane" id="step4">This is step 4</div>
<div class="step-pane" id="step5">This is step 5</div>
</div>