referenciar - Incluir CSS, archivo javascript en Yii Framework

qué es un script de javascript externo

Question

¿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 .js y .css en una vista específica.

Answer 1

Agregue el CSS y JS en la carpeta de diseño. Acceda a 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>

Answer 2

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

Answer 3

Algo como esto:

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

Answer 4

En el marco Yii, puede incluir js y css utilizando 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 disposición en yii, puede agregar css y js en lugar de especificar en la plantilla de vista.

Answer 5

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 secuencia de comandos, cuando lo establece CClientScript :: POS_END, permite que el HTML rinda antes de que se cargue javascript.

Answer 6

Esta fue también 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">

Answer 7

Fácil en tu conf / main.php. Este es mi ejemplo con bootstrap. Puedes ver eso here

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

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

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

Answer 9

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

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 en el bloque de código en el controlador o el 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'');

Incluye archivos core js

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

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

Answer 10

Me gustó responder 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 & js de extensión y widgets que necesitamos incluir externamente en algún momento cuando usamos ajax mucho, archivos js y css de core marco que también debemos incluir externamente en algún momento. Entonces, hay algunas maneras de hacer esto.

Incluya archivos core js 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 desde la extensión o widgets.

Aquí fancybox es una extensión que se coloca debajo de la 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 core framework: Ejemplo: incluyo el archivo 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);  
?>

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

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

Answer 11

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 el CSS y JS, por ejemplo:

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

Answer 12

Puedes hacerlo agregando

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

Answer 13

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

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

donde POS_HEAD dice a framework que ponga script en la sección principal

Answer 14

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

Uso este código en cada aplicación que construyo, para que pueda usarlo en cualquier aplicación.

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

crea la carpeta resoreses en la carpeta de la aplicación raíz y coloca tu 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'');
        ");
    }
}

ETAPA 4:

llama a las funciones de esta manera en //layouts/main.php

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

Answer 15

Si está utilizando Theme, entonces puede hacerlo a continuación.

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ás usando el tema

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

Use Like this

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

Usando la extensión de arranque

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

mi archivo js: root / js / script.js

en el tema / 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>

Answer 17

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