Yii系列总结:[2]Yii自带的各种效果
1、折叠效果(CJuiAccordion)<?php$this->widget('zii.widgets.jui.CJuiAccordion', array( 'panels'=>array( '分类1'=>'分类1的内容', '分类2'=>'分类2的内容', // 分类可以渲染一个页面,例如分类3 //'分类3'=>$this->renderPartial('_partial',null,true), ), 'options'=>array( 'animated'=>'bounceslide', ),));?>
![Yii系列总结:[2]Yii自带的各种效果](https://exp-picture.cdn.bcebos.com/6002c9d4483104eb2f12b2bc092b74ee1d324e09.jpg)
2、谈对话框(CJuiDialog)<?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;',));?>
![Yii系列总结:[2]Yii自带的各种效果](https://exp-picture.cdn.bcebos.com/05aae8a75f0f822ba85bf181c018512c8df14d09.jpg)
3、局部内容切换(CJuiTabs)<?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, ), ));?>
![Yii系列总结:[2]Yii自带的各种效果](https://exp-picture.cdn.bcebos.com/1d735518512c8cf13912cb80c384cde34a2c4609.jpg)
4、ol列表 和 ul列表(CJuiSelectable-or-CJuiSortable)<?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', ), ));?>
![Yii系列总结:[2]Yii自带的各种效果](https://exp-picture.cdn.bcebos.com/8db0c6a7263348842956a69fddee7b7f870e4509.jpg)
5、拖拽(CJuiDraggable)<?php//拖拽$this->beginWidget('zii.widgets.jui.CJuiDraggable', array(// additional javascript options for the draggable plugin'options'=>array('scope'=>'myScope',),));echo '拖拽的内容!';$this->endWidget();?>
![Yii系列总结:[2]Yii自带的各种效果](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f6ebb91c66ef4fcf5ef0d4109.jpg)