star rating script นี้เป็นการใช้ MooTools ซึ่งเป็น Javascript Framework
อีกตัวหนึ่งที่น่าสนใจ สวยงาม ใช้ง่าย และมีลูกเล่นอีกมาก แต่ในบทความนี้จะกล่าวถึง
STAR RATING เป็น script ที่น่านำมาประดับเว็บไซต์อีก script
ก่อนอื่นต้อง Download MooTools Framework มาไว้ก่อน โดยดาวน์โหลดได้ที่ MooTools.net
และดาวน์โหลตัวเสริม ได้ที่ MooStarRating
มาดูตัวอย่างการนำ code นี้ไปใช้กันเลยดีกว่า ก่อนอื่นต้องเรียกไฟล์ .js 2
ไฟล์ด้วยกัน ใส่ไว้ในส่วนของ tag <HEAD>
<script type="text/javascript" src="../mootools-1.3.js"></script>
<script type="text/javascript" src="Source/moostarrating.js"></script>
**** ตรวจสอบที่อยู่ไฟล์ให้ถูกต้อง ****
ตมด้วยการกำหนดค่าต่างๆ ใส่ไว้ในส่วนของ tag <HEAD> เช่นกัน
<script>
// Configure the image paths
var MooStarRatingImages = {
defaultImageFolder: 'Graphics/',
defaultImageEmpty: 'star_empty.png',
defaultImageFull: 'star_full.png',
defaultImageHover: "star_boxed_hover.png"
};
// Post iD
var postId = 10;
// When the DOM is ready....
window.addEvent("domready",function() {
// Create our instance
// Advanced options
var advancedRating = new MooStarRating({
form: 'ratingsForm',
radios: 'rating',
half: true,
//imageEmpty: 'star_boxed_empty.png',
//imageFull: 'star_boxed_full.png',
//imageHover: "star_boxed_hover.png",
width: 17,
tip: 'Rate <I>[VALUE] / 10.0</I>',
tipTarget: $('htmlTip'),
tipTargetType: 'html',
click: function(value) {
// Send ajax request to server
new Request.send({
url: "rating.php",
data: { rating: value, postId: postId }
});
}
});
});
</script>
หลังจากนั้นมาสร้าง Form จะใช้โค้ด php หรือ html ก็ได้แล้วแต่ความถนัด
<form name="ratingsForm">
<label>Do you like this article?</label>
<input type="radio" name="rating" value="0.5">
<input type="radio" name="rating" value="1.0">
<input type="radio" name="rating" value="1.5">
<input type="radio" name="rating" value="2.0">
<input type="radio" name="rating" value="2.5">
<input type="radio" name="rating" value="3.0">
<input type="radio" name="rating" value="3.5">
<input type="radio" name="rating" value="4.0">
<input type="radio" name="rating" value="4.5">
<input type="radio" name="rating" value="5.0">
<input type="radio" name="rating" value="5.5" checked="checked">
<input type="radio" name="rating" value="6.0">
<input type="radio" name="rating" value="6.5">
<input type="radio" name="rating" value="7.0">
<input type="radio" name="rating" value="7.5">
<input type="radio" name="rating" value="8.0">
<input type="radio" name="rating" value="8.5">
<input type="radio" name="rating" value="9.0">
<input type="radio" name="rating" value="9.5">
<input type="radio" name="rating" value="10.0">
<span id="htmlTip"></span>
</form>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น