it-swarm.com.ru

Включить CSS, файл JavaScript в Yii Framework

Как включить файл JavaScript или CSS в Yii Framework?

Я хочу создать на своем сайте страницу, на которой запущено небольшое приложение Javascript, поэтому я хочу включить файлы .js и .css в определенный вид.

94
viji

Что-то вроде этого:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
162
Alexander Hramov

Вы можете сделать это, добавив

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');
46
ysing

Мне понравилось отвечать на этот вопрос.

Во многих местах есть файлы 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);  
?>
  • Нам необходимо включать js-файлы виджетов или расширений zii извне, когда мы используем их в визуализированном виде, которые получены из вызова ajax, потому что загрузка каждый раз, когда новый файл ajax создает конфликт при вызове функций js.

Для более подробной информации Посмотрите на мою статью в блоге

32
Onkar Janwa

Легко в вашем 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.
            ),
        ),
    ),
),
20
Knito Auron

В представлении добавьте следующее:

<?php  
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile('/js/yourscript.js', CClientScript::POS_END);
  $cs->registerCssFile('/css/yourcss.css');
?>

Обратите внимание на второй параметр, когда вы регистрируете файл js, это позиция вашего скрипта, когда вы устанавливаете его CClientScript :: POS_END, вы разрешаете рендеринг HTML перед загрузкой javascript.

7
Mohammad Anini

Сделайте что-то подобное, добавив эти строки в ваши файлы просмотра;

.__ Yii :: приложение () -> clientScript-> registerScriptFile (Yii :: приложение () -> BaseUrl '/ путь/к/ваш/JavaScript/файл.).. .__ Yii :: приложение () - > clientScript-> registerCssFile (Yii :: приложение () -> BaseUrl '/ путь/к/CSS/файл.); 
6
Ram Krishna Chaulagai

вот хорошее решение для использования CDN и автономных сценариев

Я использую этот код в каждом создаваемом приложении, так что вы можете использовать его в любом приложении.

Включенные скрипты:

  • 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:

создайте папку ресурсов в корневой папке приложения и поместите туда свой скрипт

res/
--js
--css
--img
--lib
--style
..

ШАГ 3:

поместите этот код в компоненты/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();
6
Abudayah

Чтобы включить файлы JS и CSS в конкретное представление, вы можете сделать это через контроллер, передав параметры false, true, которые будут включать CSS и JS, например:

$this->renderPartial(
    'yourviewname',
    array(
        'model' => $model,
        false,
        true
    )
);
6
Wasim Pathan

Есть много способов, которыми мы можем включить 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');

Документ Faster Yii API: http://yii.codexamples.com/

6
Truongnq

Также, если вы хотите добавить ресурсы модуля как 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 Webshop app.

5
Eye

В рамках 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 вместо указания в шаблоне представления.

1
Beginner

Вы также можете добавить сценарии из действия контроллера. Просто добавьте эту строку в метод действия, тогда этот скрипт появится только в этом представлении:

Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/custom.js', CClientScript::POS_HEAD);

где POS_HEAD говорит фреймворку поставить скрипт в головной раздел

1
gSorry

Добавьте 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>
0
Elango Mani

Использование расширения начальной загрузки

мой файл CSS: themes/bootstrap/css/style.css

мой файл js: root/js/script.js

в theme/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>
0
Victor Azevedo

Это был также простой способ добавить скрипт и 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">
0
Rogin Thomas
  • В Yii Активы объявлены в engine/assets/Appassets.php Это упрощает управление всеми вашими файлами css и js  enter image description here
0
Ahmed Mujtaba

Если вы используете тему, то вы можете ниже синтаксис

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>
0
Developer
<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

0
trai bui