Yii系列总结：[2]Yii自带的各种效果

1、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',

     ),

 ));

?>

2、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;',

));

?>

3、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,

      ),

  ));

?> 

4、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',

   沟离   ),

  ));

?>

5、5、拖拽 （CJuiDraggable）

<?php

//拖拽

 $this->beginWidget('zii.widgets.jui.CJuiDraggable', array(

     // additional javascript options for the draggable plugin

     'options'=>array(

         'scope'=>'myScope',

     ),

 ));

     echo '拖拽的内容！';

 $this->endWidget();

?>