CJuiAccordion

panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

panel 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

panel 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

panel 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
HTML accordion
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
CJuiTabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
CPortlet

This content is in a portlet

<?php $this->beginWidget('zii.widgets.CPortlet'); ?>      
...insert content here...
<?php $this->endWidget(); ?>
CJuiAutoComplete

Type john in the fild to see it at work

CJuiDatePicker

Click on the element below to see date picker

CJuiButton
CJuiDialog
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
CJuiProgressBar

Standard progress bar

with no styles defined

Striped progress bar

'htmlOptions'=>array('class'=>'progress-striped'),

Striped scrolling progress bar

'htmlOptions'=>array('class'=>'progress-striped active'),

Different colors to chose from

'htmlOptions'=>array('class'=>'progress-info'),

'htmlOptions'=>array('class'=>'progress-success')

'htmlOptions'=>array('class'=>'progress-warning'),

'htmlOptions'=>array('class'=>'progress-danger'),

'htmlOptions'=>array('class'=>'progress-info progress-striped'),

'htmlOptions'=>array('class'=>'progress-success progress-striped'),

'htmlOptions'=>array('class'=>'progress-warning progress-striped'),

'htmlOptions'=>array('class'=>'progress-danger progress-striped'),

HTML - Progress bar

Standard progress bar

.progress

Striped progress bar

.progress-striped

Striped active progress bar

.progress-striped .active

Different colors to chose from

.progress-info

.progress-success

.progress-warning

.progress-danger

.progress-info .progress-striped

.progress-success .progress-striped

.progress-warning .progress-striped

.progress-danger .progress-striped

CJuiSlider

with no style defined

.progress-info

.progress-success

.progress-warning

.progress-danger

.progress-striped