jQuery UI Controls

QCubed includes a library of controls that implement the JQuery UI set of javascript interactive controls found at jQuery UI .

Explore the variety of these controls on this page, and proceed to the next tutorial to learn how to attach events to these controls and use them in your Forms.

QCubed comes with a default JQuery UI theme, but you can use JQuery UI Themeroller to create your own and point to it in your assets.cfg.php file.

Draggable

Drag me

Droppable

Drop here

Resizable

Selectable

Drag a box (aka lasso) with the mouse over the items. Items can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.

Item 1
Item 2
Item 3
Item 4
Item 5

Sortable

Drag and drop to reorder

Item 1
Item 2
Item 3
Item 4
Item 5

Accordion

Section 1
Section 2
Section 3

Autocomplete

Type "c" to test

Ajax Autocomplete

Type "s" to test

See the Autocomplete2 QCubed plugin for additional extensions to the Autocomplete control.

Buttons

Lists

Datepicker

DatepickerBox

Dialog box - floating..

Progressbar

Slider

Tabs

First tab is active by default
Tab 2
Tab 3