Question

i really like the sliding nested list pattern in secha touch 2 :

http://senchalearn.github.com/Nested-list-demo/

i’ve seen this as an ios pattern as well, and i was wondering if there were any pure javascript or jquery modules that would allow me to use this outside the sencha touch framework?

or if not, any vague, handwavy ideas about how one might implement this using html5, css3 and javascript (and perhaps jquery if necessary)?

i’ve seen the jquery mobile nested list which doesn’t have the sliding effect – not so cool as the sencha touch version 🙂

thanks in advance!

Answer 1

Check out jQuery mobile transition effects in the Docs. they can be applied to to nested list links to create whatever effect you want

http://jsfiddle.net/k5ZG8/

<div data-role="page" id="main">
<div data-role="header">main</div>
<div data-role="content">
    <ul data-role="listview">
        <li><a href="#other" data-transition="slide">other</a></li>
    </ul>
</div>
</div>
<div data-role="page" id="other">
<div data-role="header">other</div>
<div data-role="content">
    <ul data-role="listview">
        <li><a href="#main" data-transition="slide">main</a></li>
    </ul>
</div>
</div>