Yii FrameworkにCSS、JavaScriptファイルを含める
-
22-09-2019 - |
質問
Yii Framework に 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 フォルダー、ajax を頻繁に使用するときに外部に含める必要がある拡張機能とウィジェットの css & js ファイル、コアの js & css ファイルなど、css および javascript ファイルが存在する場所は数多くあります。これもいつか外部に含める必要があるフレームワークです。そこで、これを行うためのいくつかの方法があります。
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 は、保護されたフォルダーの下に配置される拡張機能です。含めるファイルのパスは次のとおりです。 /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 関数の呼び出しで競合が発生するため、それらの 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ファイルを登録するときに、第2のパラメータを注意してください、それはあなたがそれをCClientScriptを設定すると、スクリプトの位置だ:: POS_END、あなたのjavascriptがロードされる前にHTMLをレンダリングしてみましょう。
私たちは JavaScriptを含むことができること多くの方法があります。 、あなたのYiiアプリケーションのにCSS。今日、私は3つの簡単なとhelpul方法のデモンストレーションを行います。
JSを追加する簡単な方法、編集のconfig / 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/する
は、例えばCSSやJSのために、含まれるパラメータのfalse, true
を渡すことによりコントローラを介してそれを行うことができ、特定のビューでJSとCSSファイルを含めるには:ます。
$this->renderPartial(
'yourviewname',
array(
'model' => $model,
false,
true
)
);
CDN とオフライン スクリプトを使用するための良い解決策は次のとおりです
私が構築するすべてのアプリケーションでこのコードを使用するため、どのアプリでもこれを使用できます。
含まれるスクリプト:
- main.css
- main.js
- jQuery
- jQuery/CD
- ブートストラップ 3.1
- ブートストラップ 3.1 / CDN
- ファンシーボックス 2
- ファンシーボックス 2 / CDN
- フォント素晴らしい 4
- FontAwesome 4 / CDN
- Google アナリティクス スクリプト
ステップ1:
このコードを config/main.php に置きます
'params'=>array(
'cdn'=>true, // or false
...
ステップ2:
ルートアプリフォルダーに resoreses フォルダーを作成し、そこにスクリプトを置きます
res/
--js
--css
--img
--lib
--style
..
ステップ3:
このコードを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');
");
}
}
STEP4:
//layouts/main.php で次のような関数を呼び出します。
Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();
あなたのビューファイルにこれらの行を追加することによって、このような実行(Do)何か;
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 の両方のモジュール アセットを追加する場合は、次のロジックを使用できます。正しいパスを指定する方法を確認してください。 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;
}
上記のコードは GPL 化された Yii ベースから取得されたものです ウェブショップ アプリ。
また、コントローラのアクションからスクリプトを追加することができます。ただ、スクリプトが唯一そのビューにつくれますこと、アクションメソッドでこの行を追加します:
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/custom.js', CClientScript::POS_HEAD);
POS_HEADが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>