Включить CSS, javascript файл в Yii Framework
Как включить файл Javascript или CSS в Yii Framework?
Я хочу создать страницу на моем сайте, на которой работает небольшое приложение Javascript, поэтому я хочу включить .js
и .css
файлы в определенном представлении.
17 ответов:
что-то вроде этого:
<?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.пользовательский интерфейс.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 file.
<?php $baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets')); Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END); ?>
- нам нужно иногда включать JS-файлы виджетов zii или расширения извне, когда мы используем их в визуализированном виде, которые получены от вызова ajax, потому что загрузка каждый раз, когда новый файл ajax создает конфликт при вызове функций js.
для более подробной информации посмотрите на мою статью в блоге
легко в вашем conf / main.РНР. Это мой пример с 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-рендеринг перед загрузкой javascript.
кроме того, если вы хотите добавить активы модуля как 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; }
приведенный выше код был взят из GPLed Yii based интернет-магазине приложение.
есть много методов, которые мы можем включите javascript, css в ваше приложение Yii. Сегодня я продемонстрирую три простых и полезных метода.
простой способ добавить js, css путем редактирования 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'), ) ), ), // ... ),
С помощью 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 ) );
вот хорошее решение для использования CDN и автономных скриптов
Я использую этот код в каждом приложении я строю, так что вы можете использовать это в любом приложении.
Включен Скрипт:
- главная.css
- главная.js
- jQuery
- jQuery / CD
- Bootstrap 3.1
- Bootstrap 3.1 / CDN
- Fancybox 2
- Fancybox 2 / CDN
- FontAwesome 4
- FontAwesome 4 / CDN
- Google Analytics Script
Шаг 1:
поместите этот код в config / main.php
'params'=>array( 'cdn'=>true, // or false ...
Шаг 2:
создайте папку resoreses в корневой папке приложения и поместите туда свой скрипт
res/ --js --css --img --lib --style ..
Шаг 3:
введите этот код компоненты/контроллер.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');
вы также можете добавить скрипты из действия контроллера. Просто добавьте эту строку в метод действия, тогда этот скрипт будет появляться только в этом представлении:
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/custom.js', CClientScript::POS_HEAD);
где POS_HEAD велит фреймворку поставить скрипт в головной раздел
в Yii framework вы можете включить 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 вместо указания в шаблоне представления.
добавьте 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
используя расширение bootstrap
мой css файл:темы / bootstrap / css / style.css
мой js файл:root/js / script.js
at тема / 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>
Это также был простой способ добавить скрипт и css в 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">
если вы используете тему, то вы можете ниже синтаксис
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>