Notes d'étude du framework Yii2 (4) -- le premier widget

La fonction la plus importante de la réception est d'afficher des images après que l'utilisateur a cliqué, les images peuvent apparaître et s'afficher agrandies.

JQuery dispose de deux plug-ins qui peuvent nous aider à atteindre nos objectifs

Magnific-Popup (http://dimsemenov.com/plugins/magnific-popup/) : utilisé pour créer des pop- fenêtres.

Briques(https://github.com/floo51/jquery-bricks) : Lorsque plusieurs images existent, cela nous aidera automatiquement à ajuster la taille des images afin qu'elles puissent être disposées sur la même ligne.

Magnific-Popup peut être installé via Composer. Ajoutez du contenu sous le nœud require de composer.json dans le répertoire Yii

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

Ensuite, démarrez l'outil de ligne de commande dans le répertoire yii et exécutez mise à jour du compositeur.

Les fichiers installés sont placés dans le dossier du fournisseur pour être appliqués à la première page, ils doivent être transformés en AssetBundle et exposés. Un autre avantage de l'utilisation d'AssetBundle est qu'il peut nous aider à gérer les dépendances, et nous ne pouvons utiliser ces ressources que lorsque cela est nécessaire au lieu de les envelopper dans chaque page pour augmenter la charge.

Créez un nouveau MangificPopupAsset.php sous frontend/assets avec le contenu suivant

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',  
    ];  
}

Les préparatifs préliminaires sont prêts et vous pouvez commencer à écrire des widgets.

Créez un nouveau frontend/widgets/ImagePopup.php (si le dossier n'existe pas, créez-en un nouveau)

La classe parent est yiibaseWidget, qui doit principalement remplacer les méthodes init et run . init est utilisé pour initialiser les paramètres et run est utilisé pour restituer le code HTML.

Le code spécifique est le suivant

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);
	}
}

Ensuite, vous pouvez appeler le contrôle comme suit

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

Le paramètre src est la vignette affichée, et dest est le pop-up après avoir cliqué. La chose peut être une URL, appelée avec ajax, ou une adresse d'image, pour afficher l'image directement.

Le code source html de la fenêtre pop-up est abrégé.

Référencez ensuite un autre plug-in JQuery pour nous aider à mettre en page l'image.

Ce plug-in ne fournit pas de méthode d'installation du compositeur. Vous pouvez directement télécharger le fichier js et le placer dans frontend/web/js.

De même, les actifs doivent également être utilisés comme emballage de couches pour garantir que le js n'est référencé que là où cela est nécessaire.

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',  
    ];  
}

Il convient de noter qu'avant de référencer les ressources en dehors du dossier Web, nous avons utilisé sourcePath, et le framework yii les copiera automatiquement dans le web pour nous. Cette fois, le fichier se trouve déjà dans le dossier Web, vous devez donc utiliser basePath pour éviter toute copie répétée.

Ensuite, enregistrez l'assetbundle sur la page d'accueil et appelez le contrôle que nous avons écrit précédemment.

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

L'effet après l'achèvement et l'effet après avoir cliqué pour apparaître sont les suivants.

Ce qui précède sont les notes d'étude du framework Yii2 (4) - le contenu du premier widget. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www. php.cn) !