Question

I am wondering if there is a way to allow users to select multiple items from my AS2 List component without having to hold CTRL while clicking. So they would be able to select/deselect individual items with a single click – effectively togglling the item on/off in exactly the same way you would do by holding CTRL while selecting.

Can anyone think of any usability guidelines for this sort of interaction? This is kind of like presenting a list of checkboxes (but nicer I think). Are there any examples out there of simialr interaction.

Does the AS2 list component allow this to be done? eg i would like to say list._ctrlAlwaysOn = true 😉

thanks

Answer 1

Live Demo of my solution: http://codebundles.com/listDemo.swf

You could add a “check” infront of the options the user selects and remove the check if the user clicks it again, this way the user can de-select by tapping the object a second time.. I used to indexing and data on the list but here is a quick example that runs pretty smoothly! It looks really nice too!

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);
    }
}

*One bug I can see coming is if you have a scroll bar like in my live demo… clicking to move that will cause a “mouseUp” event to be called and remove/add a check on your last selected list item.. so you may want to detect if the user’s _ymouse & _xmouse position are actually inside the list before running my “✓” replace code.. Shouldn’t be to hard 😉
*also, the ctrl+clicking may not work anymore but you could still add code to fix that as well…

This same code will apply to the HTML.. but I’m sure there is better javascript stuff you can do with the html lists like highlighting the field instead of putting a check infront of it.. heck maybe even in AS2 you can highlight the field you have selected too….