Yii2 프레임워크 연구 노트(4) -- 첫 번째 위젯

프런트 데스크의 가장 큰 기능은 사용자가 클릭하면 사진이 팝업되어 확대되어 표시되는 것입니다.

JQuery에는 목표 달성에 도움이 되는 두 가지 플러그인이 있습니다.

Magnific-Popup(http://dimsemenov.com/plugins/magnific-popup/): 팝업을 만드는 데 사용됩니다. 창문을 올려.

브릭(https://github.com/floo51/jquery-bricks): 이미지가 여러 개 있을 때 자동으로 이미지의 크기를 조정하여 같은 줄에 배열할 수 있도록 도와줍니다.

Magnific-Popup은 Composer를 통해 설치할 수 있습니다. Yii 디렉터리에 있는 작곡가.json의 require 노드에 콘텐츠를 추가하세요.

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

그런 다음 yii 디렉터리에서 명령줄 도구를 시작하고 실행하세요. 작곡가 업데이트.

설치된 파일은 Vendor 폴더에 위치합니다. 프론트 페이지에 적용하려면 AssetBundle로 만들어 노출해야 합니다. AssetBundle을 사용하는 또 다른 이점은 종속성을 처리하는 데 도움이 될 수 있으며 모든 페이지에서 이러한 리소스를 래핑하여 부담을 늘리는 대신 필요한 경우에만 이러한 리소스를 사용할 수 있다는 것입니다.

다음 내용을 포함하여 frontend/assets 아래에 새로운 MangificPopupAsset.php를 생성합니다

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

사전 준비가 완료되었으며 위젯 작성을 시작할 수 있습니다.

새 frontend/widgets/ImagePopup.php 생성(폴더가 없으면 새로 생성)

상위 클래스는 yiibaseWidget이며 주로 init 및 run 메소드를 재정의해야 합니다. . init는 매개변수를 초기화하는 데 사용되고, run은 html 코드를 렌더링하는 데 사용됩니다.

구체적인 코드는 다음과 같습니다

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

그러면 다음과 같이 컨트롤을 호출할 수 있습니다

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

src 매개변수는 표시되는 썸네일이고, dest는 클릭 후 팝업 이미지를 직접 표시하기 위해 ajax로 호출되는 URL 또는 이미지 주소가 될 수 있습니다.

팝업창의 html 소스코드를 축약하였습니다.

그런 다음 다른 JQuery 플러그인을 참조하여 이미지를 배치하는 데 도움을 받으세요.

이 플러그인은 작곡가 설치 방법을 제공하지 않습니다. js 파일을 직접 다운로드하여 frontend/web/js에 배치할 수 있습니다.

마찬가지로, js가 필요한 경우에만 참조되도록 자산을 레이어 패키징으로 사용해야 합니다.

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

웹 폴더 외부의 리소스를 참조하기 전에 sourcePath를 사용했으며 yii 프레임워크는 이를 자동으로 우리를 위한 웹 폴더입니다. 이번에는 파일이 이미 웹 폴더에 있으므로 반복 복사를 방지하려면 basePath를 사용해야 합니다.

그런 다음 홈 페이지에 자산 번들을 등록하고 이전에 작성한 컨트롤을 호출합니다.

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

완료 후 효과와 클릭 후 팝업 효과는 다음과 같습니다.

위는 Yii2 프레임워크 학습 노트(4) - 첫 번째 위젯의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www. php.cn)!