google gadgetで、コメントを記入するところがあるのですが、その時、評価をつけるのに動的に星マークがいったりきたりすることができます。
例)下図
画像だけみても、いまいち実感がわかないと思うので、実際に見せます。
☆☆☆☆☆
星印にマウスを持っていくと、星が塗られてその横には、文字が表示されると思います。
そして、星マーク上でクリックするとそのポジションを覚えてくれて、星マークからマウスを放しても、その位置を保ってくれるという仕様です。
で、おそらくこれ、JavaScriptで実装されていると思い、試しに考えてみました。
<div style="cursor:default">
<span onmouseout="lf_setVote()" onmouseover="lf_setVote(1);"
onclick="lf_VoteVal(1)" id="vote_1">☆</span>
<span onmouseout="lf_setVote()" onmouseover="lf_setVote(2);"
onclick="lf_VoteVal(2)" id="vote_2">☆</span>
<span onmouseout="lf_setVote()" onmouseover="lf_setVote(3);"
onclick="lf_VoteVal(3)" id="vote_3">☆</span>
<span onmouseout="lf_setVote()" onmouseover="lf_setVote(4);"
onclick="lf_VoteVal(4)" id="vote_4">☆</span>
<span onmouseout="lf_setVote()" onmouseover="lf_setVote(5);"
onclick="lf_VoteVal(5)" id="vote_5">☆</span>
<span id="vote_msg"></span>
</div>
<input type="text" name="judge" value="0" id="judge">
<script type="text/javascript">
var vote_msg ={};
vote_msg = {
"0":""
, "1":"よくない"
, "2":"あまりよくない"
, "3":"普通"
, "4":"お勧め"
, "5":"超お勧め"
};
function lf_setVote(aVal){
/* 引数がない場合 */
if(isFinite(aVal) == false){
MaxVal = $("judge").value;
/* 引数が存在する場合 */
}else{
MaxVal = aVal;
}
/* 星マークに色を塗る */
for(var i=1; i<=MaxVal; i++){
$("vote_"+i).innerHTML = "★";
}
/* 星マークを白にする */
for(var k=parseInt(1)+parseInt(MaxVal); k<=5; k++){
$("vote_"+k).innerHTML = "☆";
}
/* メッセージの挿入を行う */
$("vote_msg").innerHTML = vote_msg[MaxVal];
}
function lf_VoteVal(aVal){
$("judge").value = aVal;
}
function $(aId){
return document.getElementById(aId);
}
</script> |
動作確認は、firefoxとIE両方で動きました
0 コメント:
コメントを投稿