JQuery UI Bootstrap

JQuery UI Bootstrap A Bootstrap-themed kickstart for JQuery UI widgets

We came across of Addyosmani's work on JQuery's UI CSS to have a Bootstrap look-alike theme and we thought that could be a good asset to YiiBooster. This way we can still make use of Yii's Jui library widgets with Bootstrap's design.

CJuiAccordion

For more information, please visit: http://www.yiiframework.com/doc/api/1.1/CJuiAccordion

$this->widget('zii.widgets.jui.CJuiAccordion', array(
	'panels'=>array(
		'panel 1'=>'content for panel 1',
		'panel 2'=>'content for panel 2',
		// panel 3 contains the content rendered by a partial view
		// 'panel 3'=>$this->renderPartial('_partial',null,true),
	),
	// additional javascript options for the accordion plugin
	'options'=>array(
		'animated'=>'bounceslide',
	),
));

CJuiAutoComplete

For more information, please visit: http://www.yiiframework.com/doc/api/1.1/CJuiAutoComplete

$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'name'=>'city',
    'source'=>array('ac1', 'ac2', 'ac3'),
    // additional javascript options for the autocomplete plugin
    'options'=>array(
        'minLength'=>'2',
    ),
    'htmlOptions'=>array(
        'style'=>'height:20px;'
    ),
));

CJuiButton

For more information, please visit: http://www.yiiframework.com/doc/api/1.1/CJuiButton

Button

$this->widget('zii.widgets.jui.CJuiButton', array(
'name'=>'submit',
'caption'=>'Save',
// you can easily change the look of the button by providing the correct class
// ui-button-error, ui-button-primary, ui-button-success
'htmlOptions' => array('class'=>'ui-button-error'),
'onclick'=>new CJavaScriptExpression('function(){alert("Yes");}'),
));

Radio Button

<?php $radio = $this->beginWidget('zii.widgets.jui.CJuiButton', array(
    'name'=>'btnradio',
    'buttonType'=>'buttonset'
)); ?>
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
<?php $this->endWidget();?>

CheckBoxes

<?php $radio = $this->beginWidget('zii.widgets.jui.CJuiButton', array(
    'name'=>'btnradio',
    'buttonType'=>'buttonset'
)); ?>
<input type="checkbox" id="check1" /><label for="check1">B</label>
<input type="checkbox" id="check2" /><label for="check2">I</label>
<input type="checkbox" id="check3" /><label for="check3">U</label>
<?php $this->endWidget();?>

CJuiDatePicker

For more information, please visit: http://www.yiiframework.com/doc/api/1.1/CJuiDatePicker

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'name'=>'publishDate',
    // additional javascript options for the date picker plugin
    'options'=>array(
        'showAnim'=>'fold',
    ),
    'htmlOptions'=>array(
        'style'=>'height:20px;'
    ),
));

CJuiDialog

For more information, please visit: http://www.yiiframework.com/doc/api/1.1/CJuiDialog

$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog',
// additional javascript options for the dialog plugin
'options'=>array(
    'title'=>'Dialog box 1',
    'autoOpen'=>false,
    'buttons' => array(
        array('text'=>'Close','click'=> 'js:function(){$(this).dialog("close");}'),
        array('text'=>'Cancel','click'=> 'js:function(){$(this).dialog("close");}'),
    ),
),
));

echo 'dialog content here';

$this->endWidget('zii.widgets.jui.CJuiDialog');

// the button that may open the dialog
$this->widget('zii.widgets.jui.CJuiButton', array(
    'name'=>'btndialog',
    'caption'=>'Open Dialog',
    'onclick'=>new CJavaScriptExpression('function(){$("#mydialog").dialog("open"); return false;}'),
));

CJuiProgressBar

For more information, please visit: http://www.yiiframework.com/doc/api/1.1/CJuiProgressBar

$this->widget('zii.widgets.jui.CJuiProgressBar', array(
    'value'=>75,
    // additional javascript options for the progress bar plugin
    'options'=>array(
        'change'=>new CJavaScriptExpression('function(event, ui) {...}'),
    ),
    'htmlOptions'=>array(
        'style'=>'height:20px;'
    ),
));

CJuiSlider

For more information, please visit: http://www.yiiframework.com/doc/api/1.1/CJuiSlider

// simple example
$this->widget('zii.widgets.jui.CJuiSlider', array(
    'value'=>37,
    // additional javascript options for the slider plugin
    'options'=>array(
        'min'=>10,
        'max'=>50,
    ),
));

// range slider
$this->widget('zii.widgets.jui.CJuiSlider', array(
    'options'=>array(
        'min'=>10,
        'max'=>50,
        'range'=>true,
        'values'=>array(5, 20)
    ),
));

CJuiTabs

For more information, please visit: http://www.yiiframework.com/doc/api/1.1/CJuiTabs

$this->widget('zii.widgets.jui.CJuiTabs', array(
    'tabs'=>array(
        'StaticTab 1'=>'Content for tab 1',
        'StaticTab 2'=>array('content'=>'Content for tab 2', 'id'=>'tab2'),
        // panel 3 contains the content rendered by a partial view
        // 'AjaxTab'=>array('ajax'=>$ajaxUrl),
    ),
    // additional javascript options for the tabs plugin
    'options'=>array(
        'collapsible'=>true,
    ),
));