在 Yii 框架中包含 CSS、javascript 文件
-
22-09-2019 - |
题
如何在 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 是一个扩展,放置在受保护的文件夹下。我们包含的文件有路径: /受保护/扩展/fancybox/资产/
<?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);
?>
- 有时,当我们在从 ajax 调用接收到的渲染视图中使用它们时,我们需要在外部包含 zii 小部件或扩展的 js 文件,因为每次加载新的 ajax 文件都会在调用 js 函数时产生冲突。
了解更多详情 看我的博客文章
在方便您的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,你让装载的JavaScript前的HTML渲染。
有许多方法,我们可以包括JavaScript的,CSS到你的Yii应用。今天,我将演示三个简单和helpul方法。
一个简单的方式来增加JS,通过编辑配置/ main.php
的CSS// application components
'components'=>array(
// ...
'clientScript'=>array(
'packages'=>array(
'jquery'=>array(
'baseUrl'=>'//ajax.googleapis.com/ajax/libs/jquery/1/',
'js'=>array('jquery.min.js'),
)
),
),
// ...
),
使用getClientScript
通常,我们在添加的代码块划分为控制器或布局的主题
的$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/javascript/file',CClientScript::POS_END);
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');
包含核心js文件
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
更快的Yii API文献: http://yii.codexamples.com/
要包括JS和CSS文件中可以通过将参数false, true
,其中将包括CSS和JS为,e.g经由控制器做特定的视图:
$this->renderPartial(
'yourviewname',
array(
'model' => $model,
false,
true
)
);
这是一个使用 CDN 和离线脚本的好解决方案
我在构建的每个应用程序中都使用此代码,因此您可以在任何应用程序中使用它。
包含的脚本:
- main.css
- main.js
- jQuery
- jQuery / CD
- 引导程序3.1
- Bootstrap 3.1 / CDN
- 奇幻盒子2
- Fancybox 2 / CDN
- 真棒字体 4
- FontAwesome 4 / CDN
- 谷歌分析脚本
步骤1:
将此代码放入 config/main.php
'params'=>array(
'cdn'=>true, // or false
...
第2步:
在根应用程序文件夹中创建 resoreses 文件夹并将脚本放在那里
res/
--js
--css
--img
--lib
--style
..
第三步:
将此代码放在 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');
");
}
}
步骤4:
在 //layouts/main.php 中调用这样的函数
Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();
做这样的事情通过将这些行到您的视图文件;
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/javascript/file'); Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');
另外,如果你想添加 CSS 和 JS 模块资源,你可以使用以下逻辑。了解您需要如何指示正确的路径 获取别名路径:
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;
}
上面的代码取自基于 GPLed Yii 的 网上商店 应用程序。
您也可以从控制器动作添加脚本。刚刚加入这一行中接着的操作方法的脚本将apear仅在该视图:
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/custom.js', CClientScript::POS_HEAD);
其中POS_HEAD告诉框架把脚本在头部区段
在Yii框架,可以包括使用以下方法JS和CSS。
<强>包括CSS:强>
{Yii::app()->request->baseUrl}/css/styles.css
<强>包括JS:强>
{Yii::app()->request->baseUrl}/js/script.js
<强>包括图象:强>
{Yii::app()->request->baseUrl}/images/logo.jpg
注意:按在YII使用布局的概念,可以添加CSS和JS代替视图模板指定的
添加在布局Folder.Access CSS和JS在项目的任何地方
<!--// 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>
在该视图中的第一标签的PHP PAG
的链接必须输入是自举扩展强>
我的CSS文件:主题/引导/ CSS / style.css中的
我的JS文件:根/ JS /的script.js
在主题/引导/视图/布局/ 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>
这也添加在main.php脚本和CSS一种简单的方法
<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">
如果您使用的主题,那么您可以在以下语法强>
Yii::app()->theme->baseUrl
包括CSS文件:
<link href="<?php echo Yii::app()->theme->baseUrl;?>/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
包含JS文件
<script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery-2.2.3.min.js"></script>
如果您不使用主题
Yii::app()->request->baseUrl
使用这样
<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>