Sertakan CSS, file javascript dalam Yii Framework

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.

Sesuatu seperti ini:

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

Anda dapat melakukannya dengan menambahkan

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

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

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.
            ),
        ),
    ),
),

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.

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/

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
    )
);

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();

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');

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 .

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

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.

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>

<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

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>

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">

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>

• Dalam Yii, Aset dideklarasikan di engine / assets / Appassets.php Ini membuat lebih mudah untuk mengelola semua file css dan js Anda