yii jquery折叠、弹对话框、拖拽、滑动条、ol和ul列表、局部内容切换
引入jquery
<?php Yii::app()->clientScript->registerCoreScript('jquery');?>
<?php
//yii折叠效果（CJuiAccordion）
$this->widget('zii.widgets.jui.CJuiAccordion', array(
'panels'=>array(
'分类1'=>'分类1的内容',
'分类2'=>'分类2的内容',
// 分类可以渲染一个页面，例如分类3
//'分类3'=>$this->renderPartial('_partial',null,true),
),
'options'=>array(
'animated'=>'bounceslide',
),
));
?>
<?php
//按钮加js弹框提示
$this->widget('zii.widgets.jui.CJuiButton',
array(
'name'=>'button',
'caption'=>'提交',
'value'=>'asd',
'onclick'=>'js:function(){alert("提交成功！"); this.blur(); return false;}',
)
);
?>
<?php
//谈对话框
$this->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;',
));
?>
<?php
//拖拽
$this->beginWidget('zii.widgets.jui.CJuiDraggable', array(
// additional javascript options for the draggable plugin
'options'=>array(
'scope'=>'myScope',
),
));
echo '拖拽的内容！';
$this->endWidget();
?>
<?php
//ol列表
$this->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',
),
));
?>
<?php
//滑动条
$this->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;'
),
));
?>
<?php
//局部内容切换
$this->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,
),
));
?>