masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > php教程 > PHP开发 > Yii2 framework学习笔记(四) -- 第一个Widget

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

黄舟
Lepaskan： 2016-12-30 09:51:06
asal
1334 orang telah melayarinya

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

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": "*",  
          ...  
    },
Salin selepas log masuk

然后在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',  
    ];  
}
Salin selepas log masuk

前期准备工作就绪，可以开始编写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 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);
	}
}
Salin selepas log masuk

然后就可以以如下方式调用该控件

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

其中src参数是展示的缩略图，dest是点击后弹出的东西，可以是一个url，以ajax调用，也可以是一个图片地址，直接展示图片。

弹出窗口的html源码略。

然后引用另一个JQuery插件帮我们布局图片。

这个插件没有提供composer安装方式，直接下载js文件并放在frontend/web/js里。

同样，也需要用asset做层包装，保证只在需要的地方引用该js。

frontend/assets/BricksAsset.php

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

需要注意的是，之前引用web文件夹外的资源，使用的是sourcePath，yii框架会自动帮我们复制到web文件夹下。这次文件已经在web文件夹下了，则要使用basePath，防止重复复制。

然后在首页页面注册该assetbundle，并调用我们之前写的控件。

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);
?>
Salin selepas log masuk

完成后效果及点击弹出后效果如下。

666.png

 以上就是Yii2 framework学习笔记(四) -- 第一个Widget的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！


Label berkaitan：
Yii2 ，framework，Widget
sumber：php.cn
Artikel sebelumnya：jquery ajax结合thinkphp的getjson实现跨域的方法 Artikel seterusnya：ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2210
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2361
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1974
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1860
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1925
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan