Overview

Plugin Dependencies

Like Bootstrap, Fuel UX is a collection of jQuery plugins.

  • All plugins depend on jQuery and Bootstrap; these must be loaded before Fuel UX.
  • Version requirements for jQuery/Bootstrap are documented in our bower.json file.
  • Check dependencies if including controls individually (console errors will indicate unmet dependencies). Some controls depend on others.

Class Dependency

In order for Fuel UX to work, you must have the fuelux class on the body of your document (Or at least on a parent container of the fuelux elements on your page)

Control Initialization

With JavaScript

Initialize a component at any time via JavaScript:

// initialized with no options specified (fuelux defaults get used)
$("#myCombobox").combobox();

// initialized with options specified
$('#myCombobox').combobox('selectByIndex', '1');

Destruction and re-initialization

Fuel UX controls cannot be re-initialized. Passing new options to an already initialized control will do effectively nothing. Many controls have convenience methods that allow some internal variables to be changed; otherwise use Javascript to call the control's destroy() method and initialize again with the newly desired markup and options. The destroy() method will attempt to return the pre-initialization markup for the element being destroyed.

With markup: data-attributes

The Fuel UX team recommends the precision and greater number of options provided by initializing manually via JavaScript.

The following Fuel UX controls (those that that do not require a data source) can be initialized on page load using the data-initialize attribute:

Attribute initialization is used in each section's examples when available.

If control is not present onready, it will be 'lazily' initialized when the user interacts with it (such as on mouseover).

Currently there is a bug causing changed events to fire twice for some elements (such as spinbox). The workaround is to disable this data-api, using $.off('fu.data-api')

Requires Manual Initialization

The following Fuel UX controls require a data source and must be initialized manually:

Events

Fuel UX provides custom events for most components' actions. All events are namespaced with 'fu' and their control name (ex. 'changed.fu.checkbox' ). All Fuel UX events are past tense so that they don't trigger standard and Bootstrap events (eg. changed vs. change). Listening for standard and Bootstrap supported events on an internal element is not tested, and therefore not recommended.

Individual or compiled

Include components either altogether or individually, but never do both (include either individual *.js files, or the unminified fuelux.js, or the minified fuelux.min.js).

Accessibility

ARIA support has been added when appropriate, and all inputs have labels even if they are "screen reader only." All controls are keyboard friendly and can be navigated by tabbing to display a keyboard-focus. Controls have been "fat-finger" tested on touch devices. We care; if you have accessibility issues with Fuel UX controls, please create an issue on GitHub.

Checkbox checkbox.js

The checkbox control provides a customized look and feel that can be standardized across all browsers.

Usage

Via JavaScript

Initialize the checkbox control via JavaScript:

$('#myCheckbox').checkbox();

Via data-attributes

  • Checkbox input elements that exist when $.ready() executes that have data-initialize="checkbox" on their parent will be initialized immediately.
  • Checkbox input elements that are created with data-initialize="checkbox" after $.ready() executes will initialize when a mouseover event occurs on them.

Deprecated checkbox markup

Before v3.8.0, the checkbox control could be bound with $().checkbox(); or data-initialize="checkbox" to the div.checkbox or the input elements. This is no longer supported. Please update your markup and JavaScript to be bound to the label only.

Methods

Once your checkbox is initialized, you can execute any of the following methods on it:

.checkbox('check')
Ensures the checkbox is checked.
.checkbox('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup as close to it's pre-initialization state as possible.
.checkbox('disable')
Ensures the checkbox is disabled.
.checkbox('enable')
Ensures the checkbox is enabled.
.checkbox('isChecked')
Returns true or false indicating the checked state of the checkbox.
.checkbox('toggle')
Toggles the checkbox between checked/unchecked states.
.checkbox('uncheck')
Ensures the checkbox is unchecked.

Events

Event Type Description
enabled.fu.checkbox Event fires when checkbox is enabled
disabled.fu.checkbox Event fires when checkbox is disabled
checked.fu.checkbox Event fires when checkbox is checked
unchecked.fu.checkbox Event fires when checkbox is unchecked

All checkbox events are fired on the .checkbox classed element. However, unlike the majority of Fuel UX controls, it is recommended to listen to and check the state of the checkbox control by listening to the native checkbox with the change event and check its status with the presence of the checked attribute. For the sample markup provided, this would be:

$('.checkbox input').on('change', function () {
  console.log( $(this).is(':checked') );
});

Examples

Default (stacked)

<div class="checkbox" id="myCheckbox">
  <label class="checkbox-custom" data-initialize="checkbox">
    <input class="sr-only" type="checkbox" value="">
    <span class="checkbox-label">Custom checkbox unchecked on page load</span>
  </label>
</div>
<div class="checkbox" id="myCheckbox2">
  <label class="checkbox-custom checked" data-initialize="checkbox">
    <input class="sr-only" checked="checked" type="checkbox" value="">
    <span class="checkbox-label">Custom checkbox checked on page load</span>
  </label>
</div>
<div class="checkbox" id="myCheckbox3">
  <label class="checkbox-custom disabled" data-initialize="checkbox">
    <input class="sr-only" disabled="disabled" type="checkbox" value="">
    <span class="checkbox-label">Disabled custom checkbox unchecked on page load</span>
  </label>
</div>
<div class="checkbox" id="myCheckbox4">
  <label class="checkbox-custom checked disabled" data-initialize="checkbox">
    <input class="sr-only" checked="checked" disabled="disabled" type="checkbox" value="">
    <span class="checkbox-label">Disabled custom checkbox checked on page load</span>
  </label>
</div>

Inline checkboxes

Use the .checkbox-inline class on checkboxes for controls that appear on the same line.

<label class="checkbox-custom checkbox-inline" data-initialize="checkbox"  id="myCheckbox5">
  <input class="sr-only" type="checkbox" value="option1"> <span class="checkbox-label">1</span>
</label>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox"  id="myCheckbox6">
  <input class="sr-only" checked="checked" type="checkbox" value="option2"> <span class="checkbox-label">2</span>
</label>
<label class="checkbox-custom checkbox-inline disabled" data-initialize="checkbox"  id="myCheckbox7">
  <input class="sr-only" disabled="disabled" type="checkbox" value="option3"> <span class="checkbox-label">3</span>
</label>

Addon checkboxes

Place any checkbox option within an input group's addon instead of text.

  <div class="input-group">
    <label class="input-group-addon checkbox-custom checkbox-inline" data-initialize="checkbox">
      <input class="sr-only" type="checkbox" value="option1">
    </label>
    <input type="text" class="form-control">
  </div>

Element toggling checkboxes

Use the data-toggle="" to automatically show or hide elements matching the selector within the body upon check or uncheck. This control works with any jQuery selector.

ID toggling container
Class toggling container
Class toggling container
<div class="checkbox" id="myCheckbox8">
  <label class="checkbox-custom" data-initialize="checkbox">
    <input class="sr-only" data-toggle="#checkboxToggleID" type="checkbox" value="option1">
    <span class="checkbox-label">Toggles element with matching ID</span>
  </label>
</div>
<label class="checkbox-custom checkbox-inline" id="myCheckbox9" data-initialize="checkbox">
  <input class="sr-only" data-toggle=".checkboxToggleCLASS" type="checkbox" value="option1">
  <span class="checkbox-label">Toggles elements with matching class.</span>
</label>

<div class="alert bg-info" id="checkboxToggleID">ID toggling container</div>
<div class="alert bg-success checkboxToggleCLASS">Class toggling container</div>
<div class="alert bg-success checkboxToggleCLASS">Class toggling container</div>

Highlighting checkboxes

Use the .highlight class to add a background highlight upon check.

<div class="checkbox highlight" id="myCheckbox10">
  <label class="checkbox-custom highlight" data-initialize="checkbox">
    <input class="sr-only" type="checkbox" value="option1">
    This control highlights a block-level checkbox on check
  </label>
</div>
<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCheckbox11">
  <input class="sr-only" type="checkbox" value="option2">
  This control highlights an inline checkbox on check
</label>

Events

Unlike the majority of Fuel UX controls, it is recommended to listen to and check the state of the checkbox control by listening to the native checkbox with the change event and check its status with the presence of the checked attribute. For the sample markup provided, this would be:

$('.checkbox input').on('change', function () {
  console.log( $(this).is(':checked') );
});

Combobox combobox.js

The combobox control combines an input and a drop-down for easy and flexible data selection. Combobox also offers many methods that allow you to programmatically manipulate it.

Usage

Via JavaScript

Call the combobox control via JavaScript:

$('#myCombobox').combobox();

The combobox also accepts an optional options param during initialization:

$('#myCombobox').combobox({autoResizeMenu: false});

Via data-attributes

Add data-initialize="combobox" to the .combobox element that you wish to initialize on $.ready(). Any combobox that is programmatically generated after the initial page load will initialize when the mousedown event is fired on it if it has data-initialize="combobox".

Markup

A combobox consists of an input group containing a text input with a selectlist appended to it.

<div class="input-group input-append dropdown combobox" data-initialize="combobox" id="myCombobox">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li data-value="1"><a href="#">One</a></li>
      ...
    </ul>
  </div>
</div>

Markup options

The following options are applicable to the li elements of the selectlist. Append the option name to data-, as in data-selected="true".

Name type default description
selected boolean false Indicates element should be selected by default.

Programmatic options

Should be passed in as an object (eg. {name: value}) on intialization. Javascript initialization is required (you can't initialize through data-attributes) if you would like to use this.

Name type default description
autoResizeMenu boolean true Resizes the drop-down menu to the width of the combobox

Methods

Once your combobox is initialized, you can execute any of the following methods on it:

.combobox('destroy')
Remove all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.combobox('disable')
Disable the combobox
.combobox('enable')
Enable the combobox
.combobox('selectedItem')
Returns an object containing a text property with the visible text of the selected item as well as the results of a jQuery .data() call on the selected item (which will map the contents of any data-* attributes into the returned object).
.combobox('selectByIndex')
Set the selected item based on its index in the list (zero-based index). Convenience method for .selectBySelector('li:eq({index})')
$('#myCombobox').combobox('selectByIndex', '1');
.combobox('selectByText')
Set the selected item based on its text value.
$('#myCombobox').combobox('selectByText', 'Four');
.combobox('selectBySelector')
Set the selected item based on a selector.
$('#myCombobox').combobox('selectBySelector', 'li[data-fizz=buzz]');
.combobox('selectByValue')
Set the selected item based on its value. Convenience method for .selectBySelector('data-value={value}') that requires the item to include a .data-value="{value}" attribute
$('#myCombobox').combobox('selectByValue', '1');

Events

Event Type Description
changed.fu.combobox This event fires when the value changes (either by selecting an item from the list or updating the input value directly). Arguments include event, data where data represents the same object structure returned by the selectedItem method.

All combobox event listeners should be attached to the element containing the combobox class; given the following HTML:

<div class="input-group input-append dropdown combobox" data-initialize="combobox" id="myCombobox">..</div>

You would attach your event listener thusly:

$('#myCombobox').on('changed.fu.combobox', function (evt, data) {
  // do something…
});

Examples


Sample Methods
<div class="input-group input-append dropdown combobox" data-initialize="combobox" id="myCombobox">
	<input type="text" class="form-control">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
		<ul class="dropdown-menu dropdown-menu-right">
			<li data-value="1"><a href="#">One</a></li>
			<li data-value="2"><a href="#">Two</a></li>
			<li data-value="3"><a href="#">Three</a></li>
			<li data-value="4" ><a href="#">Four</a></li>
			<li data-value="Item Five" data-foo="bar" data-fizz="buzz"><a href="#">Item Five</a></li>
		</ul>
	</div>
</div>

Alignment

The dropdown-menu-right class on the ul in the example markup causes the drop-down menu to appear directly underneath the dropdown, its right side appearing flush with the right side of the triggering element. If you wish the dropdown menu's left side to align with the left side of the triggering button's left side, exclude the dropdown-menu-right class on the ul.

Datepicker datepicker.js

The datepicker() control provides the user with the ability to choose a date from a highly customizable calender. Datepicker also offers many methods that allow you to programmatically manipulate it.

Usage

Via JavaScript

Initialize the datepicker() via JavaScript (accepting default options):

$('#myDatepicker').datepicker();

Initialize the datepicker() via JavaScript specifying your own options:

$('#myDatepicker').datepicker({
  allowPastDates: true
});

Via data-attributes

  • Datepicker controls that exist when $().ready() executes that have data-initialize="datepicker" on them will be initialized immediately
  • Datepicker controls that are created with data-initialize="datepicker" after $.ready() executes will initialize when a mousedown event occurs on them.

Markup

The datepicker() markup is complex and specific. On initialization, the datepicker() plugin searches inside of the specified element for the components used to build the control. For your convenience, we have written the required markup for you. Writing custom datepicker() markup is not recommended; if you choose to do so, understanding the datepicker.js code will be necessary.

<div class="input-group">
  <input class="form-control" id="myDatepickerInput" type="text"/>
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span class="glyphicon glyphicon-calendar"></span>
      <span class="sr-only">Toggle Calendar</span>
    </button>
    <div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
      <div class="datepicker-calendar">
        <div class="datepicker-calendar-header">
          <button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
          <button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
          <button type="button" class="title">
              <span class="month">
                <span data-month="0">January</span>
                <span data-month="1">February</span>
                <span data-month="2">March</span>
                <span data-month="3">April</span>
                <span data-month="4">May</span>
                <span data-month="5">June</span>
                <span data-month="6">July</span>
                <span data-month="7">August</span>
                <span data-month="8">September</span>
                <span data-month="9">October</span>
                <span data-month="10">November</span>
                <span data-month="11">December</span>
              </span> <span class="year"></span>
          </button>
        </div>
        <table class="datepicker-calendar-days">
          <thead>
          <tr>
            <th>Su</th>
            <th>Mo</th>
            <th>Tu</th>
            <th>We</th>
            <th>Th</th>
            <th>Fr</th>
            <th>Sa</th>
          </tr>
          </thead>
          <tbody></tbody>
        </table>
        <div class="datepicker-calendar-footer">
          <button type="button" class="datepicker-today">Today</button>
        </div>
      </div>
      <div class="datepicker-wheels" aria-hidden="true">
        <div class="datepicker-wheels-month">
          <h2 class="header">Month</h2>
          <ul>
            <li data-month="0"><button type="button">Jan</button></li>
            <li data-month="1"><button type="button">Feb</button></li>
            <li data-month="2"><button type="button">Mar</button></li>
            <li data-month="3"><button type="button">Apr</button></li>
            <li data-month="4"><button type="button">May</button></li>
            <li data-month="5"><button type="button">Jun</button></li>
            <li data-month="6"><button type="button">Jul</button></li>
            <li data-month="7"><button type="button">Aug</button></li>
            <li data-month="8"><button type="button">Sep</button></li>
            <li data-month="9"><button type="button">Oct</button></li>
            <li data-month="10"><button type="button">Nov</button></li>
            <li data-month="11"><button type="button">Dec</button></li>
          </ul>
        </div>
        <div class="datepicker-wheels-year">
          <h2 class="header">Year</h2>
          <ul></ul>
        </div>
        <div class="datepicker-wheels-footer clearfix">
          <button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
          <button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
        </div>
      </div>
    </div>
  </div>
</div>

Options

If initializing through JavaScript, datepicker() allows you to specify options.

Name type default description
allowPastDates boolean false Dictates whether past dates can be input or selected by the user.
date Date object, string, or falsy value ('', null, or false) new Date() Specifies the date that is set upon initialization. If using a string, the format must be a valid date string as supported by the browser or by moment.js if available. Falsy values will result in no date being set upon initialization.
formatDate function or null null Function that is called for formatting a valid date object. Should only be overriden if the datepicker's default formatDate method is not sufficient for your needs. The formatDate function takes a date object as an argument, and should return a string.
momentConfig object {
    culture: 'en',
    format: 'L'
}
Settings used to configure moment.js, if available. Both culture and format attributes must be present for moment features to be utilized. The culture attribute is a string representing the desired datepicker() language. The format attribute is a string representing the desired date format that appears in the input upon date selection. Consult the moment.js docs for more information on supported cultures and formats.
parseDate function or null null Function that is called for parsing date strings input by the user. Should only be overriden if the datepicker's default parseDate method is not sufficient for your needs. The parseDate function takes a date object, string, or falsy value as an argument, and should return either a valid date object representing the successfully parsed value or invalid date object (new Date(NaN))
restricted array [] Specifies dates that are restricted from user input and selection. Uses an array of objects to provide the ranges. Each of the object must have the following format: { from: '03/31/2015', to: '03/31/2016' }, but multiple ranges are supported. The from attribute represents the start date of the restricted range, and the to attribute represents the end date of the range, inclusively. Both attributes can be set to either a valid date string or a date object. -Infinity and Infinity are valid delimiters. View this gist to see how to set the datepicker to only allow dates from the past 365 days.
sameYearOnly boolean false Prevents the user from selecting dates outside the current year if true.
twoDigitYearProtection boolean true Attempts to accommodate for people entering two digit years. Only works if moment is being used to parse date. Otherwise browser parsing is used (which is inconsistent)

Date Parsing and MomentJS

MomentJS parsing is the same format for the API as the output within the input element. Datepicker's default MomentJS locale is regionalistic (American). If you are using MomentJS (and it is recommended that you do), option strings such as those within restricted date ranges expect the format that you provide within momentConfig. Locales and formats are available in the MomentJS documentation. The default locale configuration is momentConfig: { culture: 'en', format: 'L' }

Therefore if you do not specify your own locale and format, restricted will be expecting an array of objects of the'MM/DD/YYYY' format--that is the 'L' MomentJS format. An example of this would be restricted: [{ from: '08/10/2014', to: '08/15/2014' }]

Methods

.datepicker('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.datepicker('disable')
Ensures the component is disabled
.datepicker('enable')
Ensures the component is enabled
.datepicker('getDate')
Returns the selected date (not formatted)
.datepicker('getFormattedDate')
Returns the selected formatted date
.datepicker('setDate')
Sets datepicker() to date provided. Date provided must be a valid Date object or date string.
$('#myDatepicker').datepicker('setDate', new Date());
.datepicker('getCulture')
Returns the culture the datepicker() is currently using. Only available using moment.js with langs
.datepicker('setCulture')
Updates the culture the datepicker() uses. Only available using moment.js with langs
$('#myDatepicker').datepicker('setCulture', 'fr');
.datepicker('getFormat')
Returns the format the datepicker() is currently using. Only available using moment.js with langs
.datepicker('setFormat')
Updates the format the datepicker() uses. Only available using moment.js with langs
$('#myDatepicker').datepicker('setFormat', 'L');

Events

Event Type Description
changed.fu.datepicker This event is fired when the date value has been changed by the user inputing text into the input box. Choosing the date by clicking in the datepicker will not fire this event. Arguments include event, date where date is a JavaScript Date object.
dateClicked.fu.datepicker This event is fired when a day has been selected on the calendar. Arguments include event, date where date is a JavaScript Date object.
inputParsingFailed.fu.datepicker This event is fired when an invalid date is parsed on blur of the datepicker. Arguments include event, date where date is a JavaScript Date object.
inputRestrictedDate.fu.datepicker This event is fired when an restricted date is parsed on blur of the datepicker. Arguments include event, date where date is a JavaScript Date object.

All datepicker() events are fired on the .datepicker classed element.

$('#myDatepicker').on('changed.fu.datepicker', function (evt, date) {
  // do something…
});

To listen for changes on the Date() object, you will need to combine two listeners (as shown below). The reason for this is to keep double events firing when a date is clicked (previously when a date was clicked dateClicked and changed would both fire, which was confusing to many people.

$('#myDatepicker').on('changed.fu.datepicker dateClicked.fu.datepicker', function (evt, date) {
  // do something…
});

To listen for all changes to the datepicker's input value, including setting the date to invalid values, you will need to combine two listeners:

$('#myDatepicker').on('change dateClicked.fu.datepicker', function (evt, date) {
  // do something…
});

Examples

Choose a date from a calendar dropdown, with input parsing and formatting. Works with moment.js for extended functionality.

To support various date formats around the world, datepicker() has an optional dependency on moment.js. Download moment.js (with locales).

Sample Methods

Infinite Scroll infinite-scroll.js

Turn any element into an infinite scrolling region with content that loads on demand.

Usage

Because of its dependency on a dataSource, you must initialize an infinitescroll() component via JavaScript:

$('#myInfiniteScroll').infinitescroll({
    //dataSource is required to append additional content
    dataSource: function(helpers, callback){
        //passing back more content
        callback({ content: '...' });
    }
});

Markup

Simply place class="infinitescroll" on an element of your choosing (preferably a div or span).

<div class="infinitescroll" id="myInfiniteScroll"></div>

Options

You can pass options via JavaScript at initialization.

Name type default description
dataSource function null Called whenever the user scrolls the specified percentage towards the bottom. Arguments passed include a helpers object and callback function. The helpers object contains current percentage and scrollTop values. The callback function appends more content to the element. Pass an object back within the callback function structured as follows: { content: '...' } If you append no additonal content, add the attribute end: true to that object. This code will append '---------' by default and prevent further dataSource calls. Pass a string value for the end attribute to append that string instead of the default.
hybrid boolean OR object false Indicates whether the code will use "hybrid mode" and require the user to click a button before loading additional content. If set to true, the code will use a default "load more" icon within the button. Additionally, you can set the control to an object with the following structure: { label: (string or jQuery obj) } The code will then append the label attribute value within the button instead of the default icon.
percentage number 95 Percentage scrolled to the bottom before calling the dataSource function for more content.

Methods

.infinitescroll('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.infinitescroll('disable');
Ensures the infinite scrolling region is disabled
.infinitescroll('enable');
Ensures the infinite scrolling region is enabled
.infinitescroll('end');
Disables the infinite scrolling region and appends an "end" indicator
$('#myInfiniteScroll').infinitescroll('fetchData');
$('#myInfiniteScroll').infinitescroll('fetchData', {content: 'endicator'});
Parameter description
content Optional. String or jQuery object appended as an "end" indicator. Defaults to '---------'
.infinitescroll('fetchData');
Tells the infinite scrolling region to make a call to its dataSource for additional content.
$('#myInfiniteScroll').infinitescroll('fetchData');
$('#myInfiniteScroll').infinitescroll('fetchData', {force: true});
Parameter description
force Optional. Boolean dictating whether to bypass the button click in hybrid mode and immediately call dataSoruce for more content. Defaults to false

Examples

Turn any element into an infinite scrolling region with content that loads on demand.

Auto-loads content
Loads with button
<div class="fu-example section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">Auto-loads content</div>
          <div class="panel-body">
            <div class="infinitescroll" id="myInfiniteScroll1" style="height: 200px;"></div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">Loads with button</div>
          <div class="panel-body">
            <div class="infinitescroll" id="myInfiniteScroll2" style="height: 200px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Loader loader.js

Animation for visual indication of waiting time.

Usage

Via JavaScript

Call the loader control via JavaScript:

$('#myLoader').loader();

Via data-attributes

To enable the loader control without writing JavaScript, add data-initialize="loader" to the .loader element that you wish to initialize. Such elements that exist when $.ready() executes will be initialized.

Markup

Place class="loader" on a div.

<div class="loader" data-initialize="loader" id="myLoader"></div>

Methods

.loader('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.

Examples

Animation for visual indication of waiting time that can be customized to have many appearances.

<div class="loader" data-initialize="loader"></div>

Pillbox pillbox.js

Pillbox is an interface to manage a dynamic list of tags.

  • Item 1 Remove
  • Item 2 Remove
  • Item 3 Remove
  • Item 4 Remove
  • Item 5 Remove
  • and more...

Usage

A pillbox allows user tag management enabling features such as typeahead and tag editing.

Via JavaScript

Call the Pillbox via JavaScript:

$('#myPillbox').pillbox();

Via data-attributes

The pillbox will automatically instantiate any pillboxes with data-initialize="pillbox". If the control markup is added after page load with data-initialize="pillbox", this control will be initialized on mousedown.

Markup

Add class="pillbox" to a div within a class="fuelux" container.

<div class="pillbox" data-initialize="pillbox" id="myPillbox">
  <ul class="clearfix pill-group">
    <li class="btn btn-default pill" data-value="foo">
      <span>Item Title</span>
      <span class="glyphicon glyphicon-close">
        <span class="sr-only">Remove</span>
      </span>
    </li>
    ....
    <li class="pillbox-input-wrap btn-group">
      <a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
      <input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
      <button type="button" class="dropdown-toggle sr-only">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
    </li>
  </ul>
</div>

Methods

.pillbox('addItems')
Adds Items to the pillbox programmatically.
$('#myPillbox').pillbox('addItems', index, [{ text: '', value: '', attr: {}, data: {} }]);
Parameter Description
index The position where to start inserting pill(s). First pane is at position 1. If omitted, or if -1 is used, the item will be appended to end of the list of pills.
[item1, ..., itemX]
item1, ..., itemX
An array or list of pill objects to be added at the index. See the following table for an overview of the pill object.
Pill object key Type Description
text string Required. Text of pillbox
value string A value stored in the data-value of the pill markup and returned with events
attr object Unless it is a reserved key in this table, child keys will be added as attributes to .pill.
attr.cssClass string CSS classes that will be added to .pill
data object An object of key/value pairs that can be stored in the jQuery data of a pill
.pillbox('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.pillbox('removeItems')
Removes all items from the pillbox.
$('#myPillbox').pillbox('removeItems');
Remove one or more items at a specific position in the pillbox by passing optional parameters. The first parameter is a 1 based index that represent the location of the first element to be removed. The second parameter is the number of items that will be removed.
$('#myPillbox').pillbox('removeItems', index, count);
.pillbox('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.
.pillbox('itemCount')
Returns an integer representing the current number of items.
.pillbox('readonly')
Enables or disables readonly mode for the pillbox.
.pillbox('removeBySelector')
Removes an item based on a jQuery selector.
$('#myPillbox').pillbox('removeBySelector', 'li[data-value=buzz]');
.pillbox('removeByText')
Removes an item with contained text matching that of the provided text string parameter.
$('#myPillbox').pillbox('removeByText', "Item 4");
.pillbox('removeByValue')
Removes an item with value matching that of the provided value string parameter. The item has to have a .data-value="{value}" attribute
$('#myPillbox').pillbox('removeByValue', '1');

Options

Control options below can only be set via JavaScript. Values needed to identify which pill caused an event should be stored in data-attributes within the .pill element, as in data-value="".

Name type default description
acceptKeyCodes array [13, 188] Key codes for keys that trigger an add pill event. Default keys 13 (for enter) and 188 (for comma).
edit boolean false Enables user edited pills.
onAdd function undefined A callback function that executes when a pill is added. function(data,callback){} The data parameter contains an array of the elements being added. The callback parameter is a function that provides asynchronous support for the add functionality. In order for items to be added, the callback must be run and provided an array of items to be added. If you would like to not modify the list of items to be added, provide data as the parameter for the callback function, callback(data).
onRemove function undefined Function that runs when a pill is removed. function(data,callback){} The data parameter contains an array of the elements being removed. The callback parameter is a function that provides asynchronous support for the remove functionality. In order for items to be removed, the callback must be run and provided an array of items to be removed. If you would not like to modify the list of items to be removed, provide data as the parameter for the callback function, callback(data).
onKeyDown function undefined Function that executes when a keydown event is triggered. function(event,data,callback){} The event parameter contains the event object. The data parameter contains an array of the elements being removed. The callback parameter is a function that provides asynchronous support for the typeahead functionality. The callback function must be run in order for the typeahead dropdown with values. Provided the callback with an array of items to display in the typeahead dropdown.
callback({data:[
  {
    text: '',
    value:''
  }]
});
readonly boolean or -1 -1 Specifies whether the control is in readonly mode. If set to true, the pillbox disables user capacity to add / edit pills. A -1 value means it will check for the presence of the data-readonly="readonly" attribute, and if found initialize in readonly mode.
truncate boolean false When in readonly mode, this option will display only the number of pills that fit within the pillbox main container, with a message indicating the number of hidden items. The message content that appears is found inside the element with class pillbox-more.

Events

Event Type Description
clicked.fu.pillbox This event is triggered when a pill is clicked. A jQuery data() object with information about the clicked pill is returned.
added.fu.pillbox This event is triggered when a pill is added. A jQuery data() object with information about the added pill is returned.
removed.fu.pillbox This event is triggered when a pill is removed. A jQuery data() object with information about the removed pill is returned.
edited.fu.pillbox This event is triggered when a pill is edited. A jQuery data() object with information about the edited pill is returned.

All pillbox events are fired on the .pillbox classed element.

$('#myPillbox').on('clicked.fu.pillbox', function (evt, item) {
  // do something
});

Fuel UX Dependencies

Example

Pillbox is an interface to manage a list of tags. Wrap the list of tags (pills) within .fuelux .pillbox

  • Item 1 Remove
  • Item 2 Remove
  • Item 3 Remove
  • Item 4 Remove
  • Item 5 Remove
  • and more...
Sample Methods

Placard placard.js

Adds a pop-up element to inputs/textareas on focus with additional options for explicit accept/cancel actions.

Usage

Via JavaScript

Call the placard control via JavaScript:

$('#myPlacard').placard();

Via data-attributes

The placard will automatically instantiate any placard with data-initialize="placard". If you add the control markup after page load with data-initialize="placard", the control will initialize on focus.

Markup

Use the following markup for a simple input OR textarea OR contenteditable div placard:

<div class="placard" data-initialize="placard" id="myPlacard">
  <div class="placard-popup"></div>
  <input class="form-control placard-field" type="text"/>
</div>
<div class="placard" data-initialize="placard" id="myPlacard2">
  <div class="placard-popup"></div>
  <textarea class="form-control placard-field"></textarea>
</div>
<div class="placard" data-initialize="placard" id="myPlacard3">
  <div class="placard-popup"></div>
  <div class="form-control placard-field" contenteditable="true"></div>
</div>

For header and footer content, use the following input OR textarea OR contenteditable div placards:

<div class="placard" data-initialize="placard" id="myPlacard4">
  <div class="placard-popup"></div>
  <div class="placard-header"><h5>Header</h5></div>
  <input class="form-control placard-field" type="text"/>
  <div class="placard-footer">
    <a class="placard-cancel" href="#">Cancel</a>
    <button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
  </div>
</div>
<div class="placard" data-initialize="placard" id="myPlacard5">
  <div class="placard-popup"></div>
  <div class="placard-header"><h5>Header</h5></div>
  <textarea class="form-control placard-field"></textarea>
  <div class="placard-footer">
    <a class="placard-cancel" href="#">Cancel</a>
    <button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
  </div>
</div>
<div class="placard" data-initialize="placard" id="myPlacard6">
  <div class="placard-popup"></div>
  <div class="placard-header"><h5>Header</h5></div>
  <div class="form-control placard-field" contenteditable="true"></div>
  <div class="placard-footer">
    <a class="placard-cancel" href="#">Cancel</a>
    <button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
  </div>
</div>

Optional data-attributes

  • Add data-ellipsis="true" to the placard element to enable ellipsis on the placard-field. Inputs and regular contenteditable divs use CSS. JavaScript is used to enable ellipsis for textareas and contenteditable divs with data-textarea="true". Use the .('getValue'); and .('setValue'); methods to retrieve or set values for placards with ellipsis enabled to avoid incorrect values. Be warned: performance drops with large fields for the JavaScript solution when ellipsis is enabled.
  • Add data-textarea="true" to the .placard-field element if using a contenteditable div to make that element look and behave more like a textarea.

Glass styling

Add the glass class to the input, textarea, or contenteditable div with class placard-field for a field with minimalistic chrome unless hovered upon or clicked.

Options

You can pass options via JavaScript upon initialization.

Name type default description
explicit boolean false Requires the user explicitly select 'accept' or 'cancel' before the placard is dismissed.
externalClickAction string cancel Specifies what action occurs on an external click (click outside the placard element).
externalClickExceptions array [ ] Array of jQuery selector strings. Anything that matches the selector (searched globally) will not count as an external click. Allows other items to be clicked without dismissing the placard.
onAccept function undefined Call this function when the user indicates they want to 'accept' changes. Passes a helpers object containing previousValue and current value as an argument. The default accept behaviors will not occur, so you can determine what happens next. Useful for validation purposes.
onCancel function undefined Call this function when the user indicates they want to 'cancel' changes. Passes a helpers object containing previousValue and current value as an argument. The default cancel behaviors will not occur, so you can determine what happens next. Useful for validation purposes.
revertOnCancel boolean OR number -1 Dictates whether the placard reverts the entered value when a 'cancel' action occurs. -1 checks for a '.placard-accept' element on initialization, setting this value to true if present. Also accepts true or false values.

Methods

.placard('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup
.placard('disable')
Ensures the placard is disabled, preventing users from manipulating the placard value.
.placard('enable')
Ensures the placard is enabled, allowing users to manipulate the placard value.
.placard('getValue');
Gets the current actual placard value
.placard('hide');
Hides the placard pop-up
.placard('setValue');
Sets the current actual placard value
$('#myPlacard').placard('setValue', 'foxen');
Parameter description
value Required. String or number used to set the placard value.
.placard('show');
Shows the placard pop-up.

Events

Event Type Description
accepted.fu.placard Fires when the user indicates the desire to 'accept' changes. This event fires after the onAccept function, if defined.
cancelled.fu.placard Fires when the user indicates the desire to 'cancel' changes. This event fires after the onCancel function, if defined.
hidden.fu.placard Fires when you dismiss the placard and the popup disappears.
shown.fu.placard Fires when the placard obtains focus and the popup appears.

All placard events are fired on the .placard classed element.

$('#myPlacard').on('accepted.fu.placard', function () {
  // do something…
});

Examples

Adds a pop-up element to inputs/textareas/contenteditable-divs on focus with additional options for explicit accept/cancel actions.

On an input
With .placard-header and .placard-footer option.
Field label
With the .glass option on .placard-field
Field label
Sample Methods

Radio radio.js

The radio control provides a customized look and feel that can be standardized across all browsers.

Usage

Via JavaScript

Call the radio control via JavaScript on the label. The div.radio container is only present for block level stying:

$('#myRadioLabel').radio();

Via data-attributes

The radio will automatically instantiate any radios with data-initialize="radio" located on the <label>. If you add the control markup after page load with data-initialize="radio", this control initializes on mouseover.

Deprecated radio button markup

Before v3.7.0, the radio control could be bound with $().radio(); or data-initialize="radio" to the div.radio or the input elements. This is no longer supported. Please update your markup and JavaScript to be bound to the label only.

Methods

.radio('check')
Ensures the radio is checked
.radio('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.radio('disable')
Ensures the radio is disabled
.radio('enable')
Ensures the radio is enabled
.radio('isChecked')
Returns true or false indicating the radio's checked state
.radio('uncheck')
Ensures the radio is not checked

Events

Event Type Description
enabled.fu.radio Event fires when radio is enabled
disabled.fu.radio Event fires when radio is disabled
checked.fu.radio Event fires when radio is checked
unchecked.fu.radio Event fires when radio is unchecked
changed.fu.radio Event fires when state of radio is changed

Examples

Customized look and feel for radio button element

Default (stacked)

<div class="radio">
  <label class="radio-custom" data-initialize="radio" id="myCustomRadioLabel">
    <input class="sr-only" name="radioEx1" type="radio" value="option1">
    Browser-independent radio unchecked on page load
  </label>
</div>

<div class="radio checked">
  <label class="radio-custom" data-initialize="radio" id="myCustomRadioLabel2">
    <input class="sr-only" checked="checked" name="radioEx1" type="radio" value="option2">
    Browser-independent radio checked on page load
  </label>
</div>

<div class="radio checked">
  <label class="radio-custom disabled" data-initialize="radio" id="myCustomRadioLabel3">
    <input class="sr-only" checked="checked" disabled="disabled" name="radio1b" type="radio">
    <span class="radio-label">Disabled custom appearance radio selected on page load</span>
  </label>
</div>

<div class="radio">
  <label class="radio-custom disabled" data-initialize="radio" id="myCustomRadioLabel4">
    <input class="sr-only" disabled="disabled" name="radioEx2" type="radio" value="option3">
    Disabled browser-independent radio unchecked on page load
  </label>
</div>

Inline radio

Use the .radio-inline classes on radios for controls that appear on the same line.

<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomRadioLabel5">
  <input class="sr-only" name="radioEx2" type="radio" value="option1"> 1
</label>
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomRadioLabel6">
  <input class="sr-only" checked="checked" name="radioEx2" type="radio" value="option2"> 2
</label>
<label class="radio-custom radio-inline disabled" data-initialize="radio" id="myCustomRadioLabel7">
  <input class="sr-only" disabled="disabled" name="radioEx2" type="radio" value="option3"> 3
</label>

Addon radios

Place any radio option within an input group's addon instead of text.

  <div class="input-group">
    <label class="input-group-addon radio-custom radio-inline" data-initialize="radio">
      <input class="sr-only" type="radio" value="option1">
    </label>
    <input type="text" class="form-control">
  </div>

Element toggling radios

Use the data-toggle="" to automatically show or hide elements matching the selector within the body upon check or uncheck. This function works with any jQuery selector.

ID-toggling container
Class-toggling container
Class-toggling container
<div class="radio">
  <label class="radio-custom" data-initialize="radio" id="myCustomRadioLabel8">
    <input class="sr-only" data-toggle="#radioToggleID" name="radioEx3" type="radio" value="option1">
    Toggles element with matching ID
  </label>
</div>
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomRadioLabel9">
  <input class="sr-only" data-toggle=".radioToggleCLASS" name="radioEx3" type="radio" value="option1">
  Toggles elements with matching class
</label>


<div class="alert bg-info" id="radioToggleID">ID-toggling container</div>
<div class="alert bg-success radioToggleCLASS">Class-toggling container</div>
<div class="alert bg-success radioToggleCLASS">Class-toggling container</div>

Highlighting radios

Use the .highlight class to add a background highlight upon check.

<div class="radio highlight" id="myCustomRadioLabel10">
  <label class="radio-custom highlight" data-initialize="radio">
    <input class="sr-only" name="radioEx4" type="radio" value="option1">
    This block-level radio will highlight on check.
  </label>
</div>
<label class="radio-custom radio-inline highlight" data-initialize="radio" id="myCustomRadio11">
  <input class="sr-only" name="radioEx4" type="radio" value="option2">
  This inline radio will highlight on check.
</label>
  

Repeater repeater.js

Data viewer with paging, sorting, and searching. Must use at least one extension to display items. Fuel UX bundles a list view extension and thumbnail view extension, but you can build your own. The following example uses the list and thumbnail extensions.

Usage

Because of its reliance upon a dataSource, you must initialize a repeater() via JavaScript:

  dataSource = function(options, callback){
    //...
  };

  $('#myRepeater').repeater({dataSource: dataSource});

Markup

Use the following markup to setup the repeater:

  <div class="repeater" id="myRepeater">
    <div class="repeater-header">
      <div class="repeater-header-left">
        <span class="repeater-title">Awesome Repeater</span>
        <div class="repeater-search">
          <div class="search input-group">
            <input type="search" class="form-control" placeholder="Search"/>
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
                <span class="sr-only">Search</span>
              </button>
            </span>
          </div>
        </div>
      </div>
      <div class="repeater-header-right">
        <div class="btn-group selectlist repeater-filters" data-resize="auto">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="selected-label">&nbsp;</span>
            <span class="caret"></span>
            <span class="sr-only">Toggle Filters</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li data-value="all" data-selected="true"><a href="#">all</a></li>
            <li data-value="some"><a href="#">some</a></li>
            <li data-value="others"><a href="#">others</a></li>
          </ul>
          <input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
        </div>
        <div class="btn-group repeater-views" data-toggle="buttons">
          <label class="btn btn-default active">
            <input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
          </label>
          <label class="btn btn-default">
            <input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
          </label>
        </div>
      </div>
    </div>
    <div class="repeater-viewport">
      <div class="repeater-canvas"></div>
      <div class="loader repeater-loader"></div>
    </div>
    <div class="repeater-footer">
      <div class="repeater-footer-left">
        <div class="repeater-itemization">
          <span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
          <div class="btn-group selectlist" data-resize="auto">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="selected-label">&nbsp;</span>
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li data-value="5"><a href="#">5</a></li>
              <li data-value="10" data-selected="true"><a href="#">10</a></li>
              <li data-value="20"><a href="#">20</a></li>
              <li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
              <li data-value="100"><a href="#">100</a></li>
            </ul>
            <input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
          </div>
          <span>Per Page</span>
        </div>
      </div>
      <div class="repeater-footer-right">
        <div class="repeater-pagination">
          <button type="button" class="btn btn-default btn-sm repeater-prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous Page</span>
          </button>
          <label class="page-label" id="myPageLabel">Page</label>
          <div class="repeater-primaryPaging active">
            <div class="input-group input-append dropdown combobox">
              <input type="text" class="form-control" aria-labelledby="myPageLabel">
              <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  <span class="caret"></span>
                  <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right"></ul>
              </div>
            </div>
          </div>
          <input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
          <span>of <span class="repeater-pages"></span></span>
          <button type="button" class="btn btn-default btn-sm repeater-next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next Page</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  

Optional data attributes

The repeater must be initialized via JavaScript, however it also accepts some optional data-attributes.

data-staticheight="true"
enables staticHeight on initialization.

Options

Pass options via JavaScript upon initialization.

Name type default description
dataSource function empty function Use this function to provide paging information and data for the repeater. Call this function prior to rendering the current view, passing a options object and callback function. Run the callback function once you gather the appropriate information to complete the rendering. Review more details on using dataSource below.
dataSourceOptions object null Use this object to pass a parameter to a custom-defined dataSource function mentioned above. Then, use those values to customize the data that gets passed back into the repeater from your API. Suggested uses include sorting, filtering, and search values. This object is also valuable in custom renders when used as an object within the render methods's options parameter. Did you lose your custom dataSourceOptions when you changed the page within repeater? If you did, set preserveDataSourceOptions to true in order to keep them.
defaultView string or number -1 Specifies the initial view the repeater will render (usually a string value equivalent to the desired repeater view extension). If set to -1, the repeater will check the .repeater-views button group for an .active class, using its input value as the defaultView setting.
dropPagingCap number 10 Specifies the number of items allowed within the .repeater-primaryPaging drop-down menu. If the number of pages exceeds this amount, the code will use the .repeater-secondaryPaging input.
preserveDataSourceOptions boolean false Sets whether defineddataSourceOptions get preserved or reset when the dataSource is called. For example, the dataSource function is called when navigating to another page. If you would like to keep previously defined settings such as search or filtering, then set to true. Setting to true is generally recommended when using dataSourceOptions to manipulate your data.
staticHeight boolean or number -1
  • If true; height of CSS styles applied to repeater element will be used
  • If a positive number; that value will be used as height in pixels
  • If -1; value of data-staticheight attribute will be used if present
  • If false; height will be fluid, not static. Meaning reapeater contents will not be scrollable, and container must be big enough to show everything. Similar to CSS overflow: hidden.
views object null Can be optionally used to configure multiple views, including those of the same view type (2 'list' views, 2 'thumbnail' views, etc) To utilize, first set the input values within .repeater-views to their appropriate view names. For multiple views of the same type, use the . operator as a separator, following the syntax [viewType].[viewName] (Ex: "list.view1") Then, within the views option object, add these view names as attributes. Each attribute can be an object, with it's own view plugin / repeater configuration. This configuration will then be honored by the repeater per view. Example:
$('#myRepeater').repeater({
  views: {
    'list.view1': {
      dropPagingCap: 20,
      list_infiniteScroll: true,
      list_selectable: 'multi'
    },
    'list.view2': {
      dataSource: function(options, callback){ ... },
      dropPagingCap: 30,
      list_selectable: true
    }
  },
  ...
});

Methods

.repeater('clear');
Clears the repeater of current data. Accepts an optional options object.
$('#myRepeater').repeater('clear');
$('#myRepeater').repeater('clear', {preserve: true});
Attribute type description
clearInfinite boolean optional -- if true, preserve must also be set to true to have an effect. If infinite scrolling is enabled, setting to true will clear all non data-preserved elements. Defaults to false.
preserve boolean optional If true, only items that don't have the data-preserve attribute will be removed. Otherwise, all items will be removed. Defaults to false.
.repeater('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.repeater('infiniteScrolling');
Enables or disabled infinite scrolling within the repeater. Used primarily by view extensions. Accepts an optional options object.
$('#myRepeater').repeater('infiniteScrolling');
$('#myRepeater').repeater('infinitescrolling', true, {hybrid: true, percentage: 60});
Argument type description
enable boolean If set to true, this function will enable infinite scrolling. Defaults to false.
options object Optional. Specifies the desired infinite scrolling settings. View the infinite scroll documentation for more details on available features. Your code will ignore the dataSource option on this object in favor of the dataSource on the repeater.
.repeater('render');
Calls the dataSource and renders the repeater data. Accepts an optional options object.
$('#myRepeater').repeater('render');
$('#myRepeater').repeater('render', {'changeView': 'widescreen', 'preserve': true});
Attribute type description
changeView string If set to a string value, this attribute will change the current repeater view to be rendered. Defaults to undefined.
clearInfinite boolean Passed to the clear method - see above for description.
pageIncrement number or null Use a number value to determine the amount by which the current page will increment or decrement. If null the current page will reset to 0.
preserve boolean Passed to the clear method - see above for description.
.repeater('resize');
Resizes the repeater based on staticHeight presence and value

Data Source

Call the dataSource function prior to rendering data for the current view. Receives an options object and callback function as arguments. The options object provides context for which data should return. Please review the dataSourceOptions option if the dataSource needs to be manipulated (such as for a custom render, to search, to sort, or to filter). Use the callback to continue onward with rendering.

The options object can vary in content depending on the view extension used. Many objects share these common attributes in options object format:

Attribute type description
filter object Provides context for the selected .repeater-filters drop-down item representing data filtering. The object contains a text attribute for the displayed text and a value attribute for the value of the selected item.
pageIndex number Represents the current page of data. pageIndex is a zero-based index into an array and may need to be manipulated before requesting more data, if the server request is a one-based index.
pageSize number Provides context for the selected .repeater-itemization dropdown item value, representing the number of data items to be displayed
search string Provides context for the entered .repeater-search search box, representing the desired user search value. Only present if the object includes a search value.
view string Provides context for the selected .repeater-views button group item, representing the current view. Used to determine view-specific return data.

The dataSource's callback function should run after gathering the desired data for rendering. This function requires the code to pass a data object as an argument. Contents of the object will vary depending on the view extension used. The attributes below include common expected attributes:

Attribute type description
count number Provides the number of returned in the data to the repeater. Use this value as the text value for the .repeater-count element.
end number Provides the end index of current displayed data items to the repeater. Use this value as the text value for the .repeater-end element.
page number Sets the current repeater page. Also shown in the .repeater-primaryPaging or .repeater-secondaryPaging element. page is 0-based.
pages number Provides the number of available pages of data to the repeater. Use this value as the text value for the .repeater-pages element. pages is 1-based.
start number Provides the starting index of current displayed data items to the repeater. Use this value as the text value for the .repeater-start element.

The default values are { count: 0, end: 0, items: [], page: 0, pages: 1, start: 0 }.

Events

Event Type Description
disabled.fu.repeater Fires whenever the repeater is disabled.
enabled.fu.repeater Fires whenever the repeater is enabled.
filtered.fu.repeater Fires whenever the repeater is filtered via the dropdown. Passes a filter value argument.
nextClicked.fu.repeater Fires whenever the repeater next page button is clicked.
pageChanged.fu.repeater Fires whenever the repeater page is changed via primary or secondary paging. NOTE: if the paged via primary paging, an array is passed back as a parameter, containing the value and data, respectively. If secondary paging causes the change, only a value is passed as an argument.
pageSizeChanged.fu.repeater Fires whenever the repeater page size is changed. Passes a value argument.
previousClicked.fu.repeater Fires whenever the repeater previous page button is clicked.
rendered.fu.repeater Fires whenever the repeater has rendered data returned from the dataSource. Passses an object containing data, options, and renderOptions.
resized.fu.repeater Fires whenever the repeater is resized.
searchChanged.fu.repeater Fires whenever the repeater search control is used.
viewChanged.fu.repeater Fires whenever the repeater view is switched. Passes the currentView as an argument.

All repeater events are fired on the .repeater classed element.

  $('#myRepeater').on('resized.fu.repeater', function () {
  // do something…
  });
  

Fuel UX Dependencies

Repeater Extensions

The repeater uses a view framework that allows for extensions to represent data in different ways. By default, Fuel UX comes with two repeater view extensions (list and thumbnail). Each extension provides additional options and requires different return data from the dataSource to render appropriately. For information on using extensions, visit the extensions page. You can also learn how to write your own repeater extension.

Examples

Data viewer with paging, sorting, and searching using list and thumbnail extensions. Can be extended further for various other renderings.

Live examples:

Further Reading

  <div class="fu-example section">
    <div class="repeater" data-staticheight="400" id="myRepeater">
      <div class="repeater-header">
        <div class="repeater-header-left">
          <span class="repeater-title">Awesome Repeater</span>
          <div class="repeater-search">
            <div class="search input-group">
              <input type="search" class="form-control" placeholder="Search"/>
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                  <span class="glyphicon glyphicon-search"></span>
                  <span class="sr-only">Search</span>
                </button>
              </span>
            </div>
          </div>
        </div>
        <div class="repeater-header-right">
          <div class="btn-group selectlist repeater-filters" data-resize="auto">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="selected-label">&nbsp;</span>
              <span class="caret"></span>
              <span class="sr-only">Toggle Filters</span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li data-value="all" data-selected="true"><a href="#">all</a></li>
              <li data-value="bug"><a href="#">bug</a></li>
              <li data-value="dark"><a href="#">dark</a></li>
              <li data-value="dragon"><a href="#">dragon</a></li>
              <li data-value="electric"><a href="#">electric</a></li>
              <li data-value="fairy"><a href="#">fairy</a></li>
              <li data-value="fighting"><a href="#">fighting</a></li>
              <li data-value="fire"><a href="#">fire</a></li>
              <li data-value="flying"><a href="#">flying</a></li>
              <li data-value="ghost"><a href="#">ghost</a></li>
              <li data-value="grass"><a href="#">grass</a></li>
              <li data-value="ground"><a href="#">ground</a></li>
              <li data-value="ice"><a href="#">ice</a></li>
              <li data-value="normal"><a href="#">normal</a></li>
              <li data-value="poison"><a href="#">poison</a></li>
              <li data-value="psychic"><a href="#">psychic</a></li>
              <li data-value="rock"><a href="#">rock</a></li>
              <li data-value="steel"><a href="#">steel</a></li>
              <li data-value="water"><a href="#">water</a></li>
            </ul>
            <input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
          </div>
          <div class="btn-group repeater-views" data-toggle="buttons">
            <label class="btn btn-default active">
              <input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
            </label>
            <label class="btn btn-default">
              <input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
            </label>
          </div>
        </div>
      </div>
      <div class="repeater-viewport">
        <div class="repeater-canvas"></div>
        <div class="loader repeater-loader"></div>
      </div>
      <div class="repeater-footer">
        <div class="repeater-footer-left">
          <div class="repeater-itemization">
            <span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
            <div class="btn-group selectlist" data-resize="auto">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="selected-label">&nbsp;</span>
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li data-value="5"><a href="#">5</a></li>
                <li data-value="10" data-selected="true"><a href="#">10</a></li>
                <li data-value="20"><a href="#">20</a></li>
                <li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
                <li data-value="100"><a href="#">100</a></li>
              </ul>
              <input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
            </div>
            <span>Per Page</span>
          </div>
        </div>
        <div class="repeater-footer-right">
          <div class="repeater-pagination">
            <button type="button" class="btn btn-default btn-sm repeater-prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
              <span class="sr-only">Previous Page</span>
            </button>
            <label class="page-label" id="myPageLabel">Page</label>
            <div class="repeater-primaryPaging active">
              <div class="input-group input-append dropdown combobox">
                <input type="text" class="form-control" aria-labelledby="myPageLabel">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right"></ul>
                </div>
              </div>
            </div>
            <input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
            <span>of <span class="repeater-pages"></span></span>
            <button type="button" class="btn btn-default btn-sm repeater-next">
              <span class="glyphicon glyphicon-chevron-right"></span>
              <span class="sr-only">Next Page</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  

Scheduler scheduler.js

Control which allows users to choose startDateTime, timeZone, and iCal-compatible recurrencePattern. As of 3.11.5, when the user changes the start date, the end date will attempt to intelligently re-set itself if the start date is set to later than the end date.

Usage

Via JavaScript

Instantiate the scheduler control via JavaScript:

$('#myScheduler').scheduler();

The scheduler also accepts optional options params during initialization, one for each start and end date:

$('#myScheduler').scheduler({
    startDateOptions: {
      allowPastDates: true
    },
    endDateOptions: {
      sameYearOnly: true
    }
  });

Via data-attributes

Add data-initialize="scheduler" to the .scheduler element that you wish to initialize on $.ready(). Any scheduler that is programmatically generated after the initial page load will initialize when the mousedown event is fired on it if it has data-initialize="scheduler".

Markup

Place all of the following markup within any "fuelux" classed container (typically the html element). Scheduler consists of a specific arrangement of Datepickers, Comboboxes, Radios, Selectlists, and Spinboxes.

<div class="form-horizontal container-fluid scheduler" data-initialize="scheduler" role="form" id="myScheduler">
    <div class="row start-datetime">
    <label class="col-sm-2 control-label scheduler-label" for="myStartDate">Start Date</label>
    <div class="col-sm-10">
        <div class="row no-margin">
            <div class="col-xs-4 col-sm-4 form-group">
                <div class="datepicker start-date">
                    <div class="input-group">
                        <input class="form-control" id="myStartDate" type="text"/>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-calendar"></span>
                                <span class="sr-only">Toggle Calendar</span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
                                <div class="datepicker-calendar">
                                    <div class="datepicker-calendar-header">
                                        <button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
                                        <button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
                                        <button type="button" class="title">
                                                <span class="month">
                                                    <span data-month="0">January</span>
                                                    <span data-month="1">February</span>
                                                    <span data-month="2">March</span>
                                                    <span data-month="3">April</span>
                                                    <span data-month="4">May</span>
                                                    <span data-month="5">June</span>
                                                    <span data-month="6">July</span>
                                                    <span data-month="7">August</span>
                                                    <span data-month="8">September</span>
                                                    <span data-month="9">October</span>
                                                    <span data-month="10">November</span>
                                                    <span data-month="11">December</span>
                                                </span> <span class="year"></span>
                                        </button>
                                    </div>
                                    <table class="datepicker-calendar-days">
                                        <thead>
                                        <tr>
                                            <th>Su</th>
                                            <th>Mo</th>
                                            <th>Tu</th>
                                            <th>We</th>
                                            <th>Th</th>
                                            <th>Fr</th>
                                            <th>Sa</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    <div class="datepicker-calendar-footer">
                                        <button type="button" class="datepicker-today">Today</button>
                                    </div>
                                </div>
                                <div class="datepicker-wheels" aria-hidden="true">
                                    <div class="datepicker-wheels-month">
                                        <h2 class="header">Month</h2>
                                        <ul>
                                            <li data-month="0"><button type="button">Jan</button></li>
                                            <li data-month="1"><button type="button">Feb</button></li>
                                            <li data-month="2"><button type="button">Mar</button></li>
                                            <li data-month="3"><button type="button">Apr</button></li>
                                            <li data-month="4"><button type="button">May</button></li>
                                            <li data-month="5"><button type="button">Jun</button></li>
                                            <li data-month="6"><button type="button">Jul</button></li>
                                            <li data-month="7"><button type="button">Aug</button></li>
                                            <li data-month="8"><button type="button">Sep</button></li>
                                            <li data-month="9"><button type="button">Oct</button></li>
                                            <li data-month="10"><button type="button">Nov</button></li>
                                            <li data-month="11"><button type="button">Dec</button></li>
                                        </ul>
                                    </div>
                                    <div class="datepicker-wheels-year">
                                        <h2 class="header">Year</h2>
                                        <ul></ul>
                                    </div>
                                    <div class="datepicker-wheels-footer clearfix">
                                        <button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
                                        <button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4 form-group">
                <label class="sr-only" for="MyStartTime">Start Time</label>
                <div class="input-group combobox start-time">
                    <input id="MyStartTime" type="text" class="form-control" />
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li data-value="12:00 AM"><a href="#">12:00 AM</a></li>
                            <li data-value="12:30 AM"><a href="#">12:30 AM</a></li>
                            <li data-value="1:00 AM"><a href="#">1:00 AM</a></li>
                            <li data-value="1:30 AM"><a href="#">1:30 AM</a></li>
                            <li data-value="2:00 AM"><a href="#">2:00 AM</a></li>
                            <li data-value="2:30 AM"><a href="#">2:30 AM</a></li>
                            <li data-value="3:00 AM"><a href="#">3:00 AM</a></li>
                            <li data-value="3:30 AM"><a href="#">3:30 AM</a></li>
                            <li data-value="4:00 AM"><a href="#">4:00 AM</a></li>
                            <li data-value="4:30 AM"><a href="#">4:30 AM</a></li>
                            <li data-value="5:00 AM"><a href="#">5:00 AM</a></li>
                            <li data-value="5:30 AM"><a href="#">5:30 AM</a></li>
                            <li data-value="6:00 AM"><a href="#">6:00 AM</a></li>
                            <li data-value="6:30 AM"><a href="#">6:30 AM</a></li>
                            <li data-value="7:00 AM"><a href="#">7:00 AM</a></li>
                            <li data-value="7:30 AM"><a href="#">7:30 AM</a></li>
                            <li data-value="8:00 AM"><a href="#">8:00 AM</a></li>
                            <li data-value="8:30 AM"><a href="#">8:30 AM</a></li>
                            <li data-value="9:00 AM"><a href="#">9:00 AM</a></li>
                            <li data-value="9:30 AM"><a href="#">9:30 AM</a></li>
                            <li data-value="10:00 AM"><a href="#">10:00 AM</a></li>
                            <li data-value="10:30 AM"><a href="#">10:30 AM</a></li>
                            <li data-value="11:00 AM"><a href="#">11:00 AM</a></li>
                            <li data-value="11:30 AM"><a href="#">11:30 AM</a></li>
                            <li data-value="12:00 PM"><a href="#">12:00 PM</a></li>
                            <li data-value="12:30 PM"><a href="#">12:30 PM</a></li>
                            <li data-value="1:00 PM"><a href="#">1:00 PM</a></li>
                            <li data-value="1:30 PM"><a href="#">1:30 PM</a></li>
                            <li data-value="2:00 PM"><a href="#">2:00 PM</a></li>
                            <li data-value="2:30 PM"><a href="#">2:30 PM</a></li>
                            <li data-value="3:00 PM"><a href="#">3:00 PM</a></li>
                            <li data-value="3:30 PM"><a href="#">3:30 PM</a></li>
                            <li data-value="4:00 PM"><a href="#">4:00 PM</a></li>
                            <li data-value="4:30 PM"><a href="#">4:30 PM</a></li>
                            <li data-value="5:00 PM"><a href="#">5:00 PM</a></li>
                            <li data-value="5:30 PM"><a href="#">5:30 PM</a></li>
                            <li data-value="6:00 PM"><a href="#">6:00 PM</a></li>
                            <li data-value="6:30 PM"><a href="#">6:30 PM</a></li>
                            <li data-value="7:00 PM"><a href="#">7:00 PM</a></li>
                            <li data-value="7:30 PM"><a href="#">7:30 PM</a></li>
                            <li data-value="8:00 PM"><a href="#">8:00 PM</a></li>
                            <li data-value="8:30 PM"><a href="#">8:30 PM</a></li>
                            <li data-value="9:00 PM"><a href="#">9:00 PM</a></li>
                            <li data-value="9:30 PM"><a href="#">9:30 PM</a></li>
                            <li data-value="10:00 PM"><a href="#">10:00 PM</a></li>
                            <li data-value="10:30 PM"><a href="#">10:30 PM</a></li>
                            <li data-value="11:00 PM"><a href="#">11:00 PM</a></li>
                            <li data-value="11:30 PM"><a href="#">11:30 PM</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row timezone-container">
    <label class="col-sm-2 control-label scheduler-label">Timezone</label>
    <div class="col-xs-10 col-sm-10 col-md-10">
        <div data-resize="auto" class="btn-group selectlist timezone">
            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                <span class="selected-label">(GMT-06:00) Central Standard Time</span>
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="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 &amp; 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 &amp; 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 &amp; Canada) *</a></li>
                <li data-name="Pacific Standard Time" data-offset="-08:00"><a href="#">(GMT-08:00) Pacific Time (US &amp; 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>
            <input type="text" aria-hidden="true" readonly="readonly" name="TimeZoneSelectlist" class="hidden hidden-field">
        </div>
    </div>
</div>

<div class="row repeat-container">
    <label class="col-sm-2 control-label scheduler-label">Repeat</label>
    <div class="col-sm-10">

        <div class="form-group repeat-interval">
            <div data-resize="auto" class="btn-group selectlist pull-left repeat-options">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                    <span class="selected-label">None (run once)</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li data-value="none"><a href="#">None (run once)</a></li>
                    <li data-value="secondly" data-text="second(s)"><a href="#">Per Second</a>
                    <li data-value="minutely" data-text="minute(s)"><a href="#">Per Minute</a>
                    <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>
                <input type="text" aria-hidden="true" readonly="readonly" name="intervalSelectlist" class="hidden hidden-field">
            </div>

            <div class="repeat-panel repeat-every-panel repeat-hourly repeat-daily repeat-weekly hide" aria-hidden="true">
                <label id="MySchedulerEveryLabel" class="inline-form-text repeat-every-pretext">every</label>

                <div class="spinbox digits-3 repeat-every">
                    <input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MySchedulerEveryLabel">
                    <div class="spinbox-buttons btn-group btn-group-vertical">
                        <button type="button" class="btn btn-default spinbox-up btn-xs">
                            <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
                        </button>
                        <button type="button" class="btn btn-default spinbox-down btn-xs">
                            <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
                        </button>
                    </div>
                </div>

                <div class="inline-form-text repeat-every-text"></div>
            </div>
        </div>

        <div class="form-group repeat-panel repeat-weekly repeat-days-of-the-week hide" aria-hidden="true">
            <fieldset class="btn-group" data-toggle="buttons">
                <label class="btn btn-default"><input type="checkbox" data-value="SU">Sun</label>
                <label class="btn btn-default"><input type="checkbox" data-value="MO">Mon</label>
                <label class="btn btn-default"><input type="checkbox" data-value="TU">Tue</label>
                <label class="btn btn-default"><input type="checkbox" data-value="WE"> Wed</label>
                <label class="btn btn-default"><input type="checkbox" data-value="TH"> Thu</label>
                <label class="btn btn-default"><input type="checkbox" data-value="FR"> Fri</label>
                <label class="btn btn-default"><input type="checkbox" data-value="SA"> Sat</label>
            </fieldset>
        </div>

        <div class="repeat-panel repeat-monthly hide" aria-hidden="true">
            <div class="form-group repeat-monthly-date">
                <div class="radio pull-left">
                    <label class="radio-custom">
                        <input class="sr-only" type="radio" checked="checked" name="repeat-monthly" value="bymonthday">
                        <span class="radio-label">on day</span>
                    </label>
                </div>

                <div data-resize="auto" class="btn-group selectlist pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">1</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>
            </div>

            <div class="repeat-monthly-day form-group">
                <div class="radio pull-left">
                    <label class="radio-custom">
                        <input class="sr-only" type="radio" checked="checked" name="repeat-monthly" value="bysetpos">
                        <span class="radio-label">on the</span>
                    </label>
                </div>

                <div data-resize="auto" class="btn-group selectlist month-day-pos pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">First</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>

                <div data-resize="auto" class="btn-group selectlist month-days pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">Sunday</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>

            </div>
        </div>

        <div class="repeat-panel repeat-yearly hide" aria-hidden="true">
            <div class="form-group repeat-yearly-date">

                <div class="radio pull-left">
                    <label class="radio-custom">
                        <input class="sr-only" type="radio" checked="checked" name="repeat-yearly" value="bymonthday">
                        <span class="radio-label">on</span>
                    </label>
                </div>

                <div data-resize="auto" class="btn-group selectlist year-month pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">January</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>

                <div data-resize="auto" class="btn-group selectlist year-month-day pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">1</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>
            </div>

            <div class="form-group repeat-yearly-day">

                <div class="radio pull-left"><label class="radio-custom"><input class="sr-only" type="radio" name="repeat-yearly" value="bysetpos"> on the</label></div>

                <div data-resize="auto" class="btn-group selectlist year-month-day-pos pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">First</span>
                        <span class="caret"></span>
                        <span class="sr-only">First</span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="yearlyDateSelectlist" class="hidden hidden-field">
                </div>

                <div data-resize="auto" class="btn-group selectlist year-month-days pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">Sunday</span>
                        <span class="caret"></span>
                        <span class="sr-only">Sunday</span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
                        <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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
                </div>
                <div class="inline-form-text repeat-yearly-day-text"> of </div>

                <div data-resize="auto" class="btn-group selectlist year-month pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">January</span>
                        <span class="caret"></span>
                        <span class="sr-only">January</span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
                        <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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row repeat-end hide" aria-hidden="true">
    <label class="col-sm-2 control-label scheduler-label">End</label>
    <div class="col-sm-10">
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-lg-2 form-group">
                <div data-resize="auto" class="btn-group selectlist end-options pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">Never</span>
                        <span class="caret"></span>
                        <span class="sr-only">Never</span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="EndSelectlist" class="hidden hidden-field">
                </div>
            </div>

            <div class="col-sm-4 col-lg-4 form-group end-option-panel end-after-panel pull-left hide" aria-hidden="true">
                <div class="spinbox digits-3 end-after">
                    <label id="MyEndAfter" class="sr-only">End After</label>
                    <input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MyEndAfter">
                    <div class="spinbox-buttons btn-group btn-group-vertical">
                        <button type="button" class="btn btn-default spinbox-up btn-xs">
                            <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
                        </button>
                        <button type="button" class="btn btn-default spinbox-down btn-xs">
                            <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
                        </button>
                    </div>
                </div>
                <div class="inline-form-text end-after-text">occurrence(s)</div>
            </div>

            <div class="col-xs-4 col-sm-4 col-lg-4 form-group end-option-panel end-on-date-panel pull-left hide" aria-hidden="true">
                <div class="datepicker end-on-date">
                    <div class="input-group">
                        <input class="form-control" id="myEndDate" type="text"/>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-calendar"></span>
                                <span class="sr-only">Toggle Calendar</span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
                                <div class="datepicker-calendar">
                                    <div class="datepicker-calendar-header">
                                        <button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
                                        <button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
                                        <button type="button" class="title">
                                            <span class="month">
                                                <span data-month="0">January</span>
                                                <span data-month="1">February</span>
                                                <span data-month="2">March</span>
                                                <span data-month="3">April</span>
                                                <span data-month="4">May</span>
                                                <span data-month="5">June</span>
                                                <span data-month="6">July</span>
                                                <span data-month="7">August</span>
                                                <span data-month="8">September</span>
                                                <span data-month="9">October</span>
                                                <span data-month="10">November</span>
                                                <span data-month="11">December</span>
                                            </span> <span class="year"></span>
                                        </button>
                                    </div>
                                    <table class="datepicker-calendar-days">
                                        <thead>
                                        <tr>
                                            <th>Su</th>
                                            <th>Mo</th>
                                            <th>Tu</th>
                                            <th>We</th>
                                            <th>Th</th>
                                            <th>Fr</th>
                                            <th>Sa</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    <div class="datepicker-calendar-footer">
                                        <button type="button" class="datepicker-today">Today</button>
                                    </div>
                                </div>
                                <div class="datepicker-wheels" aria-hidden="true">
                                    <div class="datepicker-wheels-month">
                                        <h2 class="header">Month</h2>
                                        <ul>
                                            <li data-month="0"><button type="button">Jan</button></li>
                                            <li data-month="1"><button type="button">Feb</button></li>
                                            <li data-month="2"><button type="button">Mar</button></li>
                                            <li data-month="3"><button type="button">Apr</button></li>
                                            <li data-month="4"><button type="button">May</button></li>
                                            <li data-month="5"><button type="button">Jun</button></li>
                                            <li data-month="6"><button type="button">Jul</button></li>
                                            <li data-month="7"><button type="button">Aug</button></li>
                                            <li data-month="8"><button type="button">Sep</button></li>
                                            <li data-month="9"><button type="button">Oct</button></li>
                                            <li data-month="10"><button type="button">Nov</button></li>
                                            <li data-month="11"><button type="button">Dec</button></li>
                                        </ul>
                                    </div>
                                    <div class="datepicker-wheels-year">
                                        <h2 class="header">Year</h2>
                                        <ul></ul>
                                    </div>
                                    <div class="datepicker-wheels-footer clearfix">
                                        <button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
                                        <button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
    

Options

Should be passed in as an object (eg. {name: value}) on initialization. If initializing with options, Javascript initialization is required (you can't initialize with options through data-attributes).

Name type default description
startDateOptions object {} Attributes used to configure the datepicker object. All options for datepicker are available and they can be found in the datepicker documentation.
endDateOptions object {} This option can be set but will only be used if the event is repeated. Attributes used to configure the datepicker object. All options for datepicker are available and they can be found in the datepicker documentation.
startDateChanged function undefined As of 3.11.5, Function to be run when the start date is changed. Currently this._guessEndDate(); is called, but, if you pass a function, your function will be called instead. Your function can call this._guessEndDate(); at any point from within the function to take advantage of the pre-built Guess End Date AI. See the code for details. Example here.

Methods

Once your scheduler is initialized, you can execute any of the following methods on it:

.scheduler('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.scheduler('disable')
Ensure all scheduler form fields are disabled
.scheduler('enable')
Ensure all scheduler form fields are enabled
.scheduler('value')
Gets or sets the current scheduler form field information
$('#myScheduler').scheduler('value');
$('#myScheduler').scheduler('value', {
  startDateTime: '2014-03-31T03:23+02:00',
  timeZone: {
    offset: '+02:00'
  },
  recurrencePattern: 'FREQ=MONTHLY;INTERVAL=6;BYDAY=WE;BYSETPOS=3;UNTIL=20140919;'
});
Parameter Description
startDateTime Required. String representing the start date & time in ISO 8601 format.
timeZone Optional. String or Object (as {name: 'value'} or {offset: '+00:00'}) used for method call to selectBySelector() on scheduler's Timezone selectList. Whatever is passed in will be passed along to selectlist.selectBySelector(value). If a String is passed, it will be passed along as-is. If an Object is passed, name will be passed along if present, otherwise offset will be passed along but never both.
recurrencePattern Optional. String representing the iCal recurrence value.

Events

Event Type Description
changed.fu.scheduler This event fires when the user changes any setting.

All scheduler event listeners should be attached to the element containing the scheduler class. Given the above example markup, you would attach event listeners thusly:

$('#myScheduler').on('changed.fu.scheduler', function () {
  // do something
});

Fuel UX Dependencies

Examples

Static example

The following static scheduler displays all components simultaneously (start date and time, timezone, and all recurrence and recurrence end options) for illustration purposes only.

Live demo


Sample Methods
<div class="form-horizontal container-fluid scheduler" data-initialize="scheduler" role="form" id="myScheduler">
<div class="row start-datetime">
    <label class="col-sm-2 control-label scheduler-label" for="myStartDate">Start Date</label>
    <div class="col-sm-10">
        <div class="row no-margin">
            <div class="col-xs-4 col-sm-4 form-group">
                <div class="datepicker start-date">
                    <div class="input-group">
                        <input class="form-control" id="myStartDate" type="text"/>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-calendar"></span>
                                <span class="sr-only">Toggle Calendar</span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
                                <div class="datepicker-calendar">
                                    <div class="datepicker-calendar-header">
                                        <button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
                                        <button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
                                        <button type="button" class="title">
                                                <span class="month">
                                                    <span data-month="0">January</span>
                                                    <span data-month="1">February</span>
                                                    <span data-month="2">March</span>
                                                    <span data-month="3">April</span>
                                                    <span data-month="4">May</span>
                                                    <span data-month="5">June</span>
                                                    <span data-month="6">July</span>
                                                    <span data-month="7">August</span>
                                                    <span data-month="8">September</span>
                                                    <span data-month="9">October</span>
                                                    <span data-month="10">November</span>
                                                    <span data-month="11">December</span>
                                                </span> <span class="year"></span>
                                        </button>
                                    </div>
                                    <table class="datepicker-calendar-days">
                                        <thead>
                                        <tr>
                                            <th>Su</th>
                                            <th>Mo</th>
                                            <th>Tu</th>
                                            <th>We</th>
                                            <th>Th</th>
                                            <th>Fr</th>
                                            <th>Sa</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    <div class="datepicker-calendar-footer">
                                        <button type="button" class="datepicker-today">Today</button>
                                    </div>
                                </div>
                                <div class="datepicker-wheels" aria-hidden="true">
                                    <div class="datepicker-wheels-month">
                                        <h2 class="header">Month</h2>
                                        <ul>
                                            <li data-month="0"><button type="button">Jan</button></li>
                                            <li data-month="1"><button type="button">Feb</button></li>
                                            <li data-month="2"><button type="button">Mar</button></li>
                                            <li data-month="3"><button type="button">Apr</button></li>
                                            <li data-month="4"><button type="button">May</button></li>
                                            <li data-month="5"><button type="button">Jun</button></li>
                                            <li data-month="6"><button type="button">Jul</button></li>
                                            <li data-month="7"><button type="button">Aug</button></li>
                                            <li data-month="8"><button type="button">Sep</button></li>
                                            <li data-month="9"><button type="button">Oct</button></li>
                                            <li data-month="10"><button type="button">Nov</button></li>
                                            <li data-month="11"><button type="button">Dec</button></li>
                                        </ul>
                                    </div>
                                    <div class="datepicker-wheels-year">
                                        <h2 class="header">Year</h2>
                                        <ul></ul>
                                    </div>
                                    <div class="datepicker-wheels-footer clearfix">
                                        <button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
                                        <button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4 form-group">
                <label class="sr-only" for="MyStartTime">Start Time</label>
                <div class="input-group combobox start-time">
                    <input id="MyStartTime" type="text" class="form-control" />
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li data-value="12:00 AM"><a href="#">12:00 AM</a></li>
                            <li data-value="12:30 AM"><a href="#">12:30 AM</a></li>
                            <li data-value="1:00 AM"><a href="#">1:00 AM</a></li>
                            <li data-value="1:30 AM"><a href="#">1:30 AM</a></li>
                            <li data-value="2:00 AM"><a href="#">2:00 AM</a></li>
                            <li data-value="2:30 AM"><a href="#">2:30 AM</a></li>
                            <li data-value="3:00 AM"><a href="#">3:00 AM</a></li>
                            <li data-value="3:30 AM"><a href="#">3:30 AM</a></li>
                            <li data-value="4:00 AM"><a href="#">4:00 AM</a></li>
                            <li data-value="4:30 AM"><a href="#">4:30 AM</a></li>
                            <li data-value="5:00 AM"><a href="#">5:00 AM</a></li>
                            <li data-value="5:30 AM"><a href="#">5:30 AM</a></li>
                            <li data-value="6:00 AM"><a href="#">6:00 AM</a></li>
                            <li data-value="6:30 AM"><a href="#">6:30 AM</a></li>
                            <li data-value="7:00 AM"><a href="#">7:00 AM</a></li>
                            <li data-value="7:30 AM"><a href="#">7:30 AM</a></li>
                            <li data-value="8:00 AM"><a href="#">8:00 AM</a></li>
                            <li data-value="8:30 AM"><a href="#">8:30 AM</a></li>
                            <li data-value="9:00 AM"><a href="#">9:00 AM</a></li>
                            <li data-value="9:30 AM"><a href="#">9:30 AM</a></li>
                            <li data-value="10:00 AM"><a href="#">10:00 AM</a></li>
                            <li data-value="10:30 AM"><a href="#">10:30 AM</a></li>
                            <li data-value="11:00 AM"><a href="#">11:00 AM</a></li>
                            <li data-value="11:30 AM"><a href="#">11:30 AM</a></li>
                            <li data-value="12:00 PM"><a href="#">12:00 PM</a></li>
                            <li data-value="12:30 PM"><a href="#">12:30 PM</a></li>
                            <li data-value="1:00 PM"><a href="#">1:00 PM</a></li>
                            <li data-value="1:30 PM"><a href="#">1:30 PM</a></li>
                            <li data-value="2:00 PM"><a href="#">2:00 PM</a></li>
                            <li data-value="2:30 PM"><a href="#">2:30 PM</a></li>
                            <li data-value="3:00 PM"><a href="#">3:00 PM</a></li>
                            <li data-value="3:30 PM"><a href="#">3:30 PM</a></li>
                            <li data-value="4:00 PM"><a href="#">4:00 PM</a></li>
                            <li data-value="4:30 PM"><a href="#">4:30 PM</a></li>
                            <li data-value="5:00 PM"><a href="#">5:00 PM</a></li>
                            <li data-value="5:30 PM"><a href="#">5:30 PM</a></li>
                            <li data-value="6:00 PM"><a href="#">6:00 PM</a></li>
                            <li data-value="6:30 PM"><a href="#">6:30 PM</a></li>
                            <li data-value="7:00 PM"><a href="#">7:00 PM</a></li>
                            <li data-value="7:30 PM"><a href="#">7:30 PM</a></li>
                            <li data-value="8:00 PM"><a href="#">8:00 PM</a></li>
                            <li data-value="8:30 PM"><a href="#">8:30 PM</a></li>
                            <li data-value="9:00 PM"><a href="#">9:00 PM</a></li>
                            <li data-value="9:30 PM"><a href="#">9:30 PM</a></li>
                            <li data-value="10:00 PM"><a href="#">10:00 PM</a></li>
                            <li data-value="10:30 PM"><a href="#">10:30 PM</a></li>
                            <li data-value="11:00 PM"><a href="#">11:00 PM</a></li>
                            <li data-value="11:30 PM"><a href="#">11:30 PM</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row timezone-container">
    <label class="col-sm-2 control-label scheduler-label">Timezone</label>
    <div class="col-xs-10 col-sm-10 col-md-10">
        <div data-resize="auto" class="btn-group selectlist timezone">
            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                <span class="selected-label">(GMT-06:00) Central Standard Time</span>
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="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 &amp; 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 &amp; 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 &amp; Canada) *</a></li>
                <li data-name="Pacific Standard Time" data-offset="-08:00"><a href="#">(GMT-08:00) Pacific Time (US &amp; 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>
            <input type="text" aria-hidden="true" readonly="readonly" name="TimeZoneSelectlist" class="hidden hidden-field">
        </div>
    </div>
</div>

<div class="row repeat-container">
    <label class="col-sm-2 control-label scheduler-label">Repeat</label>
    <div class="col-sm-10">

        <div class="form-group repeat-interval">
            <div data-resize="auto" class="btn-group selectlist pull-left repeat-options">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                    <span class="selected-label">None (run once)</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li data-value="none"><a href="#">None (run once)</a></li>
                    <li data-value="secondly" data-text="second(s)"><a href="#">Per Second</a>
                    <li data-value="minutely" data-text="minute(s)"><a href="#">Per Minute</a>
                    <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>
                <input type="text" aria-hidden="true" readonly="readonly" name="intervalSelectlist" class="hidden hidden-field">
            </div>

            <div class="repeat-panel repeat-every-panel repeat-hourly repeat-daily repeat-weekly hide" aria-hidden="true">
                <label id="MySchedulerEveryLabel" class="inline-form-text repeat-every-pretext">every</label>

                <div class="spinbox digits-3 repeat-every">
                    <input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MySchedulerEveryLabel">
                    <div class="spinbox-buttons btn-group btn-group-vertical">
                        <button type="button" class="btn btn-default spinbox-up btn-xs">
                            <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
                        </button>
                        <button type="button" class="btn btn-default spinbox-down btn-xs">
                            <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
                        </button>
                    </div>
                </div>

                <div class="inline-form-text repeat-every-text"></div>
            </div>
        </div>

        <div class="form-group repeat-panel repeat-weekly repeat-days-of-the-week hide" aria-hidden="true">
            <fieldset class="btn-group" data-toggle="buttons">
                <label class="btn btn-default"><input type="checkbox" data-value="SU">Sun</label>
                <label class="btn btn-default"><input type="checkbox" data-value="MO">Mon</label>
                <label class="btn btn-default"><input type="checkbox" data-value="TU">Tue</label>
                <label class="btn btn-default"><input type="checkbox" data-value="WE"> Wed</label>
                <label class="btn btn-default"><input type="checkbox" data-value="TH"> Thu</label>
                <label class="btn btn-default"><input type="checkbox" data-value="FR"> Fri</label>
                <label class="btn btn-default"><input type="checkbox" data-value="SA"> Sat</label>
            </fieldset>
        </div>

        <div class="repeat-panel repeat-monthly hide" aria-hidden="true">
            <div class="form-group repeat-monthly-date">
                <div class="radio pull-left">
                    <label class="radio-custom">
                        <input class="sr-only" type="radio" checked="checked" name="repeat-monthly" value="bymonthday">
                        <span class="radio-label">on day</span>
                    </label>
                </div>

                <div data-resize="auto" class="btn-group selectlist pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">1</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>
            </div>

            <div class="repeat-monthly-day form-group">
                <div class="radio pull-left">
                    <label class="radio-custom">
                        <input class="sr-only" type="radio" checked="checked" name="repeat-monthly" value="bysetpos">
                        <span class="radio-label">on the</span>
                    </label>
                </div>

                <div data-resize="auto" class="btn-group selectlist month-day-pos pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">First</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>

                <div data-resize="auto" class="btn-group selectlist month-days pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">Sunday</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>

            </div>
        </div>

        <div class="repeat-panel repeat-yearly hide" aria-hidden="true">
            <div class="form-group repeat-yearly-date">

                <div class="radio pull-left">
                    <label class="radio-custom">
                        <input class="sr-only" type="radio" checked="checked" name="repeat-yearly" value="bymonthday">
                        <span class="radio-label">on</span>
                    </label>
                </div>

                <div data-resize="auto" class="btn-group selectlist year-month pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">January</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>

                <div data-resize="auto" class="btn-group selectlist year-month-day pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">1</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
                </div>
            </div>

            <div class="form-group repeat-yearly-day">

                <div class="radio pull-left"><label class="radio-custom"><input class="sr-only" type="radio" name="repeat-yearly" value="bysetpos"> on the</label></div>

                <div data-resize="auto" class="btn-group selectlist year-month-day-pos pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">First</span>
                        <span class="caret"></span>
                        <span class="sr-only">First</span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="yearlyDateSelectlist" class="hidden hidden-field">
                </div>

                <div data-resize="auto" class="btn-group selectlist year-month-days pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">Sunday</span>
                        <span class="caret"></span>
                        <span class="sr-only">Sunday</span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
                        <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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
                </div>
                <div class="inline-form-text repeat-yearly-day-text"> of </div>

                <div data-resize="auto" class="btn-group selectlist year-month pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">January</span>
                        <span class="caret"></span>
                        <span class="sr-only">January</span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
                        <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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row repeat-end hide" aria-hidden="true">
    <label class="col-sm-2 control-label scheduler-label">End</label>
    <div class="col-sm-10">
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-lg-2 form-group">
                <div data-resize="auto" class="btn-group selectlist end-options pull-left">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="selected-label">Never</span>
                        <span class="caret"></span>
                        <span class="sr-only">Never</span>
                    </button>
                    <ul class="dropdown-menu" role="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>
                    <input type="text" aria-hidden="true" readonly="readonly" name="EndSelectlist" class="hidden hidden-field">
                </div>
            </div>

            <div class="col-sm-4 col-lg-4 form-group end-option-panel end-after-panel pull-left hide" aria-hidden="true">
                <div class="spinbox digits-3 end-after">
                    <label id="MyEndAfter" class="sr-only">End After</label>
                    <input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MyEndAfter">
                    <div class="spinbox-buttons btn-group btn-group-vertical">
                        <button type="button" class="btn btn-default spinbox-up btn-xs">
                            <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
                        </button>
                        <button type="button" class="btn btn-default spinbox-down btn-xs">
                            <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
                        </button>
                    </div>
                </div>
                <div class="inline-form-text end-after-text">occurrence(s)</div>
            </div>

            <div class="col-xs-4 col-sm-4 col-lg-4 form-group end-option-panel end-on-date-panel pull-left hide" aria-hidden="true">
                <div class="datepicker end-on-date">
                    <div class="input-group">
                        <input class="form-control" id="myEndDate" type="text"/>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-calendar"></span>
                                <span class="sr-only">Toggle Calendar</span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
                                <div class="datepicker-calendar">
                                    <div class="datepicker-calendar-header">
                                        <button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
                                        <button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
                                        <button type="button" class="title">
                                            <span class="month">
                                                <span data-month="0">January</span>
                                                <span data-month="1">February</span>
                                                <span data-month="2">March</span>
                                                <span data-month="3">April</span>
                                                <span data-month="4">May</span>
                                                <span data-month="5">June</span>
                                                <span data-month="6">July</span>
                                                <span data-month="7">August</span>
                                                <span data-month="8">September</span>
                                                <span data-month="9">October</span>
                                                <span data-month="10">November</span>
                                                <span data-month="11">December</span>
                                            </span> <span class="year"></span>
                                        </button>
                                    </div>
                                    <table class="datepicker-calendar-days">
                                        <thead>
                                        <tr>
                                            <th>Su</th>
                                            <th>Mo</th>
                                            <th>Tu</th>
                                            <th>We</th>
                                            <th>Th</th>
                                            <th>Fr</th>
                                            <th>Sa</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    <div class="datepicker-calendar-footer">
                                        <button type="button" class="datepicker-today">Today</button>
                                    </div>
                                </div>
                                <div class="datepicker-wheels" aria-hidden="true">
                                    <div class="datepicker-wheels-month">
                                        <h2 class="header">Month</h2>
                                        <ul>
                                            <li data-month="0"><button type="button">Jan</button></li>
                                            <li data-month="1"><button type="button">Feb</button></li>
                                            <li data-month="2"><button type="button">Mar</button></li>
                                            <li data-month="3"><button type="button">Apr</button></li>
                                            <li data-month="4"><button type="button">May</button></li>
                                            <li data-month="5"><button type="button">Jun</button></li>
                                            <li data-month="6"><button type="button">Jul</button></li>
                                            <li data-month="7"><button type="button">Aug</button></li>
                                            <li data-month="8"><button type="button">Sep</button></li>
                                            <li data-month="9"><button type="button">Oct</button></li>
                                            <li data-month="10"><button type="button">Nov</button></li>
                                            <li data-month="11"><button type="button">Dec</button></li>
                                        </ul>
                                    </div>
                                    <div class="datepicker-wheels-year">
                                        <h2 class="header">Year</h2>
                                        <ul></ul>
                                    </div>
                                    <div class="datepicker-wheels-footer clearfix">
                                        <button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
                                        <button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
  

Search search.js

Combines an input and a button to fire the searched event.

Usage

This function includes a simple input and button group that styles with a search icon and fires the searched event.

Via JavaScript:

Call the search control via JavaScript:

$('#mySearch').search();

Via data-attributes

To enable the search control without writing JavaScript, add data-initialize="search" to the .search element that you wish to initialize. Such elements that exist when $.ready() executes will be initialized. Any search markup that is programmatically created with data-initialize="search" sometime after the initial page load will not immediately initialize. Rather, it will initialize when the mousedown event is fired on it.

Markup

Wrap class="search" around an input and a button within a class="fuelux" container.

<div class="search input-group" role="search" id="mySearch">
  <input type="search" class="form-control" placeholder="Search"/>
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <span class="glyphicon glyphicon-search"></span>
      <span class="sr-only">Search</span>
    </button>
  </span>
</div>

Methods

.search('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.search('disable')
Ensures the search component is disabled
.search('enable')
Ensures the search component is enabled

Events

Event Type Description
searched.fu.search This event fires when a user presses Enter within the input or clicks the button.
cleared.fu.search This event fires when the user clears the input.

All search events are fired on the .search classed element.

$('#mySearch').on('searched.fu.search', function () {
  // load search results
});

Examples

Wrap the input and search button within .fuelux .search

Sample Methods

Selectlist selectlist.js

A single select drop-down similar to the native select control, but standardized to look the same across browsers.

Usage

Via JavaScript

Call the selectlist control via JavaScript:

$('#mySelectlist').selectlist();

Via data-attributes

Add data-initialize="selectlist" to the .selectlist element that you wish to initialize on $.ready(). Any selectlist that is programmatically generated after the initial page load will initialize when the mousedown event is fired on it if it has data-initialize="selectlist".

Markup

Wrap class="selectlist" around an input and a button within a class="fuelux" container.

<div class="btn-group selectlist" data-resize="auto" data-initialize="selectlist" id="mySelectlist">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
    <span class="selected-label">&nbsp;</span>
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li data-value="1"><a href="#">One</a></li>
    ...
  </ul>
  <input class="hidden hidden-field" name="mySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

Methods

.selectlist('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
.selectlist('disable')
Ensures the component is disabled
.selectlist('enable')
Ensures the component is enabled
.selectlist('selectedItem')
Returns an object containing the jQuery data() contents of the selected item. This data includes .data-* attributes plus a text property with the visible text from the item.
.selectlist('selectByIndex')
Set the selected item based on its index in the list (zero-based index). Convenience method for .selectBySelector('li:eq({index})')
$('#mySelectlist').selectlist('selectByIndex', 1);
.selectlist('selectByText')
Set the selected item based on its text value
$('#mySelectlist').selectlist('selectByText', 'Four');
.selectlist('selectBySelector')
Set the selected item based on a selector
$('#mySelectlist').selectlist('selectBySelector', 'li[data-fizz=buzz]');
.selectlist('selectByValue')
Set the selected item based on its data-value attribute value. Convenience method for .selectBySelector('data-value={value}').
$('#mySelectlist').selectlist('selectByValue', 'foo');

Events

Event Type Description
changed.fu.selectlist This event fires when the value changes by selecting an item from the list. Arguments include event, data where data represents the same object structure returned by the selectedItem method.

All selectlist events are fired on the .selectlist classed element.

$('#mySelectlist').on('changed.fu.selectlist', function () {
  // do something
});

Examples

A single select drop-down similar to the native select control. Wrap the input and selectlist button within .fuelux .selectlist


Sample Methods (output sent to browser console)

Spinbox spinbox.js

Spinbox includes an enhanced numeric input based upon the native <input type="number">.

Usage

A spinbox allows for click interaction with a numeric input.

Currently there is a bug causing changed events to fire twice for some elements. The workaround is to disable this data-api, using $.off('fu.data-api')

Via JavaScript

Call the selectlist control via JavaScript:

$('#mySpinbox').spinbox();

Via data-attributes

To enable the spinbox control without writing JavaScript, add data-initialize="spinbox" to the .spinbox element that you wish to initialize. Such elements that exist when $.ready() executes will be initialized. Any spinbox markup that is programmatically created with data-initialize="spinbox" sometime after the initial page load will not immediately initialize. Rather, it will initialize when the mousedown event is fired on it.

Markup

Add class="spinbox" to a div within a class="fuelux" container.

<div class="spinbox" data-initialize="spinbox" id="mySpinbox">
  <input type="text" class="form-control input-mini spinbox-input">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default spinbox-up btn-xs">
      <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default spinbox-down btn-xs">
      <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
    </button>
  </div>
</div>

Methods

.spinbox('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.
$('#mySpinbox').spinbox('destroy');
.spinbox('getIntValue')
Returns spinner value as a JS number (so, if spinner is set to "12,1px" it will return 12.1)
.spinbox('getValue')
Alias for .spinbox('value')
.spinbox('setValue')
Alias for .spinbox('value', number)
.spinbox('value')
Sets or returns the spinner value
$('#mySpinbox').spinbox('value') 
$('#mySpinbox').spinbox('value', 11) 

If value contains non-integers, the value returns as a string. Otherwise, the value returns as a number.

Options

Options that can be passed in via JavaScript once at initialization.

Name type default description
value number 1 Sets the initial spinbox value
min number 1 Sets the minimum spinbox value
max number 999 Sets the maximum spinbox value
step number 1 Sets the increment by which the value in the spinbox will change each time the spinbox buttons are pressed
limitToStep boolean false Limits the spinner value to increments of the step value. Eg. If step is 5, spinner values will be limited to increments of 5, (0, 5, 10, 15...)
hold boolean true If true, the spinbox will react to its buttons being pressed and held down
hold boolean true If true, the spinbox will react to its buttons being pressed and held down
speed string "medium" Assigns spinbox speed when buttons are held down. Options include "fast","medium","slow".
disabled boolean false Creates a disables spinbox.
units array [] Units that will be allowed to appear and be typed into the spinbox input along with the numeric value. For example, setting units to a value of ['px', 'en', 'xx'] would allow px, en, and xx units to appear within the spinbox input

Events

Event Type Description
changed.fu.spinbox This event fires when the value changes (either by selecting an item from the list or updating the input value directly). Arguments include event, value where value is the current value of the spinner. Returns the current value of the spinner.

All spinbox events are fired on the .spinbox classed element.

$('#mySpinbox').on('changed.fu.spinbox', function () {
  // do something
})

Example

Spinbox includes an enhanced numeric input based upon the native <input type="number">. Wrap the input and the increment/decrement buttons within .fuelux .spinbox

Sample Methods

Tree tree.js

Usage

The tree provides a categorical selection interface that allows for interaction and selection of nested elements.

Via JavaScript

Call the tree control via JavaScript:

dataSource = function(parentData, callback){
  //...
};

$('#myTree').tree({ dataSource: dataSource });

Methods

.tree('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup
.tree('selectedItems')
Returns an array containing selected items and associated data
.tree('selectItem', $('#itemId'))
Select the passed in non-folder item in the tree.
.tree('selectFolder', $('#itemId'))
Select the passed in folder item in the tree.
.tree('openFolder', $('#folderId'))
Open the targeted folder
.tree('closeFolder', $('#folderId'))
Close the targeted folder
.tree('toggleFolder', $('#folderId'))
Toggle the targeted folder (opened or closed)
.tree('closeAll')
Close all folders (collapse the entire tree).
.tree('discloseAll')
Disclose all folders (expand the entire tree).
.tree('discloseVisible')
Disclose only currently visible folders (expand already displayed folders).
.tree('populate', $el)
deprecated Populate the passed in element as if it were a new copy of the instantiated tree. If you call this on an already instantiated tree, it will append all of the items to the tree again. You probably don't want to call this. It will most likely become a private function in the future.
.tree('render')
Calls datasource callback for entire tree. Caution: Does not remove current top-level tree nodes.
.tree('refreshFolder', $('#folderId'))
Removes children and calls datasource callback for specified folder. Does not update data and attributes of the specified folder.
.tree('collapse')
deprecated Same as .tree('closeAll')

Options

You can pass options via data attributes or JavaScript. For data attributes, append the option name to data-. For example, you could use data-selected="".

Name type default description
multiSelect boolean false Allows multiple tree items to be selected at once
cacheItems boolean true Prevents refresh of sub-items when a user closes and reopens a folder
folderSelect boolean true Enables folder selection
ignoreRedundantOpens boolean false Makes openFolder() behave like toggleFolder() instead. Will be deprecated in 3.7.0 when openFolder() will only open the folder instead of toggling
disclosuresUpperLimit integer 0 How many times discloseAll() should be called before a stopping and firing an exceededDisclosuresLimit.fu.tree event. You can force it to continue by listening for this event, setting data-ignore-disclosures-limit to true and starting discloseAll() back up again. This lets you make more decisions about if/when/how/why/how many times discloseAll() will be started back up after it exceeds the limit.
    $tree.one('exceededDisclosuresLimit.fu.tree', function () {
        $tree.data('ignore-disclosures-limit', true);
        $tree.tree('discloseAll');
    });
disclusuresUpperLimit defaults to 0, so by default this trigger will never fire. The true hard the upper limit is the browser's ability to load new items (i.e. it will keep loading until the browser falls over and dies). On the Fuel UX index.html testing page, the point at which the page became super slow (enough to seem almost unresponsive) was 4, meaning 256 folders had been opened, and 1024 were attempting to open.

Required Data Source

The tree control requires an array of objects in order to create a tree. To determine what tree nodes to create, the tree control uses a callback function named datasource that returns an object with an array named data within it. Items in data will be created when a branch is opened. All tree nodes must be loaded into the control one folder (branch) at a time. However, one can store the entire tree from a single network request, and use the datasource function to parse this combined object and not make additional network requests. The following are reserved keys within each item object.

Key Type Description
text string Required. Text of tree node. *Please note: text replaces and deprecates name
type string Required. Options are folder or item.
attr object Unless it is a reserved key in this table, child keys will be added as attributes to .tree-item or .tree-branch.
attr.cssClass string CSS classes that will be added to .tree-item or .tree-branch
attr.data-icon string CSS classes that will be added to .icon-item
attr.id string Adds id to .tree-item or .tree-branch and adds ARIA support with aria-labelledby.
attr.hasChildren boolean Set to false to hide the chevron next to folders. Defaults to true.

Events

Event Type Description
selected.fu.tree Fires when a user selects an item or folder. Returns an object containing an array of the selected items' jQuery data and the jQuery data of the triggering item. { selected: [array], target: [object] }
deselected.fu.tree Fires when a user deselects an item or folder. Returns an object containing an array of the selected items' jQuery data and the jQuery data of the triggering item. { selected: [array], target: [object] }
loaded.fu.tree Fires when sub-content has been is loaded. Returns the jQuery element of the folder loaded.
updated.fu.tree Fires after selected.fu.tree and deselected.fu.tree events. Returns an object containing an array of selected items' jQuery data, the triggering jQuery element and the event type. { selected: [array], item: [object], eventType: [string] }
disclosedFolder.fu.tree Fires when a user opens a folder. Returns an object containing the jQuery data of the opened folder.
refreshedFolder.fu.tree Fires when a user refreshes a folder. Returns an object containing the jQuery data of the opened folder.
closed.fu.tree Fires when a user closes a folder. Returns an object containing the jQuery data of the closed folder.
closedAll.fu.tree Fires when all folders have finished closing. Returns an object containing an array of closed folders' jQuery data and the tree's jQuery element. The length of reportedClosed will provide the number of folders closed. { reportedClosed: [array], tree: [$element] }
disclosedVisible.fu.tree Fires when all visible folders have disclosed/opened. Returns an object containing an array of disclosed folders' jQuery data and the tree's jQuery element. The length of reportedOpened will provide the number of folders opened. { reportedOpened: [array], tree: [$element] }
exceededDisclosuresLimit.fu.tree Fires when tree halts disclosing due to hitting discloserLimit cap. Returns an object containing { disclosures: [number], tree: [$element] }
disclosedAll.fu.tree Fires when all folders have disclosed. It will not fire if tree stops disclosing due to hitting discloserLimit cap. Returns an object containing { disclosures: [number], tree: [$element] }

All tree events are triggered from the .tree classed element.

$('#myTree').on('selected.fu.tree', function (event, data) {
  // do something with data: { selected: [array], target: [object] }
})

Examples

Tree provides a categorical element selection. Use it to create a file system interface. Wrap the wrapper tree containers with .fuelux .tree

Please note the location of .glyphicon-play outside .tree-branch-name. The control allows folders to be selected by default unless the folderSelect option is set to false, which then requires slightly different markup ("Items selectable only," shown further below)

<ul class="tree tree-folder-select" role="tree" id="myTree">
  <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
    <div class="tree-branch-header">
      <button type="button" class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
      <button type="button" class="tree-branch-name">
        <span class="glyphicon icon-folder glyphicon-folder-close"></span>
        <span class="tree-label"></span>
      </button>
    </div>
    <ul class="tree-branch-children" role="group"></ul>
    <div class="tree-loader" role="alert">Loading...</div>
  </li>
  <li class="tree-item hide" data-template="treeitem" role="treeitem">
    <button type="button" class="tree-item-name">
      <span class="glyphicon icon-item fueluxicon-bullet"></span>
      <span class="tree-label"></span>
    </button>
  </li>
</ul>

Please note the location of .glyphicon-play inside .tree-branch-name. This markup is used if the folderSelect option is set to false.

  <ul class="tree" role="tree" id="myTree">
    <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
      <div class="tree-branch-header">
        <button type="button" class="tree-branch-name">
          <span class="glyphicon icon-caret glyphicon-play"></span>
          <span class="glyphicon icon-folder glyphicon-folder-close"></span>
          <span class="tree-label"></span>
        </button>
      </div>
      <ul class="tree-branch-children" role="group"></ul>
      <div class="tree-loader" role="alert">Loading...</div>
    </li>
    <li class="tree-item hide" data-template="treeitem" role="treeitem">
      <button type="button" class="tree-item-name">
        <span class="glyphicon icon-item fueluxicon-bullet"></span>
        <span class="tree-label"></span>
      </button>
    </li>
  </ul>
  

Wizard wizard.js

A wizard divides a complex goal into multiple steps by separating sub-tasks or content into panes. You can add or remove panes. Completed steps remain clickable.

  • 1Campaign
  • 2Recipients
  • 3Template

Setup Campaign

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.

Choose Recipients

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

Design Template

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

Usage

Via JavaScript

$('#myWizard').wizard();

Via data-attributes

The wizard will automatically instantiate any wizards with data-initialize="wizard". If you add control markup after page load with data-initialize="wizard", this control initializes on mouseover.

Markup

Deprecated wizard markup

Before v3.8.0, the wizard control did not have a .steps-container element.

Wrap class="wizard" around a list of steps, navigation, and content within a class="fuelux" container.

<div class="wizard" data-initialize="wizard" id="myWizard">
<div class="steps-container">
	<ul class="steps">
		<li data-step="1" data-name="campaign" class="active">
			<span class="badge">1</span>Campaign
			<span class="chevron"></span>
		</li>
		<li data-step="2">
			<span class="badge">2</span>Recipients
			<span class="chevron"></span>
		</li>
		<li data-step="3" data-name="template">
			<span class="badge">3</span>Template
			<span class="chevron"></span>
		</li>
	</ul>
</div>
<div class="actions">
	<button type="button" class="btn btn-default btn-prev">
		<span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
	<button type="button" class="btn btn-primary btn-next" data-last="Complete">Next
		<span class="glyphicon glyphicon-arrow-right"></span>
	</button>
</div>
<div class="step-content">
	<div class="step-pane active sample-pane alert" data-step="1">
		<h4>Setup Campaign</h4>
		<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
	</div>
	<div class="step-pane sample-pane bg-info alert" data-step="2">
		<h4>Choose Recipients</h4>
		<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
	</div>
	<div class="step-pane sample-pane bg-danger alert" data-step="3">
		<h4>Design Template</h4>
		<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify. </p>
	</div>
</div>


</div>

Data Attribute Options

For data attributes, append the option name to data-, as in data-restrict="".

Attribute Value Description
restrict previous Prevents the user from navigating to a previous step
step 1 Sets the current wizard step. Replace the value with a number of the wizard step to load on.

Options

You can pass options via Javascript upon initialization.

Name Type Default Description
disablePreviousStep boolean false Dictates whether the wizard should make the previous step button disabled. Setting this value to true will make the previous step button disabled
selectedItem object { step: -1 } By default { step: -1 } means it will attempt to look for "active" class in order to set the step. Changing the step number would set the step that is loaded by default when the wizard loads.

Methods

.wizard('destroy')
Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup
.wizard('previous')
Moves to the previous step
.wizard('next')
Moves to the next step
.wizard('selectedItem')
Returns the current step index.
$('#myWizard').wizard('selectedItem');
.wizard('selectedItem', 3)
Moves to passed in step. This can be either an integer or the `data-name` of a step.
$('#myWizard').wizard('selectedItem', {
	step: 3
});

$('#myWizard').wizard('selectedItem', {
	step: "named item"
});
.wizard('addSteps')
Add a pane or an array of panes to a wizard. Wrap this markup with <div class="step-pane"></div>
$('#myWizard').wizard('addSteps', index, [
	{
		badge: 'badge-customicon',
		label: 'A Step Label',
		pane: '<div>Content</div>'
	}
]);
Parameter Description
index Required. Identifies the position used to start inserting pane(s). First pane exists at position 1. If you use -1, the item will append to end of the list of panes.
[item1, ..., itemX]
item1, ..., itemX
Identifies an array or list of content pane objects to add at the index. Each pane can contain three strings:
  • a badge class to be appended to the class attribute of the step in order to override the default number
  • a label for the name of the step
  • the pane of HTML content
.wizard('removeSteps')
Remove a pane or multiple panes from a wizard
$('#myWizard').wizard('removeSteps', index, howMany);
Parameter Description
index Required. Identifies the position where to begin removing pane(s). First pane exists at position 1.
howMany Optional. Specifies the number of panes to removed. Defaults to 1.

Events

Event Type Description
actionclicked.fu.wizard This event fires immediately when the step changes, but before the wizard shows the new step. Use event.preventDefault() to cancel the event. Arguments include event, data where data is an object { step:1, direction:'next' }.
changed.fu.wizard This event fires when the step changes and displays to the user.
finished.fu.wizard This event fires when the user clicks the next button on the last step of the wizard.
stepclicked.fu.wizard This event fires when the user clicks a completed step. Use event.preventDefault to cancel the event.

All wizard events are fired on the .wizard classed element.

$('#myWizard').on('actionclicked.fu.wizard', function (evt, data) {
	// do something
});

Examples

Wrap the input and wizard button within .fuelux .wizard

  • 1Campaign
  • 2Recipients
  • 3Template

Setup Campaign

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.

Choose Recipients

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

Design Template

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

Sample Methods