Anmerkungen zur Yii2-Framework-Studie (4) – das erste Widget

Die größte Funktion der Rezeption besteht darin, Bilder anzuzeigen. Nachdem der Benutzer darauf geklickt hat, können die Bilder eingeblendet und vergrößert angezeigt werden.

JQuery verfügt über zwei Plug-Ins, die uns helfen können, unsere Ziele zu erreichen

Magnific-Popup (http://dimsemenov.com/plugins/magnific-popup/): Wird zum Erstellen von Pop-Ups verwendet. Fenster hochfahren.

Bricks (https://github.com/floo51/jquery-bricks): Wenn mehrere Bilder vorhanden sind, hilft es uns automatisch, die Größe der Bilder anzupassen, sodass sie in derselben Zeile angeordnet werden können.

Magnific-Popup kann über Composer installiert werden. Fügen Sie Inhalte unter dem erforderlichen Knoten von Composer.json im Yii-Verzeichnis hinzu.

"require": {  
          ...  
         "dimsemenov/magnific-popup": "*",  
          ...  
    },

Starten Sie dann das Befehlszeilentool im yii-Verzeichnis und führen Sie es aus Composer-Update.

Die installierten Dateien werden im Vendor-Ordner abgelegt. Um auf die Startseite angewendet zu werden, müssen sie in ein AssetBundle umgewandelt und verfügbar gemacht werden. Ein weiterer Vorteil der Verwendung von AssetBundle besteht darin, dass es uns beim Umgang mit Abhängigkeiten helfen kann und wir diese Ressourcen nur dort verwenden können, wo sie benötigt werden, anstatt diese Dinge auf jede Seite zu packen, um die Belastung zu erhöhen.

Erstellen Sie unter frontend/assets eine neue MangificPopupAsset.php mit folgendem Inhalt

namespace frontend\assets;  
  
use yii\web\AssetBundle;  
  
class MagnificPopupAsset extends AssetBundle  
{  
    public $sourcePath = '@vendor/dimsemenov/magnific-popup/dist';  
    public $css = [  
            'magnific-popup.css',  
    ];  
    public $js = [  
            'jquery.magnific-popup.js',  
    ];  
    public $depends = [  
            'yii\web\JqueryAsset',  
    ];  
}

Die vorbereitenden Vorbereitungen sind fertig und Sie können mit dem Schreiben von Widgets beginnen.

Neues Frontend/widgets/ImagePopup.php erstellen (wenn der Ordner nicht existiert, erstellen Sie einen neuen)

Die übergeordnete Klasse ist yiibaseWidget, die hauptsächlich die Methoden init und run überschreiben muss . Init wird zum Initialisieren von Parametern und Run zum Rendern von HTML-Code verwendet.

Der spezifische Code lautet wie folgt

namespace frontend\widgets;

use yii\base\Widget;
use yii\base\InvalidConfigException;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\helpers\Json;
use yii\web\View;
use frontend\assets\MagnificPopupAsset;

class ImagePopup extends Widget {
	
	public $options;
	public $clientOptions = [];
	
	public function init() {
		if (!isset($this->options['src'])) {
			throw new InvalidConfigException("Image src must provided");
		}
		if (!isset($this->options['dest'])) {
			throw new InvalidConfigException("Popup destination must provided");
		}
		if (!isset($this->options['type'])) {
			if(isset($this->clientOptions['type'])) {
				$this->options['type'] = $this->clientOptions['type'];
			} else {
				$this->options['type'] = 'ajax';
			}
		}
		if (!isset($this->options['id'])) {
			$this->options['id'] = $this->getId();
		}
		if (!isset($this->options['wrapDiv'])) {
			$this->options['wrapDiv'] = true;
		}
		if (!isset($this->options['class'])) {
			$this->options['class'] = '';
		}
		$_options = [
			"items" => [ "src" => $this->options['dest'], ],
			"type" => $this->options['type'],
		];
		$this->clientOptions = ArrayHelper::merge($_options, $this->clientOptions);
		parent::init();
	}
	
	public function run() {
		$this->registerClientScript();
		if ($this->options['wrapDiv']) {
			$result = "<div id=&#39;" . $this->options[&#39;id&#39;] . "&#39; ";
			$result .= "class=&#39;" . $this->options[&#39;class&#39;] . "&#39;";
			$result .= ">";
			$result .= Html::img($this->options[&#39;src&#39;]);
			$result .= "</div>";
			return $result;
		} else {
 			return Html::img($this->options[&#39;src&#39;], [
 					&#39;id&#39; => $this->options[&#39;id&#39;],
 					&#39;class&#39; => $this->options[&#39;class&#39;],				
 			]);
		}
	}
	
	protected function registerClientScript() {
		MagnificPopupAsset::register($this->view);
		$option = Json::encode($this->clientOptions);
		$script = "$(&#39;#" . $this->options[&#39;id&#39;] . "&#39;).magnificPopup(" . $option . ")";
		$this->view->registerJs($script, View::POS_READY);
	}
}

Dann können Sie das Steuerelement wie folgt aufrufen

echo ImagePopup::widget([     
    "options" => [  
        "src" => "image/thumb/1.jpg",  
        "dest" => $url,  
    ]  
  ]);

Der src-Parameter ist das angezeigte Miniaturbild und dest ist das Popup nach dem Klicken. Das Ding kann eine URL sein, die mit Ajax aufgerufen wird, oder eine Bildadresse, um das Bild direkt anzuzeigen.

Der HTML-Quellcode des Popup-Fensters ist gekürzt.

Verweisen Sie dann auf ein anderes JQuery-Plug-in, um uns bei der Gestaltung des Bildes zu helfen.

Dieses Plug-in bietet keine Composer-Installationsmethode. Laden Sie die JS-Datei direkt herunter und platzieren Sie sie in frontend/web/js.

In ähnlicher Weise müssen Assets auch als Layer-Paketierung verwendet werden, um sicherzustellen, dass die js nur dort referenziert werden, wo sie benötigt werden.

frontend/assets/BricksAsset.php

namespace frontend\assets;  
  
use yii\web\AssetBundle;  
  
class BricksAsset extends AssetBundle  
{  
    public $basePath = '@webroot';  
    public $baseUrl = '@web';  
    public $css = [  
    ];  
    public $js = [  
        'js/jquery-bricks.min.js',  
    ];  
    public $depends = [  
        'yii\web\JqueryAsset',  
    ];  
}

Es sollte beachtet werden, dass wir sourcePath verwendet haben, bevor wir auf Ressourcen außerhalb des Webordners verwiesen haben, und das yii-Framework sie automatisch in den kopiert Web für uns. Diesmal befindet sich die Datei bereits im Webordner, daher müssen Sie basePath verwenden, um ein wiederholtes Kopieren zu verhindern.

Dann registrieren Sie das Assetbundle auf der Startseite und rufen Sie die Steuerung auf, die wir zuvor geschrieben haben.

frontend/views/site/index.php

<?php

/* @var $this yii\web\View */
use frontend\widgets\ImagePopup;
use yii\helpers\Url;
use frontend\assets\BricksAsset;
use frontend\assets\MasonryAsset;

BricksAsset::register($this);
$this->title = Yii::t(&#39;common&#39;, Yii::$app->name);
?>

<div id="container" style="font-size:0px;">

<?php
  $url = Url::to([&#39;ajax/image-popup&#39;]);
  echo ImagePopup::widget([	
	"options" => [
		"src" => "image/thumb/2.jpg",
		"dest" => $url,
		"wrapDiv" => false,
	]
  ]);
  echo ImagePopup::widget([
  		"options" => [
  				"src" => "image/thumb/5.jpg",
  				"dest" => $url,
  				"wrapDiv" => false,
  		]
  ]);
  echo ImagePopup::widget([
  		"options" => [
  				"src" => "image/thumb/6.jpg",
  				"dest" => $url,
  				"wrapDiv" => false,
  		]
  ]);
  echo ImagePopup::widget([
  		"options" => [
  				"src" => "image/thumb/7.jpg",
  				"dest" => $url,
  				"wrapDiv" => false,
  		]
  ]);
  echo ImagePopup::widget([
  		"options" => [
  				"src" => "image/thumb/8.jpg",
  				"dest" => $url,
  				"wrapDiv" => false,
  		]
  ]);
  echo ImagePopup::widget([
  		"options" => [
  				"src" => "image/thumb/9.jpg",
  				"dest" => $url,
  				"wrapDiv" => false,
  		]
  ]);
  echo ImagePopup::widget([
  		"options" => [
  				"src" => "image/thumb/10.jpg",
  				"dest" => $url,
  				"wrapDiv" => false,
  		]
  ]);
  echo ImagePopup::widget([
  		"options" => [
  				"src" => "image/thumb/11.jpg",
  				"dest" => $url,
  				"wrapDiv" => false,
  		]
  ]);
  ?>
</div>

<?php 
$script ="$(&#39;#container&#39;).bricks();";
$script .= "$(window).resize(function() {
  $(&#39;#container&#39;).data(&#39;bricks&#39;).layout();
});";
$this->registerJs($script);
?>

Der Effekt nach Abschluss und der Effekt nach dem Klicken zum Popup sind wie folgt.

Das Obige sind die Yii2-Framework-Studiennotizen (4) – der Inhalt des ersten Widgets. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www. php.cn)!