仿Komodo Media的jQuery星级评分插件使用攻略

一款仿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});

新建项目文件夹，引入以下文件：

jQuery星级评分

/** * 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库文件

上一篇：让WIN7关机更快的方法

下一篇：Win10怎么备份注册表项如何备份指定注册表分支

推荐信息

欧尼酱