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,

      ),

  ));

?> 

来源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/