Categories: Js/AJAX | Tags: , , | Views: 1,162

 

整个插件不超过50行,包括css。

程序调用:

1
2
3
4
5
6
7
$(function(){   
     $("#hello").rate({
        ratePage:'rate.php',
        rateAfterEvent: function(data){$("#hello").after(data)}
    });
}); 
//<span id=hello></span>

rate.php:

1
print_r($_GET);

运行结果:

rate


源代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*
 *    jquery.rate 1.0 - 2009-09-29
 *
 *    All the stuff written by pwwang (pwwang.com)    
 *    Feel free to do whatever you want with this file
 *
 */
(function($) {
    $.rate = function(wraper, options) {
        var $wraper = $(wraper);
        var $rateUnits = [];
        for(var i=0; i<options.rateMax; i++){    
            $rateUnits[i] =  $(document.createElement("a"))    .attr("href","javascript:;").addClass(options.rateClass);                        
            if( i<options.rated ) $rateUnits[i].addClass(options.ratedClass);
            $wraper.append($rateUnits[i]);
        }
        $.each($rateUnits, function(){                         
            $(this).hover(                          
                function(){ $(this).prevAll().add($(this)).addClass(options.rateOverClass) },                
                function(){ $(this).prevAll().add($(this)).removeClass(options.rateOverClass) }    
            );            
            $(this).click(function(){
                var index = $wraper.children().index($(this));    
                $.get(options.ratePage, { rate:index+1 }, function(data){ (options.rateAfterEvent)(data);    });    
                $(this).prevAll().add($(this)).addClass(options.ratedClass);
                $(this).nextAll().removeClass(options.ratedClass);
            });    
        });    
    }    
    $.fn.rate = function(options) {
        options                 = options || {};
        options.rated             = 3;
        options.rateMax         = options.rateMax || 5;
        options.rateClass         = options.rateClass || "star";
        options.rateOverClass     = options.rateOverClass || "star_on";
        options.ratedClass         = options.ratedClass || "star_yes"
        options.rateImg         = options.rateImg || "images/star.gif";
        options.rateAfterEvent     = options.rateAfterEvent || function(){};
        options.ratePage        = options.ratePage || "rate.php";
        $.rate(this, options);
        return this;    
    };    
})(jQuery);

.rate.css

1
2
3
4
5
@charset "utf-8";
/* CSS Document */
.star{ height:16px; width:16px; display:block; float:left; background:url(star.gif) no-repeat 0 0;}
.star_on{ background: url(star.gif) no-repeat 0 -16px !important;}
.star_yes{ background: url(star.gif) no-repeat 0 -32px;}

下载:

jquery.rate.js

jquery.rate.css

star.gif:

 

这篇文章来自 迷途知返(PWWANG.COM), 转载请注明出处。 版权说明

RELATED POSTS:

  1. jQuery插件:音标辅助输入1.0
  2. jQuery插件:jquery.ecombo 1.0
  3. JavaScript中左右键“同时”点击(click,mousedown,mouseup)事件
  4. 带即时验证的jQuery表单插件
  5. 又见div提示框,jQuery版
  6. DIV提示框:jquery.msgbox.3.0
No comments yet.
;) :| :x :twisted: :roll: :oops: :o :mrgreen: :lol: :idea: :evil: :cry: :arrow: :P :D :?: :? :) :( :!: 8O 8)

你可以使用@somebody:开头, 来邮件通知somebody你回复了他的留言(用户名区分大小写).