仿Komodo?

Tags: 效果, 插件,

一款仿Komodo Media的jQuery星級評分插件。整個插件包括星星效果和ajax回調，代碼簡單實用。

本經驗分享如何使用該jQuery插件製作星級評分效果。

工具/原料

筆記本電腦或是臺式機

互聯網

jQuery

仿Komodo Media的jQuery星級評分插件

方法/步驟

基本方法：

$('#demo1').rater('ratingsdemo.php');

通過參數你可以切換顯示樣式

$('#demo2').rater('ratingsdemo.php', {style: 'small'});

你可以設置它們為行內(inline)樣式

$('#inline1').rater('ratingsdemo.php', {style: 'inline'});

$('#inline2').rater('ratingsdemo.php', {style: 'inline', curvalue:3});

只顯示一顆星星，就像一個開關

$('#demo4').rater('ratingsdemo.php', {maxvalue:1, style: 'basic'});

最基本的樣式

$('#demo5').rater('ratingsdemo.php', {style: 'basic', curvalue:2});

5顆星星

$('#demo6').rater('ratingsdemo.php', {maxvalue:10, style: 'basic', curvalue:0});

你也可以定製你想要的星星數量

$('#demo6').rater('ratingsdemo.php', {maxvalue:10, style: 'basic', curvalue:0});

或者更多，只需修改一下參數

>$('#demo7').rater('ratingsdemo.php', {maxvalue:20, style: 'small', curvalue:3});

新建項目文件夾，引入以下文件：


 /**
 * jQuery Ajax Rater Plugin
 *
 * This rater is based on the code Ritesh Agrawal did. Unfortunatly his CSS and the hover technique breaks in some browsers.
 * So i thought, why not use the best CSS star-rater known to man kind and throw it in the mix.
 * I have used the CSS and technique from Komodo Media since it is stable and tested on many, many browsers.
 *
 * This rater compared, has no cancel button. But i think we can live with that :)
 * To avoid conflicts i have changed the function name.
 *
 * Licensed under The MIT License
 */

Basic

The one we all know and love

 $('#demo1').rater('ratingsdemo.php');

Small

Via the options you can switch the style

 $('#demo2').rater('ratingsdemo.php', {style: 'small'});

Inline

You can chain them, using inline style:

and

 $('#inline1').rater('ratingsdemo.php', {style: 'inline'});
 $('#inline2').rater('ratingsdemo.php', {style: 'inline', curvalue:3});

Single Star (GMail style)

This acts like a ON/OFF trigger (since it's supposed to act as trigger, it does not show ajax response)

 $('#demo4').rater('ratingsdemo.php', {maxvalue:1, style: 'basic'});

Basic, with initial value

You can set the initial value in the options too!

 $('#demo5').rater('ratingsdemo.php', {style: 'basic', curvalue:2});

Basic, but more then 5 stars

You can have as many stars you want. CSS is adjusted respectivly.

 $('#demo6').rater('ratingsdemo.php', {maxvalue:10, style: 'basic', curvalue:0});

Or Small.. doesn't matter

It's all dynamic.. :)

 $('#demo7').rater('ratingsdemo.php', {maxvalue:20, style: 'small', curvalue:3});

Basic，運行效果如下圖所示：

Small，運行效果如下圖所示：

Inline，運行效果如下圖所示：

Single Star (GMail style)，運行效果如下圖所示：

Basic, with initial value，運行效果如下圖所示：

Basic, but more then 5 stars，運行效果如下圖所示：

Or Small.. doesn't matter，運行效果如下圖所示：

注意事項

該插件依賴於JQuery庫，需要引入JQuery庫文件

效果, 插件, android星級評分樣式, js星級評分, 星級評分, jquery星級評分插件, jquery星級評分, css星級評分, 星級評分插件, jquery五星級評分插件, 移動端星級評分插件,

相關問題答案

Have any Question?

Let us answer it!