مرور کلی وبسایت رسمی
Rater js بهترین ریتدهنده ستاره برای مرورگر است. بدون وابستگی. تعداد ستاره نامحدود
مثال ریتدهنده پایه #
<div id="basic-rater" dir="ltr"></div>
// basic-rater
if (document.querySelector('#basic-rater'))
var basicRating = raterJs({
starSize: 22,
rating: 3,
element: document.querySelector("#basic-rater"),
rateCallback: function rateCallback(rating, done) {
this.setRating(rating);
done();
}
});
مثال ریتدهنده با گام #
<div id="rater-step" dir="ltr"></div>
// rater-step
if (document.querySelector('#rater-step'))
var starRatingStep = raterJs({
starSize: 22,
rating: 1.5,
element: document.querySelector("#rater-step"),
rateCallback: function rateCallback(rating, done) {
this.setRating(rating);
done();
}
});
مثال پیامهای سفارشی #
<div id="rater-message" dir="ltr"></div>
// rater-message
var messageDataService = {
rate: function (rating) {
return {
then: function (callback) {
setTimeout(function () {
callback((Math.random() * 5));
}, 1000);
}
}
}
}
if (document.querySelector('#rater-message'))
var starRatingmessage = raterJs({
isBusyText: "در حال ارزیابی. لطفا صبر کنید...",
starSize: 22,
element: document.querySelector("#rater-message"),
rateCallback: function rateCallback(rating, done) {
starRatingmessage.setRating(rating);
messageDataService.rate().then(function (avgRating) {
starRatingmessage.setRating(avgRating);
done();
});
}
});
مثال فقط خواندنی #
<div id="rater-unlimitedstar" dir="ltr"></div>
// rater-unlimitedstar
if (document.querySelector("#rater-unlimitedstar"))
var starRatingunlimited = raterJs({
starSize: 22,
max: 5,
readOnly: true,
rating: 3.5,
element: document.querySelector("#rater-unlimitedstar"),
});
مثال رویداد بر روی هاور #
<div dir="ltr">
<div id="rater-onhover" class="align-middle"></div>
<span class="ratingnum badge bg-info align-middle ms-2"></span>
</div>
// rater-onhover
if (document.querySelector('#rater-onhover'))
var starRatinghover = raterJs({
starSize: 22,
rating: 1,
element: document.querySelector("#rater-onhover"),
rateCallback: function rateCallback(rating, done) {
this.setRating(rating);
done();
},
onHover: function (currentIndex, currentRating) {
document.querySelector('.ratingnum').textContent = currentIndex;
},
onLeave: function (currentIndex, currentRating) {
document.querySelector('.ratingnum').textContent = currentRating;
}
});
مثال پاکسازی/بازنشست #
<div dir="ltr">
<div id="raterreset" class="align-middle"></div>
<span class="clear-rating"></span>
<button id="raterreset-button" class="btn btn-light btn-sm ms-2">بازنشست</button>
</div>
// rater-reset
if (document.querySelector('#raterreset'))
var starRatingreset = raterJs({
starSize: 22,
rating: 2,
element: document.querySelector("#raterreset"),
rateCallback: function rateCallback(rating, done) {
this.setRating(rating);
done();
}
});
if (document.querySelector("#raterreset-button"))
document.querySelector("#raterreset-button").addEventListener(
"click",
function () {
starRatingreset.clear();
},
false
);