Yii Framework 開發(fā)教程(37) Zii 組件-Dialog 示例

CJuiDialog 用來顯示對話框，模式或非模式對話框。它封裝了 JUI Dialog 插件。

其基本用法如下：

    <h2><?php echo 'Dialog';?></h2>

    <?php
    $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
        'id'=>'mydialog',
        'options'=>array(
                    'title'=>'Dialog',
                    'width'=>500,
                    'height'=>300,
                    'autoOpen'=>false,
                    ),
                ));
    echo 'dialog content here';
    $this->endWidget('zii.widgets.jui.CJuiDialog');
    ?>

    <?php echo CHtml::link('Dialog', '#',
    array('onclick'=>'$("#mydialog").dialog("open"); return false;')); ?>

    <br />

    <?php
    $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
        'id'=>'mymodal',
        'options'=>array(
                    'title'=>'Modal Dialog',
                    'width'=>400,
                    'height'=>200,
                    'autoOpen'=>false,
                    'resizable'=>false,
                    'modal'=>true,
                    'overlay'=>array(
                        'backgroundColor'=>'#000',
                        'opacity'=>'0.5'
                        ),
                    'buttons'=>array(
                        'OK'=>'js:function(){alert("OK");}',
                        'Cancel'=>'js:function(){$(this).dialog("close");}',
                        ),
                    ),
                ));
    echo 'Modal dialog content here ';
    $this->endWidget('zii.widgets.jui.CJuiDialog');
    ?>

    <?php echo CHtml::link('Modal Dialog', '#',
    array('onclick'=>'$("#mymodal").dialog("open"); return false;')); ?>

模式和非模式通過設置’modal’=>true/false 來配置，CJuiDialog 用來定義對話框，要顯示對話框，還是需要通過其它 UI 組件，本例通過 Link 來顯示對話框。

http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/37.1.jpg" alt="picture37.1" />

本例下載