Yii - 小部件

小部件是可以重複使用的客戶端程式碼，包含 HTML、CSS 和 JS。此程式碼包含最少的邏輯，並封裝在yii\base\Widget物件中。我們可以輕鬆地將此物件插入並應用到任何檢視中。

步驟 1 − 要檢視小部件的實際操作，請在SiteController中建立一個actionTestWidget函式，幷包含以下程式碼。

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

在上面的示例中，我們只是返回了一個名為“testwidget”的View。

步驟 2 − 現在，在views/site資料夾內，建立一個名為testwidget.php的View檔案。

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

步驟 3 − 如果您訪問https://: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()函式。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 − 訪問https://: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 模式建立。您應該將表示層保留在檢視中，並將邏輯保留在小部件類中。
設計為自包含的。最終開發人員應該能夠將其設計到檢視中。

列印頁面