Включіть CSS, файл JavaScript у Yii Framework

99

Як включити файл Javascript або CSS в Yii Framework?

Я хочу створити на своєму веб-сайті сторінку, на якій працює невелика програма Javascript, тому я хочу включити .jsі .cssфайли в конкретному вікні.

javascript  php  css  yii 
— viji
джерело

Відповіді:

168

Щось на зразок цього:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
— Олександр Грамов
джерело
1
я повинен викликати це від контролера з точки зору?
— користувач1077220
3
Слід зателефонувати цьому з погляду
— Олександр Грамов
2
@ user1077220 Це не має ніякої різниці.
— Джунейт
11
CSS та JS реєстрації відносяться до перегляду. Тож більш логічно називати це з точки зору.
— Олександр Грамов
1
Це потрібно додавати один раз на сторінку (незалежно від того, в який вид ви будете додавати фрагмент вище)
— Олександр Грамов,
47

Це можна зробити, додавши

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');
— ісін
джерело
33

Мені сподобалось відповісти на це питання.

Їх є багато місць, де у нас є файли css та javascript, як, наприклад, у папці css, яка знаходиться поза захищеною папкою, css & js файли розширень та віджети, які нам потрібно включати зовні колись, коли багато використовувати ajax, js та css файли core рамки, які ми також повинні колись включати зовні. Отже, це кілька способів зробити це.

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

Детальніше дивіться у моїй статті блогу

— Onkar Janwa
джерело
21

Легко в конф. / 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.
            ),
        ),
    ),
),
— Кніто Аурон
джерело
То як би ви тоді "зателефонували" на JavaScript там, де вам це потрібно для реалізації?
— Novica89
4
ви можете використовувати такий спосіб: Yii :: app () -> clientScript-> registerCoreScript ('bootstrap');
— Кніто Аурон
7

У поданні додайте наступне:

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

Зверніть увагу на другий параметр, коли ви реєструєте файл js, це положення вашого сценарію, коли ви встановите його CClientScript :: POS_END, ви дозволяєте HTML виводити до завантаження javascript.

— Мохаммед Аніні
джерело
6

Є багато методів, за допомогою яких ми можемо включати 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');

Документ API швидшого Yii: http://yii.codexamples.com/

— Truongnq
джерело
4
@Christian це не форум, і вам пропонується додавати питання, якщо ви вносите нову І корисну інформацію.
— Самуель Liew
@Truongnq Якщо я розміщую цей блок $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css');у контролері, куди я його призначу $cs? Більше того, у своєму actionViewконтролері я маю цей рядок $this -> render('view', array('model' => $this -> loadModel($id), ));, чи повинен я розміщувати його тут?
— Compaq LE2202x
6

Для включення файлів JS та CSS у певний вигляд ви можете це зробити через контролер, передавши параметри false, true, які включатимуть CSS та JS для, наприклад:

$this->renderPartial(
    'yourviewname',
    array(
        'model' => $model,
        false,
        true
    )
);
— Васим Патан
джерело
6

ось хороше рішення для використання скриптів CDN та офлайн

Я використовую цей код у кожній створеній програмі, тому ви можете використовувати його в будь-якій програмі.

Включені сценарії:

  • main.css
  • main.js
  • jQuery
  • jQuery / CD
  • Завантаження 3.1
  • Завантажувальний механізм 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();
— Абудая
джерело
Я затримався на найкращому підході при використанні часткової візуалізації. У мене файли JS суперечать. Який найкращий підхід для цього
— chapskev
Приємне рішення. я спробую це у своїй програмі
— розробник
6

Зробіть щось подібне, додавши цей рядок до файлів перегляду;

Yii :: app () -> clientScript-> registerScriptFile (Yii :: app () -> baseUrl. '/ Path / to / your / javascript / file');
Yii :: app () -> clientScript-> registerCssFile (Yii :: app () -> baseUrl. '/ Path / to / css / file');
— Рам Крішна Чаулагай
джерело
5

Крім того, якщо ви хочете додати активи модулів як 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 Webshop додатки.

— Око
джерело
1

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

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

де POS_HEAD вказує фреймворку розмістити сценарій у головному розділі

— gSorry
джерело
1

У рамках 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 замість того, щоб вказати у шаблоні подання.

— Новачок
джерело
0

Додайте 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 
<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 у вікні перегляду

— trai bui
джерело
0

Використання розширення завантаження

мій файл css: теми / bootstrap / css / style.css

мій js-файл: root / js / script.js

на тему / bootstrap / views / layout / 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

Це також був простий спосіб додати скрипт та 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

Якщо ви використовуєте Тему, ви можете перелічити нижче синтаксис

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
  • У Yii Активи задекларовані у двигуні / активах / Appassets.php Це полегшує управління всіма вашими файлами css та js введіть тут опис зображення
— Ахмед Муджтаба
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.