Inclure CSS, fichier javascript dans Yii Framework

99

Comment inclure un fichier Javascript ou CSS dans Yii Framework?

Je veux créer une page sur mon site qui a une petite application Javascript en cours d'exécution, donc je veux inclure .jset des .cssfichiers dans une vue spécifique.

— viji
source

168

Quelque chose comme ça:

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

— Alexandre Hramov
source

1

dois-je appeler cela à partir du contrôleur de la vue?

— user1077220

3

Vous devriez appeler cela d'un point de vue

— Alexander Hramov

2

@ user1077220 Cela ne fait aucune différence.

— Dzhuneyt

11

Les enregistrements CSS et JS sont liés à la vue. Donc plus logiquement pour l'appeler d'un point de vue.

— Alexander Hramov

1

Cela devrait être ajouté une fois par page (peu importe la vue que vous ajouterez ci-dessus)

— Alexander Hramov

47

Vous pouvez le faire en ajoutant

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

— ysing
source

33

J'ai aimé répondre à cette question.

Il existe de nombreux endroits où nous avons des fichiers css et javascript, comme dans le dossier css qui se trouve en dehors du dossier protégé, des fichiers css et js d'extension et des widgets que nous devons inclure en externe parfois lorsque vous utilisez beaucoup ajax, des fichiers js et css de base cadre que nous devons également inclure en externe parfois. Il existe donc des moyens de le faire.

Inclut les fichiers js de base du framework comme jquery.js, jquery.ui.js

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

Incluez les fichiers du dossier css en dehors du dossier protégé.

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

Incluez les fichiers css et js de l'extension ou des widgets.

Ici, fancybox est une extension qui est placée sous un dossier protégé. Les fichiers que nous incluons ont le chemin: / 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'); 
?>

Nous pouvons également inclure les fichiers du framework de base: Exemple: J'inclus le fichier 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);  
?>

Nous devons parfois inclure des fichiers js des widgets zii ou une extension en externe lorsque nous les utilisons dans la vue rendue qui sont reçus de l'appel ajax, car le chargement à chaque fois d'un nouveau fichier ajax crée un conflit lors de l'appel de fonctions js.

Pour plus de détails, consultez l'article de mon blog

— Onkar Janwa
source

21

Facile dans votre conf / main.php. Ceci est mon exemple avec bootstrap. Vous pouvez le voir ici

'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
source

Alors, comment appelleriez-vous alors le javascript là où vous en avez besoin?

— Novica89

4

vous pouvez utiliser cette méthode: Yii :: app () -> clientScript-> registerCoreScript ('bootstrap');

— Knito Auron

7

Dans la vue, ajoutez ce qui suit:

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

Veuillez noter le deuxième paramètre lorsque vous enregistrez le fichier js, c'est la position de votre script, lorsque vous le définissez CClientScript :: POS_END, vous laissez le rendu HTML avant le chargement du javascript.

— Mohammad Anini
source

6

Il existe de nombreuses méthodes que nous pouvons inclure javascript, css dans votre application Yii . Aujourd'hui, je vais démontrer trois méthodes simples et utiles.

Un moyen simple d'ajouter js, css en éditant 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'),
                )
            ),
        ),
        // ...
  ),

Utilisation de getClientScript

Habituellement, nous ajoutons un bloc de code dans le contrôleur ou la mise en page de votre thème

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

Ou plus court:

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

Inclure les fichiers js principaux

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

Document de l'API Yii plus rapide: http://yii.codexamples.com/

— Truongnq
source

4

@Christian ce n'est pas un forum, et vous êtes encouragé à ajouter des questions si vous apportez des informations nouvelles ET utiles .

— Samuel Liew

@Truongnq Si je place ce bloc

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

dans le contrôleur, où dois-je attribuer $csaprès? De plus, dans mon actionViewdans mon contrôleur j'ai cette ligne $this -> render('view', array('model' => $this -> loadModel($id), ));, dois-je la placer ici?

— Compaq LE2202x

6

Pour inclure des fichiers JS et CSS dans une vue spécifique, vous pouvez le faire via le contrôleur en passant les paramètres false, true, qui incluront le CSS et le JS pour, par exemple:

$this->renderPartial(
    'yourviewname',
    array(
        'model' => $model,
        false,
        true
    )
);

— Wasim Pathan
source

6

voici une bonne solution pour utiliser CDN et scripts hors ligne

J'utilise ce code dans chaque application que je crée, vous pouvez donc l'utiliser dans n'importe quelle application.

Scripts inclus:

main.css
main.js
jQuery
jQuery / CD
Bootstrap 3.1
Bootstrap 3.1 / CDN
Boîte fantaisie 2
Fancybox 2 / CDN
FontAwesome 4
FontAwesome 4 / CDN
Script Google Analytics

ÉTAPE 1:

mettez ce code dans config / main.php

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

ÉTAPE 2:

créer un dossier resoreses dans le dossier racine de l'application et y placer votre script

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

ÉTAPE 3:

mettez ce code dans 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');
        ");
    }
}

ÉTAPE 4:

appelez les fonctions comme celle-ci dans //layouts/main.php

Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();

— Abudayah
source

suis coincé sur la meilleure approche lors de l'utilisation du rendu partiel. J'ai mes fichiers JS en conflit. Quelle est la meilleure approche pour cela

— chapskev

Belle solution. Je vais l'essayer dans mon application

— Développeur

6

Faites quelque chose comme ça en ajoutant ces lignes à vos fichiers de vue;

Yii :: app () -> clientScript-> registerScriptFile (Yii :: app () -> baseUrl. '/ Chemin / vers / votre / javascript / fichier');
Yii :: app () -> clientScript-> registerCssFile (Yii :: app () -> baseUrl. '/ Chemin / vers / css / fichier');

— Ram Krishna Chaulagai
source

5

De plus, si vous souhaitez ajouter des actifs de module à la fois CSS et JS, vous pouvez utiliser la logique suivante. Voyez comment vous devez indiquer le chemin correct pour 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;
}

Le code ci - dessus a été prise de fonction GPLed Yii Webshop app.

— Œil
source

1

Vous pouvez également ajouter des scripts à partir de l'action du contrôleur. Ajoutez simplement cette ligne dans une méthode d'action, puis ce script n'apparaîtra que dans cette vue:

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

où POS_HEAD dit au framework de mettre le script dans la section head

— gDésolé
source

1

Dans le framework Yii, vous pouvez inclure js et css en utilisant la méthode ci-dessous.

Y compris CSS:

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

Y compris JS:

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

Y compris l'image:

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

Remarque: en utilisant le concept de mise en page dans yii, vous pouvez ajouter css et js au lieu de spécifier dans le modèle de vue.

— Débutant
source

0

Ajoutez le CSS et le JS dans le dossier de mise en page. Accédez n'importe où dans le projet

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

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>

le lien doit entrer sur la première balise php dans la page de vue

— trai bui
source

0

Utilisation de l'extension bootstrap

mon fichier css: themes / bootstrap / css / style.css

mon fichier js: root / js / script.js

à 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
source

0

C'était également un moyen facile d'ajouter un script et un css dans 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
source

0

Si vous utilisez Thème, vous pouvez utiliser la syntaxe ci-dessous

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

inclure le fichier CSS:

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

Inclure le fichier JS

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

Si vous n'utilisez pas de thème

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

Utilisez comme ça

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

— Développeur
source

0

Dans Yii, les actifs sont déclarés dans engine / assets / Appassets.php Cela facilite la gestion de tous vos fichiers css et js

— Ahmed Mujtaba
source