JavaScript 中的简单投票控件

• 下载源代码 - 3.37 KB

引言

使用 JavaScript 和 DOM，我们可以创建功能强大且易于使用的控件。许多 Web 2.0 网站都有某种形式的投票工具。本文介绍如何创建和使用一个简化的投票控件。

使用代码

代码很简单。您将脚本添加到页面中并创建一个新对象。您需要一个容器来放置您的对象。我建议使用一个空的 DIV。在 DIV 中添加其他内容会导致失败。您需要提供要显示的图像的最大数量，以及默认选中的数量。您还需要为这些选项提供标签。

<script type="text/javascript" src="jVote.js"></script>
<script type="text/javascript">
var v;
window.onload = function()
{
    v = new jVote('voteDiv', {max:5,min:3,click:doStuff, 
            labels:['Bad','Poor','Average','Good','Great']});
};

构造函数

您可以通过调用其构造函数来创建一个新的投票对象

voteObject = new jVote(parentDiv, parameters);

parentDiv 和 parameters 都是必需的。parentDiv 是您要添加投票对象的 DIV。parameters 将包含对象设置，包括图像数量、它们的标签、单击图像时要执行的操作等。parameters 可以是以下内容：

• max：要显示的图像数量。
• min：当前“开启”的图像数量。
• label：这是一个包含图像值的数组。数组的大小应与您的 max 属性相同。
• click：一个回调函数，指定单击图像时要执行的操作。此对象将接收两个值：鼠标事件和被单击图像的标签值。

//Example
function doStuff(mouseEvent, labelValue)
{
    alert('You clicked ' + labelValue);
    //You'll probably want to put some relevant code here, like an AJAX call
    //to update your database with the voting results that the user clicked.
    //That is outside the scope of the article.
}

方法

由于这是一个非常简单、基础的实现，我们没有很多可用的方法。

• object.reset(integer)：integer 是可选的。设置当前“开启”的图像数量。当不带 integer 调用时，将使用 parameters.min 值。
• object.lock(): 锁定投票对象，使其无法切换。parameters.click 函数将不再触发，图像也不会再改变。
• object.unLock()：解锁投票对象。

技术

这个技术确实非常简单。首先，我们必须创建我们的构造函数

function jVote(parent, settings)
{
    this.locked = false;  //is locked flag
    this.images = []; //array containing our images
    this.settings = settings;  //an object containing our settings
    this.parent = parent; //our parent div
    this.init();  //our init call
}

既然有了构造函数，我们就需要向其添加方法，否则它就没有实际作用！由于我们已经调用了 init()，所以最好将其添加到对象中。我们通过 prototype 来实现这一点。

jVote.prototype.init = function()
{
    var that = this;
    for(var i = 0, e = this.settings.max; i < e; i++)
    {
        var image = document.createElement('img');
        this.images[i] = image;
        image.value = this.settings.labels[i];
        image.alt = this.settings.labels[i];
        image.style.cursor = 'pointer';
        image.onmouseover = function()
        {
            if(that.locked)
            {
                return;
            }
            that.set(this);
        };
        image.onclick = function(evnt)
        {
            if(that.locked)
            {
                return;
            }
            var eEvent = evnt || window.event;
            if(that.settings.click)
            {
                that.settings.click(eEvent, this.value);
            }
        };
        document.getElementById(this.parent).appendChild(image);
    }
    this.set(this.images[this.settings.min-1]);
};

我们所做的就是遍历 parameters.max 设置中指定的图像数量，使用 document.createElement('img') 创建一个图像，并将该图像附加到 object.parent。我们还为我们的图像设置了 onmouseover 和 onclick 事件，并将它们添加到我们的 object.images 数组中。

好的，我们的图像已添加...然后呢？对于每个图像，我们将 onmouseover 事件设置为调用 object.set(image)。让我们看看 set 方法

jVote.prototype.set = function(domImage)
{
    domImage.src = 'star.png';
    var next = domImage.nextSibling;
    while(next)
    {
        next.off = true;
        next.src = 'dark_star.png';
        next = next.nextSibling;
    }
    var prev = domImage.previousSibling;
    while(prev)
    {
        prev.off = false;
        prev.src = 'star.png';
        prev = prev.previousSibling;
    }
};

这个函数/方法是整个脚本的核心。它接受一个图像作为参数。该图像被设置为“开启”状态，并且该图像之前的所有图像都设置为“开启”，而它之后的所有图像都设置为“关闭”。我们使用 image.previousSibling 和 image.nextSibling 来获取目标图像之前和之后的图像。当我们不再有 older/younger brothers and sisters 时，previous/nextSibling 函数将评估为 null，从而跳出我们的 while 循环。

关注点

当在闭包中使用 `this` 关键字时，变量的范围会发生变化。为了避免这种情况，您应该将 `this` 关键字设置为另一个变量，以便在闭包中独占使用。

function Foo()
{
    var that = this;
    var newImage = document.createElement('img');
    newImage.click = function()
    {
        //this no longer is our Foo object, but the newImage object instead.
        //To reference our Foo object, use 'that'
    }
}

兼容性

• Firefox
• Internet Explorer 7
• Internet Explorer 6
• Opera
• Safari
• Konqueror

历史

• 2008 年 6 月 12 日星期四 -- 上传文章。