<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>默認的五星評分</title>
<script src="Resource/js/jquery.min.js"></script>
<script src="Resource/js/jquery.raty.js"></script>
<style type="text/css">
p{border:2px dashed blue; padding: 5px}
#out{margin-bottom:100px;}
</style>
</head>
<body>
<div>
<h2>默認評星</h2>
<div id="star"></div>
<p>
$('#star').raty({</br/>
starOff: 'Resource/img/star-off-big.png',</br/>
starOn: 'Resource/img/star-on-big.png',</br/>
width:200</br/>
});</p>
</div>
<div>
<h2>有默認值的評星</h2>
<div id="valueStar"></div>
<p>
$('#valueStar').raty({</br/>
starOff: 'Resource/img/star-off-big.png',</br/>
starOn: 'Resource/img/star-on-big.png',</br/>
width:200,</br/>
score:3
});</p>
</div>
<div>
<h2>有動態默認值的評星</h2>
<div id="dynamicValueStar" data-score='2'></div>
<p>
$('#dynamicValueStar').raty({</br/>
starOff: 'Resource/img/star-off-big.png',</br/>
starOn: 'Resource/img/star-on-big.png',</br/>
width:200,</br/>
score:function(){</br/>
return $(this).attr('data-score');</br/>
}</br/>
});</p>
</div>
<div>
<h2>改變星星的個數</h2>
<div id="changeStarNo" data-score='2'></div>
<p>
$('#changeStarNo').raty({</br/>
starOff: 'Resource/img/star-off-big.png',</br/>
starOn: 'Resource/img/star-on-big.png',</br/>
width:200,</br/>
score:function(){</br/>
return $(this).attr('data-score');</br/>
},</br/>
number:9</br/>
});</p>
</div>
<div>
<h2>ReadOnly星級顯示</h2>
<div id="starReadyOnly" data-score='2'></div>
<p>
$('#starReadyOnly').raty({</br/>
starOff: 'Resource/img/star-off-big.png',</br/>
starOn: 'Resource/img/star-on-big.png',</br/>
width:200,</br/>
readOnly:true
});</p>
</div>
<div>
<h2>半顆星顯示</h2>
<div id="halfStar"></div>
<p>
$('#starReadyOnly').raty({</br/>
starOff: 'Resource/img/star-off-big.png',</br/>
starOn: 'Resource/img/star-on-big.png',</br/>
width:200,</br/>
readOnly:true,
score:3.65
});</p>
</div>
<div id="out">
<h2>星星點擊事件</h2>
<div id="starClick"></div>
<p>
$('#starClick').raty({</br/>
starOff: 'Resource/img/star-off-big.png',</br/>
starOn: 'Resource/img/star-on-big.png',</br/>
width:200,</br/>
readOnly:true,
score:3.65,
click:function(score, event){
alert("id："+$(this).attr("id")+"\n值："+score+"\n事件："+event.type);
}
});</p>
</div>
<div id="test">
</div>
</body>
</html>
<script type="text/javascript">
$('#star').raty({
starOff: 'Resource/img/star-off-big.png',
starOn: 'Resource/img/star-on-big.png',
width:200
});
$('#valueStar').raty({
starOff: 'Resource/img/star-off-big.png',
starOn: 'Resource/img/star-on-big.png',
width:200,
score:3
});
$('#dynamicValueStar').raty({
starOff: 'Resource/img/star-off-big.png',
starOn: 'Resource/img/star-on-big.png',
width:200,
score:function(){
return $(this).attr('data-score');
}
});
$('#changeStarNo').raty({
starOff: 'Resource/img/star-off-big.png',
starOn: 'Resource/img/star-on-big.png',
width:300,
score:function(){
return $(this).attr('data-score');
},
number:9
});
$('#starReadyOnly').raty({
starOff: 'Resource/img/star-off-big.png',
starOn: 'Resource/img/star-on-big.png',
width:300,
readOnly:true,
score:3
});
$('#halfStar').raty({
starOff: 'Resource/img/star-off-big.png',
starOn: 'Resource/img/star-on-big.png',
starHalf:'Resource/img/star-half-big.png',
width:300,
readOnly:true,
score:3.66
});
$('#starClick').raty({
starOff: 'Resource/img/star-off-big.png',
starOn: 'Resource/img/star-on-big.png',
starHalf:'Resource/img/star-half-big.png',
width:300,
score:3.66,
click:function(score, event){
alert("id："+$(this).attr("id")+"\n值："+score+"\n事件："+event.type);
}
});
</script>效果圖如下所示：
