To integrate the EONSPORTS rating component, you need:
<div class="rateit">
</div>
<span class="rateit">
</span>
<input type="range" min="0" max="7" value="0" step="0.5" id="backing2">
<div class="rateit" data-rateit-backingfld="#backing2"></div>
<select id="backing2b">
<option value="0">Bad</option>
<option value="1">OK</option>
<option value="2">Great</option>
<option value="3">Excellent</option>
</select>
<div class="rateit" data-rateit-backingfld="#backing2b"></div>
<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
<input type="range" value="4" step="0.25" id="backing4">
<div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-ispreset="true"
data-rateit-min="0" data-rateit-max="10">
</div>
<div class="rateit" id="rateit5" data-rateit-min="2">
</div>
<div>
<span id="value5"></span>
<span id="hover5"></span>
</div>
<script type="text/javascript">
$("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
$("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
$("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
</script>
<input type="hidden" id="backing6">
<div id="rateit6">
</div>
<script type="text/javascript">
$(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
</script>
You can change the styles of the plugin in a two ways.
<div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32"></div>
div.bigstars div.rateit-range
{
background: url(star-white32.webp);
height: 32px;
}
div.bigstars div.rateit-hover
{
background: url(star-gold32.webp);
}
div.bigstars div.rateit-selected
{
background: url(star-red32.webp);
}
div.bigstars div.rateit-reset
{
background: url(star-black32.webp);
width: 32px;
height: 32px;
}
div.bigstars div.rateit-reset:hover
{
background: url(star-white32.webp);
}
Here we use one big image (actually 3), with different dimensions. Not very pretty, but it conveys the message I hope.
<div class="rateit antenna" data-rateit-starwidth="11" data-rateit-starheight="25"></div>
div.antenna div.rateit-range
{
background: url(antenna-black.webp) no-repeat;
height: 25px;
}
div.antenna div.rateit-hover
{
background: url(antenna-yellow.webp) no-repeat;
}
div.antenna div.rateit-selected
{
background: url(antenna-red.webp) no-repeat;
}
All properties can also be set on the fly. Here are a few examples:
<div class="rateit" id="rateit9">
</div>
<div>
<button onclick="alert($('#rateit9').rateit('value'))">Get value</button>
<button onclick="$('#rateit9').rateit('value', prompt('Input numerical value'))">Set value</button>
</div>
<div>
<button onclick="alert($('#rateit9').rateit('max'))">Get max value</button>
<button onclick="$('#rateit9').rateit('max', prompt('Input numerical value'))">Set max value</button>
</div>
<div>
<button onclick="alert($('#rateit9').rateit('step'))">Get step size</button>
<button onclick="$('#rateit9').rateit('step', prompt('Input numerical value'))">Set step size</button>
</div>
<div>
<button onclick="alert($('#rateit9').rateit('readonly'))">Get readonly value</button>
<button onclick="$('#rateit9').rateit('readonly',!$('#rateit9').rateit('readonly'))">Toggle readonly</button>
</div>
<div>
<button onclick="alert($('#rateit9').rateit('ispreset'))">Get ispreset value</button>
<button onclick="$('#rateit9').rateit('ispreset',!$('#rateit9').rateit('ispreset'))">Toggle ispreset</button>
</div>
<div>
<button onclick="$('#rateit9').rateit('reset')">Reset</button>
</div>
Using tooltips is easy. Just bind to the hover event, and do your thing. Shown here is the basic tooltip, but of course you can use any tooltip you'd like.
<div class="rateit" id="rateit10">
</div>
<script type="text/javascript">
$("#rateit10").bind('over', function (event,value) { $(this).attr('title', value); });
</script>
<div class="rateit" id="rateit10b" data-rateit-step="1">
</div>
<script type="text/javascript">
var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
$("#rateit10b").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value-1]); });
</script>
Most times RateIt will be used using some Ajax. There are different ways of implementing it (with/without backing field, using data-* attributes etc.)
<div id="products">
<div style="float:right; width:350px; border:1px solid #ccc; padding:1em;">
<strong>Server response:</strong>
<ul id="response">
</ul>
</div>
<ul>
<li><h4>Product X (id: 312)</h4>
RateIt: <div data-productid="312" class="rateit"></div>
</li>
<li><h4>Product Y (id: 423)</h4>
RateIt: <div data-productid="423" class="rateit"></div></li>
<li><h4>Product Z (id: 653)</h4>
RateIt: <div data-productid="653" class="rateit"></div>
</li>
</ul>
</div>
<script type ="text/javascript">
//we bind only to the rateit controls within the products div
$('#products .rateit').bind('rated reset', function (e) {
var ri = $(this);
//if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null .
var value = ri.rateit('value');
var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
//maybe we want to disable voting?
ri.rateit('readonly', true);
$.ajax({
url: 'rateit.aspx', //your server side script
data: { id: productID, value: value }, //our data
type: 'POST',
success: function (data) {
$('#response').append('<li>' + data + '</li>');
},
error: function (jxhr, msg, err) {
$('#response').append('<li style="color:red">' + msg + '</li>');
}
});
});
</script>
<%@ Page Language="C#" %>
<%
//Get value
float value = float.Parse(Request.Form["value"]);
int productID = int.Parse(Request.Form["id"]);
Response.Write(string.Format("You voted {0} on product: {1}.<br/>Time on server: {2}", value, productID, DateTime.Now.ToString()));
%>
Sometimes we would like to resize the rating controls (perhaps based on screen size).
This is as easy as
a) adding a class to the rateit control, which would change the background image.
b) modifying the starwidth and starheigth properties.
The alternative styling is taken from example 7a) styling.
Pick a size:
<div class="rateit" id="rateit12"></div>
<p>Pick a size:
<select id="size_12">
<option data-class="" data-size="16" selected>normal</option>
<option data-class="bigstars" data-size="32">big</option>
</select>
</p>
<script type="text/javascript">
$('#size_12').change(function () {
var option = $(this.options[this.selectedIndex]);
$('#rateit12').removeClass('bigstars') //remove old class
.addClass(option.data('class')) //add new class
.rateit('starwidth', option.data('size')) //change width
.rateit('starheight', option.data('size')); //change height
});
</script>