Custom look and feel for checkbox element.
Use the .checkbox-inline class on checkboxes for controls that appear on the same line.
Use the data-toggle="{{selector}}" to automatically show/hide elements matching the selector within the body upon check/uncheck.
(works with any jQuery selector)
Use the .highlight class to add a background highlight upon check.
Upon page load, the checkbox code will automatically instantiate any checkboxes with class .custom-checkbox on the page, allowing them to function without any additional code. However, if added after page load they will need to be manually instantiated via javascript.
Initialize the checkbox manually via JavaScript:
{% highlight js %}$('#MyCheckbox').checkbox();{% endhighlight %}Checks the checkbox.
{% highlight js %}$('#element').checkbox('check');{% endhighlight %}Disables the checkbox.
{% highlight js %}$('#element').checkbox('disable');{% endhighlight %}Enables the checkbox.
{% highlight js %}$('#element').checkbox('enable');{% endhighlight %}Returns true or false depending on whether the checkbox is checked.
Toggles the checkbox between checked/unchecked states.
{% highlight js %}$('#element').checkbox('toggle');{% endhighlight %}Unchecks the checkbox.
{% highlight js %}$('#element').checkbox('uncheck');{% endhighlight %}Combines an input and a dropdown for easy and flexible data selection.
Wrap the input, dropdown trigger, and dropdown menu within .fuelux .combobox
By default, a dropdown menu is automatically positioned 100% from the top and along the right side of its parent. Remove .dropdown-menu-right to a .dropdown-menu to left align the dropdown menu.
Via JavaScript, the combobox component toggles hidden content (dropdown menus) by toggling the .open class on the parent list item. When opened, the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu. Note: The data-toggle=dropdown attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
Trigger the combobox via JavaScript:
{% highlight js %}$('#MyCombobox').combobox();{% endhighlight %}Add class="combobox" to an input and a dropdown within a class="fuelux" container.
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-selected="".
| Name | type | default | description |
|---|---|---|---|
| selected | boolean | false | Declare value to initialize with |
Disables the component
{% highlight js %}$('#element').combobox('disable'){% endhighlight %}Enables the component
{% highlight js %}$('#element').combobox('enable'){% endhighlight %}Returns an object containing the jQuery data() contents of the selected item which includes .data-* attributes plus a text property with the items's visible text.
Set the selected item based on its index in the list (zero-based index). Convenience method for .selectBySelector('li:eq({index})')
Set the selected item based on its text value
{% highlight js %}$('#element').('selectByText', 'Four'){% endhighlight %}Set the selected item based on a selector.
{% highlight js %}$('#element').('selectBySelector', 'li[data-fizz=buzz]'){% endhighlight %}Set the selected item based on its value. Convenience method for .selectBySelector('data-value={value}') that requires the item to have a .data-value="{value}" attribute
| Event Type | Description |
|---|---|
| changed | This event is fired when the value has changed (either by selecting an item from the list or updating the input value directly). Arguments are event, data where data represents the same object structure returned by the selectedItem method. |
All dropdown events are fired at the .dropdown's parent element.
Additional functionality added to dropdown menus that enables dropup menus instead of dropdown menu based on screen position.
Add data-flip="auto" to a dropdown trigger data-toggle="dropdown". (You may need to scroll up to trigget this functionality.) The menu will need be "below the fold" at the bottom of the screen in order to become a dropup menu.
By default, a dropdown menu is automatically positioned 100% from the top and along the right side of its parent. Remove .dropdown-menu-right to a .dropdown-menu to left align the dropdown menu.
The dropdown-autoflip add-on determines whether to show a dropdown menu or a dropup menu by calculating the position on the screen and the edge of the viewport. If a dropup menu is needed, .dropup is added to the .dropdown-menu element.
Add data-flip="auto" to a dropdown menu within a class="fuelux" container.
The auto-flip dropdown only recieves events.
| Event Type | Description |
|---|---|
| click | Receives clicks from [data-toggle=dropdown][data-flip] |
| suggest | Fire the suggget event and pass in a dropdown menu $('#dropdownMenu'). |
Customized look and feel for radio button element.
Use the .radio-inline classes on radios for controls that appear on the same line.
Use the data-toggle="{{selector}}" to automatically show/hide elements matching the selector within the body upon check/uncheck.
(works with any jQuery selector)
Use the .highlight class to add a background highlight upon check.
Upon page load, the radio code will automatically instantiate any radios with class .custom-radio on the page, allowing them to function without any additional code. However, if added after page load they will need to be manually instantiated via javascript.
Initialize the radio manually via JavaScript:
{% highlight js %}$('#MyRadio').radio();{% endhighlight %}Checks the radio.
{% highlight js %}$('#element').radio('check');{% endhighlight %}Disables the radio.
{% highlight js %}$('#element').radio('disable');{% endhighlight %}Enables the radio.
{% highlight js %}$('#element').radio('enable');{% endhighlight %}Returns true or false depending on whether the radio is checked.
Unchecks the radio.
{% highlight js %}$('#element').radio('uncheck');{% endhighlight %}Combines an input and a button to fire the searched event.
Wrap the input and search button within .fuelux .search
This is a simple input and button group that styles with a search icon and fires the searched event.
Trigger the search via JavaScript:
{% highlight js %}$('#MySearch').search();{% endhighlight %}Wrap class="search" around an input and a button within a class="fuelux" container.
Disables the component
{% highlight js %}$('#element').search('disable'){% endhighlight %}Enables the component
{% highlight js %}$('#element').search('enable'){% endhighlight %}| Event Type | Description |
|---|---|
| searched | This event is fired when enter has been pressed within the input or the button has been clicked. |
| cleared | This event is fired when the input has been cleared. |
A single select dropdown similar to the native select control.
Wrap the input and selectlist button within .fuelux .selectlist
This is a single select dropdown similar to the native select control.
Trigger the selectlist via JavaScript:
{% highlight js %}$('#MySelectlist').selectlist();{% endhighlight %}Wrap class="selectlist" around an input and a button within a class="fuelux" container.
Disables the component
{% highlight js %}$('#element').selectlist('disable'){% endhighlight %}Enables the component
{% highlight js %}$('#element').selectlist('enable'){% endhighlight %}Returns an object containing the jQuery data() contents of the selected item which includes .data-* attributes plus a text property with the items's visible text.
Set the selected item based on its index in the list (zero-based index). Convenience method for .selectBySelector('li:eq({index})')
Set the selected item based on its text value
{% highlight js %}$('#element').('selectByText', 'Four'){% endhighlight %}Set the selected item based on a selector.
{% highlight js %}$('#element').('selectBySelector', 'li[data-fizz=buzz]'){% endhighlight %}Set the selected item based on its value. Convenience method for .selectBySelector('data-value={value}') that requires the item to have a .data-value="{value}" attribute
| Event Type | Description |
|---|---|
| changed | This event is fired when the value has changed by selecting an item from the list. Arguments are event, data where data represents the same object structure returned by the selectedItem method. |
Wrap the input and wizard button within .fuelux .wizard
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress.
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.
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.
Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.
Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napcabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root watespinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sproucoriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress.
Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seecollard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.
Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairiturnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki beaearthnut pea sierra leone bologi leek soko chicory celtuce parsley jÃcama salsify.
Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoaubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdocyarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnubroccoli arugula. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.
Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbageCatsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierrleone bologi rutabaga tigernut.
A wizard divides a complex goal into multiple steps by separating sub-tasks or content into panes. Panes can be added or removed. Completed steps can be clicked.
Trigger the wizard via JavaScript:
{% highlight js %}$('#MyWizard').wizard();{% endhighlight %}Wrap class="wizard" around a list of steps, navigation, and content within a class="fuelux" container.
Moves to the previous step
{% highlight js %}$('#element').wizard('previous'){% endhighlight %}Moves to the next step
{% highlight js %}$('#element').wizard('next'){% endhighlight %}Returns the current step index
{% highlight js %} $('#element').wizard('selectedItem', { step: 3 }); {% endhighlight %}Add a pane or an array of panes to a wizard
{% highlight js %} $('#element').wizard('addSteps', index, remove, [ { badge: 'badge-customicon', label: 'A Step Label', pane: '| Parameter | Description |
|---|---|
| index | Required. The position where to start inserting pane(s). First pane is at position 1. |
| remove | Optional. The number of panes to be removed after adding panes. Default is 0. |
| array | An array of content pane objects to be added at the index. Each pane can contain three strings: a badge class to be appended to the step's class attribute in order to override the default number, a label for the name of the step, and the pane of HTML content. |
Remove a pane or multiple panes from a wizard.
{% highlight js %} $('#element').wizard('removeSteps', index, howMany); {% endhighlight %}| Parameter | Description |
|---|---|
| index | Required. The position where to begin removing pane(s). First pane is at position 1. |
| howMany | Optional. The number of panes to be removed. Default is 1. |
| Event Type | Description |
|---|---|
| change | This event fires immediately when the step changes, but before the new step has been shown. Use event.preventDefault to cancel the event. |
| changed | This event is fired when the step has changed and is shown to the user. |
| finished | This event is fired when the next button is clicked on the last step of the wizard. |
| stepclick | This event is fired when a completed step is clicked. Use event.preventDefault to cancel the event. |