RatingView.js
RatingView.js
یک کامپوننت ساده جاوا اسکریپت بر پایه jQuery برای نمایش ستاره یا امتیاز یا هر چیزی شبیه این


امکانات:
  • قابلیت تنظیم بازه امتیاز‌ها به صورت دلخواه
  • قابلیت مدیریت و تنظیم امتیازها در هر لحظه
  • قابلیت مدیریت لحظه ای از طریق تابع
  • قابلیت تنظیم به صورت readonly
  • قابلیت رنگ بندی‌ دلخواه
  • قابلیت تنظیم کلاس برای هر درجه
  • قابلیت تنظیم به عنوان راست چین یا چپ چین / RTL و LTR
مثال:
نمایش به عنوان امتیاز قابل تنظیم


امتیاز چه تغییری کرد؟
0
روی چه امتیازی بودی؟
5
var star = new RatingView('.star', {
	 current: 10, totalScore: 10, rateCount: 5, readonly: false
	 ,change: function (data){
		 $('.star-change').html(data);
	 }
 	 ,hover: function (data, hoverData) {
		 $('.star-hover').html(hoverData);
	 }
});
نمایش در حالت فقط خواندنی

var star_readonly = new RatingView('.star-readonly', {
	current: 5, totalScore: 10, rateCount: 5, readonly: true
});
تنظیم رنگ دلخواه

var star_color = new RatingView('.star-color', {
	current: 9, totalScore: 10, rateCount: 5, readonly: false, color: '#a43b3b'
});
تنظیم کلاس دلخواه

var star_class = new RatingView('.star-class', {
	current: 7, totalScore: 10, rateCount: 5, readonly: false,rateClass:{full:'fa fa-circle', half: 'fa fa-dot-circle-o', empty: 'fa fa-circle-o'}
});
تنظیم به عنوان RTL یا راست چین

var star_rtl = new RatingView('.star-rtl', {
		current: 7, totalScore: 10, rateCount: 5, direction: 'rtl', readonly: true
});
نمایش مقدار درونی بعد از ۲ ثانیه و تنظیم مقداری بعد از ۴ ثانیه

نمایش مقدار امتیاز بعد از ۲ ثانیه:
var star_time = new RatingView('.star-time', {
             current: 10, totalScore: 10, rateCount: 5, direction: 'ltr', color: '#E4A70A',readonly:true
         });

  setTimeout(function(){
      $('.star-time-show').html(star_time.getValue());
  },2000);
  setTimeout(function(){
      star_time.setValue(8);
  },4000);
مثالی از نمایش به عنوان نوار وضعیت!

var progressbar = new RatingView('.progressbar', {
		current: 60, totalScore: 100, rateCount: 10, readonly: true, rateClass:{full:'progress progress-full', half: 'progress progress-half', empty: 'progress progress-empty'}
});