Fuel UX

Fuel UX Version 2.6.1

Fuel UX extends 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 »

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.

Datepicker

Makes picking dates easy. Custom date parsing and formatting available.

Pillbox

Easily manage selected items with color-coded text labels.

Preloader

Fully CSS-driven loading animation for visual indication of wait times.

Radio

Customized look and feel for radio button element.

Scheduler

Composite form control to quickly schedule events.

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
check Checks the checkbox
disable Disables the checkbox
enable Enables the checkbox
isChecked Returns true or false, based on whether the checkbox is checked
toggle Toggles the checked state of the checkbox
uncheck Unchecks 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>

Additionally, you can add a highlight effect to the checkbox control by adding the class highlight to its label element.

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

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.
clearSelectedItems If row selection is enabled, this method will clear all rows currently selected.
setSelectedItems If row selection is enabled, this method will programmatically set specified rows within the datagrid by each element's primary key value. The argument passed to this method should be an array of string values. Note, this relies on the _data array being included in the DataSource as provided in the samples directory.
getSelectedItems If row selection is enabled, this method returns an object containing all the selected items within the datagrid. Each property in the returned object represents a selected value (by primary key) with the corresponding values being the selected data elements.

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
enableSelect Boolean value to enable/disable datagrid row selection false
primaryKey If datagrid row selection is enabled, this specifies the property in each data element which should be used as the primary key. null (must be provided)
multiSelect If datagrid row selection is enabled, multiple rows may selected with a boolean value of true, or disallowed with a value of false. true

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
itemSelected If row selection is enabled, this event is fired when a row is selected. The value of the selected row is returned.
itemDeselected If row selection is enabled, this event is fired when a row is deselected. The value of the deselected row is returned.

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>

Datepicker datepicker.js

Example

Below is a working datepicker example.

enable disable log formatted date log date object log unix date set date 7 days ahead (will log new value)

Using datepicker

Call the datepicker via javascript:

$('#myDatepicker').datepicker()

Methods

Fuel UX's datepicker exposes the following methods:

Method Description
disable Disable the datepicker
enable Enable the datepicker
getFormattedDate Returns selected formatted date
getDate Returns selected date object (not formatted)
Returns Unix timestamp when using arguments { unix: true }. For example: $('myDatepicker').datepicker('getDate', { unix: true });
setDate Set's datepicker to date provided. Date provided must be a valid Date Object. For example: $('#myDatepicker').datepicker('setDate', new Date());
getCulture Returns the culture the datepicker is currently using. Only available using Moment JS with Langs
setCulture Updates the culture the datepicker uses. Only available using Moment JS with Langs
getFormatCode Returns the format code the datepicker is currently using. Only available using Moment JS with Langs
setFormatCode Updates the format code the datepicker uses. Only available using Moment JS with Langs

Options

Options Description Default Value
date Initializes datepicker with this date.
If date is set to null when the datepicker is initialized the getDate method will return null until a date is selected (programmatically or by the user). Otherwise, the date will be parsed. 		new Date()
createInput Allows control to generate HTML Markup. This can be true, false, or an object like below: 
{
    native: false,
    dropDownBtn: false,
    inputSize: 'span3'
}
  • native can have a value of true or false. If true, dropDownBtn will be ignored
  • dropDownBtn can have a value of true or false
  • inputSize can either be a CSS class or a integer.
 false
dropdownWidth Sets pixel width of dropdown. Must be an integer 170
restrictDateSelection Disables ability to select dates in the past. Based current date true
parseDate Function allows custom date parsing. A date is passed as a parameter. A Date Object should be returned by this function.
Do not overwrite this function if using Moment JS		 return new Date( date );
formatDate Function allows custom formatting of date. Will never modify the main Date Object. A date is passed as a parameter. A formatted date should be returned by this function.
Do not overwrite this function if using Moment JS		 Default Format: MM-DD-YYYY
blackoutDates Function restricts date selection. A date is passed as a parameter. Boolean value should be returned false
momentConfig Object that handles culture and format if Moment JS is available 
{
  culture: 'en',
  formatCode: 'L'
}

Events

Fuel UX's datepicker exposes an event for hooking into its functionality.

Event Description
changed This event is fired when the date of the datepicker is changed.
inputParsingFailed This event is fired when an invalid date is parsed on blur of the datepicker. Only available using Moment JS with Langs

Markup

If this control is generating markup all that's needed is <div id="myDatepicker"></div> with the correct options at initialization.

<div class="datepicker dropdown" id="myDatepicker">
    <div class="input-append">
        <div class="dropdown-menu"></div>
        <input type="text" class="span2" value="" data-toggle="dropdown">
        <button type="button" class="btn" data-toggle="dropdown"><i class="icon-calendar"></i></button>
    </div>
</div>

Sample Initializations

I have put together some sample code for different initializations of the Datepicker. Let us know if anything is missing.

Moment JS with Langs is NEEDED. Regular Moment JS does not come with the culture support the datepicker uses when available

Pillbox pillbox.js

Example

Below is a working pillbox example.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

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
addItem Adds an additional item to the pillbox. Parameters are text string for display name and value string for item value.
itemCount Returns an int representing the current number of items.
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
removeBySelector Removes an item based on selector matching that of the provided selector string parameter.
removeByText Removes an item with contained text matching that of the provided text string parameter.
removeByValue Removes an item with value matching that of the provided value string parameter.

Events

Fuel UX's pillbox exposes an event for hooking into its functionality.

Event Description
added This event is fired when a pillbox is added. It will return data in the following format: { text: 'added node text', value: 'added node value' }
removed This event is fired when a pillbox is removed. It will return data in the following format: 
{
	method: 'methodUsedToRemove',
	removedSelector|removedValue|removedText: selector|value|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 1</li>
		<li class="status-success">Item 2</li>
		<li class="status-warning">Item 3</li>
		<li class="status-important">Item 4</li>
		<li class="status-info">Item 5</li>
		<li class="status-success">Item 6</li>
		<li>Item 7</li>
	</ul>
</div>

Preloader (css only)

Example

Below is a working preloader example.

Using preloader

Markup

Include the following markup in all modern browsers to use the preloader control.

<div class="preloader"><i></i><i></i><i></i><i></i></div>

If IE<10 support is needed, use the following markup instead. NOTE: the id must be present and the value passed in the script must match that id exactly.

<div class="preloader" id="myPreloader">
    <i></i><i></i><i></i><i></i>
    <!--[if lt IE 10]>
    <script type="text/javascript">
        (function(e){
            var t,n;t=function(e){n.innerHTML=e;e++;if(e===9)e=1;setTimeout(function(){t(e)},125)};
            e=document.getElementById(e);n="preloader_"+(new Date).getTime();e.className+=" iefix";
            e.innerHTML='<span>0</span><b id="'+n+'"></b>'+e.innerHTML;n=document.getElementById(n);t(1)
        })("myPreloader");
    </script>
    <![endif]-->
</div>

Radio radio.js

Example

Below is a working radio example.

Using radio

Call the radio via javascript (optional):

$('#myRadio').radio()

If you need to deactivate a radio button, the only way to do this currently is through javascript using:

//note that this will deselect ALL radio buttons on the page. Change the query to target a specific group or button
$('.radio-custom i').removeClass('checked');
$('.radio-custom input').prop('checked', false);

Methods

Fuel UX's radio exposes the following methods:

Method Description
checked Checks the radio, unchecking other related radio items
disable Disable the radio
enable Enable the radio
isChecked Returns true or false based on whether the radio is checked
uncheck Unchecks 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>

Additionally, you can add a highlight effect to the radio control by adding the class highlight to its label element.

Scheduler scheduler.js

Example

Below is a working scheduler example.

Start
Timezone
Repeat
every
day(s)
of
End

Using scheduler

Call the scheduler via javascript (optional):

$('#myScheduler').scheduler()

Methods

Fuel UX's scheduler exposes the following methods:

Method Description
disable Disable all scheduler form fields
enable Enable all scheduler form fields
value

Gets the current scheduler form field information or sets it, depending on arguments present. The object returned / used for setting has the following structure:

  • recurrencePattern - string representing the iCal recurrence value
  • startDateTime - string representing the start date & time in ISO 0861 format
  • timeZone - object containing the timeZone name and offset

For getting:
Use $('#myScheduler').scheduler('value'), passing no arguments.

For setting:
Use 'value', passing an object following the structure listed above as a second parameter. Example: 
$('myScheduler').scheduler('value', {
    startDateTime: '2014-03-31T03:23+02:00',
    timeZone: {
        name: 'Namibia Standard Time',
        offset: '+02:00'
    },
    recurrencePattern: 'FREQ=MONTHLY;INTERVAL=6;BYDAY=WE;BYSETPOS=3;UNTIL=20140919;'
});

Events

Fuel UX's scheduler control exposes the following events:

Event Description
changed This event is fired when any form item within the scheduler has changed. Returned arguments are an event object representing the control event, as well as a data object with the following structure:
  • data - useful data object returned from the underlying form item
  • originalEvent - event object representing underlying form item event
  • value - current value of the scheduler, equivalent object to one returned via 'value' method

Markup

You can activate scheduler on your page easily without having to write a single line of javascript. Just set class="scheduler" on a div like the example markup below and the scheduler will activate automatically.

<div class="scheduler">
    <table class="scheduler-table">
        <tr class="scheduler-start">
            <td class="scheduler-label">Start</td>
            <td>
                <div class="datepicker dropdown">
                    <div class="input-append">
                        <div class="dropdown-menu"></div>
                        <input type="text" class="span2" value="" data-toggle="dropdown">
                        <button type="button" class="btn" data-toggle="dropdown"><i class="icon-calendar"></i></button>
                    </div>
                </div>
                <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="#">12:00 AM</a></li>
                        <li><a href="#">12:30 AM</a></li>
                        <li><a href="#">1:00 AM</a></li>
                        <li><a href="#">1:30 AM</a></li>
                        <li><a href="#">2:00 AM</a></li>
                        <li><a href="#">2:30 AM</a></li>
                        <li><a href="#">3:00 AM</a></li>
                        <li><a href="#">3:30 AM</a></li>
                        <li><a href="#">4:00 AM</a></li>
                        <li><a href="#">4:30 AM</a></li>
                        <li><a href="#">5:00 AM</a></li>
                        <li><a href="#">5:30 AM</a></li>
                        <li><a href="#">6:00 AM</a></li>
                        <li><a href="#">6:30 AM</a></li>
                        <li><a href="#">7:00 AM</a></li>
                        <li><a href="#">7:30 AM</a></li>
                        <li><a href="#">8:00 AM</a></li>
                        <li><a href="#">8:30 AM</a></li>
                        <li><a href="#">9:00 AM</a></li>
                        <li><a href="#">9:30 AM</a></li>
                        <li><a href="#">10:00 AM</a></li>
                        <li><a href="#">10:30 AM</a></li>
                        <li><a href="#">11:00 AM</a></li>
                        <li><a href="#">11:30 AM</a></li>
                        <li><a href="#">12:00 PM</a></li>
                        <li><a href="#">12:30 PM</a></li>
                        <li><a href="#">1:00 PM</a></li>
                        <li><a href="#">1:30 PM</a></li>
                        <li><a href="#">2:00 PM</a></li>
                        <li><a href="#">2:30 PM</a></li>
                        <li><a href="#">3:00 PM</a></li>
                        <li><a href="#">3:30 PM</a></li>
                        <li><a href="#">4:00 PM</a></li>
                        <li><a href="#">4:30 PM</a></li>
                        <li><a href="#">5:00 PM</a></li>
                        <li><a href="#">5:30 PM</a></li>
                        <li><a href="#">6:00 PM</a></li>
                        <li><a href="#">6:30 PM</a></li>
                        <li><a href="#">7:00 PM</a></li>
                        <li><a href="#">7:30 PM</a></li>
                        <li><a href="#">8:00 PM</a></li>
                        <li><a href="#">8:30 PM</a></li>
                        <li><a href="#">9:00 PM</a></li>
                        <li><a href="#">9:30 PM</a></li>
                        <li><a href="#">10:00 PM</a></li>
                        <li><a href="#">10:30 PM</a></li>
                        <li><a href="#">11:00 PM</a></li>
                        <li><a href="#">11:30 PM</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr class="scheduler-timezone">
            <td class="scheduler-label">Timezone</td>
            <td>
                <div class="btn-group select">
                    <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">(GMT-06:00) Central Standard Time</span><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li data-name="Central Standard Time (no DST)" data-offset="-06:00"><a href="#">(GMT-06:00) Central Standard Time</a></li>
                        <li data-name="Morocco Standard Time" data-offset="+00:00"><a href="#">(GMT) Casablanca *</a></li>
                        <li data-name="GMT Standard Time" data-offset="+00:00"><a href="#">(GMT) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London *</a></li>
                        <li data-name="Greenwich Standard Time" data-offset="+00:00"><a href="#">(GMT) Monrovia, Reykjavik</a></li>
                        <li data-name="W. Europe Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna *</a></li>
                        <li data-name="Central Europe Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague *</a></li>
                        <li data-name="Romance Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris *</a></li>
                        <li data-name="Central European Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb *</a></li>
                        <li data-name="W. Central Africa Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) West Central Africa</a></li>
                        <li data-name="Jordan Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Amman *</a></li>
                        <li data-name="GTB Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Athens, Bucharest, Istanbul *</a></li>
                        <li data-name="Middle East Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Beirut *</a></li>
                        <li data-name="Egypt Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Cairo *</a></li>
                        <li data-name="South Africa Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Harare, Pretoria</a></li>
                        <li data-name="FLE Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius *</a></li>
                        <li data-name="Israel Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Jerusalem *</a></li>
                        <li data-name="E. Europe Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Minsk *</a></li>
                        <li data-name="Namibia Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Windhoek *</a></li>
                        <li data-name="Arabic Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Baghdad *</a></li>
                        <li data-name="Arab Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Kuwait, Riyadh</a></li>
                        <li data-name="Russian Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Moscow, St. Petersburg, Volgograd *</a></li>
                        <li data-name="E. Africa Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Nairobi</a></li>
                        <li data-name="Georgian Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Tbilisi</a></li>
                        <li data-name="Iran Standard Time" data-offset="+03:30"><a href="#">(GMT+03:30) Tehran *</a></li>
                        <li data-name="Arabian Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Abu Dhabi, Muscat</a></li>
                        <li data-name="Azerbaijan Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Baku *</a></li>
                        <li data-name="Caucasus Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Caucasus Standard Time</a></li>
                        <li data-name="Mauritius Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Port Louis *</a></li>
                        <li data-name="Caucasus Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Yerevan</a></li>
                        <li data-name="Afghanistan Standard Time" data-offset="+04:30"><a href="#">(GMT+04:30) Kabul</a></li>
                        <li data-name="Ekaterinburg Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Ekaterinburg *</a></li>
                        <li data-name="Pakistan Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Islamabad, Karachi *</a></li>
                        <li data-name="West Asia Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Tashkent</a></li>
                        <li data-name="India Standard Time" data-offset="+05:30"><a href="#">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</a></li>
                        <li data-name="Sri Lanka Standard Time" data-offset="+05:30"><a href="#">(GMT+05:30) Sri Jayawardenepura</a></li>
                        <li data-name="Nepal Standard Time" data-offset="+05:45"><a href="#">(GMT+05:45) Kathmandu</a></li>
                        <li data-name="N. Central Asia Standard Time" data-offset="+06:00"><a href="#">(GMT+06:00) Almaty, Novosibirsk *</a></li>
                        <li data-name="Central Asia Standard Time" data-offset="+06:00"><a href="#">(GMT+06:00) Astana, Dhaka</a></li>
                        <li data-name="Myanmar Standard Time" data-offset="+06:00"><a href="#">(GMT+06:30) Yangon (Rangoon)</a></li>
                        <li data-name="SE Asia Standard Time" data-offset="+07:00"><a href="#">(GMT+07:00) Bangkok, Hanoi, Jakarta</a></li>
                        <li data-name="North Asia Standard Time" data-offset="+07:00"><a href="#">(GMT+07:00) Krasnoyarsk *</a></li>
                        <li data-name="China Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</a></li>
                        <li data-name="North Asia East Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Irkutsk, Ulaan Bataar *</a></li>
                        <li data-name="Singapore Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Kuala Lumpur, Singapore</a></li>
                        <li data-name="W. Australia Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Perth *</a></li>
                        <li data-name="Taipei Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Taipei</a></li>
                        <li data-name="Tokyo Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Osaka, Sapporo, Tokyo</a></li>
                        <li data-name="Korea Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Seoul</a></li>
                        <li data-name="Yakutsk Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Yakutsk *</a></li>
                        <li data-name="Cen. Australia Standard Time" data-offset="+09:30"><a href="#">(GMT+09:30) Adelaide *</a></li>
                        <li data-name="AUS Central Standard Time" data-offset="+09:30"><a href="#">(GMT+09:30) Darwin</a></li>
                        <li data-name="E. Australia Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Brisbane</a></li>
                        <li data-name="AUS Eastern Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Canberra, Melbourne, Sydney *</a></li>
                        <li data-name="West Pacific Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Guam, Port Moresby</a></li>
                        <li data-name="Tasmania Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Hobart *</a></li>
                        <li data-name="Vladivostok Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Vladivostok *</a></li>
                        <li data-name="Central Pacific Standard Time" data-offset="+11:00"><a href="#">(GMT+11:00) Magadan, Solomon Is., New Caledonia</a></li>
                        <li data-name="New Zealand Standard Time" data-offset="+12:00"><a href="#">(GMT+12:00) Auckland, Wellington *</a></li>
                        <li data-name="Fiji Standard Time" data-offset="+12:00"><a href="#">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</a></li>
                        <li data-name="Tonga Standard Time" data-offset="+12:00"><a href="#">(GMT+13:00) Nukualofa</a></li>
                        <li data-name="Azores Standard Time" data-offset="+12:00"><a href="#">(GMT-01:00) Azores *</a></li>
                        <li data-name="Cape Verde Standard Time" data-offset="-01:00"><a href="#">(GMT-01:00) Cape Verde Is.</a></li>
                        <li data-name="Mid-Atlantic Standard Time" data-offset="-02:00"><a href="#">(GMT-02:00) Mid-Atlantic *</a></li>
                        <li data-name="E. South America Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Brasilia *</a></li>
                        <li data-name="Argentina Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Buenos Aires *</a></li>
                        <li data-name="SA Western Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Georgetown</a></li>
                        <li data-name="Greenland Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Greenland *</a></li>
                        <li data-name="Montevideo Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Montevideo *</a></li>
                        <li data-name="Newfoundland Standard Time" data-offset="-03:00"><a href="#">(GMT-03:30) Newfoundland *</a></li>
                        <li data-name="Atlantic Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Atlantic Time (Canada) *</a></li>
                        <li data-name="SA Western Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) La Paz</a></li>
                        <li data-name="Central Brazilian Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Manaus *</a></li>
                        <li data-name="Pacific SA Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Santiago *</a></li>
                        <li data-name="Venezuela Standard Time" data-offset="-04:30"><a href="#">(GMT-04:30) Caracas</a></li>
                        <li data-name="SA Pacific Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</a></li>
                        <li data-name="Eastern Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Eastern Time (US & Canada) *</a></li>
                        <li data-name="US Eastern Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Indiana (East)</a></li>
                        <li data-name="Central America Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Central America</a></li>
                        <li data-name="Central Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Central Time (US & Canada) *</a></li>
                        <li data-name="Central Standard Time (Mexico)" data-offset="-06:00"><a href="#">(GMT-06:00) Guadalajara, Mexico City, Monterrey - New *</a></li>
                        <li data-name="Central Standard Time (Mexico)" data-offset="-06:00"><a href="#">(GMT-06:00) Guadalajara, Mexico City, Monterrey - Old</a></li>
                        <li data-name="Canada Central Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Saskatchewan</a></li>
                        <li data-name="US Mountain Standard Time" data-offset="-07:00"><a href="#">(GMT-07:00) Arizona</a></li>
                        <li data-name="Mountain Standard Time (Mexico)" data-offset="-07:00"><a href="#">(GMT-07:00) Chihuahua, La Paz, Mazatlan - New *</a></li>
                        <li data-name="Mountain Standard Time (Mexico)" data-offset="-07:00"><a href="#">(GMT-07:00) Chihuahua, La Paz, Mazatlan - Old</a></li>
                        <li data-name="Mountain Standard Time" data-offset="-07:00"><a href="#">(GMT-07:00) Mountain Time (US & Canada) *</a></li>
                        <li data-name="Pacific Standard Time" data-offset="-08:00"><a href="#">(GMT-08:00) Pacific Time (US & Canada) *</a></li>
                        <li data-name="Pacific Standard Time (Mexico)" data-offset="-08:00"><a href="#">(GMT-08:00) Tijuana, Baja California *</a></li>
                        <li data-name="Alaskan Standard Time" data-offset="-09:00"><a href="#">(GMT-09:00) Alaska *</a></li>
                        <li data-name="Hawaiian Standard Time" data-offset="-10:00"><a href="#">(GMT-10:00) Hawaii</a></li>
                        <li data-name="Samoa Standard Time" data-offset="-11:00"><a href="#">(GMT-11:00) Midway Island, Samoa</a></li>
                        <li data-name="Dateline Standard Time" data-offset="-12:00"><a href="#">(GMT-12:00) International Date Line West</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr class="scheduler-repeat">
            <td class="scheduler-label">Repeat</td>
            <td>
                <div class="repeat-interval">
                    <div class="btn-group select">
                        <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">None (run once)</span><span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li data-value="none"><a href="#">None (run once)</a></li>
                            <li data-value="hourly" data-text="hour(s)"><a href="#">Hourly</a></li>
                            <li data-value="daily" data-text="day(s)"><a href="#">Daily</a></li>
                            <li data-value="weekdays"><a href="#">Weekdays</a></li>
                            <li data-value="weekly" data-text="week(s)"><a href="#">Weekly</a></li>
                            <li data-value="monthly" data-text="month(s)"><a href="#">Monthly</a></li>
                            <li data-value="yearly"><a href="#">Yearly</a></li>
                        </ul>
                    </div>
                    <div class="repeat-interval-panel">
                        <div class="repeat-interval-pretext">every</div>
                        <div class="spinner">
                            <input type="text" value="1" 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>
                        <div class="repeat-interval-text">day(s)</div>
                    </div>
                </div>
                <div class="recurrence-panel scheduler-weekly">
                    <div class="btn-group" data-toggle="buttons-checkbox">
                        <button type="button" class="btn" data-value="SU">Sun</button>
                        <button type="button" class="btn" data-value="MO">Mon</button>
                        <button type="button" class="btn" data-value="TU">Tue</button>
                        <button type="button" class="btn" data-value="WE">Wed</button>
                        <button type="button" class="btn" data-value="TH">Thu</button>
                        <button type="button" class="btn" data-value="FR">Fri</button>
                        <button type="button" class="btn" data-value="SA">Sat</button>
                    </div>
                </div>
                <div class="recurrence-panel scheduler-monthly">
                    <div class="scheduler-monthly-date">
                        <label class="radio radio-custom"><input type="radio" name="scheduler-month" checked="checked" value="1"><i class="radio"></i>on day</label>
                        <div class="btn-group select">
                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">1</span><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li data-value="1"><a href="#">1</a></li>
                                <li data-value="2"><a href="#">2</a></li>
                                <li data-value="3"><a href="#">3</a></li>
                                <li data-value="4"><a href="#">4</a></li>
                                <li data-value="5"><a href="#">5</a></li>
                                <li data-value="6"><a href="#">6</a></li>
                                <li data-value="7"><a href="#">7</a></li>
                                <li data-value="8"><a href="#">8</a></li>
                                <li data-value="9"><a href="#">9</a></li>
                                <li data-value="10"><a href="#">10</a></li>
                                <li data-value="11"><a href="#">11</a></li>
                                <li data-value="12"><a href="#">12</a></li>
                                <li data-value="13"><a href="#">13</a></li>
                                <li data-value="14"><a href="#">14</a></li>
                                <li data-value="15"><a href="#">15</a></li>
                                <li data-value="16"><a href="#">16</a></li>
                                <li data-value="17"><a href="#">17</a></li>
                                <li data-value="18"><a href="#">18</a></li>
                                <li data-value="19"><a href="#">19</a></li>
                                <li data-value="20"><a href="#">20</a></li>
                                <li data-value="21"><a href="#">21</a></li>
                                <li data-value="22"><a href="#">22</a></li>
                                <li data-value="23"><a href="#">23</a></li>
                                <li data-value="24"><a href="#">24</a></li>
                                <li data-value="25"><a href="#">25</a></li>
                                <li data-value="26"><a href="#">26</a></li>
                                <li data-value="27"><a href="#">27</a></li>
                                <li data-value="28"><a href="#">28</a></li>
                                <li data-value="29"><a href="#">29</a></li>
                                <li data-value="30"><a href="#">30</a></li>
                                <li data-value="31"><a href="#">31</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="scheduler-monthly-day">
                        <label class="radio radio-custom"><input type="radio" name="scheduler-month" value="2"><i class="radio"></i>on the</label>
                        <div class="select btn-group month-day-pos">
                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">First</span><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li data-value="1"><a href="#">First</a></li>
                                <li data-value="2"><a href="#">Second</a></li>
                                <li data-value="3"><a href="#">Third</a></li>
                                <li data-value="4"><a href="#">Fourth</a></li>
                                <li data-value="-1"><a href="#">Last</a></li>
                            </ul>
                        </div>
                        <div class="select btn-group month-days">
                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">Sunday</span><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li data-value="SU"><a href="#">Sunday</a></li>
                                <li data-value="MO"><a href="#">Monday</a></li>
                                <li data-value="TU"><a href="#">Tuesday</a></li>
                                <li data-value="WE"><a href="#">Wednesday</a></li>
                                <li data-value="TH"><a href="#">Thursday</a></li>
                                <li data-value="FR"><a href="#">Friday</a></li>
                                <li data-value="SA"><a href="#">Saturday</a></li>
                                <li data-value="SU,MO,TU,WE,TH,FR,SA"><a href="#">Day</a></li>
                                <li data-value="MO,TU,WE,TH,FR"><a href="#">Weekday</a></li>
                                <li data-value="SU,SA"><a href="#">Weekend day</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="recurrence-panel scheduler-yearly">
                    <div class="scheduler-yearly-date">
                        <label class="radio radio-custom"><input type="radio" name="scheduler-year" checked="checked" value="1"><i class="radio"></i>on</label>
                        <div class="btn-group select year-month">
                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">January</span><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li data-value="1"><a href="#">January</a></li>
                                <li data-value="2"><a href="#">February</a></li>
                                <li data-value="3"><a href="#">March</a></li>
                                <li data-value="4"><a href="#">April</a></li>
                                <li data-value="5"><a href="#">May</a></li>
                                <li data-value="6"><a href="#">June</a></li>
                                <li data-value="7"><a href="#">July</a></li>
                                <li data-value="8"><a href="#">August</a></li>
                                <li data-value="9"><a href="#">September</a></li>
                                <li data-value="10"><a href="#">October</a></li>
                                <li data-value="11"><a href="#">November</a></li>
                                <li data-value="12"><a href="#">December</a></li>
                            </ul>
                        </div>
                        <div class="btn-group select year-month-day">
                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">1</span><span class="caret"></span></button>
                            <ul class="dropdown-menu" style="height:200px; overflow:auto;">
                                <li data-value="1"><a href="#">1</a></li>
                                <li data-value="2"><a href="#">2</a></li>
                                <li data-value="3"><a href="#">3</a></li>
                                <li data-value="4"><a href="#">4</a></li>
                                <li data-value="5"><a href="#">5</a></li>
                                <li data-value="6"><a href="#">6</a></li>
                                <li data-value="7"><a href="#">7</a></li>
                                <li data-value="8"><a href="#">8</a></li>
                                <li data-value="9"><a href="#">9</a></li>
                                <li data-value="10"><a href="#">10</a></li>
                                <li data-value="11"><a href="#">11</a></li>
                                <li data-value="12"><a href="#">12</a></li>
                                <li data-value="13"><a href="#">13</a></li>
                                <li data-value="14"><a href="#">14</a></li>
                                <li data-value="15"><a href="#">15</a></li>
                                <li data-value="16"><a href="#">16</a></li>
                                <li data-value="17"><a href="#">17</a></li>
                                <li data-value="18"><a href="#">18</a></li>
                                <li data-value="19"><a href="#">19</a></li>
                                <li data-value="20"><a href="#">20</a></li>
                                <li data-value="21"><a href="#">21</a></li>
                                <li data-value="22"><a href="#">22</a></li>
                                <li data-value="23"><a href="#">23</a></li>
                                <li data-value="24"><a href="#">24</a></li>
                                <li data-value="25"><a href="#">25</a></li>
                                <li data-value="26"><a href="#">26</a></li>
                                <li data-value="27"><a href="#">27</a></li>
                                <li data-value="28"><a href="#">28</a></li>
                                <li data-value="29"><a href="#">29</a></li>
                                <li data-value="30"><a href="#">30</a></li>
                                <li data-value="31"><a href="#">31</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="scheduler-yearly-day">
                        <label class="radio radio-custom"><input type="radio" name="scheduler-year" value="2"><i class="radio"></i>on the</label>
                        <div class="btn-group select year-month-day-pos">
                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">First</span><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li data-value="1"><a href="#">First</a></li>
                                <li data-value="2"><a href="#">Second</a></li>
                                <li data-value="3"><a href="#">Third</a></li>
                                <li data-value="4"><a href="#">Fourth</a></li>
                                <li data-value="5"><a href="#">Last</a></li>
                            </ul>
                        </div>
                        <div class="btn-group select year-month-days">
                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">Sunday</span><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li data-value="SU"><a href="#">Sunday</a></li>
                                <li data-value="MO"><a href="#">Monday</a></li>
                                <li data-value="TU"><a href="#">Tuesday</a></li>
                                <li data-value="WE"><a href="#">Wednesday</a></li>
                                <li data-value="TH"><a href="#">Thursday</a></li>
                                <li data-value="FR"><a href="#">Friday</a></li>
                                <li data-value="SA"><a href="#">Saturday</a></li>
                                <li data-value="SU,MO,TU,WE,TH,FR,SA"><a href="#">Day</a></li>
                                <li data-value="MO,TU,WE,TH,FR"><a href="#">Weekday</a></li>
                                <li data-value="SU,SA"><a href="#">Weekend day</a></li>
                            </ul>
                        </div>
                        <div class="scheduler-yearly-day-text">of</div>
                        <div class="btn-group select year-month">
                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">January</span><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li data-value="1"><a href="#">January</a></li>
                                <li data-value="2"><a href="#">February</a></li>
                                <li data-value="3"><a href="#">March</a></li>
                                <li data-value="4"><a href="#">April</a></li>
                                <li data-value="5"><a href="#">May</a></li>
                                <li data-value="6"><a href="#">June</a></li>
                                <li data-value="7"><a href="#">July</a></li>
                                <li data-value="8"><a href="#">August</a></li>
                                <li data-value="9"><a href="#">September</a></li>
                                <li data-value="10"><a href="#">October</a></li>
                                <li data-value="11"><a href="#">November</a></li>
                                <li data-value="12"><a href="#">December</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="scheduler-end">
            <td class="scheduler-label">End</td>
            <td>
                <div class="btn-group select">
                    <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label">Never</span><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li data-value="never"><a href="#">Never</a></li>
                        <li data-value="after"><a href="#">After</a></li>
                        <li data-value="date"><a href="#">On date</a></li>
                    </ul>
                </div>
                <div class="spinner">
                    <input type="text" value="1" 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>
                    <span>occurrence(s)</span>
                </div>
                <div class="datepicker dropdown">
                    <div class="input-append">
                        <div class="dropdown-menu"></div>
                        <input type="text" class="span2" value="" data-toggle="dropdown">
                        <button type="button" class="btn" data-toggle="dropdown"><i class="icon-calendar"></i></button>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

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
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>

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 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>

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