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.
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;
}
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.