Incluir CSS, arquivo javascript no Yii Framework

99

Como incluir um arquivo Javascript ou CSS no Yii Framework?

Eu quero criar uma página no meu site que tem um pequeno aplicativo em execução Javascript, assim que eu quero incluir .jse .cssarquivos em uma visão específica.

Viji
fonte

Respostas:

168

Algo assim:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
Alexander Hramov
fonte
1
devo chamar isso do controlador do modo de exibição?
user1077220
3
Você deve ligar para isso de uma vista
Alexander Hramov
2
@ user1077220 Não faz diferença.
Dzhuneyt
11
Os registros CSS e JS estão relacionados à visualização. Então, de forma mais lógica, chamá-lo de uma visão.
Alexander Hramov
1
Deve ser adicionado uma vez por página (não importa em qual visualização você adicionará o snippet acima)
Alexander Hramov
47

Você pode fazer isso adicionando

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

Eu gostei de responder a essa pergunta.

Existem muitos lugares onde temos arquivos css e javascript, como na pasta css que está fora da pasta protegida, arquivos css e js de extensão e widgets que precisamos incluir externamente em algum momento quando usar muito ajax, arquivos js e css do núcleo estrutura que também precisamos incluir externamente em algum momento. Portanto, existem algumas maneiras de fazer isso.

Incluir arquivos js principais do framework como jquery.js, jquery.ui.js

<?php 
Yii::app()->clientScript->registerCoreScript('jquery');     
Yii::app()->clientScript->registerCoreScript('jquery.ui'); 
?>

Inclui arquivos da pasta css fora da pasta protegida.

<?php 
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.js');
?>

Inclui arquivos css e js de extensão ou widgets.

Aqui, o fancybox é uma extensão que é colocada em uma pasta protegida. Os arquivos que incluímos têm o caminho: / 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'); 
?>  

Também podemos incluir arquivos de estrutura principais: Exemplo: Estou incluindo o arquivo 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);  
?>
  • Precisamos incluir arquivos js de widgets zii ou extensões externamente às vezes quando os usamos em uma visualização renderizada que são recebidos de uma chamada ajax, porque carregar cada vez que um novo arquivo ajax cria conflito ao chamar funções js.

Para mais detalhes, veja o artigo do meu blog

Onkar Janwa
fonte
21

Fácil em seu conf / main.php. Este é meu exemplo com bootstrap. Você pode ver isso aqui

'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.
            ),
        ),
    ),
),
Knito Auron
fonte
Então, como você "chamaria" o javascript onde você precisa que ele seja implementado?
Novica89
4
você pode usar desta forma: Yii :: app () -> clientScript-> registerCoreScript ('bootstrap');
Knito Auron
7

Na visualização, adicione o seguinte:

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

Observe o segundo parâmetro quando você registra o arquivo js, ​​é a posição do seu script, quando você define CClientScript :: POS_END, você deixa o HTML renderizar antes que o javascript seja carregado.

Mohammad Anini
fonte
6

Existem muitos métodos que podemos incluir javascript, css em seu aplicativo Yii . Hoje vou demonstrar três métodos simples e úteis.

Uma maneira simples de adicionar js, css editando 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'),
                )
            ),
        ),
        // ...
  ),

Usando getClientScript

Normalmente, adicionamos um bloco de código ao controlador ou layout do seu tema

$baseUrl = Yii::app()->baseUrl; 
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/yourscript.js');
$cs->registerCssFile($baseUrl.'/css/yourcss.css');

Ou mais curto:

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');

Incluir arquivos js principais

Yii::app()->clientScript->registerCoreScript('jquery');     
Yii::app()->clientScript->registerCoreScript('jquery.ui');

Documento da API Yii mais rápida: http://yii.codexamples.com/

Truongnq
fonte
4
@Christian este não é um fórum, e você é incentivado a adicionar perguntas se estiver contribuindo com informações novas E úteis .
Samuel Liew
@Truongnq Se eu colocar este bloco $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css');no Controlador, onde atribuo $csdepois? Além disso, no meu actionViewcontrolador tenho essa linha $this -> render('view', array('model' => $this -> loadModel($id), ));, devo colocá-la aqui?
Compaq LE2202x
6

Para incluir arquivos JS e CSS em uma visualização específica, você pode fazer isso por meio do controlador, passando os parâmetros false, true, que incluirão o CSS e o JS para, por exemplo:

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

aqui está uma boa solução para usar scripts CDN e offline

Eu uso esse código em todos os aplicativos que construo, então você pode usá-lo em qualquer aplicativo.

Scripts incluídos:

  • main.css
  • main.js
  • jQuery
  • jQuery / CD
  • Bootstrap 3.1
  • Bootstrap 3.1 / CDN
  • Fancybox 2
  • Fancybox 2 / CDN
  • FontAwesome 4
  • FontAwesome 4 / CDN
  • Script do Google Analytics

PASSO 1:

coloque este código em config / main.php

        'params'=>array(
            'cdn'=>true, // or false
...

PASSO 2:

crie uma pasta de resoreses na pasta raiz do app e coloque seu script lá

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

ETAPA 3:

coloque este código em 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');
        ");
    }
}

PASSO 4:

chame as funções como esta em //layouts/main.php

Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();
Abudayah
fonte
estou preso na melhor abordagem ao usar renderização parcial. Estou tendo meus arquivos JS em conflito. Qual é a melhor abordagem para isso
chapskev
Boa solução. Vou tentar no meu aplicativo
Desenvolvedor
6

Faça algo assim adicionando essas linhas aos seus arquivos de visualização;

Yii :: app () -> clientScript-> registerScriptFile (Yii :: app () -> baseUrl. '/ Path / to / your / javascript / file');
Yii :: app () -> clientScript-> registerCssFile (Yii :: app () -> baseUrl. '/ Path / to / css / file');
Ram Krishna Chaulagai
fonte
5

Além disso, se quiser adicionar ativos de módulo CSS e JS, você pode usar a seguinte lógica. Veja como você precisa indicar o caminho correto para 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;
}

O código acima foi retirado do aplicativo Webshop baseado em GPL do Yii .

Olho
fonte
1

Você também pode adicionar scripts da ação do controlador. Basta adicionar esta linha em um método de ação e esse script aparecerá apenas nessa visualização:

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

onde POS_HEAD diz ao framework para colocar o script na seção head

desculpe
fonte
1

No framework Yii, você pode incluir js e css usando o método abaixo.

Incluindo CSS:

{Yii::app()->request->baseUrl}/css/styles.css

Incluindo JS:

{Yii::app()->request->baseUrl}/js/script.js

Incluindo Imagem:

{Yii::app()->request->baseUrl}/images/logo.jpg

Nota: Ao usar o conceito de layout no yii, você pode adicionar css e js em vez de especificar no modelo de visualização.

Principiante
fonte
0

Adicione o CSS e JS em The Layout Folder.Access em qualquer lugar no projeto

  <!--// 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>
Elango Mani
fonte
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>

o link deve ser inserido sobre a primeira tag php na página de visualização

trai bui
fonte
0

Usando a extensão bootstrap

meu arquivo css: themes / bootstrap / css / style.css

meu arquivo js: root / js / script.js

em 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>
Vitor azevedo
fonte
0

Esta também foi uma maneira fácil de adicionar script e css em 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">
Rogin Thomas
fonte
0

Se você estiver usando o tema, você pode a seguinte sintaxe

Yii::app()->theme->baseUrl

incluir arquivo CSS:

<link href="<?php echo Yii::app()->theme->baseUrl;?>/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">

Incluir arquivo JS

<script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery-2.2.3.min.js"></script>

Se você não está usando tema

Yii::app()->request->baseUrl

Use assim

<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>
Desenvolvedor
fonte
0
  • No Yii, os ativos são declarados em engine / assets / Appassets.php Isso torna mais fácil gerenciar todos os seus arquivos css e js insira a descrição da imagem aqui
Ahmed Mujtaba
fonte