mootools_带有MooStarRating的MooTools星级

mootools

I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the past five years.  Star rating systems are attractive, allow us to avoid ugly forms, and prevent unnecessary page reloads.  A new plugin by Lorenzo Stanco called MooStarRating has hit the MooTools Forge and I wanted to share with you how to use it.

我已经说了一遍又一遍，但我会再说一遍：JavaScript在Web应用程序中的主要作用是增强浏览器所提供的无聊的静态功能。 一个完美的例子就是过去5年中受Java / AJAX支持的星级评分系统。 星级评分系统很有吸引力，它使我们能够避免使用丑陋的形式，并防止不必要的页面重新加载。 Lorenzo Stanco的一个名为MooStarRating的新插件已投放到MooTools Forge，我想与您分享如何使用它。

View Demo 观看演示

HTML (The HTML)

The star rating system uses an HTML form with radio buttons as the base:

星级评分系统使用带有单选按钮HTML表单作为基础：

<form name="ratingsForm">
    <label>Do you like this post?</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">
    <input type="radio" name="rating" value="6.0">
    <input type="radio" name="rating" value="6.5">
    <input type="radio" name="rating" value="7.0" checked="checked">
    <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>

Note the ID of the form and the name of the radio buttons -- we'll use those when creating our MooStarRating instance.  Also note that I'm creating "half" rating options, as well as using checked to note what the current average rating is.

注意表单的ID和单选按钮的名称-创建MooStarRating实例时将使用它们。 还请注意，我正在创建“半”评分选项，并使用选中来记下当前的平均评分。

CSS (The CSS)

This plugin requires no additional CSS.  That's a bonus as it's one less server request.

该插件不需要其他CSS。 这是一个好处，因为服务器请求少了一个。

MooTools JavaScript (The MooTools JavaScript)

The first step in using MooStarRating is defining the image paths for the stars:

使用MooStarRating的第一步是定义星星的图像路径：

// Configure the image paths
var MooStarRatingImages = {
	defaultImageFolder: "/js/mooStarRating/images",
	defaultImageEmpty:  "empty.png",
	defaultImageFull:   "full.png",
	defaultImageHover:  "hover.png"
};

Once the path and image names are defined, it's time to create an instance of MooStarRating:

定义路径和图像名称后，就该创建MooStarRating实例了：

// A fake post ID for the sake of submission
var postId = 10;

// When the DOM is ready....
window.addEvent("domready",function() {	
	// Create our instance
	var starRater = new MooStarRating({
		form: "ratingsForm",
		radios: "rating",
		half: true,
		//imageEmpty: "star_boxed_empty.png", // For setting special images
		//imageFull:  "star_boxed_full.png",
		//imageHover: "star_boxed_hover.png", 
		width: 17, 
		tip: "Rate as <i>[VALUE] / 10.0</i>", 
		tipTarget: document.byId("htmlTip"),
		tipTargetType: "html"
	});
	
	// Listen for star clicks
	starRater.addEvent("click",function(value) {
		// Send ajax request to server
		new Request.send({
			url: "rating.php",
			data: { rating: value, postId: postId }
		});
	});
});

MooStarRating is loaded with options.  Here we pass the form ID and the name we provided to the radio buttons.  As I'm allowing half-stars, the half option is set to true.  MooStarRating also provides a "tip" functionality which allows a message to be displayed along side the star rating. Lastly, the click event provides the user's rating for which you may send an AJAX request to the server to save the rating. Simple!

MooStarRating加载了选项。 在这里，我们将表单ID和我们提供的名称传递给单选按钮。 由于我允许半星，因此half选项设置为true。 MooStarRating还提供了“提示”功能，该功能允许在星级旁边显示一条消息。 最后， click事件提供用户的评级，您可以为其发送AJAX请求到服务器以保存评级。 简单！

View Demo 观看演示

That's it!  I love this plugin because it's simple and effective.  Big props go to Lorenzo Stanco for his excellent piece of work.  If there's enough interest, I'll create a tutorial that includes enough PHP and MySQL to get this rating system working with real data.

而已！ 我喜欢这个插件，因为它既简单又有效。 大型道具归洛伦佐·斯坦科(Lorenzo Stanco)出色完成。 如果有足够的兴趣，我将创建一个包含足够PHP和MySQL的教程，以使该评级系统能够处理真实数据。

翻译自: https://davidwalsh.name/mootools-star-rating

mootools