Includi CSS, file javascript in Yii Framework

99

Come includere un file Javascript o CSS in Yii Framework?

Voglio creare una pagina sul mio sito con una piccola applicazione Javascript in esecuzione, quindi voglio includere file .jse .cssin una vista specifica.

javascript  php  css  yii 
— viji
fonte

Risposte:

168

Qualcosa come questo:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
— Alexander Hramov
fonte
1
dovrei chiamarlo dal controller o dalla vista?
— user1077220
3
Dovresti chiamarlo da una prospettiva
— Alexander Hramov,
2
@ user1077220 Non fa differenza.
— Dzhuneyt
11
Le registrazioni CSS e JS sono relative alla visualizzazione. Quindi più logicamente chiamarlo da una vista.
— Alexander Hramov
1
Questo dovrebbe essere aggiunto una volta per pagina (non importa in quale vista aggiungerai lo snippet sopra)
— Alexander Hramov,
47

Puoi farlo aggiungendo

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

Mi piaceva rispondere a questa domanda.

Ci sono molti posti in cui abbiamo file css e javascript, come nella cartella css che si trova al di fuori della cartella protetta, file css e js di estensione e widget che dobbiamo includere esternamente quando si usa molto ajax, js e file css del core framework che a volte dobbiamo includere esternamente. Quindi ci sono alcuni modi per farlo.

Includi i file js di base del framework come jquery.js, jquery.ui.js

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

Includi file dalla cartella CSS all'esterno della cartella protetta.

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

Includi file css e js dall'estensione o dai widget.

Qui fancybox è un'estensione che si trova nella cartella protetta. I file che includiamo hanno il percorso: / 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'); 
?>

Inoltre possiamo includere file di framework di base: Esempio: sto includendo il file js di CListView.

<?php
$baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets'));
Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END);  
?>
  • Abbiamo bisogno di includere file js di widget zii o estensioni esternamente a volte quando li usiamo nella vista renderizzata che vengono ricevuti da una chiamata ajax, perché il caricamento ogni volta che un nuovo file ajax crea conflitti nella chiamata di funzioni js.

Per maggiori dettagli Guarda il mio articolo sul blog

— Onkar Janwa
fonte
21

Facile nel tuo conf / main.php. Questo è il mio esempio con bootstrap. Puoi vederlo qui

'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
fonte
Quindi come "chiameresti" il javascript dove ne hai bisogno per essere implementato?
— Novica89
4
puoi usare in questo modo: Yii :: app () -> clientScript-> registerCoreScript ('bootstrap');
— Knito Auron
7

Nella vista, aggiungi quanto segue:

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

Si prega di notare il secondo parametro quando si registra il file js, è la posizione del proprio script, quando lo si imposta CClientScript :: POS_END, si lascia che l'HTML venga visualizzato prima che il javascript venga caricato.

— Mohammad Anini
fonte
6

Ci sono molti metodi che possiamo includere javascript, css nella tua app Yii . Oggi mostrerò tre metodi semplici e utili.

Un modo semplice per aggiungere js, css modificando 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'),
                )
            ),
        ),
        // ...
  ),

Utilizzando getClientScript

Di solito, aggiungiamo un blocco di codice nel controller o nel layout del tuo tema

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

O più breve:

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

Includi file js di base

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

Documento API Yii più veloce: http://yii.codexamples.com/

— Truongnq
fonte
4
@Christian questo non è un forum e sei incoraggiato ad aggiungere domande se contribuisci con nuove e utili informazioni.
— Samuel Liew
@Truongnq Se inserisco questo blocco $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css');nel controller, dove lo devo assegnare $csdopo? Inoltre, nel mio actionViewcontroller ho questa linea $this -> render('view', array('model' => $this -> loadModel($id), ));, dovrei posizionarla qui?
— Compaq LE2202x
6

Per includere file JS e CSS in una vista specifica puoi farlo tramite controller passando i parametri false, true, che includeranno CSS e JS per, ad esempio:

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

ecco una buona soluzione per utilizzare CDN e script offline

Uso questo codice in ogni applicazione che creo, quindi puoi usarlo in qualsiasi app.

Script inclusi:

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

PASSO 1:

metti questo codice in config / main.php

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

PASSO 2:

crea una cartella resoreses nella cartella principale dell'app e metti lì il tuo script

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

FASE3:

metti questo codice in 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');
        ");
    }
}

FASE4:

chiama le funzioni come questa in //layouts/main.php

Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();
— Abudayah
fonte
Sono bloccato sull'approccio migliore quando si utilizza il rendering parziale. Sto avendo i miei file JS in conflitto. Qual è l'approccio migliore per questo
— chapskev
Bella soluzione. Lo proverò nella mia applicazione
— Sviluppatore
6

Fai qualcosa di simile aggiungendo queste righe ai tuoi file di visualizzazione;

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
fonte
5

Inoltre, se desideri aggiungere risorse del modulo sia CSS che JS, puoi utilizzare la seguente logica. Guarda come devi indicare il percorso corretto per 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;
}

Il codice sopra è stato preso dall'app Webshop basata su GPL Yii .

— Occhio
fonte
1

È inoltre possibile aggiungere script dall'azione del controller. Basta aggiungere questa riga in un metodo di azione, quindi lo script apparirà solo in quella vista:

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

dove POS_HEAD dice al framework di mettere lo script nella sezione head

— gSorry
fonte
1

Nel framework Yii, puoi includere js e css usando il metodo seguente.

Compresi CSS:

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

Compreso JS:

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

Immagine inclusa:

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

Nota: utilizzando il concetto di layout in yii, è possibile aggiungere css e js invece di specificare nel modello di visualizzazione.

— Principiante
fonte
0

Aggiungi CSS e JS in The Layout Folder.Access ovunque nel progetto 

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

il link deve essere inserito sopra il primo tag php nella vista pag

— trai bui
fonte
0

Utilizzo dell'estensione bootstrap

il mio file css: temi / bootstrap / css / style.css

il mio file js: root / js / script.js

in 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
fonte
0

Questo era anche un modo semplice per aggiungere script e css in 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
fonte
0

Se stai usando Theme, puoi usare la sintassi seguente

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

includi file CSS:

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

Includi file JS

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

Se non stai usando theme

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

Usa in questo modo

<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>
— Sviluppatore
fonte
0
  • In Yii gli asset sono dichiarati in engine / assets / Appassets.php Questo semplifica la gestione di tutti i tuoi file css e js inserisci qui la descrizione dell'immagine
— Ahmed Mujtaba
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.