Inclure un fichier CSS et javascript dans Yii Framework

Question

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 .js et .css fichiers dans une vue spécifique.

Answer 1

Quelque chose comme ceci:

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

Answer 2

Vous pouvez le faire en ajoutant

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

Answer 3

J'aimais répondre à cette question.

Leur ya beaucoup d'endroits où nous avons css et fichiers javascript, comme dans le dossier css qui est en dehors du dossier protégé, css et fichiers js d'extension et widgets dont nous avons besoin d'inclure l'extérieur quelque temps lorsque l'utilisation ajax beaucoup, js et css fichiers de cadre de base dont nous avons besoin aussi d'inclure à l'extérieur quelque temps. Ainsi, leur sont des façons de le faire.

Inclure les fichiers js de base comme cadre jquery.js, jquery.ui.js

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

Inclure les fichiers de dossier en dehors du dossier css 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 et js de l'extension ou widgets.

Ici fancybox est une extension qui est placé sous dossier protégé. Fichiers nous a notamment chemin: / protégées / 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 des fichiers cadres de base: Exemple:. Je suis notamment le dossier de CListView

<?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 l'extension externe parfois, lorsque nous les utilisons en vue de rendu qui sont reçus d'appel ajax, parce que le chargement de chaque nouveau conflit crée le fichier ajax en appelant des fonctions js.

Pour plus de détails href="http://www.waytoblogger.com/blog/technical/yii/register-js-css-files-in-yii-framework/" Regardez mon article Blog

Answer 4

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

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

Answer 5

Dans la vue, ajouter ce qui suit:

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

S'il vous plaît noter le deuxième paramètre lorsque vous enregistrez le fichier js, il est la position de votre script, lorsque vous définissez CClientScript :: POS_END, vous laissez le code HTML rend avant que le javascript est chargé.

Answer 6

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

Une façon 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 getClientScript

En général, nous ajoutons dans le 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 core js

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

API Yii plus rapide du document: http://yii.codexamples.com/

Answer 7

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

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

Answer 8

ici est une bonne solution pour utiliser CDN et scripts hors ligne

J'utilise ce code dans toutes les applications que je construis, vous pouvez l'utiliser dans une application.

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

STEP1:

mettre ce code dans config / main.php

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

STEP2:

créer dossier resoreses dans le dossier application racine et y mettre votre script

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

STEP3:

mettre ce code dans les composants / 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');
        ");
    }
}

STEP4:

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

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

Answer 9

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

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/javascript/file');
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');

Answer 10

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 vers 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é extrait de GPLed Yii basé sur Boutique en ligne application.

Answer 11

Vous pouvez également ajouter des scripts d'action du contrôleur. Il suffit d'ajouter cette ligne dans une méthode d'action alors que script apear que dans ce point de vue:

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

où POS_HEAD dit cadre de scripter mettre en section tête

Answer 12

Dans le cadre 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 concept de mise en page yu, Vous pouvez ajouter css et js au lieu de spécifier dans le modèle de vue

.

Answer 13

  

Ajoutez le CSS et JS dans la mise en Folder.Access partout 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>

Answer 14

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

Answer 15

en utilisant l'extension bootstrap

mon fichier css: thèmes / bootstrap / css / style.css

mon fichier js: root / js / script.js

thème / bootstrap / vues / 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>

Answer 16

Ce fut aussi un moyen facile d'ajouter un script et 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">

Answer 17

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

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

inclure fichier CSS:

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

Inclure fichier JS

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

Si vous n'utilisez pas le thème

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

Utilisez comme cela

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

Answer 18

• En Yii actifs sont déclarés dans le moteur / actifs / Appassets.php Cette marque plus facile à gérer tous vos fichiers CSS et js