如何在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> 

我想要实现的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>并使用\ yii \ web \ JqueryAsset :: register（$ this）; \ yii \ bootstrap \ BootstrapPluginAsset :: register（$ this）;在您的视图顶部