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

最新推荐文章于 2021-03-09 19:33:22 发布

转载最新推荐文章于 2021-03-09 19:33:22 发布 · 735 阅读

PHP开发框架（YII）专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何使用CJuiDialog创建模式和非模式对话框。通过实例展示了对话框的基本配置选项，包括尺寸、按钮及回调函数等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

其基本用法如下

[php] view plain copy print ?

<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;')); ?>

<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 来显示对话框。