如何在 Yii 框架中包含 Javascript 或 CSS 文件?
我想在我的网站上创建一个页面,该页面正在运行一个小的 Javascript 应用程序,所以我想在特定视图中包含.js
和.css
文件。
如何在 Yii 框架中包含 Javascript 或 CSS 文件?
我想在我的网站上创建一个页面,该页面正在运行一个小的 Javascript 应用程序,所以我想在特定视图中包含.js
和.css
文件。
像这样的东西:
<?php
$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/yourscript.js');
$cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
您可以通过添加
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');
我喜欢回答这个问题。
他们有很多地方我们有 css 和 javascript 文件,比如在受保护文件夹之外的 css 文件夹中,扩展和小部件的 css 和 js 文件,当我们经常使用 ajax 时,我们需要在外部包含这些文件,核心的 js 和 css 文件我们有时也需要在外部包含的框架。所以他们有一些方法可以做到这一点。
包含框架的核心js文件,如jquery.js、jquery.ui.js
<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
?>
将 css 文件夹中的文件包含在受保护文件夹之外。
<?php
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.js');
?>
包括来自扩展或小部件的 css 和 js 文件。
这里的fancybox 是一个扩展名,它位于受保护的文件夹下。我们包含的文件具有路径:/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');
?>
我们也可以包含核心框架文件: 示例:我包含 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);
?>
更多细节看我的博客文章
在您的 conf/main.php 中很容易。这是我的引导程序示例。你可以在这里看到
'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.
),
),
),
),
在视图中,添加以下内容:
<?php
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile('/js/yourscript.js', CClientScript::POS_END);
$cs->registerCssFile('/css/yourcss.css');
?>
请注意注册js文件时的第二个参数,它是你的脚本的位置,当你设置它CClientScript::POS_END时,你让HTML在加载javascript之前呈现。