#### jQuery UI - Components

Statistics Invoices Schedule

###### Button types

Button, input and link types

###### Button element

Basic style of `<button>` element

###### Input element

Basic style of `<input>` element

###### Anchor element

Basic style of `<a>` element

An anchor

###### Button styles

Default and custom button styles

###### Default style

Default button element styling

###### Custom colors

Using `.bg-*` color helper classes

###### Transparent button

Using `.ui-button-link` class

###### Left icon position

Left position using `primary` option

###### Checkbox control

Checkbox control as a single button

Single checkbox control

###### Right icon position

Right position using `secondary` option

###### Radio control

Radio control as a single button

Single radio control

###### Icon without text

Display icon only without text

###### Segmented buttons

Split buttons with dropdown menu

###### Button sets

Grouped button sets

###### Button group

Display buttons in a group

###### Button checkboxes

Display checkboxes as a button set

Toggle 1 Toggle 2 Toggle 3

###### Button radios

Display radios as a button set

Choice 1 Choice 2 Choice 3

##### Progress bars

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format. Typically, progress bars use a linear function, such that the advancement of a progress bar is directly proportional to the amount of work that has been completed.

###### Basic example

This example demonstrates default determinate progress bar. The value is specified in plugin's configuration using `value` option.

###### Maximum value

Here progress bar is initialized with maximum value of `1000` and value is set to `400`, so progress width is calculated accordingly.

###### Striped progress bar

This example shows progress bar with progress stripes. To add stripes, use `.ui-progressbar-striped` class to the bar container

###### Indeterminate progress

This bar uses motion indicator to show that progress is taking place instead of the filled portion to show the total amount of progress

###### Animated stripes

In this example progress bar uses animated stripes, that add a motion to the progress along with animated filled amount of progress

###### Custom label

In this example the progress amount is visually represented with animated percentage values and success message - progress:

##### Modal dialogs

The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default. Table below contains basic jQuery UI dialog examples. Click `Launch` button to run dialog examples.

Basic examples
Default modal dialog |  | Basic modal dialog with `title` and `content` areas. Default examples displays: header - contains a title and a close button and body contains static or dynamic content
Dialog with overlay |  | Display dialog as a modal using `modal` option. Modal dialogs create an overlay below the dialog but above other page elements
Animated dialog |  | Animate dialog using `show` and `hide` options and specify optional animation duration and animation effect
Dialog with buttons |  | Specify which buttons should be displayed on the dialog. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object
Buttons with icons |  | Dialog buttons support icons with the following options - before and after content, both or icon only. To use, add icon class to `icon` option
Disable resize |  | Modal dialogs are resizable by default. To turn off resizable feature, set `resizable` option to `false`
Disable close on escape |  | Specify whether the dialog should close when it has focus and the user presses the escape (ESC) key by setting `closeOnEscape` option to `false`
Disable drag |  | By default, the dialog is draggable by the title bar. To disable draggins functionality, set `draggable` option to `false`
Append to element |  | Specify which element the dialog (and overlay, if modal) should be appended to. Here dialog is appended to the panel
With forms
Vertical form |  | Example of a dialog with default vertical form layout. For better appearance set desired width in the dialog configuration
Horizontal form |  | Example of a dialog with default horizontal form layout. For better appearance set desired width in the dialog configuration
Inline form |  | Example of a dialog with default inline form layout. Requires custom width depending on the form width
Dialog widths
Default width |  | By default dialog has `300px` width, if width is not specified in configuration via `width` option
Custom pixel width |  | Specify a custom dialog width in pixels using `width` option
Custom percentage width |  | Specify a custom dialog width in percentages using `width` option
Full width dialog |  | To display dialog in a full width, set `96%` in `width` option, let's keep `2%` spacing in both sides

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

First name
Last name
Address line 1
Address line 2
City
State/Province
ZIP code
Email name@domain.com
Phone # +99-99-9999-9999
First name
Last name
Email
name@domain.com
Phone #
+99-99-9999-9999
Address line 1
City
State/Province
ZIP code
Email:
Password:

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.