小部件是可重用的客户端代码,其中包含HTML,CSS和JS。该代码包含最少的逻辑,并包装在yii \ base \ Widget对象中。我们可以轻松地在任何视图中插入并应用该对象。
步骤1-要查看运行中的小部件,请使用以下代码在SiteController中创建一个actionTestWidget函数。
public function actionTestWidget() { return $this->render('testwidget'); }
在上面的示例中,我们只返回了一个名为“ testwidget”的视图。
步骤2-现在,在views / site文件夹内,创建一个名为testwidget.php的View文件。
<?php use yii\bootstrap\Progress; ?> <?= Progress::widget(['percent' => 60, 'label' => 'Progress 60%']) ?>
步骤3-如果您访问http:// localhost:8080 / index.php?r = site / test-widget,则将看到进度条小部件。

使用小部件
要在View中使用小部件,应调用yii \ base \ Widget :: widget()函数。此函数采用用于初始化小部件的配置数组。在上一个示例中,我们插入了带有百分比和带标签的配置对象参数的进度条。
一些小部件带有一部分内容。它应该放在yii \ base \ Widget :: begin()和 yii \ base \ Widget :: end()函数之间。例如,以下窗口小部件显示联系表单-
<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?> <?= $form->field($model, 'name') ?> <?= $form->field($model, 'email') ?> <?= $form->field($model, 'subject') ?> <?= $form->field($model, 'body')->textArea(['rows' => 6]) ?> <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [ 'template' => '<div class="row"> <div class = "col-lg-3">{image}</div> <div class = "col-lg-6">{input}</div> </div>', ]) ?> <div class = "form-group"> <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'contact-button']) ?> </div> <?php ActiveForm::end(); ?>
创建小部件
要创建小部件,您应该从yii \ base \ Widget扩展。然后,您应该覆盖yii \ base \ Widget :: init()和yii \ base \ Widget :: run()函数。在运行()函数将返回渲染的结果。该的init()函数应该归小部件的属性。
步骤1-在项目根目录中创建一个components文件夹。在该文件夹内,使用以下代码创建一个名为FirstWidget.php的文件。
<?php namespace app\components; use yii\base\Widget; class FirstWidget extends Widget { public $mes; public function init() { parent::init(); if ($this->mes === null) { $this->mes = 'First Widget'; } } public function run() { return "<h1>$this->mes</h1>"; } } ?>
第2步–修改了testwidget通过以下方式视图。
<?php use app\components\FirstWidget; ?> <?= FirstWidget∷widget() ?>
步骤3-转到http:// localhost:8080 / index.php?r = site / test-widget。您将看到以下内容。

步骤4-要在begin()和end()调用之间包含内容,您应该修改FirstWidget.php文件。
<?php namespace app\components; use yii\base\Widget; class FirstWidget extends Widget { public function init() { parent::init(); ob_start(); } public function run() { $content = ob_get_clean(); return "<h1>$content</h1>"; } } ?>
步骤5-现在,h1标签将包围所有内容。注意,我们使用ob_start()函数来缓冲输出。修改以下代码中给出的testwidget视图。
<?php use app\components\FirstWidget; ?> <?php FirstWidget::begin(); ?> First Widget in H1 <?php FirstWidget::end(); ?>
您将看到以下输出:

重要事项
小部件:
- 按照MVC模式创建。您应该在小部件类的视图和逻辑中保留表示层。
- 设计成独立的。最终开发人员应该能够将其设计为View。
作者:terry,如若转载,请注明出处:https://www.web176.com/yii/574.html