Incluir CSS, archivo javascript en Yii Framework

¿Cómo incluir un archivo Javascript o CSS en Yii Framework?

Quiero crear una página en mi sitio que tenga una pequeña aplicación Javascript ejecutándose, así que quiero incluir archivos .jsy .cssen una vista específica.

Algo como esto:

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

Puede hacerlo agregando

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

Me gustó responder a esta pregunta.

Hay muchos lugares donde tenemos archivos css y javascript, como en la carpeta css que está fuera de la carpeta protegida, archivos css y js de extensión y widgets que necesitamos incluir externamente en algún momento cuando usamos mucho ajax, archivos js y css del núcleo marco que también debemos incluir externamente en algún momento. Así que hay algunas formas de hacer esto.

Incluya archivos js centrales de framework como jquery.js, jquery.ui.js

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

Incluya archivos de la carpeta css fuera de la carpeta protegida.

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

Incluya archivos css y js de extensión o widgets.

Aquí, fancybox es una extensión que se coloca en una carpeta protegida. Los archivos que incluimos tienen ruta: / 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'); 
?>  

También podemos incluir archivos del marco principal: Ejemplo: estoy incluyendo el archivo js 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);  
?>

• Necesitamos incluir archivos js de widgets zii o extensión externamente a veces cuando los usamos en la vista renderizada que se reciben de la llamada ajax, porque cargar cada vez que se carga un nuevo archivo ajax crea un conflicto al llamar a funciones js.

Para más detalles, mira el artículo de mi blog.

Fácil en su conf / main.php. Este es mi ejemplo con bootstrap. Puedes ver eso aquí

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

En la vista, agregue lo siguiente:

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

Tenga en cuenta el segundo parámetro cuando registra el archivo js, ​​es la posición de su script, cuando lo configura CClientScript :: POS_END, deja que el HTML se procese antes de que se cargue el javascript.

Hay muchos métodos que podemos incluir javascript, css en su aplicación Yii . Hoy demostraré tres métodos simples y útiles.

Una forma sencilla de agregar js, css editando 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'),
                )
            ),
        ),
        // ...
  ),

Usando getClientScript

Por lo general, agregamos un bloque de código al controlador o al diseño de su tema

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

O más corto:

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

Incluir archivos js principales

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

Documento de API de Yii más rápido: http://yii.codexamples.com/

Para incluir archivos JS y CSS en una vista específica, puede hacerlo a través del controlador pasando los parámetros false, true, que incluirán CSS y JS para, por ejemplo:

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

aquí hay una buena solución para usar CDN y scripts fuera de línea

Utilizo este código en todas las aplicaciones que creo, así que puedes usarlo en cualquier aplicación.

Guiones incluidos:

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

PASO 1:

poner este código en config / main.php

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

PASO 2:

cree la carpeta resoreses en la carpeta raíz de la aplicación y coloque su script allí

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

PASO 3:

poner este código en 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');
        ");
    }
}

PASO 4:

llamar a las funciones como esta en //layouts/main.php

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

Haga algo como esto agregando estas líneas a sus archivos de vista;

Yii :: app () -> clientScript-> registerScriptFile (Yii :: app () -> baseUrl. '/ Ruta / a / su / javascript / archivo');
Yii :: app () -> clientScript-> registerCssFile (Yii :: app () -> baseUrl. '/ Ruta / a / css / archivo');

Además, si desea agregar activos de módulo tanto CSS como JS, puede usar la siguiente lógica. Vea cómo debe indicar la ruta correcta para 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;
}

El código anterior se ha tomado de la aplicación Webshop basada en GPLed Yii .

También puede agregar scripts desde la acción del controlador. Simplemente agregue esta línea en un método de acción, luego ese script aparecerá solo en esa vista:

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

donde POS_HEAD le dice al marco que coloque el script en la sección principal

En el marco de Yii, puede incluir js y css usando el método siguiente.

Incluyendo CSS:

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

Incluyendo JS:

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

Incluyendo imagen:

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

Nota: Al usar el concepto de diseño en yii, puede agregar css y js en lugar de especificar en la plantilla de vista.

Agregue el CSS y JS en la carpeta de diseño. Acceda en cualquier parte del proyecto

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

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

el enlace debe ingresar sobre la primera etiqueta php en la página de vista

Usando la extensión bootstrap

mi archivo css: themes / bootstrap / css / style.css

mi archivo js: root / js / script.js

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

Esta también fue una manera fácil de agregar script y css en 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">

Si está utilizando Theme, puede utilizar la siguiente sintaxis

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

incluir archivo CSS:

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

Incluir archivo JS

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

Si no está usando el tema

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

Usar así

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

• En Yii, los activos se declaran en engine / assets / Appassets.php Esto hace que sea más fácil administrar todos sus archivos css y js