How to integrate a jQuery plugin into Yii Framework

I have been studying up on Yii framework as a potential alternative to Zend. It has its pluses and minuses. Yii framework comes with jQuery included at the core. It was ridiculously easy to download a jQuery plugin, drop it in as a black box, follow the instructions for the front end, and it just works. I used the star-rating plugin. If you have a rating for a piece of content represented as a number such as 3.642/4 on a scale of 0-4, it is much more Web 2.0 friendly if you represent that graphically. Star-rating uses pimped up radio buttons to represent this number as five fractional stars. It also does the front end of dynamic interactive ratings, and as soon as I get my ajax back-end working on that I’ll post that too. Since the actual code being typed in is illegible in the video, I have included it in this article.


Star-rating folder dropped into:
/js

Code inserted in specific view:
/protected/views/joke/show.php

$cs=Yii::app()->clientScript;
$cs->registerScriptFile(Yii::app()->baseUrl . '/js/star-rating/jquery.rating.pack.js', CClientScript::POS_HEAD);
$cs->registerScriptFile(Yii::app()->baseUrl . '/js/star-rating/jquery.MetaData.js', CClientScript::POS_HEAD);
$cs->registerCssFile(Yii::app()->baseUrl . '/js/star-rating/jquery.rating.css');

Core jQuery included in main layout:
/protected/views/layouts/main.php

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

method in /protected/models/Joke.php

public function rate($cellno)
{
    $magic = round($this->avgRating * 5);
    if ($cellno == $magic) {
        return ("checked='checked'");
    }  else {
        return("");
    }
}

HTML code in /protected/views/joke/show.php

<?php for($i=0; $i<20; $i++):?>
<input name="star1" type="radio" class="star {split:4}" disabled="disabled"  <?php echo $model->rate($i); ?>/>rate($i);
<?php endif; ?>

4 comments to How to integrate a jQuery plugin into Yii Framework

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>