フロントデスクの最大の機能は、ユーザーがクリックすると、写真がポップアップして拡大表示されることです。
JQuery には、目標の達成に役立つ 2 つのプラグインがあります
Magnific-Popup(http://dimsemenov.com/plugins/magnific-popup/): ポップアップ ウィンドウの作成に使用されます。
Bricks(https://github.com/floo51/jquery-bricks): 複数の画像が存在する場合、同じ行に配置できるように画像のサイズを自動的に調整するのに役立ちます。
Magnific-Popup は Composer を介してインストールできます。 Yii ディレクトリの combos.json の require ノードにコンテンツを追加します
"require": {
...
"dimsemenov/magnific-popup": "*",
...
}, 次に、yii ディレクトリでコマンドラインツールを起動し、composer update を実行します。
インストールされたファイルはベンダーフォルダーに配置され、フロントページに適用するには、AssetBundle にして公開する必要があります。 AssetBundle を使用するもう 1 つの利点は、依存関係の処理に役立つことです。また、これらのリソースを各ページにラップして負担を増やす代わりに、必要な場合にのみこれらのリソースを使用できることです。
以下の内容で、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='" . $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);
}
}そして、次のようにコントロールを呼び出すことができます
echo ImagePopup::widget([
"options" => [
"src" => "image/thumb/1.jpg",
"dest" => $url,
]
]); srcパラメータは表示されるサムネイルで、destはクリック後にポップアップするものです。これはURL、ajaxで呼び出すか、またはにすることができます。画像アドレスを指定すると、画像を直接表示できます。
ポップアップウィンドウのHTMLソースコードは省略しています。
次に、画像のレイアウトに役立つ別の JQuery プラグインを参照します。
このプラグインは、composer のインストール方法を提供していません。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',
];
}以前に Web フォルダーの外のリソースを参照したときは、sourcePath を使用しましたが、yii フレームワークが自動的にリソースを Web フォルダーにコピーすることに注意してください。今回はファイルがすでに Web フォルダー内にあるため、繰り返しコピーされないよう、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('common', Yii::$app->name);
?>
<div id="container" style="font-size:0px;">
<?php
$url = Url::to(['ajax/image-popup']);
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 ="$('#container').bricks();";
$script .= "$(window).resize(function() {
$('#container').data('bricks').layout();
});";
$this->registerJs($script);
?>完了後の効果とクリックしてポップアップした後の効果は以下の通りです。
上記は Yii2 フレームワーク学習メモ (4) - 最初のウィジェットの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
