yii jquery折叠、弹对话框、拖拽、滑动条、ol和ul列表、局部内容切换


引入jquery

clientScript->registerCoreScript('jquery');?>

widget('zii.widgets.jui.CJuiAccordion', array(
'panels'=>array(
'分类1'=>'分类1的内容',
'分类2'=>'分类2的内容',
// 分类可以渲染一个页面,例如分类3
//'分类3'=>$this->renderPartial('_partial',null,true),
),
'options'=>array(
'animated'=>'bounceslide',
),
));
?>

widget('zii.widgets.jui.CJuiButton',
array(
'name'=>'button',
'caption'=>'提交',
'value'=>'asd',
'onclick'=>'js:function(){alert("提交成功!"); this.blur(); return false;}',
)
);
?>

beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog',
// additional javascript options for the dialog plugin
'options'=>array(
'title'=>'对话框',
'autoOpen'=>false,
),
));
//输出弹出框的内容
//echo $this->renderPartial('_form',null,true);

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

//打开对话框的链接
echo CHtml::link('登录', '#', array(
'onclick'=>'$("#mydialog").dialog("open"); return false;',
));
?>

beginWidget('zii.widgets.jui.CJuiDraggable', array(
// additional javascript options for the draggable plugin
'options'=>array(
'scope'=>'myScope',
),
));
echo '拖拽的内容!';
$this->endWidget();
?>

widget('zii.widgets.jui.CJuiSelectable', array(
'items'=>array(
'id1'=>'Item 1',
'id2'=>'Item 2',
'id3'=>'Item 3',
),
// additional javascript options for the selectable plugin
'options'=>array(
'delay'=>'300',
),
));
//ul列表
$this->widget('zii.widgets.jui.CJuiSortable', array(
'items'=>array(
'id1'=>'Item 1',
'id2'=>'Item 2',
'id3'=>'Item 3',
),
// additional javascript options for the accordion plugin
'options'=>array(
'delay'=>'300',
),
));
?>

widget('zii.widgets.jui.CJuiSlider', array(
'value'=>37,
// additional javascript options for the slider plugin
'options'=>array(
'min'=>10,
'max'=>50,
),
'htmlOptions'=>array(
'style'=>'height:20px;'
),
));
?>

widget('zii.widgets.jui.CJuiTabs', array(
'tabs'=>array(
'分类1'=>'分类1',
'分类2'=>array('content'=>'分类2', 'id'=>'tab2'),
//'分类3'=>$this->render('_form',null,true),//渲染一个页面
// 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,
),
));

?>

来源http://guxing.info/2012/03/20/yii-jquery%E6%8A%98%E5%8F%A0%E3%80%81%E5%BC%B9%E5%AF%B9%E8%AF%9D%E6%A1%86%E3%80%81%E6%8B%96%E6%8B%BD%E3%80%81%E6%BB%91%E5%8A%A8%E6%9D%A1%E3%80%81ol%E5%92%8Cul%E5%88%97%E8%A1%A8%E3%80%81%E5%B1%80/

Archives