|
Sep
30
|
|
整个插件不超过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); |
运行结果:
![]()
源代码:
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); |
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;} |
下载:
这篇文章来自 迷途知返(PWWANG.COM), 转载请注明出处。 版权说明
RELATED POSTS:
Leave a comment
| Trackback


