Fuel UX 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.

View On GitHub »

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.

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>

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>

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>

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>

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>

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>

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>

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>

Example

Below is a working wizard example.

  • 1Step 1
  • 2Step 2
  • 3Step 3
  • 4Step 4
  • 5Step 5
This is step 1
This is step 2
This is step 3
This is step 4
This is step 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-primary btn-prev"> <i class="icon-white icon-arrow-left"></i>Prev</button>
		<button class="btn btn-mini btn-primary btn-next" data-last="Finish">Next<i class="icon-white 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>