Yii Widgets

一个小部件是一个可重用的客户端代码，其中包含HTML，CSS和JS。此代码包含最少的逻辑，并封装在 yii \ base \ Widget 对象中。我们可以在任何视图中轻松插入和应用此对象。

第1步 - 要查看小部件，请使用以下代码在 SiteController中 创建一个 actionTestWidget 函数。

public  function actionTestWidget() {
   return $this->render('testwidget');
}

在上面的例子中，我们刚刚返回了一个名为 “testwidget” 的视图。 **

第2步 - 现在，在views / site文件夹内，创建一个名为 testwidget.php 的视图文件。

<?php
   use yii\bootstrap\Progress;
?>
<?= Progress::widget(['percent' => 60, 'label' => 'Progress 60%']) ?>

第3步 - 如果您转到 http：// localhost：8080 / index.php？r =站点/测试小部件， 您将看到进度栏小部件。

进度条

使用小部件

要在 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步 - 在项目根目录下创建一个组件文件夹。在该文件夹中，使用以下代码创建一个名为 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(); ?>

您将看到以下输出 -

H1中的第一个小工具

重点

小工具应该 -

按照MVC模式创建。你应该保持表达层的视图和逻辑的部件类。
被设计成独立的。最终开发人员应该能够将其设计为View。