Yii Framework 开发教程(37) Zii组件-Dialog示例

jerry Yii 2015年11月24日 收藏

CJuiDialog用来显示对话框,模式或非模式对话框。它封装了 JUI Dialog插件。

其基本用法如下:

  1. <h2><?php echo 'Dialog';?></h2>
  2.  
  3. <?php
  4. $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
  5. 'id'=>'mydialog',
  6. 'options'=>array(
  7. 'title'=>'Dialog',
  8. 'width'=>500,
  9. 'height'=>300,
  10. 'autoOpen'=>false,
  11. ),
  12. ));
  13. echo 'dialog content here';
  14. $this->endWidget('zii.widgets.jui.CJuiDialog');
  15. ?>
  16.  
  17. <?php echo CHtml::link('Dialog', '#',
  18. array('onclick'=>'$("#mydialog").dialog("open"); return false;')); ?>
  19.  
  20. <br />
  21.  
  22. <?php
  23. $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
  24. 'id'=>'mymodal',
  25. 'options'=>array(
  26. 'title'=>'Modal Dialog',
  27. 'width'=>400,
  28. 'height'=>200,
  29. 'autoOpen'=>false,
  30. 'resizable'=>false,
  31. 'modal'=>true,
  32. 'overlay'=>array(
  33. 'backgroundColor'=>'#000',
  34. 'opacity'=>'0.5'
  35. ),
  36. 'buttons'=>array(
  37. 'OK'=>'js:function(){alert("OK");}',
  38. 'Cancel'=>'js:function(){$(this).dialog("close");}',
  39. ),
  40. ),
  41. ));
  42. echo 'Modal dialog content here ';
  43. $this->endWidget('zii.widgets.jui.CJuiDialog');
  44. ?>
  45.  
  46. <?php echo CHtml::link('Modal Dialog', '#',
  47. array('onclick'=>'$("#mymodal").dialog("open"); return false;')); ?>
  48.  

模式和非模式通过设置?modal?=>true/false 来配置,CJuiDialog用来定义对话框,要显示对话框,还是需要通过其它UI组件,通过Link 来显示对话框。

201212129006

下载地址