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