Sertakan CSS, file javascript dalam Yii Framework

99

Bagaimana cara memasukkan file Javascript atau CSS di Yii Framework?

Saya ingin membuat halaman di situs saya yang menjalankan aplikasi Javascript kecil, jadi saya ingin menyertakan .jsdan .cssfile dalam tampilan tertentu.

javascript  php  css  yii 
— viji
sumber

Jawaban:

168

Sesuatu seperti ini:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
— Alexander Hramov
sumber
1
haruskah saya memanggil ini dari pengontrol dari tampilan?
— pengguna1077220
3
Anda harus menyebutnya dari sudut pandang
— Alexander Hramov
2
@ user1077220 Tidak ada bedanya.
— Dzhuneyt
11
Pendaftaran CSS dan JS berhubungan dengan tampilan. Jadi lebih logis untuk menyebutnya dari pandangan.
— Alexander Hramov
1
Ini harus ditambahkan sekali per halaman (tidak peduli di tampilan mana Anda akan menambahkan potongan di atas)
— Alexander Hramov
47

Anda dapat melakukannya dengan menambahkan

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');
— ysing
sumber
33

Saya suka menjawab pertanyaan ini.

Ada banyak tempat di mana kita memiliki file css & javascript, seperti di folder css yang berada di luar folder yang dilindungi, file css & js ekstensi & widget yang perlu kita sertakan secara eksternal kadang-kadang ketika menggunakan banyak ajax, file js & css inti kerangka kerja yang juga perlu kami sertakan secara eksternal kapan-kapan. Jadi ada beberapa cara untuk melakukan ini.

Sertakan file inti js kerangka kerja seperti jquery.js, jquery.ui.js

<?php 
Yii::app()->clientScript->registerCoreScript('jquery');     
Yii::app()->clientScript->registerCoreScript('jquery.ui'); 
?>

Sertakan file dari folder css di luar folder yang dilindungi.

<?php 
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.js');
?>

Sertakan file css & js dari ekstensi atau widget.

Di sini fancybox adalah ekstensi yang ditempatkan di bawah folder terlindungi. File yang kami sertakan memiliki jalur: / protected / extensions / fancybox / assets /

<?php
// Fancybox stuff.
$assetUrl = Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('ext.fancybox.assets'));
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.fancybox-1.3.4.pack.js'); 
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.mousewheel-3.0.4.pack.js'); 
?>

Kami juga dapat menyertakan file kerangka inti: Contoh: Saya menyertakan file CListView js.

<?php
$baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets'));
Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END);  
?>
  • Kita perlu menyertakan file js dari widget atau ekstensi zii secara eksternal kadang-kadang ketika kita menggunakannya dalam tampilan yang dirender yang diterima dari panggilan ajax, karena memuat setiap kali file ajax baru membuat konflik dalam memanggil fungsi js.

Untuk lebih jelasnya lihat artikel blog saya

— Onkar Janwa
sumber
21

Mudah di conf / main.php Anda. Ini adalah contoh saya dengan bootstrap. Anda bisa melihatnya di sini

'components'=>array(
    'clientScript' => array(
        'scriptMap' => array(
            'jquery.js'=>false,  //disable default implementation of jquery
            'jquery.min.js'=>false,  //desable any others default implementation
            'core.css'=>false, //disable
            'styles.css'=>false,  //disable
            'pager.css'=>false,   //disable
            'default.css'=>false,  //disable
        ),
        'packages'=>array(
            'jquery'=>array(                             // set the new jquery
                'baseUrl'=>'bootstrap/',
                'js'=>array('js/jquery-1.7.2.min.js'),
            ),
            'bootstrap'=>array(                       //set others js libraries
                'baseUrl'=>'bootstrap/',
                'js'=>array('js/bootstrap.min.js'),
                'css'=>array(                        // and css
                    'css/bootstrap.min.css',
                    'css/custom.css',
                    'css/bootstrap-responsive.min.css',
                ),
                'depends'=>array('jquery'),         // cause load jquery before load this.
            ),
        ),
    ),
),
— Knito Auron
sumber
Jadi bagaimana Anda kemudian "memanggil" javascript di mana Anda membutuhkannya untuk diterapkan?
— Novica89
4
Anda dapat menggunakan cara ini: Yii :: app () -> clientScript-> registerCoreScript ('bootstrap');
— Knito Auron
7

Dalam tampilan, tambahkan yang berikut ini:

<?php  
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile('/js/yourscript.js', CClientScript::POS_END);
  $cs->registerCssFile('/css/yourcss.css');
?>

Harap perhatikan parameter kedua ketika Anda mendaftarkan file js, itu adalah posisi skrip Anda, ketika Anda mengaturnya CClientScript :: POS_END, Anda membiarkan HTML dirender sebelum javascript dimuat.

— Mohammad Anini
sumber
6

Ada banyak metode yang dapat kami sertakan javascript, css ke dalam Aplikasi Yii Anda . Hari ini saya akan mendemonstrasikan tiga metode sederhana dan bantuan.

Cara sederhana untuk menambahkan js, css dengan mengedit config / main.php

// application components
  'components'=>array(
         // ...
        'clientScript'=>array(
            'packages'=>array(
                'jquery'=>array(
                    'baseUrl'=>'//ajax.googleapis.com/ajax/libs/jquery/1/',
                    'js'=>array('jquery.min.js'),
                )
            ),
        ),
        // ...
  ),

Menggunakan getClientScript

Biasanya, Kami menambahkan blok kode ke dalam Controller atau tata letak tema Anda

$baseUrl = Yii::app()->baseUrl; 
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/yourscript.js');
$cs->registerCssFile($baseUrl.'/css/yourcss.css');

Atau lebih pendek:

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/javascript/file',CClientScript::POS_END);
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');

Sertakan file js inti

Yii::app()->clientScript->registerCoreScript('jquery');     
Yii::app()->clientScript->registerCoreScript('jquery.ui');

Dokumen Yii API yang Lebih Cepat: http://yii.codexamples.com/

— Truongnq
sumber
4
@Christian ini bukan forum, dan Anda dianjurkan untuk menambahkan pertanyaan jika Anda memberikan kontribusi informasi baru DAN berguna .
— Samuel Liew
@ Truongnq Jika saya menempatkan blok ini $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css');di Controller, di mana saya menetapkan $cssetelah? Selain itu, di actionViewController saya, saya memiliki baris ini $this -> render('view', array('model' => $this -> loadModel($id), ));, haruskah saya menempatkannya di sini?
— Compaq LE2202x
6

Untuk menyertakan file JS dan CSS dalam tampilan tertentu, Anda dapat melakukannya melalui pengontrol dengan meneruskan parameter false, true, yang akan menyertakan CSS dan JS untuk, misalnya:

$this->renderPartial(
    'yourviewname',
    array(
        'model' => $model,
        false,
        true
    )
);
— Wasim Pathan
sumber
6

berikut adalah solusi yang baik untuk menggunakan CDN dan skrip offline

Saya menggunakan kode ini di setiap aplikasi yang saya buat, jadi Anda dapat menggunakan ini di aplikasi apa pun.

Skrip yang Disertakan:

  • main.css
  • main.js
  • jQuery
  • jQuery / CD
  • Bootstrap 3.1.0
  • Bootstrap 3.1 / CDN
  • Fancybox 2
  • Fancybox 2 / CDN
  • FontAwesome 4
  • FontAwesome 4 / CDN
  • Skrip Google Analytics

LANGKAH 1:

letakkan kode ini di config / main.php

        'params'=>array(
            'cdn'=>true, // or false
...

LANGKAH 2:

buat folder resoreses di folder aplikasi root dan letakkan skrip Anda di sana

res/
--js
--css
--img
--lib
--style
..

LANGKAH 3:

letakkan kode ini di components / controller.php

public function registerDefaults() 
{
    $cs = Yii::app()->clientScript;

    if (Yii::app()->params['cdn']){
        $cs->scriptMap = array(
            'jquery.js' => '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
            'jquery.min.js' => '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
        );
        $cs->packages = array(
            'bootstrap' => array(
                'basePath' => 'application.res',
                'baseUrl' => '//netdna.bootstrapcdn.com/bootstrap/3.1.1/',
                'js' => array('js/bootstrap.min.js'),
                'css' => array('css/bootstrap.min.css'),
                'depends' => array('jquery')
            ),
        );
    } else {
        $cs->packages = array(
            'bootstrap' => array(
                'basePath' => 'application.res',
                'baseUrl' => Yii::app()->baseUrl . '/res/lib/bootstrap/',
                'js' => array('js/bootstrap.js'),
                'css' => array('css/bootstrap.css'),
                'depends' => array('jquery')
            ),
        );
    }

    $cs->registerPackage('bootstrap');

    $cs->registerCSSFile(Yii::app()->baseUrl . '/res/style/main.css');
    $cs->registerScriptFile(Yii::app()->baseUrl . '/res/js/main.js');
}

public function registerFancybox($buttons = false, $thumbs = false) 
{
    $cs = Yii::app()->clientScript;

    $cs->packages = array(
        'fancybox' => array(
            'basePath' => 'application.res',
            'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/',
            'js' => array('lib/jquery.mousewheel-3.0.6.pack.js', 'source/jquery.fancybox.pack.js'),
            'css' => array('source/jquery.fancybox.css'),
            'depends' => array('jquery')
        ),
        'fancybox-buttons' => array(
            'basePath' => 'application.res',
            'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/source/helpers/',
            'js' => array('jquery.fancybox-buttons.js'),
            'css' => array('jquery.fancybox-buttons.css'),
        ),
        'fancybox-thumbs' => array(
            'basePath' => 'application.res',
            'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/source/helpers/',
            'js' => array('jquery.fancybox-thumbs.js'),
            'css' => array('jquery.fancybox-thumbs.css'),
        )
    );

    $cs->registerPackage('fancybox');
    if ($buttons)
        $cs->registerPackage('fancybox-buttons');
    if ($thumbs)
        $cs->registerPackage('fancybox-thumbs');
}

public function registerFontAwesome(){

    $cs = Yii::app()->clientScript;

    if (Yii::app()->params['cdn']):
        $cs->packages = array(
            'fontAwesome' => array(
                'basePath' => 'application.res',
                'baseUrl' => '//netdna.bootstrapcdn.com/font-awesome/4.0.0/',
                'css' => array('css/font-awesome.min.css'),
            )
        );
    else:
        $cs->packages = array(
            'fontAwesome' => array(
                'basePath' => 'application.res',
                'baseUrl' => Yii::app()->baseUrl . '/res/lib/font-awesome/',
                'css' => array('/css/font-awesome.min.css'),
            )
        );
    endif;

    $cs->registerPackage('fontAwesome');
}

public function registerGoogleAnalytics()
{
    if($this->config('settings_google_analytics_id')){
        Yii::app()->clientScript->registerScript('GA',"
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', '".Yii::app()->params['cdn']."', '{$_SERVER['SERVER_NAME']}');
            ga('send', 'pageview');
        ");
    }
}

LANGKAH 4:

panggil fungsi seperti ini di //layouts/main.php

Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();
— Abudayah
sumber
Saya terjebak pada pendekatan terbaik saat menggunakan rendering parsial. Apakah File JS saya bentrok. Yang merupakan pendekatan terbaik untuk ini
— chapskev
Solusi bagus. saya akan mencobanya di Aplikasi saya
— Pengembang
6

Lakukan hal seperti ini dengan menambahkan baris ini ke file tampilan Anda;

Yii :: app () -> clientScript-> registerScriptFile (Yii :: app () -> baseUrl. '/ Path / to / your / javascript / file');
Yii :: app () -> clientScript-> registerCssFile (Yii :: app () -> baseUrl. '/ Path / to / css / file');
— Ram Krishna Chaulagai
sumber
5

Selain itu, jika Anda ingin menambahkan aset modul CSS dan JS, Anda dapat menggunakan logika berikut. Lihat bagaimana Anda perlu menunjukkan jalur yang benar ke getPathOfAlias :

public static function register($file)
{
    $url = Yii::app()->getAssetManager()->publish(
    Yii::getPathOfAlias('application.modules.shop.assets.css'));

    $path = $url . '/' . $file;
    if(strpos($file, 'js') !== false)
        return Yii::app()->clientScript->registerScriptFile($path);
    else if(strpos($file, 'css') !== false)
        return Yii::app()->clientScript->registerCssFile($path);

    return $path;
}

Kode di atas telah diambil dari aplikasi Webshop berbasis GPLed Yii .

— Mata
sumber
1

Anda juga dapat menambahkan skrip dari tindakan pengontrol. Cukup tambahkan baris ini dalam metode tindakan, maka skrip itu hanya akan muncul dalam tampilan itu:

Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/custom.js', CClientScript::POS_HEAD);

dimana POS_HEAD memberitahu framework untuk meletakkan script di bagian head

— gMaaf
sumber
1

Dalam Yii framework, Anda bisa memasukkan js dan css menggunakan metode di bawah ini.

Termasuk CSS:

{Yii::app()->request->baseUrl}/css/styles.css

Termasuk JS:

{Yii::app()->request->baseUrl}/js/script.js

Termasuk Gambar:

{Yii::app()->request->baseUrl}/images/logo.jpg

Catatan: Dengan menggunakan konsep layout di yii, Anda dapat menambahkan css dan js alih-alih menentukan dalam template tampilan.

— Pemula
sumber
0

Tambahkan CSS dan JS di The Layout Folder. Akses di mana saja dalam proyek 

  <!--// Stylesheets //-->
    <?php
        $themepath=Yii::app()->theme->baseUrl;
        Yii::app()->clientScript->registerCoreScript("jquery");
    ?>

        <link href="<?php echo $themepath."/css/custom.css"; ?>" rel="stylesheet" media="all" />


<!--// Javascript //-->
<?php Yii::app()->clientScript->registerCoreScript("jquery"); ?>
</script> -->
<script type="text/javascript" src="<?php echo $themepath; ?>/js/video.min.js"></script>
— Elango Mani
sumber
0 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="/news/js/popup.js"></script>

link harus dimasukkan di atas tag php pertama di halaman tampilan

— trai bui
sumber
0

Menggunakan ekstensi bootstrap

file css saya: themes / bootstrap / css / style.css

file js saya: root / js / script.js

di theme / bootstrap / views / layouts / main.php 

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/styles.css" />

<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/script.js"></script>
— Victor Azevedo
sumber
0

Ini juga merupakan cara mudah untuk menambahkan script dan css di main.php 

<script src="<?=Yii::app()->theme->baseUrl; ?>/js/bootstrap.min.js"></script>
<link href="<?=Yii::app()->theme->baseUrl; ?>/css/bootstrap.css" rel="stylesheet" type="text/css">
— Rogin Thomas
sumber
0

Jika Anda menggunakan Tema maka Anda dapat menggunakan Sintaks di bawah ini

Yii::app()->theme->baseUrl

sertakan File CSS:

<link href="<?php echo Yii::app()->theme->baseUrl;?>/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">

Sertakan File JS

<script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery-2.2.3.min.js"></script>

Jika Anda tidak menggunakan tema

Yii::app()->request->baseUrl

Gunakan Seperti ini

<link href="<?php echo Yii::app()->request->baseUrl; ?>/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-2.2.3.min.js"></script>
— Pengembang
sumber
0
  • Dalam Yii, Aset dideklarasikan di engine / assets / Appassets.php Ini membuat lebih mudah untuk mengelola semua file css dan js Anda masukkan deskripsi gambar di sini
— Ahmed Mujtaba
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.