How to register scripts and css

You are viewing revision #14 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#13)

  1. REGISTER SCRIPTS
  2. REGISTER CSS
  3. OPTIONAL COMPRESSION

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;
}
2 0
3 followers
Viewed: 95 147 times
Version: Unknown (update)
Category: How-tos
Written by: oligalma
Last updated by: oligalma
Created on: Mar 13, 2015
Last updated: 9 years ago
Update Article

Revisions

View all history