[置顶] jQuery评星插件

发布时间：2020-07-08 12:28:34 来源：网络阅读：353 作者：873582595 栏目：web开发

$.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         $("<span></span>").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 }

用法：

<!DOCTYPE html>  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  5     <title>豆芽评星</title>  6     <script src="jquery-1.8.3.min.js"></script>  7     <script src="DyStar.js"></script>  8     <style>  9         body { 10             font-size:12px; 11             font-weight:bold; 12         } 13     </style> 14     <script> 15         $(function () { 16             $(".star").DyStar(function (data) { 17                 alert(data); 18             }); 19             $(".star3").DyStar({ count: 4}, function (data) { 20                 alert(data); 21             }); 22         }); 23     </script> 24 </head> 25 <body> 26     <div class="star"></div> 27     <div class="star" data-value="1"></div> 28     <div class="star"></div> 29     <br /> <br /> <br />  30     下面的  都默认复制为2颗星 31      <div class="star3"></div> 32     <div class="star3" data-value="2"></div> 33      下面这个是只读的 其余的可以重选 34     <div class="star3" data-readonly="true" data-value="3"></div> 35  36 </body> 37 </html>

向AI问一下细节

[置顶] jQuery评星插件

猜你喜欢

最新资讯

相关推荐

相关标签