jQuery

【jQuery】jQueryを使った評価プラグイン。RateIt

June 25, 2016
rateit.js

RateItはjQueryを使った評価プラグイン(HTML5 data-* を使用)

Basic usage

<div class="rateit"></div>

Basic usage (inline element)

<span class="rateit"></span>

Progressive enhancement (using input[type=range])

<input type="range" min="0" max="7" value="0" step="0.5" id="backing2">
<div class="rateit" data-rateit-backingfld="#backing2"></div>

Progressive enhancement (using select)

<select id="backing2b">
    <option value="0">Bad</option>
    <option value="1" selected="selected">OK</option>
    <option value="2">Great</option>
    <option value="3">Excellent</option>
</select>
<div class="rateit" data-rateit-backingfld="#backing2b"></div>

Progressive enhancement (using select), and overriding min value

<select id="backing2c">
    <option value="1">Bad</option>
    <option value="2">OK</option>
    <option value="3">Great</option>
    <option value="4">Excellent</option>
</select>
<div class="rateit" data-rateit-backingfld="#backing2c" data-rateit-min="0"></div>

Readonly and preset value

<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>

More settings

<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>

Javascript interaction

<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>            

Javascript invocation

<input type="hidden" id="backing6">
<div id="rateit6">
</div>
 
<script type="text/javascript">
    $(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
</script>

Styling

Inline code

<div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32"></div>

Style sheet

div.bigstars div.rateit-range
{
    background: url(star-white32.png);
    height: 32px;
}
 
div.bigstars div.rateit-hover
{
    background: url(star-gold32.png);
}
 
div.bigstars div.rateit-selected
{
    background: url(star-red32.png);
}
 
div.bigstars div.rateit-reset
{
    background: url(star-black32.png);
    width: 32px;
    height: 32px;
}
 
div.bigstars div.rateit-reset:hover
{
    background: url(star-white32.png);
}

More styling

Inline code

<div class="rateit antenna" data-rateit-starwidth="11" data-rateit-starheight="25"></div>

Style sheet

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;
}  

SVG icons

Inline code

<div class="rateit svg" data-rateit-starwidth="15" data-rateit-starheight="15"></div>

Style sheet

div.svg div.rateit-range {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4Ij4NCiAgPHRleHQgeD0iMCIgeT0iMTUiIGZpbGw9ImJsYWNrIiBmb250LXNpemU9IjE4Ij7inKY8L3RleHQ+DQo8L3N2Zz4=') /*star-normal.svg*/;
  *background: url(star-normal.svg); /* For IE 6 and 7 */
}
div.svg div.rateit-hover {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiPg0KICA8dGV4dCB4PSIwIiB5PSIxNSIgZmlsbD0ieWVsbG93IiBmb250LXNpemU9IjE4Ij7inKY8L3RleHQ+DQo8L3N2Zz4=') /*star-hover.svg*/;
  *background: url(star-hover.svg); /* For IE 6 and 7 */
}
div.svg div.rateit-selected {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiPg0KICA8dGV4dCB4PSIwIiB5PSIxNSIgZmlsbD0icmVkIiBmb250LXNpemU9IjE4Ij7inKY8L3RleHQ+DQo8L3N2Zz4=') /*star-selected.svg*/;
  *background: url(star-selected.svg); /* For IE 6 and 7 */
}
div.svg div.rateit-preset {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4NCiAgPHRleHQgeD0iMCIgeT0iMTUiIGZpbGw9ImJsYWNrIiBmb250LXNpemU9IjE1Ij7inKY8L3RleHQ+DQo8L3N2Zz4=') /*star-preset.svg*/;
  *background: url(star-preset.svg); /* For IE 6 and 7 */
}

SVG file

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px">
  <text x="0" y="15" fill="black" font-size="18">✦</text>
</svg>

Setting and Getting values

<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>   

Tooltip example

Basic numbers

<div class="rateit" id="rateit10">
</div>
 
<script type="text/javascript">
    $("#rateit10").bind('over', function (event,value) { $(this).attr('title', value); });
</script> 

Custom text

<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>

AJAX example

Client

<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>

Server (ASPX) super simplified

<%@ 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()));
 
%>

Resizing

<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>  

Confirmation before rating or resetting

<div class="rateit" id="rateit3"></div>
 
<script type="text/javascript">
      $('#rateit13').on('beforerated', function (e, value) {
          if (!confirm('Are you sure you want to rate this item: ' +  value + ' stars?')) {
              e.preventDefault();
          }
      });
      $('#rateit13').on('beforereset', function (e) {
          if (!confirm('Are you sure you want to reset the rating?')) {
              e.preventDefault();
          }
      });        
 </script> 

MITライセンス