多语言展示
当前在线：1325今日阅读：139今日分享：40

仿Komodo Media的jQuery星级评分插件使用攻略
一款仿Komodo Media的jQuery星级评分插件。整个插件包括星星效果和ajax回调，代码简单实用。     本经验分享如何使用该jQuery插件制作星级评分效果。
工具/原料
1

笔记本电脑或是台式机

2

互联网

3

jQuery

4

仿Komodo Media的jQuery星级评分插件

方法/步骤
1

基本方法：$('#demo1').rater('ratingsdemo.php');

2

通过参数你可以切换显示样式$('#demo2').rater('ratingsdemo.php', {style: 'small'});

3

你可以设置它们为行内(inline)样式$('#inline1').rater('ratingsdemo.php', {style: 'inline'});$('#inline2').rater('ratingsdemo.php', {style: 'inline', curvalue:3});

4

只显示一颗星星，就像一个开关$('#demo4').rater('ratingsdemo.php', {maxvalue:1, style: 'basic'});

5

最基本的样式$('#demo5').rater('ratingsdemo.php', {style: 'basic', curvalue:2});

6

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

7

你也可以定制你想要的星星数量$('#demo6').rater('ratingsdemo.php', {maxvalue:10, style: 'basic', curvalue:0});

9

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

10

jQuery星级评分    

jQuery Helper for Komodo Media CSS Star Rater (Redux)

Dynamicly create a Ajax rater

/** * 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});

11

Basic，运行效果如下图所示：

12

Small，运行效果如下图所示：

13

Inline，运行效果如下图所示：

14

Single Star (GMail style)，运行效果如下图所示：

15

Basic, with initial value，运行效果如下图所示：

16

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

17

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

注意事项

该插件依赖于JQuery库，需要引入JQuery库文件

推荐信息
网站地图 XML TXT RSS 隐私政策 服务条款 使用条款
Copyright ©1996-2026 www.onijiang.com Corporation, All Rights Reserved