スターレートを実装しましたのでちょっと説明アンド配布on会社のブログ。
ということで加藤です。
どうぞ。面白くないブログです。
恒例の面白くないタイムスタート！！

はい、サンプルページ

呼び出しかたは適応したselectをJqueryにあげて必要とあらば画像のパスを設定してあげてください。jQueryプラグインて便利ですね。

$("select#testStar").jqStarRater();

はい、いきなりソースコード。

/***********************************************************
* jqstarRater make with jQuery {
*     since : {
*       date    : "2009-01-22",
*       author  : "akato"
*     },
*     lastmodified : {
*       date    : "2009-02-17",
*       author  : "akato"
*     },
*     methods : {
*       //making
*     }
* }
***********************************************************/
$(function() {
  jQuery.fn.jqSstarRater = function(config){
    //default
    config = jQuery.extend({
      starDefault: './images/icon_star_off.gif'
      starSelected: './images/icon_star_on.gif'
    },config);
  
    var $target = $(this);
    var targetOp = {};
    var nowCount = 0;
    var mDownFlg = false;
    var mOutFlg  = false;
    
    //select options get
    targetOp.name = $target.attr("name");
    targetOp.values = new Array();
    
    //select>option get values
    $target.children("option").each(function(i){
      targetOp.values[i] = $(this).attr("value");
    });
    
    //make stars wrapper
    var listChild ="";
    for(var i=0;i<targetOp.values.length;i++) {
      listChild += '<img id="jqStarRaterStarNo'+i+'" rel="'+i+'" src="'+config.starDefault+'" />';
    }
    $target.after('<span id="jqStarRaterStar" rel="null"></span>');
    var $jqStarRaterStar = $("#jqStarRaterStar");

    $jqStarRaterStar.html(listChild);
    
    //make dummy hidden input
    $jqStarRaterStar.append('<input type="hidden" id="jqStarRaterDummy" name="'+targetOp.name+'" value="0" />');
    
    //remove select
    $target.remove();
    
    //eventhandlr
    $jqStarRaterStar.children("img")
      .mouseover(function() {
        nowCount = $(this).attr("rel");
        starPaint(nowCount);
      })
      .mousedown(function() {
        mDownFlg = true;
      })
      .mouseup(function() {
        if(mDownFlg) {
          nowCount = $(this).attr("rel");
          $("#jqStarRaterDummy").val(targetOp.values[nowCount]);
          starPaint(nowCount,"commit");
        }
        mDownFlg = false;
      });
      var countDebug = 0;
      $jqStarRaterStar
        .css("cursor","pointer")
        .mouseout(function() {
          starPaint("reset");
        });
    var starPaint = function(counter,temp) {
      if(counter === "reset") {
        var realLength = $jqStarRaterStar.attr("rel");
        $jqStarRaterStar.children("img").each(function(i) {
          if(realLength === "null") $(this).attr("src",config.starDefault);
          else if(i<=realLength) $(this).attr("src",config.starSelected);
          else if(i>realLength)  $(this).attr("src",config.starDefault);
        });
      }else if(temp === "commit") {
        $jqStarRaterStar.children("img").each(function(i) {
          if(i > counter) $(this).attr("src",config.starDefault);
          else if(i <= counter) $(this).attr("src",config.starSelected);
        });
        $jqStarRaterStar.attr("rel", counter);
      }else {
        $jqStarRaterStar.children("img").each(function(i) {
          if(i > counter) $(this).attr("src",config.starDefault);
          else if(i <= counter) $(this).attr("src",config.starSelected);
        });
      }
    };
    return this;
  };

});

以上です。
指定したセレクトが指定した画像で作られたスターに置き換わってちょっとおしゃれになりました。よかったですね。
ポイントselectタグを自動的にhiddenにしてスターレートに共鳴してガシガシvalueを書き換えるところでしょうか。
見ればわかるとおり凄くシンプルな実装なので0.5スターに対応とか凝ったことは出来ない代わりにできるだけ高速化とシンプルさを両立しようと必死にもがいております。
selectにつっこんだoptionの数だけ画像を埋め込むので半分の画像設定してセレクトに設定すれば0.5に対応できないこともない。っていうかできる。できるじゃん、すげー！

ご静聴、ありがとうございました。

Share on Tumblr

Tweet