In order to use RateIt you'll need:
1 2 | < div class = "rateit" > </ div > |
1 2 | < span class = "rateit" > </ span > |
1 2 | < input type = "range" min = "0" max = "7" value = "0" step = "0.5" id = "backing2" > < div class = "rateit" data-rateit-backingfld = "#backing2" ></ div > |
1 2 3 4 5 6 7 | < 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 > |
1 | < div class = "rateit" data-rateit-value = "2.5" data-rateit-ispreset = "true" data-rateit-readonly = "true" ></ div > |
1 2 3 4 | < 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 > |
1 2 3 4 5 6 7 8 9 10 11 12 | < 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 > |
1 2 3 4 5 6 7 | < 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.
1 | < div class = "rateit bigstars" data-rateit-starwidth = "32" data-rateit-starheight = "32" ></ div > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | div.bigstars div.rateit-range { background : url (star-white 32 .png); height : 32px ; } div.bigstars div.rateit-hover { background : url (star-gold 32 .png); } div.bigstars div.rateit-selected { background : url (star-red 32 .png); } div.bigstars div.rateit-reset { background : url (star-black 32 .png); width : 32px ; height : 32px ; } div.bigstars div.rateit-reset:hover { background : url (star-white 32 .png); } |
Here we use one big image (actually 3), with different dimensions. Not very pretty, but it conveys the message I hope.
1 | < div class = "rateit antenna" data-rateit-starwidth = "11" data-rateit-starheight = "25" ></ div > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | div.antenna div.rateit-range { background : url (antenna- black .png) no-repeat ; height : 25px ; } div.antenna div.rateit-hover { background : url (antenna-yellow.png) no-repeat ; } div.antenna div.rateit-selected { background : url (antenna- red .png) no-repeat ; } |
All properties can also be set on the fly. Here are a few examples:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | < 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.
1 2 3 4 5 6 | < div class = "rateit" id = "rateit10" > </ div > < script type = "text/javascript" > $("#rateit10").bind('over', function (event,value) { $(this).attr('title', value); }); </ script > |
1 2 3 4 5 6 7 | < 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.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | < 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 > |
1 2 3 4 5 6 7 8 9 | <%@ 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < 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 > |