|
|
|
|
移动端

jQuery可多次使用的星级插件

css代码从项目中分解出,有一小部分没贴完,大家可以根据自己的需求修改css style。

作者:mdxy-dxy来源:脚本之家|2012-04-24 10:36

开发者盛宴来袭!7月28日51CTO首届开发者大赛决赛带来技术创新分享

一个关于jquery星级插件的博文,那是我从网上收集的,它只支持一个页面中使用一次,多次使用的话会发生冲突,达不到我项目的需求,没办法,只能修改它

效果图如下:

css所需背景图片:

二话不说,帖代码:

html代码

  1. <div class="xing">   
  2. <span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font></span><div   
  3. class="rating-wrap">   
  4. <ul id="xing1">   
  5. <li><a href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star">   
  6. </a></li>   
  7. <li><a href="javascript:;" data-rate-value="20" data-hint="差" title="差" class="two-stars ">   
  8. </a></li>   
  9. <li><a href="javascript:;" data-rate-value="30" data-hint="还行" title="还行" class="three-stars ">   
  10. </a></li>   
  11. <li><a href="javascript:;" data-rate-value="40" data-hint="好" title="好" class="four-stars">   
  12. </a></li>   
  13. <li><a href="javascript:;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars">   
  14. </a></li>   
  15. </ul>   
  16. </div>   
  17. <span class="xing1">点击星星开始打分</span>   
  18. </div>   
  19. <divclassdivclass="xing">   
  20. <span style="float: left">广告效果:<font color="#CC3300"size="-1">*</font></span><div   
  21. class="rating-wrap">   
  22. <ulidulid="xing2">   
  23. <li><a href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star">   
  24. </a></li>   
  25. <li><a href="javascript:;" data-rate-value="20" data-hint="差" title="差" class="two-stars ">   
  26. </a></li>   
  27. <li><a href="javascript:;" data-rate-value="30" data-hint="还行" title="还行" class="three-stars ">   
  28. </a></li>   
  29. <li><a href="javascript:;" data-rate-value="40" data-hint="好" title="好" class="four-stars">   
  30. </a></li>   
  31. <li><a href="javascript:;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars">   
  32. </a></li>   
  33. </ul>   
  34. </div>   
  35. <span class="xing2">点击星星开始打分</span>   
  36. </div>  

JS代码

  1. <script type="text/javascript" src="js/jQuery_1.42.js"></script>   
  2. <script type="text/javascript">   
  3. $(function(){   
  4. $(".rating-wrap a").mouseover(function(){   
  5. $(this).parent().siblings().find("a").removeClass("active-star");   
  6. $(this).addClass("active-star");   
  7. $("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint"))   
  8. }).mouseleave(function(){   
  9. var selectID=$(this).parent().parent().attr("id")+"select";   
  10. $(this).removeClass("active-star");   
  11. if($("#"+selectID).length==0)   
  12. {   
  13. $("."+$(this).parent().parent().attr("id")).removeClass("active-hint").html("点击星星开始打分");   
  14. }   
  15. else   
  16. {   
  17. $("."+$(this).parent().parent().attr("id")).html($("#"+selectID).attr("data-hint"));   
  18. $("#"+selectID).addClass("active-star");   
  19. }   
  20. }).click(function(){   
  21. $(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id")+"select");   
  22. $(this).parent().siblings().find("a").attr("id","");   
  23. $("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint");   
  24. })   
  25. })   
  26. </script>   
  27.  

css代码

  1. <style>   
  2. .item-rank-rst, .user-rank-rst, .rating-wrap ul, .rating-wrap a:hover, .rating-wrap .active-star, .user-m-star, .urr-rank60, .breadcrumb .note {   
  3. background-imageurl(xing_bg.png);/**-----星级插件背景图片----**/   
  4. background-repeatno-repeat;   
  5. }   
  6. .rating-wrap {   
  7. backgroundnone repeat scroll 0 0 #FFF9F1;   
  8. border1px solid #EFE0D7;   
  9. display: inline-block;   
  10. floatleft;   
  11. height20px;   
  12. margin-right5px;   
  13. padding4px 0 0 5px;   
  14. positionrelative;   
  15. top: -2px;   
  16. width89px;   
  17. z-index0;   
  18. }   
  19. .rating-wrap ul {   
  20. background-position0 -250px;   
  21. height16px;   
  22. positionrelative;   
  23. width85px;   
  24. z-index10;   
  25. }   
  26. .rating-wrap li {   
  27. displayinline;   
  28. }   
  29. .rating-wrap a {   
  30. displayblock;   
  31. height16px;   
  32. left: 0;   
  33. positionabsolute;   
  34. top: 0;   
  35. }   
  36. .rating-wrap .five-stars {   
  37. background-position0 -160px;   
  38. width84px;   
  39. z-index10;   
  40. }   
  41. .rating-wrap .four-stars {   
  42. background-position0 -178px;   
  43. width68px;   
  44. z-index20;   
  45. }   
  46. .rating-wrap .three-stars {   
  47. background-position0 -196px;   
  48. width51px;   
  49. z-index30;   
  50. }   
  51. .rating-wrap .two-stars {   
  52. background-position0 -214px;   
  53. width34px;   
  54. z-index40;   
  55. }   
  56. .rating-wrap .one-star {   
  57. background-position0 -232px;   
  58. width17px;   
  59. z-index50;   
  60. }   
  61. .rating-block .hint {   
  62. color#999999;   
  63. floatleft;   
  64. }   
  65. .active-hint {   
  66. color#CC0000;   
  67. }   
  68. .rating-block .err-hint {   
  69. color#EE0000;   
  70. font-weightbold;   
  71. }   
  72. </style>  

注:css代码从项目中分解出,有一小部分没贴完,大家可以根据自己的需求修改css style

【责任编辑:张伟 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Visual Studio 2005+SQL Server 2005数据库应用系

本书主要介绍采用Visual Studio 2005的C#语言为前台,SQL Server 2005数据库为后台的数据库系统开发技术。 全书分为15章,内容包括走进.NE...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊