web-dev-qa-db-fra.com

Inclure CSS, fichier javascript dans Yii Framework

Comment inclure un fichier Javascript ou CSS dans Yii Framework?

Je souhaite créer une page sur mon site qui exécute une petite application Javascript. Je souhaite donc inclure les fichiers .js et .css dans une vue spécifique.

javascriptphpcssyii
94
viji

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');
?>
162
Alexander Hramov

Vous pouvez le faire en ajoutant

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

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 situé en dehors du dossier protégé, des fichiers css et js d’extension et de widgets que nous devons inclure à l’extérieur lorsque nous utilisons beaucoup ajax, js et css de base cadre que nous devons également inclure à l'extérieur de temps en temps. Donc, il y a quelques façons de le faire.

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

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

Inclure les fichiers css & js à partir d’extensions ou de widgets.

Ici fancybox est une extension qui est placée dans 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 de base de la structure: 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 inclure des fichiers js de widgets zii ou des extensions en externe, parfois lorsque nous les utilisons dans une vue rendue, reçus d'un appel ajax, car le chargement à chaque fois qu'un nouveau fichier ajax crée un conflit lors de l'appel de fonctions js.

Pour plus de détails Regardez l'article de mon blog

32
Onkar Janwa

Facile dans votre conf/main.php. Ceci est mon exemple avec bootstrap. Vous pouvez voir que 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.
            ),
        ),
    ),
),
20
Knito Auron

Dans la vue, ajoutez les éléments suivants:

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

7
Mohammad Anini

Faites quelque chose comme ceci 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');
6
Ram Krishna Chaulagai

voici une bonne solution pour utiliser des scripts CDN et hors ligne

J'utilise ce code dans toutes les applications que je crée, vous pouvez donc l'utiliser dans toutes les applications.

Scripts inclus:

  • 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 Google Analytics

ÉTAPE 1:  

mettre ce code dans config/main.php

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

ÉTAPE 2:

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

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

ÉTAPE 3:

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

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

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

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

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

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 modifiant 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'),
                )
            ),
        ),
        // ...
  ),

Utiliser getClientScript

Habituellement, nous ajoutons un bloc de code dans le contrôleur ou la présentation 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 de base

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

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

6
Truongnq

En outre, si vous souhaitez ajouter des actifs de module 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 provient de l'application Webshop basée sur YPL sous GPL.

5
Eye

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 disposition dans yii, vous pouvez ajouter css et js au lieu de spécifier dans le modèle de vue.

1
Beginner

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

1
gSorry

Ajoutez le CSS et le JS dans le dossier Layout.Access 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>
0
Elango Mani

Utilisation de l'extension d'amorçage

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

mon fichier js: root/js/script.js

à l'adresse 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>
0
Victor Azevedo

C'était aussi un moyen facile d'ajouter des scripts et des 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">
0
Rogin Thomas
  • En Yii, les actifs sont déclarés dans engine/assets/Appassets.php. Cela facilite la gestion de tous vos fichiers css et js  enter image description here 
0
Ahmed Mujtaba

Si vous utilisez Theme, 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 ceci

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

lien doit entrer sur la première balise php dans la vue pag

0
trai bui