CSS, javascript dosyasını Yii Framework'e dahil et

99

Yii Framework'e bir Javascript veya CSS dosyası nasıl eklenir?

Sitemde küçük bir Javascript uygulamasının çalıştığı bir sayfa oluşturmak istiyorum, bu nedenle belirli bir görünüme .jsve .cssdosyalarını dahil etmek istiyorum .

javascript  php  css  yii 
— viji
kaynak

Yanıtlar:

168

Bunun gibi bir şey:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
— Alexander Hramov
kaynak
1
Bunu görünümden kontrolöründen çağırmalı mıyım?
— user1077220
3
Bunu bir bakış açısından aramalısın
— Alexander Hramov
2
@ user1077220 Hiç fark etmez.
— Dzhuneyt
11
CSS ve JS kayıtları, görünümle ilgilidir. Yani onu bir görünümden aramak daha mantıklı.
— Alexander Hramov
1
Bu, sayfa başına bir kez eklenmelidir (yukarıdaki pasajı hangi görünümde ekleyeceğiniz önemli değil)
— Alexander Hramov
47

Bunu ekleyerek yapabilirsiniz

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

Bu soruyu cevaplamayı sevdim.

Bunlar, korumalı klasörün dışındaki css klasörü, css & js uzantı ve widget dosyaları gibi css & javascript dosyalarına sahip olduğumuz ve ajax'ı çok kullandığımızda harici olarak eklememiz gereken birçok yer, js & css core dosyaları Bazen dışarıdan dahil etmemiz gereken çerçeve. Yani bunu yapmanın bazı yolları var.

Jquery.js, jquery.ui.js gibi temel js dosyalarını dahil edin

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

Korumalı klasörün dışındaki css klasöründeki dosyaları dahil edin.

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

Uzantı veya widget'lardan css & js dosyalarını dahil edin.

Burada fancybox, korumalı klasörün altına yerleştirilmiş bir uzantıdır. Dahil ettiğimiz dosyaların yolu var: / 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'); 
?>

Ayrıca çekirdek çerçeve dosyalarını da ekleyebiliriz: Örnek: CListView js dosyasını ekliyorum.

<?php
$baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets'));
Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END);  
?>
  • Zii widget'larının js dosyalarını veya uzantılarını bazen ajax çağrısından alınan işlenmiş görünümde kullandığımızda harici olarak eklememiz gerekir, çünkü yeni ajax dosyası her yüklendiğinde js işlevlerini çağırmada çakışma yaratır.

Daha fazla ayrıntı için Blog makaleme bakın

— Onkar Janwa
kaynak
21

Conf / main.php dosyanızda kolay. Bu benim bootstrap örneğim. Burada görebilirsin

'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
kaynak
Öyleyse, uygulanmasını istediğiniz yerde javascript'i nasıl "çağırırsınız"?
— Novica89
4
şu şekilde kullanabilirsiniz: Yii :: app () -> clientScript-> registerCoreScript ('bootstrap');
— Knito Auron
7

Görünümde aşağıdakileri ekleyin:

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

Lütfen js dosyasını kaydettiğinizde ikinci parametreye dikkat edin, bu betiğinizin konumudur, bunu CClientScript :: POS_END olarak ayarladığınızda, HTML'nin javascript yüklenmeden önce oluşturulmasına izin vermiş olursunuz.

— Mohammad Anini
kaynak
6

Yii Uygulamanıza javascript, css dahil edebileceğimiz birçok yöntem vardır . Bugün üç basit ve yardımcı yöntem göstereceğim.

Config / main.php dosyasını düzenleyerek js, css eklemenin basit bir yolu

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

GetClientScript kullanma

Genellikle, denetleyiciye veya temanızın düzenine kod bloğu ekleriz

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

Veya daha kısa:

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

Temel js dosyalarını dahil et

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

Daha Hızlı Yii API Belgesi: http://yii.codexamples.com/

— Truongnq
kaynak
4
@Christian bu bir forum değildir ve yeni VE yararlı bilgilerle katkıda bulunuyorsanız, sorularınızı eklemeniz tavsiye edilir .
— Samuel Liew
@Truongnq Bu bloğu $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css');Denetleyiciye yerleştirirsem, $cssonra nereye atarım ? Üstelik actionViewKontrolörümde bu satır var $this -> render('view', array('model' => $this -> loadModel($id), ));, buraya yerleştirmeli miyim?
— Compaq LE2202x
6

JS ve CSS dosyalarını belirli bir görünüme false, truedahil etmek için, CSS ve JS'yi içerecek parametreleri ileterek denetleyici aracılığıyla yapabilirsiniz , örneğin:

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

CDN ve çevrimdışı komut dosyalarını kullanmak için iyi bir çözüm burada

Bu kodu oluşturduğum her uygulamada kullanıyorum, böylece bunu herhangi bir uygulamada kullanabilirsiniz.

Dahil Edilen Komut Dosyaları:

  • main.css
  • main.js
  • jQuery
  • jQuery / CD
  • Önyükleme 3.1
  • Önyükleme 3.1 / CDN
  • Fancybox 2
  • Fancybox 2 / CDN
  • FontAwesome 4
  • FontAwesome 4 / CDN
  • Google Analytics Komut Dosyası

AŞAMA 1:

bu kodu config / main.php içine koyun

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

ADIM 2:

kök uygulama klasöründe resoreses klasörü oluşturun ve komut dosyanızı oraya koyun

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

AŞAMA 3:

bu kodu components / controller.php içine koyun

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

ADIM4:

//layouts/main.php'de bunun gibi işlevleri çağırın

Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();
— Abudayah
kaynak
kısmi oluşturmayı kullanırken en iyi yaklaşımı benimsiyorum. JS Dosyalarım çakışıyor. Bunun için en iyi yaklaşım hangisi
— chapskev
Güzel Çözüm. Uygulamamda deneyeceğim
— Geliştirici
6

Bu satırı görünüm dosyalarınıza ekleyerek böyle bir şey yapın;

Yii :: app () -> clientScript-> registerScriptFile (Yii :: app () -> baseUrl. '/ Yol / / javascript / dosyanız');
Yii :: app () -> clientScript-> registerCssFile (Yii :: app () -> baseUrl. '/ Yol / / css / dosya');
— Ram Krishna Chaulagai
kaynak
5

Ayrıca hem CSS hem de JS modül varlıkları eklemek istiyorsanız, aşağıdaki mantığı kullanabilirsiniz. GetPathOfAlias için doğru yolu nasıl belirtmeniz gerektiğini görün :

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

Yukarıdaki kod GPLed Yii tabanlı Webshop uygulamasından alınmıştır.

— Göz
kaynak
1

Denetleyici eyleminden de komut dosyaları ekleyebilirsiniz. Sadece bu satırı bir eylem yöntemine ekleyin, ardından bu komut dosyası yalnızca bu görünümde görünecektir:

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

POS_HEAD, framework'e komut dosyasını baş bölümüne koymasını söyler

— gSorry
kaynak
1

Yii çerçevesinde, aşağıdaki yöntemi kullanarak js ve css ekleyebilirsiniz.

CSS dahil:

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

JS dahil:

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

Resim Dahil:

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

Not: yii'de düzen konseptini kullanarak, görünüm şablonunda belirtmek yerine css ve js ekleyebilirsiniz.

— Acemi
kaynak
0

The Layout Folder'a CSS ve JS'yi ekleyin Projenin herhangi bir yerine erişin 

  <!--// 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
kaynak
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>

bağlantı, görünüm sayfasındaki ilk php etiketi üzerine girilmelidir

— trai bui
kaynak
0

Bootstrap uzantısını kullanma

css dosyam: temalar / bootstrap / css / style.css

js dosyam: root / js / script.js

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

<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
kaynak
0

Bu aynı zamanda main.php'ye script ve css eklemenin kolay bir yoluydu. 

<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
kaynak
0

Tema kullanıyorsanız, aşağıdaki Sözdizimini yapabilirsiniz

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

CSS Dosyasını dahil et:

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

JS Dosyasını Dahil Et

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

Tema kullanmıyorsanız

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

Bunun gibi kullan

<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>
— Geliştirici
kaynak
0
  • Yii'de Varlıklar, engine / assets / Appassets.php'de bildirilir Bu, tüm css ve js dosyalarınızı yönetmeyi daha kolay hale getirir görüntü açıklamasını buraya girin
— Ahmed Mujtaba
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.