Incluir CSS, archivo javascript en Yii Framework

99

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

javascript  php  css  yii 
— viji
fuente

Respuestas:

168

Algo como esto:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
— Alexander Hramov
fuente
1
¿Debo llamar a esto desde el controlador de la vista?
— user1077220
3
Deberías llamar a esto desde una vista
— Alexander Hramov
2
@ user1077220 No hace ninguna diferencia.
— Dzhuneyt
11
Los registros de CSS y JS están relacionados con la vista. Así que es más lógico llamarlo desde una vista.
— Alexander Hramov
1
Esto debe agregarse una vez por página (sin importar en qué vista agregue el fragmento anterior)
— Alexander Hramov
47

Puede hacerlo agregando

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

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.

— Onkar Janwa
fuente
21

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.
            ),
        ),
    ),
),
— Knito Auron
fuente
Entonces, ¿cómo "llamaría" al javascript donde necesita que se implemente?
— Novica89
4
puede usarlo de esta manera: Yii :: app () -> clientScript-> registerCoreScript ('bootstrap');
— Knito Auron
7

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.

— Mohammad Anini
fuente
6

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/

— Truongnq
fuente
4
@Christian esto no es un foro, y se le anima a agregar preguntas si está contribuyendo con información nueva Y útil .
— Samuel Liew
@Truongnq Si coloco este bloque $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css');en el controlador, ¿dónde lo asigno $csdespués? Además, en mi actionViewen mi controlador tengo esta línea $this -> render('view', array('model' => $this -> loadModel($id), ));, ¿debería colocarla aquí?
— Compaq LE2202x
6

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
    )
);
— Wasim Pathan
fuente
6

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();
— Abudayah
fuente
Estoy atrapado en el mejor enfoque cuando utilizo renderizado parcial. Tengo mis archivos JS en conflicto. ¿Cuál es el mejor enfoque para esto
— Chapskev
Buena solución. Lo intentaré en mi aplicación
— Desarrollador
6

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');
— Ram Krishna Chaulagai
fuente
5

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 .

— Ojo
fuente
1

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

— gLo siento
fuente
1

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.

— Principiante
fuente
0

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>
— Elango Mani
fuente
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>

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

— trai bui
fuente
0

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>
— Víctor Azevedo
fuente
0

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">
— Rogin Thomas
fuente
0

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>
— Desarrollador
fuente
0
  • 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 ingrese la descripción de la imagen aquí
— Ahmed Mujtaba
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.