javascript - 如何在 yii2 中使用 php jquery？

Question

我想让图像在点击时弹出。这就像默认尺寸的更大预览，而无需移动到另一个页面。我有一个可以在 PHP 上运行的 jQuery，但由于这是 yii2，所以我陷入了困境。

这是 jQuery:

<script>        
     jQuery(window).load(function() {   
     $x = $(window).width();        
     if($x > 1024)
     {          
        jQuery("#content .row").preloader();    }            
        jQuery('.magnifier').touchTouch();
        jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function (){jQuery(this).css('display','none')});  
     });            
</script>

我想在此 View 中实现该 jQuery:

<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\bootstrap\Modal;
use frontend\models\PengurusAktif;
use frontend\models\ProfilBem;

/* @var $this yii\web\View */
/* @var $searchModel frontend\models\AlbumBemSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Album Bem';
?>

<div id='content' class="album-bem-index well">
    <?php
    $tahun = PengurusAktif::find()->one();
    $idprofil = ProfilBem::find()->where(['tahun' => $tahun->tahun_aktif])->one();
    ?>
    <?= Html::a('Visi Misi', ['/bem/visimisi', 'id' => $tahun->tahun_aktif], ['class' => 'btn btn-primary']) ?>
    <?= Html::a('Struktur Organisasi', ['profil-bem/profilebem', 'id' => $idprofil->id_profil_bem], ['class' => 'btn btn-primary']) ?>
    <?= Html::a('Pengumuman BEM', ['/pengumuman/pengumumanbem'], ['class' => 'btn btn-primary']) ?>
    <?= Html::a('Event Bem', ['/event/eventbem'], ['class' => 'btn btn-primary']) ?>
    <?php
    if (Yii::$app->user->can('sekretarisBem')) {
        echo Html::a('Forum BPH BEM', ['/forum/forumbem'], ['class' => 'btn btn-primary']);
    }
    ?>
    <?= Html::a('Poling BEM', ['/bem/pollingbem'], ['class' => 'btn btn-primary']) ?>
    <?= Html::a('Album BEM', ['/album-bem/index'], ['class' => 'btn btn-primary']) ?>
    <h2><?= Html::encode($this->title) ?></h2>
    <hr/>
    <?php // echo $this->render('_search', ['model' => $searchModel]);  ?>

    <p>
        <?php
        if (Yii::$app->user->can('sekretarisBem')) {
            echo Html::button('Create Album Bem', ['value' => yii\helpers\Url::to(['create']), 'class' => 'btn btn-success', 'id' => 'modalButton']);
            Modal::begin([
                'id' => 'modal',
                'size' => 'modal-lg',
            ]);
            echo "<div id='modalContent'></div>";
            Modal::end();
        }
        ?>
    </p>    



    <?php
    foreach ($dataProvider as $dataAlbum) {
        echo $dataAlbum->judul . "<br>";
        echo $dataAlbum->kegiatan . "<br>";
        ?> 
        <div class="row">

            <?php

            if ($dataAlbum->foto1 != NULL) {
                ?> 
                <div class="col-lg-3 col-md-4 col-xs-6"> 
                    <a  class="thumbnail magnifier" href="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto1; ?>">
                        <img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto1; ?>" width="150px" height="200px">
                    </a>
                </div>
                <?php
            }
            if ($dataAlbum->foto2 != NULL) {
                ?>
                <div class="col-lg-3 col-md-4 col-xs-6"> 
                    <a class="thumbnail" href="#">
                        <img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto2; ?>" width="150px" height="200px">
                    </a>
                </div>       
                <?php
            }
            if ($dataAlbum->foto3 != NULL) {
                ?>
                <div class="col-lg-3 col-md-4 col-xs-6"> 
                    <a class="thumbnail" href="#">
                        <img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto3; ?>" width="150px" height="200px">
                    </a>
                </div>
                <?php
            }
            if ($dataAlbum->foto4 != NULL) {
                ?> 
                <div class="col-lg-3 col-md-4 col-xs-6"> 
                    <a class="thumbnail" href="#">
                        <img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto4; ?>" width="150px" height="200px">
                    </a>
                </div>
                <?php
            }
            if ($dataAlbum->foto5 != NULL) {
                ?>    
                <div class="col-lg-3 col-md-4 col-xs-6"> 
                    <a class="thumbnail" href="#">    
                        <img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto5; ?>" width="150px" height="200px">
                    </a>
                </div>
                <?php
            }
            ?>
            <br><br>     
        </div>
        <?php
        if (Yii::$app->user->can('sekretarisBem')) {
            echo Html::a('Update', ['update', 'id' => $dataAlbum->id_album_bem], ['class' => 'btn btn-primary']);
            echo Html::a('Delete', ['delete', 'id' => $dataAlbum->id_album_bem], [
                'class' => 'btn btn-danger',
                'data' => [
                    'confirm' => 'Are you sure you want to delete this item?',
                    'method' => 'post',
                ],
            ]);
        }
        ?>
        <?php
    }
    ?>
<!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
</div>

有人可以帮我解决这个问题吗？如果您需要更多代码，请直接说。

Answer 1

如果你想插入jquery代码来查看文件，请使用registeJS方法http://www.yiiframework.com/doc-2.0/yii-web-view.html#registerJs()-detail使用 AssetBundle 注册脚本文件也是一个好习惯。删除<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>从 View 中使用\yii\web\JqueryAsset::register($this);\yii\bootstrap\BootstrapPluginAsset::register($this);在 View 顶部