Yii2 framework学习笔记(四) — 第一个Widget

前台最大的作用就是展示图片，在用户点击后，可以将图片弹出放大展示出来。

JQuery有两个插件可以帮我们达到我们的目标

Magnific-Popup(http://dimsemenov.com/plugins/magnific-popup/): 用来制作弹出窗口。

Bricks(https://github.com/floo51/jquery-bricks): 多个图片存在时，自动帮我们调整图片大小，使其能够排在同一行。

Magnific-Popup可以通过Composer进行安装，在Yii目录下的composer.json的require节点下添加内容

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

然后在yii的目录下启动命令行工具，运行composer update。

安装后的文件放置在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',      ];  }

前期准备工作就绪，可以开始编写widget。

新建frontend/widgets/ImagePopup.php(文件夹没有则新建)

父类为yii\base\Widget，主要需要复写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 InvalidConfigExcep<a style="color:transparent">来源gao*daima.com搞@代#码网</a>tion("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='" . $this->options['id'] . "' ";			$result .= "class='" . $this->options['class'] . "'";			$result .= ">";			$result .= Html::img($this->options['src']);			$result .= "</div>";			return $result;		} else { 			return Html::img($this->options['src'], [ 					'id' => $this->options['id'], 					'class' => $this->options['class'],				 			]);		}	}		protected function registerClientScript() {		MagnificPopupAsset::register($this->view);		$option = Json::encode($this->clientOptions);		$script = "$('#" . $this->options['id'] . "').magnificPopup(" . $option . ")";		$this->view->registerJs($script, View::POS_READY);	}}

喜欢 (0)赏

[搞代码]

分享 (0)