Yii 1.1: How to register scripts and css

1 follower

REGISTER SCRIPTS

First of all, we need to download the jQuery library and store it in the js folder. In this example we are using the version 2.1.3.

Then, we write this in the config > main.php:

'components'=>array(
    'clientScript'=>array(
      'packages'=>array(
        'jquery'=>array(
          'baseUrl'=>'js',
          'js'=>array('jquery-2.1.3.min.js'),
          'coreScriptPosition'=>CClientScript::POS_END
        ),
      ),
    ),
 )

Next, we register the core script in the following way:

Yii::app()->clientScript->coreScriptPosition=CClientScript::POS_END;
Yii::app()->clientScript->registerCoreScript('jquery');

To register jQuery scripts we do this:

Yii::app()->clientScript->registerScript('myjquery', '
    $(\'#mybutton\').click(function(){
        $(\'#mydiv\').slideUp();
    })
');

However, to register raw JavaScripts (like Google Analytics), we must add "CClientScript::POS_END":

Yii::app()->clientScript->registerScript('myjavascript', '
      var _gaq = _gaq || [];
      _gaq.push([\'_setAccount\', \'UA-33795997-4\']);
      _gaq.push([\'_trackPageview\']);
 
      (function() {
            var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true;
            ga.src = \''. Yii::app()->baseUrl . '/js/ga.js\';
            var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s);
      })();
    ', CClientScript::POS_END);

Finally, if we want to register script files we do this:

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/myscriptfile.js', CClientScript::POS_END);

REGISTER CSS

To register CSS we do this:

Yii::app()->clientScript->registerCss('mycss', '
     p
     {
       color: pink;
     }
');

If we want to register CSS files we do this:

Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . '/css/mycssfile.css');

OPTIONAL COMPRESSION

We can compress the JS and CSS simply by modifying the CClientScript core file, located at framework/web/CClientScript.php

public function registerScript($id,$script,$position=null,array $htmlOptions=array())
{
    if(!YII_DEBUG)
    {
        require_once "JSMin.php";
        $script = JSMin::minify($script);
    }
//...
}
public function registerCss($id,$css,$media='')
{
    if(!YII_DEBUG)
        $css = $this->compressCSS($css);
//...
}

You can find JSMin here: https://github.com/rgrove/jsmin-php

This is the function to compress CSS:

public function compressCSS($buffer)
{
    // Remove comments
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    // Remove space after colons
    $buffer = str_replace(': ', ':', $buffer);
    // Remove whitespace
    $buffer = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
 
    return $buffer;
}

Be the first person to leave a comment

Please to leave your comment.

Write new article