在Yii Framework中包含CSS，javascript文件
如何在Yii框架中包含Javascript或CSS文件？
我想在我的网站上创build一个页面，它有一个小的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文件的核心这也是我们需要在外部包含的框架。 所以他们有一些方法来做到这一点。
包括jquery.js，jquery.ui.js等框架的核心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是放在受保护的文件夹下的扩展名。 我们包含的文件有path： / 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); ?>
- 当我们在从ajax调用接收到的呈现视图中使用它们时，我们需要包含zii小部件或扩展的js文件，因为每次调用新的ajax文件时都会在调用js函数时产生冲突。
欲了解更多详情请看我的博客文章
容易在你的conf / main.php。 这是我的例子bootstrap。 你可以在这里看到
'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在加载之前呈现。
另外，如果你想添加CSS和JS的模块资源，你可以使用下面的逻辑。 看看你需要如何指出getPathOfAlias的正确path：
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基于网上商店应用程序。
有很多方法，我们可以包括JavaScript，CSS到您的Yii应用程序 。 今天我将演示三种简单而有用的方法。
通过编辑config / main.php来添加js，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，例如：
$this->renderPartial( 'yourviewname', array( 'model' => $model, false, true ) );
通过将这些行添加到您的视图文件中来做到这一点。
警予::应用程序（） - > clientScript-> registerScriptFile（警予::应用程序（） - >的baseUrl '/path/到/你/的JavaScript /文件'）; YII ::应用程序（） - > clientScript-> registerCssFile（YII ::应用程序（） - >的baseUrl '/path/到/ CSS /文件'）;
这里使用CDN和脱机脚本是一个很好的解决scheme
我在构build的每个应用程序中使用此代码，因此您可以在任何应用程序中使用此代码。
包含的脚本：
- 的main.css
- main.js
- jQuery的
- jQuery / CD
- Bootstrap 3.1
- Bootstrap 3.1 / CDN
- Fancybox 2
- Fancybox 2 / CDN
- FontAwesome 4
- FontAwesome 4 / CDN
- Google Analytics脚本
步骤1：
把这个代码放在config / main.php中
'params'=>array( 'cdn'=>true, // or false ...
第2步：
在根应用程序文件夹中创buildresoreses文件夹，并将您的脚本放在那里
res/ --js --css --img --lib --style ..
STEP3：
把这个代码放在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()->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}http://img.dovov.comlogo.jpg
注意：通过使用yii中的布局概念，您可以添加css和js而不是在视图模板中指定。
在布局文件夹中添加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标签input
使用引导程序扩展
我的CSS文件： themes / bootstrap / css / style.css
我的js文件： root / js / script.js
在主题/ 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>
这也是在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>
