Difference Between Script Registration Ways

Yii 1.1 Extensions
1

Hello guys!

Can anyone please tell me what is the difference between the following

[b]$cs = Yii::app()->getClientScript();

$cs->registerCssFile($baseUrl.’/css/style-blue.css’);[/b]

AND

[b]

<link rel="stylesheet" type="text/css" href="<?php echo $baseUrl;?>/css/style-blue.css" />[/b]

2

The difference is, you can register css and js files (and inline code) from any place inside your webapp.

Consider this situation: you have some particular view (page/edit) that uses ImageAreaSelect jquery plugin.

This plugin requires two files to be included: css and js.

So you can just register them in the view, and then they’ll be rendered on right places (css goes to head and js to footer, also you can set the place for render, like POS_READY).

3

Thanks ORey.

So where does it pickup the css and js files for registration?

E.g if I have 2 css files one.css and two.css and two js files one.js and two.js

How can I register them in one line?

Where do I have place them? what do I need to do?

4

There’s a nice feature called packages.

See clientScript, scriptMap and packages in docs.

Unfortunately I dont have time to explain, so here’s an example:




'clientScript' => array(

    'scriptMap' => array(

        // map scripts from assets to your favourite versions (maybe CDN)

        'jquery.js' => 'http://yandex.st/jquery/1.7.1/jquery.min.js',

        'jquery.min.js' => 'http://code.jquery.com/jquery-1.8.2.js',

        'jquery-ui.js' => 'http://code.jquery.com/ui/1.9.0/jquery-ui.js',

        'jquery-ui.min.js' => 'http://code.jquery.com/ui/1.9.0/jquery-ui.js',

        'bootstrap.js' => '//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js',

        'jquery-ui.css' => 'http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css',

    ),


    'packages' => array(

        // here's a package named 'jquery'

        // it registers 3 JS and 2 css files, also note using scriptMap alias

        'jquery' => array(

            'baseUrl' => '',

            'js' => array(

                'jquery.min.js',

                'jquery-ui.min.js',

                'js/jquery.ui.datepicker-ru.js',

            ),

            'css' => array(

                'jquery-ui.css',

                'css/jquery-ui-bootstrap/jquery-ui.css',

            ),

        ),

        'bootstrap' => array(

            'baseUrl' => '',

            'js' => array(

                'bootstrap.js',

            ),

            'css' => array(

                'css/bootstrap.min.css',

            ),

            'depends' => array('jquery'), // this package depends on jquery package

        ),

    ),

),
5

Thanks, ORey, in your example below, are you mentioning this in the config file?

6

yes, in ‘components’ section. Basically, it’s the configuration for clientScript component.