Incluir arquivo CSS e javascript no Yii Framework

Question

Como incluir um arquivo Javascript ou CSS no Yii Framework?

Quero criar uma página no meu site que tenha um pequeno aplicativo Javascript em execução, por isso quero incluir .js e .css arquivos em uma visualização específica.

Answer 1

Algo assim:

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

Answer 2

Você pode fazer isso adicionando

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

Answer 3

Eu gostava de responder a essa pergunta.

São 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 use muito o AJAX, os arquivos JS & CSS do núcleo estrutura que também precisamos incluir externamente em algum momento. Portanto, são algumas maneiras de fazer isso.

Inclua os principais arquivos JS da estrutura como jquery.js, jquery.ui.js

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

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

Inclua arquivos CSS e JS de extensão ou widgets.

Aqui o FancyBox é uma extensão que é colocada em pasta protegida. Arquivos que incluía tem caminho: /protegido/extensões/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 principais da estrutura: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ão externamente, às vezes quando os usamos na visualização renderizada que são recebidos da chamada do AJAX, porque o carregamento cada vez que novo arquivo AJAX cria conflitos na chamada de funções JS.

Para mais detalhes Veja o meu artigo do meu blog

Answer 4

Fácil em seu conf/main.php. Este é o 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.
            ),
        ),
    ),
),

Answer 5

Na vista, 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 ao registrar o arquivo JS, é a posição do seu script, quando você o define CCLIFTSCRIPT :: POS_END, você deixa o HTML renderizar antes que o JavaScript seja carregado.

Answer 6

Existem muitos métodos que podemos Inclua JavaScript, CSS em seu aplicativo YII. Hoje vou demonstrar três métodos simples e de ajuda.

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

Geralmente, adicionamos 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');

Inclua os principais arquivos JS

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

Documento API YII mais rápido: http://yii.codexamples.com/

Answer 7

Para incluir arquivos JS e CSS em uma visualização específica, você pode fazê -lo via controlador passando os parâmetros false, true, que incluirá o CSS e o JS para, por exemplo:

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

Answer 8

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

Eu uso este código em todas as aplicações que eu construir, então você pode usar isso em qualquer aplicativo.

Scripts Incluídos:

• principal.css
• main.js
• jQuery
• http: / / CD
• Bootstrap 3.1
• Bootstrap 3.1 / CDN
• Que raiva 2
• Fancybox 2 / CDN
• FontAwesome 4
• FontAwesome 4 / CDN
• O Google Analytics Script

PASSO 1:

colocar esse código em config/main.php

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

PASSO 2:

criar resoreses pasta na raiz da pasta do aplicativo e colocar o script lá

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

PASSO 3:

colocar esse 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:

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

Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();

Answer 9

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

Answer 10

Além disso, se você deseja adicionar ativos de módulo CSS e JS, poderá 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 de GPLED YII baseado WebShop aplicativo.

Answer 11

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

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

Onde Pos_head Tell Framework para colocar o script na seção da cabeça

Answer 12

Suporte Allen Qiu MSFT tem replay para minha pergunta:

.

Para resolver esse problema, adicione o grupo ou grupos ausentes ao site.Para Faça isso, siga estas etapas:

1.Browse to https://yourdomain.sharepoint.com/_layouts/permsetup.aspx .
2. Até a seção apropriada (visitantes, membros ou ambos), certifique-se de criar um novo botão de opção de grupo é selecionado.
3.Clique ok na parte inferior da página.

para sua referência: http://support.microsoft.com/kb/2632494 .

Answer 13

copiar arquivos de uma coleção de sites para outro um exemplo muito bom é explicado neste artigo http://sharepointfieldnotes.blogspot.ch/2009/11/how-to-copy-files-across-site.html

Answer 14

<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 inserir sobre a primeira tag php na visualização pag

Answer 15

Usando extensão de bootstrap

Meu arquivo CSS: temas/bootstrap/css/style.css

Meu arquivo JS: raiz/js/script.js

no tema/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>

Answer 16

Essa 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">

Answer 17

Se você estiver usando o tema, poderá usar a sintaxe abaixo

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 estiver usando o tema

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

Usar 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>

Answer 18

• Em Yii, os ativos são declarados em motor/ativos/appassets.php, isso facilita o gerenciamento de todos os seus arquivos CSS e JS