What is the best way of implementing something like this on a mobile device?
Which is an example of a multiselect dropdown box with a hierachy implemented in JQuery UI: http://jsfiddle.net/3jr2v/2/embedded/result/
I am using JQuery Mobile.
My requirements are:
- Around 5-30 checkboxes, depending on scenario
- Hierarchy that may be multiple levels deep (5?), and then the ability to deselect all children by clicking on the parent
- Doesn't make sense to use a 'autofill' 'autocomplete' control anywhere, as the user will not have any prior knowledge of what the options are
- If the checkboxes aren't nested in an accordion style, then it might end up being a really really long list of checkboxes
- If it is split into lists of checkboxes on different pages, how can I easily see a global view of everything that is selected? Is this too much effort?
I don't mind what the solution is, it doesn't have to be a single dropdown, it could be separate lists, pages... obviously screen real estate is at a premium. Anyone attempted something like this on a mobile device, or knows of any good examples?