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

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

(2011-10-20 17:41:54)

转载▼

标签：  杂谈

分类： yii

<?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,

       ),

   ));

?>