如何在yii2中使用php jquery?

elcex8rz  于 2022-11-09  发布在  PHP
关注(0)|答案(1)|浏览(220)

我想让一个图片在我点击它的时候成为一个弹出窗口。它就像是一个更大的默认大小的预览,而不需要移动到另一个页面。我有一个在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>

有人能帮我吗?如果你需要更多的代码,就说。

jk9hmnmh

jk9hmnmh1#

如果你想在视图文件中插入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\引导程序\引导程序插件资产::注册($this);在视图的顶部

相关问题