jQuery评星插件

最新推荐文章于 2024-05-08 09:44:11 发布

最新推荐文章于 2024-05-08 09:44:11 发布 · 123 阅读

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一个基于jQuery的简单星级评分插件的实现方法。该插件通过自定义选项如星星数量和图片URL等参数来创建动态的星级评分组件，并且支持点击和悬停效果。文章还提供了示例代码，帮助开发者快速理解和使用此插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.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>