StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It should be possible to implement it using the following available building blocks:</p> <ul> <li>Horizontal alphabetic separators in the list: can be implemented as category headers using the "header" parameter of ListItem (<a href="http://dojotoolkit.org/reference-guide/dojox/mobile/ListItem.html#parameters-from-this-widget" rel="nofollow">doc</a>).</li> <li>SearchBox (1.8+, <a href="http://dojotoolkit.org/reference-guide/dojox/mobile/SearchBox.html" rel="nofollow">doc</a>): a widget for entering the search criteria (as the one on the top of your screenshot).</li> <li>FilteredListMixin (1.9+; <a href="http://livedocs.dojotoolkit.org/dojox/mobile/FilteredListMixin" rel="nofollow">doc</a>, <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_FilteredList-EdgeToEdgeStoreList-auto-prog.html" rel="nofollow">live sample</a>): combines and connects list widgets with SearchBox</li> <li>LongListMixin (1.9+, <a href="http://livedocs.dojotoolkit.org/dojox/mobile/LongListMixin" rel="nofollow">doc</a>, <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_LongListMixin.html" rel="nofollow">live sample</a>): highly improves the scrolling performance for long lists.</li> <li>The list widget can optionally be backed by a dojo/store (<a href="http://dojotoolkit.org/reference-guide/dojo/store.html" rel="nofollow">doc</a>) using EdgeToEdgeStoreList (<a href="http://dojotoolkit.org/reference-guide/dojox/mobile/EdgeToEdgeStoreList.html" rel="nofollow">doc</a>, <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_EdgeToEdgeStoreList.html" rel="nofollow">live sample</a>).</li> <li>The vertical alphabetic index (on the right-side of your screenshot): you would need to implement it, say as a container overlaying the list and with transparent fill color (on phones), or on its right side (on tablets), and using for instance ToolBarButton (<a href="http://dojotoolkit.org/reference-guide/dojox/mobile/ToolBarButton.html" rel="nofollow">doc</a>) for each letter. The action of the button-letter would rely on scrollable.scrollIntoView(listItem) (<a href="http://dojotoolkit.org/reference-guide/dojox/mobile/scrollable.html" rel="nofollow">doc</a>) for implementing the automatic scroll when the user touches a given letter.</li> </ul> <p>Hope this helps, Adrian</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload