[置顶] jQuery评星插件
$.fn.DyStar = function (option, callback) { 2 var defaults = { 3 count: 5, 4 url: 'images/star.gif' 5 }; 6 var opt = $.extend(defaults, option), 7 obj = $(this); 8 obj.css({ 9 width: 16 * opt.count, 10 height: 16 11 }); 12 for (i = 0; i < opt.count; i++) { 13 $("").css({ 14 width: 16, 15 height: 16, 16 float: "left", 17 "background-image": "url(" + opt.url + ")" 18 }).appendTo($(this)); 19 } 20 21 22 obj.each(function () { 23 if($(this).attr("data-value")){ 24 $(this).children().not($(this).children("span:lt(" + $(this).attr("data-value") + ")").css("background-position", "0px 32px")).css("background-position", "0px 0px"); 25 $(this).data("starcount",$(this).attr("data-value")-1); 26 } 27 }); 28 29 30 31 obj.filter("[data-readonly!='true']").on({ //只读的 不添加这些事件 32 click: function () { 33 obj = $(this).parent(); 34 var starindex = $(this).index() + 1; 35 obj.children().not($(this).prevAll().add($(this)).css("background-position", "0px 32px")).css("background-position", "0px 0px"); 36 obj.data("starcount", $(this).index()); 37 if (typeof option == 'function') { 38 option(starindex); 39 } 40 if (typeof callback == 'function') { 41 callback(starindex); 42 } 43 }, 44 mouseover: function () { 45 obj = $(this).parent(); 46 obj.children().not($(this).prevAll().add($(this)).css("background-position", "0px 16px")).css("background-position", "0px 0px"); 47 }, 48 mouseout: function () { 49 obj = $(this).parent(); 50 obj.children().not(obj.children("span:lt(" + (obj.data("starcount") + 1) + ")").css("background-position", "0px 32px")).css("background-position", "0px 0px"); 51 } 52 }, "span"); 53 }
用法:
2 3 4 5豆芽评星 6 7 8 14 24 25 26 27 28 29
30 下面的 都默认复制为2颗星 31 32 33 下面这个是只读的 其余的可以重选 34 35 36 37创新互联建站是一家专注于成都网站建设、成都网站制作与策划设计,张店网站建设哪家好?创新互联建站做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:张店等地区。张店做网站价格咨询:18980820575
标题名称:[置顶] jQuery评星插件
文章源于:http://scyanting.com/article/ghhdoc.html