CJuiDialog弹出框的那些事... [ 技术分享 ]

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

    ),

));

?>