在 Yii 框架中包含 CSS、javascript 文件

Question

提问by viji

How to include a Javascript or CSS file in Yii Framework?

如何在 Yii 框架中包含 Javascript 或 CSS 文件？

I want to create a page on my site that has a little Javascript application running, so I want to include .jsand .cssfiles in a specific view.

我想在我的网站上创建一个页面，该页面正在运行一个小的 Javascript 应用程序，所以我想在特定视图中包含.js和.css文件。

Answer 1

回答by Alexander Hramov

Something like this:

像这样的东西：

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

Answer 2

回答by ysing

You can do so by adding

您可以通过添加

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

Answer 3

回答by Onkar Janwa

I liked to answer this question.

我喜欢回答这个问题。

Their are many places where we have css & javascript files, like in css folder which is outside the protected folder, css & js files of extension & widgets which we need to include externally sometime when use ajax a lot, js & css files of core framework which also we need to include externally sometime. So their are some ways to do this.

他们有很多地方我们有 css 和 javascript 文件，比如在受保护文件夹之外的 css 文件夹中，扩展和小部件的 css 和 js 文件，当我们经常使用 ajax 时，我们需要在外部包含这些文件，核心的 js 和 css 文件我们有时也需要在外部包含的框架。所以他们有一些方法可以做到这一点。

Include core js files of framework like jquery.js, jquery.ui.js

包含框架的核心js文件，如jquery.js、jquery.ui.js

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

Include files from css folder outside of protected folder.

将 css 文件夹中的文件包含在受保护文件夹之外。

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

Include css & js files from extension or widgets.

包括来自扩展或小部件的 css 和 js 文件。

Here fancybox is an extension which is placed under protected folder. Files we including has path : /protected/extensions/fancybox/assets/

这里的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'); 
?>

Also we can include core framework files:Example : I am including CListView js file.

我们也可以包含核心框架文件：示例：我包含 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);  
?>

We need to include js files of zii widgets or extension externally sometimes when we use them in rendered view which are received from ajax call, because loading each time new ajax file create conflict in calling js functions.

当我们在从ajax调用接收的渲染视图中使用它们时，有时我们需要在外部包含zii小部件或扩展的js文件，因为每次加载新的ajax文件都会在调用js函数时产生冲突。

For more detail Look at my blog article

更多细节看我的博客文章

Answer 4

回答by Knito Auron

Easy in your conf/main.php. This is my example with bootstrap. You can see that here

在您的 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.
            ),
        ),
    ),
),

Answer 5

回答by Mohammad Anini

In the view, add the following:

在视图中，添加以下内容：

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

Please notice the second parameter when you register the js file, it's the position of your script, when you set it CClientScript::POS_END, you let the HTML renders before the javascript is loaded.

请注意注册js文件时的第二个参数，它是你的脚本的位置，当你设置它CClientScript::POS_END时，你让HTML在加载javascript之前呈现。

Answer 6

回答by Ram Krishna Chaulagai

Do somthing like this by adding these line to your view files;

通过将这些行添加到您的视图文件中来做这样的事情；

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/javascript/file');
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');

Answer 7

回答by Wasim Pathan

To include JS and CSS files in a specific view you can do it via controller by passing the parameters false, true, which will include the CSS and JS for, e.g.:

要在特定视图中包含 JS 和 CSS 文件，您可以通过控制器通过传递参数来完成false, true，这将包括 CSS 和 JS，例如：

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

Answer 8

回答by Truongnq

There are many methods that we can include javascript, css into your Yii App. Today I will demonstrate three simple and helpul methods.

有很多方法可以将 javascript、css 包含到您的 Yii 应用程序中。今天我将演示三种简单而有用的方法。

A simple way to add js, css by editing config/main.php

一种通过编辑config/main.php添加js、css的简单方法

// application components
  'components'=>array(
         // ...
        'clientScript'=>array(
            'packages'=>array(
                'jquery'=>array(
                    'baseUrl'=>'//ajax.googleapis.com/ajax/libs/jquery/1/',
                    'js'=>array('jquery.min.js'),
                )
            ),
        ),
        // ...
  ),

Using getClientScript

使用 getClientScript

Usually, We add in block of code into Controller or layout of your theme

通常，我们将代码块添加到控制器或主题布局中

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

Or shorter:

或更短：

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

Include core js files

包含核心js文件

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

Faster Yii API Document: http://yii.codexamples.com/

更快的 Yii API 文档：http: //yii.codexamples.com/

Answer 9

回答by Abudayah

here is a good solution to use CDN and offline scripts

这是使用 CDN 和离线脚本的好方法

I use this code in every application I build, so you can use this in any app.

我在我构建的每个应用程序中都使用此代码，因此您可以在任何应用程序中使用它。

Included Scripts:

包含的脚本：

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 Script

主文件
主文件
jQuery
jQuery/CD
引导程序 3.1
引导程序 3.1 / CDN
花式盒子 2
Fancybox 2 / CDN
字体真棒 4
FontAwesome 4 / CDN
谷歌分析脚本

STEP1:

第1步：

put this code in config/main.php

将此代码放在 config/main.php 中

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

STEP2:

第2步：

create resoreses folder in root app folder and put your script there

在根应用程序文件夹中创建 resoreses 文件夹并将您的脚本放在那里

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

STEP3:

第3步：

put this code in components/controller.php

将此代码放在 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');
        ");
    }
}

STEP4:

第四步：

call the functions like this in //layouts/main.php

在 //layouts/main.php 中调用这样的函数

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

Answer 10

回答by Eye

Also, if you want to add module assets both CSS and JS, you can use the following logic. See how you need to indicate the correct path to getPathOfAlias:

另外，如果你想同时添加 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;
}

The above code has been taken from GPLed Yii based Webshopapp.

上面的代码取自基于 GPLed Yii 的Webshop应用程序。

在 Yii 框架中包含 CSS、javascript 文件

提问by viji

回答by Alexander Hramov

回答by ysing

回答by Onkar Janwa

回答by Knito Auron

回答by Mohammad Anini

回答by Ram Krishna Chaulagai

回答by Wasim Pathan

回答by Truongnq

回答by Abudayah

回答by Eye

相关推荐

最近更新

标签

在 Yii 框架中包含 CSS、javascript 文件

提问by viji

回答by Alexander Hramov

回答by ysing

回答by Onkar Janwa

回答by Knito Auron

回答by Mohammad Anini

回答by Ram Krishna Chaulagai

回答by Wasim Pathan

回答by Truongnq

回答by Abudayah

回答by Eye

相关推荐

Javascript 如何从 iframe 获取当前页面加载的 url

JavaScript CSS 如何向一个元素添加和删除多个 CSS 类

Javascript Angular UI 选择：从远程服务获取数据

Javascript 如何在javascript中获取隐藏元素值

相关推荐

最近更新

标签