Flash Actionscript 2列表组件和选择多个项目，而不必按住CTRL同时单击

Question

我想知道是否有一种方法允许用户从我的AS2列表组件中选择多个项目，而无需在单击时按住CTRL。因此，他们将能够选择/取消选择单个项目与一个单一的点击-有效地切换项目的打开/关闭，完全相同的方式，你会通过按住CTRL同时选择。

有人能想到这种交互的可用性指南吗?这有点像显示一个复选框列表(但我认为更好)。有没有类似的例子?

AS2列表组件允许这样做吗?我想说list。_ctrlAlwaysOn = true;

谢谢

Answer 1

我的解决方案的实时演示:http://codebundles.com/listDemo.swf

你可以在用户选择的选项前面添加一个"检查"，如果用户再次点击它就删除检查，这样用户就可以通过第二次点击对象来取消选择。我曾经在列表上索引和数据，但这里有一个快速的例子，运行得非常顺利!它看起来也很漂亮!

list.addItemAt(0, "​item 1", 0)
list.addItemAt(1, "item 2", 1)
list.addItemAt(2, "item 3", 2)
list.addItemAt(3, "item 4", 3)
list.addItemAt(4, "item 5", 4)
list.addItemAt(5, "item 6", 5)
_root.onMouseUp = function() {
    selectedObject = (list.getSelectedItem().data)
    tempString = (list.getSelectedItem().label)
    withcheckString =  "✓​" + (list.getSelectedItem().label)
    var stringArray:Array=tempString.split("✓​"); 
    withoutcheckString = stringArray.join(""); 
    trace(tempString.indexOf("✓​"))
    if (tempString.indexOf("✓​") == -1) {
        list.replaceItemAt(selectedObject, withcheckString, selectedObject);
    } else if (tempString.indexOf("✓​") == 0) {
        list.replaceItemAt(selectedObject, withoutcheckString, selectedObject);
    }
}

*我可以看到的一个bug是，如果你有一个滚动条像我的现场演示…点击移动，将导致"mouseUp"事件被调用，并删除/添加您最后选择的列表项的检查。所以你可能想要检测用户的_ymouse &_xmouse的位置实际上是在列表中运行我的"✓"替换代码之前。不应该太难;)
*同时，ctrl+点击可能不再工作，但你仍然可以添加代码来解决这个问题…

同样的代码将适用于HTML..但我相信有更好的javascript的东西，你可以做的html列表，如突出显示字段，而不是把一个检查在它的前面。也许在AS2中你也可以突出显示你选择的字段....

Answer 2

我个人认为你应该使用复选框，因为它们正是你想要的，没有人期望列表以这种方式工作。

无论如何，通过手动处理列表的selectedIndices属性应该可以实现。这是必要的，因为如果单击列表(不按住ctrl)，到目前为止选择的索引将丢失。自己跟踪这些索引可以防止这种情况的发生。

// stores selected indices
var selected:Array = new Array();
// handler when item is selected
var listHandler:Object = new Object();
listHandler.change = function(evt:Object) {
    // all selected elements are automatically cleared at this point
    var index = evt.target.selectedIndex; // clicked item
    for (i = 0; i < selected.length; i++) {
        if (selected[i] == index) {
            // index was already selected, remove it
            selected.splice(i, 1);
            evt.target.selectedIndices = selected; // reassign our own selection
            return;
        }
    } 
    // index wasn't selected
    selected.push(index);
    evt.target.selectedIndices = selected; // reassign our own selection
};
list.addEventListener("change", listHandler);

我无法测试它，因为我无法访问这种古老的技术(可以访问编译器，但不能访问mx组件)。所以它可能需要一点修正;如果列表没有更新，你需要手动触发change事件…然后，您可能需要添加一些东西来防止不定式更改事件递归。如果用户使用ctrl或shift进行多次选择，可能会表现得很有趣。但我不会剥夺你们解决这个问题的乐趣。除了需要创建自己的列表组件之外，这段代码是基本思想。对于HTML等效:使用jQuery。