[置頂] 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         $("<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     下面的  都默認(rèn)復(fù)制為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>


 
創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作與策劃設(shè)計,張店網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:張店等地區(qū)。張店做網(wǎng)站價格咨詢:18980820575

本文名稱：[置頂] jQuery評星插件
本文網(wǎng)址：http://jinyejixie.com/article2/ghhdoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、營銷型網(wǎng)站建設(shè)、外貿(mào)建站、品牌網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

[置頂] jQuery評星插件