Beautiful UI Controls

Datepicker Control

he Datepicker control provides a large number of configurable options for working with dates.

Datepicker Display 3 Months:

Select a date:

Datepicker Display 1 months some hidden fields:

Select a date:

Spinner Control

Spinner control provide an easy way to select numerical value

Slider Control

The slider control is typically used to select values along a scale. jQuery UI sliders have a variety of options: they can be free-form, snapped to certain values, bound to specific ranges, and displayed horizontally or vertically.

Slider Value:

Slider Value: Rs.

Slider Value: to

Accordion Control

The Accordion control is great for displaying groups of information that the user can reveal and hide individually.

Section 1#Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet ullamcorper nisi. Integer vel tincidunt tortor. Phasellus quis tempor est, ut ultrices tellus. Vestibulum malesuada lacus nec felis rutrum, eget sagittis sem dapibus. Curabitur consectetur pulvinar tincidunt. Aliquam nec scelerisque velit. Aliquam at neque urna. Sed sed vulputate mauris, in vulputate orci. Sed egestas augue rutrum augue ullamcorper, convallis facilisis arcu convallis. In lorem risus, posuere ut interdum auctor, ultricies ut mi.

Section 2#Heading

Curabitur magna magna, ultrices feugiat elit non, posuere sagittis orci. Cras finibus enim eu rutrum elementum. Aliquam sapien leo, hendrerit sit amet est molestie, semper rutrum nulla. Aenean lacinia lacus quis tortor posuere eleifend. Phasellus egestas ultricies lorem sit amet porta. Sed vestibulum dolor eget risus viverra, ut laoreet elit tempus. Sed sit amet turpis at risus euismod hendrerit a id ante. Etiam eget scelerisque diam, vitae viverra enim. Nam varius, quam viverra malesuada sagittis, arcu odio sodales metus, id imperdiet massa urna id mauris. Phasellus posuere vestibulum sapien, ut pellentesque lorem fringilla id. Ut a lorem laoreet, tristique arcu porta, vulputate tortor. Vivamus vehicula dapibus varius. Vestibulum at ultrices felis, a ultricies lectus. Nam ac suscipit diam. Pellentesque vel mauris ullamcorper, ullamcorper ex sit amet, egestas justo. Phasellus risus dui, suscipit pellentesque arcu consectetur, auctor blandit arcu.

Section 3#Heading

Aenean consequat sollicitudin odio, a vestibulum sapien tempus et. Aliquam velit magna, imperdiet et gravida ac, rhoncus eget ex. Vivamus egestas sapien maximus aliquet malesuada. Fusce sed mattis orci. Praesent tincidunt dui sed eros mattis rutrum. Donec ac sagittis metus, vel feugiat risus. Cras maximus nec massa quis faucibus. Nullam purus nisl, malesuada vitae eleifend volutpat, dapibus in sem. Vivamus sagittis varius lorem ut gravida. Phasellus sed nulla vel ipsum iaculis dignissim. Quisque sit amet auctor nulla. Sed tempus mauris id magna porttitor egestas. In nisl risus, interdum vitae ligula non, sodales faucibus metus.

Section 4#Heading

Sed tincidunt ut dui at consectetur. Ut dapibus metus dolor, et pulvinar tellus sodales ac. Duis vitae posuere tortor. Cras sapien diam, vestibulum at velit in, sagittis molestie arcu. Cras aliquam rutrum purus, in consectetur augue tincidunt et. Phasellus dictum risus quis massa maximus, sit amet finibus lacus aliquam. In turpis tortor, luctus id volutpat ac, ultricies quis sem. Suspendisse dignissim egestas ullamcorper. Integer aliquet, tortor sit amet vestibulum suscipit, augue enim rutrum diam, tincidunt pellentesque nisi augue sed dui. Cras vitae dui in tellus cursus interdum.

Progress Bar Control

Progress bars give the user an idea of how far along a particular process is, and can help give them a sense of how much time is left to perform a particular task. They can also have an "indeterminate" state, which tells the user that there isn't any way to calculate how much time the task will take.

Progress bars default to a maximum value of 100, but that can be customized.

By placing a positioned element within the progress bar, we can create a label.

Downloading...

To create an indeterminate progress bar, set the value property to "false". Progress bars are also styled using CSS, so you can override their appearance by using the right jQueryUI CSS class names.