star-rating.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. $(function() {
  2. // basic use comes with defaults values
  3. $(".my-rating").starRating({
  4. initialRating: 4.0,
  5. starSize: 35,
  6. strokeWidth: 0,
  7. });
  8. $(".my-rating-2").starRating({
  9. totalStars: 5,
  10. starSize: 35,
  11. starShape: 'rounded',
  12. emptyColor: 'lightgray',
  13. hoverColor: '#f1c40f',
  14. activeColor: '#f1c40f',
  15. strokeWidth: 0,
  16. useGradient: false
  17. });
  18. // example grabing rating from markup, and custom colors
  19. $(".my-rating-4").starRating({
  20. totalStars: 5,
  21. starShape: 'rounded',
  22. starSize: 35,
  23. emptyColor: 'lightgray',
  24. hoverColor: '#f1c40f',
  25. activeColor: '#f1c40f',
  26. useGradient: false
  27. });
  28. // specify the gradient start and end for the selected stars
  29. $(".my-rating-5").starRating({
  30. starSize: 35,
  31. strokeWidth: 0,
  32. strokeColor: 'black',
  33. initialRating: 2,
  34. starGradient: {
  35. start: '#f1c40f',
  36. end: '#f8f42e'
  37. },
  38. });
  39. $(".my-rating-6").starRating({
  40. starSize: 35,
  41. totalStars: 5,
  42. emptyColor: 'lightgray',
  43. hoverColor: '#f1c40f',
  44. activeColor: '#f1c40f',
  45. initialRating: 4,
  46. strokeWidth: 0,
  47. useGradient: false,
  48. minRating: 2,
  49. callback: function(currentRating, $el){
  50. alert('rated ' + currentRating);
  51. console.log('DOM Element ', $el);
  52. }
  53. });
  54. $(".my-rating-7").starRating({
  55. starSize: 35,
  56. initialRating: 4,
  57. strokeWidth: 0,
  58. readOnly: true,
  59. starShape: 'rounded'
  60. });
  61. $(".my-rating-8").starRating({
  62. starSize: 35,
  63. useFullStars: true,
  64. strokeWidth: 0,
  65. });
  66. $(".my-rating-9").starRating({
  67. initialRating: 3.5,
  68. strokeWidth: 0,
  69. disableAfterRate: false,
  70. onHover: function(currentIndex, currentRating, $el){
  71. console.log('index: ', currentIndex, 'currentRating: ', currentRating, ' DOM element ', $el);
  72. $('.live-rating').text(currentIndex);
  73. },
  74. onLeave: function(currentIndex, currentRating, $el){
  75. console.log('index: ', currentIndex, 'currentRating: ', currentRating, ' DOM element ', $el);
  76. $('.live-rating').text(currentRating);
  77. }
  78. });
  79. $(".my-rating-10").starRating({
  80. initialRating: 2,
  81. starSize: 35,
  82. strokeWidth: 0,
  83. strokeColor: 'black',
  84. ratedColors: ['#92db31', '#31cbdb', '#316ddb', '#b931db', '#db3131']
  85. });
  86. });