Chinaunix首页 | 论坛 | 博客

甜心183的ChinaUnix博客

首页　| 　博文目录　| 　关于我

甜心183

  • 博客访问： 113761
  • 博文数量： 40
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 423
  • 用 户 组： 普通用户
  • 注册时间： 2013-01-15 11:55
文章分类

全部博文（40）

文章存档

2016年（36）

2015年（2）

2013年（2）

我的朋友
最近访客
推荐博文
jquery五星评价功能

分类： jQuery

2016-07-08 10:47:25

项目中经常会遇见评价功能，下边总结了两种项目中遇见的写法，也许会有更好的写法，一起探索
一：使用插件（jquery.raty.min.js）
html写法

点击(此处)折叠或打开

  1. <div id="guide_rating" class="rating" style="cursor: pointer;"></div>
js写法

点击(此处)折叠或打开

  1. $('#guide_rating').raty({
  2.           'scoreName': 'appointment[guide_rating]',
  3.           'score' : 4,
  4.           'cancel' : false,
  5.           'half': true,
  6.           'starType' : 'i'
  7.         })
css写法

点击(此处)折叠或打开

  1. .cancel-on-png,
  2. .cancel-off-png,
  3. .star-on-png,
  4. .star-off-png,
  5. .star-half-png {
  6.   font-size: 26px;
  7. }
  8. .cancel-on-png,
  9. .cancel-off-png,
  10. .star-on-png,
  11. .star-off-png,
  12. .star-half-png {
  13.   -moz-osx-font-smoothing: grayscale;
  14.   -webkit-font-smoothing: antialiased;
  15.   font-family: "FontAwesome";
  16.   font-style: normal;
  17.   font-variant: normal;
  18.   font-weight: normal;
  19.   line-height: 1;
  20.   speak: none;
  21.   text-transform: none;
  22.   color: #777777;
  23. }
  24. .cancel-on-png {
  25.   color: #dd5a43;
  26. }
  27. .cancel-on-png:before {
  28.   content: "\f057";
  29. }
  30. .cancel-off-png {
  31.   color: #e08374;
  32. }
  33. .cancel-off-png:before {
  34.   content: "\f05c";
  35. }
  36. .star-on-png {
  37.   color: #ea5404;
  38. }
  39. .star-on-png:before {
  40.   content: "\f005";
  41. }
  42. .star-off-png {
  43.   color: #777777;
  44. }
  45. .star-off-png:before {
  46.   content: "\f006";
  47. }
  48. .star-half-png {
  49.   color: #ea5404;
  50. }
  51. .star-half-png:before {
  52.   content: "\f123";
  53. }
二:用js直接写，不使用插件
html写法

点击(此处)折叠或打开

  1. <div id="xzw_starSys" class="evaluationInfoBox pb30" style="width:100%">
  2.          <div class="xzw_starBox">
  3.           <span class="starDes">区域</span>
  4.           <ul class="star" id="star0">
  5.            <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
  6.            <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
  7.            <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
  8.            <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
  9.            <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
  10.           </ul>
  11.           <div class="current-rating" id="showb0" style="width: 24px;"></div>
  12.          </div>
  13.          <div class="clearfix"></div>

js写法

点击(此处)折叠或打开

  1. //五角星评价js
  2.     var stepW = 24;
  3.     var stars = $("#star0 > li");
  4.     var location=4;
  5.     var house=4;
  6.     var price=4;
  7.     var mating=4;
  8.     var eva=4;
  9.     $("#showb0").css("width",0);
  10.     stars.each(function(i){
  11.         $(stars[i]).click(function(e){
  12.             var n = i+1;
  13.             $("#location").attr("value",n*2);
  14.             location=i+1;
  15.             $("#showb0").css({"width":stepW*n});
  16.             $(this).find('a').blur();
  17.             return stopDefault(e);
  18.         });
  19.     });
  20.  function stopDefault(e){
  21.     if(e && e.preventDefault)
  22.            e.preventDefault();
  23.     else
  24.            window.event.returnValue = false;
  25.     return false;
  26.   }
css写法

点击(此处)折叠或打开

  1. #xzw_starSys{width:400px;}
  2. .xzw_starBox{position:relative;width:120px;float:left;height:40px;padding-left:20px;}
  3. /**/
  4. #xzw_starSys .description{clear:both;padding:10px 0px}
  5. #xzw_starSys .star{height:20px;width:120px;position:relative;background:url(123.png) repeat-x;cursor:pointer;margin-left: 60px;}
  6. #xzw_starSys .star li{float:left;padding:0px;margin:0px;}
  7. #xzw_starSys .star li a{display:block;width:24px;height:20px;overflow:hidden;text-indent:-9999px;position:absolute;z-index:5}
  8. #xzw_starSys .star li a:hover{background:url(123.png) 0 -25px repeat-x;z-index:3;left:0}
  9. #xzw_starSys .star a.one-star{left:0}
  10. #xzw_starSys .star a.one-star:hover{width:24px}
  11. #xzw_starSys .star a.two-stars{left:24px}
  12. #xzw_starSys .star a.two-stars:hover{width:48px}
  13. #xzw_starSys .star a.three-stars{left:48px}
  14. #xzw_starSys .star a.three-stars:hover{width:72px}
  15. #xzw_starSys .star a.four-stars{left:72px}
  16. #xzw_starSys .star a.four-stars:hover{width:96px}
  17. #xzw_starSys .star a.five-stars{left:96px}
  18. #xzw_starSys .star a.five-stars:hover{width:120px}
  19. #xzw_starSys .current-rating{background:url(123.png) 0 -28px repeat-x;position:absolute;height:20px;z-index:1;top:23px;left:80px;}
  20. .starDes{
  21.   position:relative;
  22.   top:22px;
  23. }






阅读(2045) | 评论(0) | 转发(0) |
1

上一篇：javascript prototype实例

下一篇：jquery滑动加载分页

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6