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.
selectByIndex	Set the selected item based on its index in the list (zero-based index). Convenience method for selectBySelector('li:eq({index})')
selectByText	Set the selected item based on its text value
selectBySelector	Set the selected item based on a selector. For example: $('#myCombobox').combobox('selectBySelector','li[data-fizz=buzz]');
selectByValue	Set the selected item based on its value. Convenience method for selectBySelector('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 type="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.

---

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 class="input-append search datagrid-search">
					<input type="text" class="input-medium" placeholder="Search">
					<button type="button" class="btn"><i class="icon-search"></i></button>
				</div>
			</div>
			<div class="datagrid-header-right">
				<div class="select filter" data-resize="auto">
					<button type="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="all" data-selected="true"><a href="#">All</a></li>
						<li data-value="lt5m"><a href="#">Population < 5M</a></li>
						<li data-value="gte5m"><a href="#">Population >= 5M</a></li>
					</ul>
				</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>
					<div class="select grid-pagesize" data-resize="auto">
						<button type="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="5" data-selected="true"><a href="#">5</a></li>
							<li data-value="10"><a href="#">10</a></li>
							<li data-value="20"><a href="#">20</a></li>
							<li data-value="50"><a href="#">50</a></li>
							<li data-value="100"><a href="#">100</a></li>
						</ul>
					</div>
					<span>Per Page</span>
				</div>
			</div>
			<div class="datagrid-footer-right" style="display:none;">
				<div class="grid-pager">
					<button type="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 type="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 type="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.

---

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 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 type="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.

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
selectByIndex	Set the select item based on its index in the list (zero-based index). Convenience method for selectBySelector('li:eq({index})')
selectByText	Set the selected item based on its text value
selectBySelector	Set the selected item based on a selector. For example: $('#mySelect').select('selectBySelector','li[data-fizz=buzz]');
selectByValue	Set the selected item based on its value. Convenience method for selectBySelector('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 type="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 type="button" class="btn spinner-up">
			<i class="icon-chevron-up"></i>
		</button>
		<button type="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.

---

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.
stepclick	This event is fired when a completed step is clicked. Use event.preventDefault to cancel the event.

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 type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
		<button type="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>