openlayers/master/examples/list.html

<div class="view mblView">
    <ul dojoType="dojox.mobile.TabBar" barType="segmentedControl">
        <li dojoType="dojox.mobile.TabBarButton" moveTo="roundRectList" selected="true" transition="slide">RoundRectList</li>
        <li dojoType="dojox.mobile.TabBarButton" moveTo="edgeToEdgeList" transition="slide">EdgeToEdgeList</li>
    </ul>
    <div dojoType="dojox.mobile.View" selected="true">
		<div dojoType="dojox.mobile.ScrollableView" selected="true">
            <h2 dojoType="dojox.mobile.RoundRectCategory">File Genres</h2>
			<div dojoType="dojox.mobile.RoundRect" style="width:280px;">
			    <div dojoType="dojox.mobile.RoundRectList">
			        <li dojoType="dojox.mobile.ListItem"
			            moveTo="slide1" transition="slide">Action</li>
			        <li dojoType="dojox.mobile.ListItem"
			            moveTo="flip1" transition="slide">Comedy</li>
                    <li dojoType="dojox.mobile.ListItem"
                        moveTo="fade1" transition="slide">Sci-Fi</li>
			    </div>
			</div>
		</div>
		<div dojoType="dojox.mobile.ScrollableView" >
                <h2 dojoType="dojox.mobile.EdgeToEdgeCategory">Classical</h2>
			    <div dojoType="dojox.mobile.EdgeToEdgeList">
			        <li dojoType="dojox.mobile.ListItem"
                        moveTo="baroque">Baroque</li>
			        <li dojoType="dojox.mobile.ListItem"
                        moveTo="romantic">Romantic</li>
			        <li dojoType="dojox.mobile.ListItem"
                        moveTo="modern">Modern</li>
			    </div>
                <h2 dojoType="dojox.mobile.EdgeToEdgeCategory">Rock</h2>
                <div dojoType="dojox.mobile.EdgeToEdgeList">
                    <li dojoType="dojox.mobile.ListItem"
                        moveTo="alternative">Alternative</li>
                    <li dojoType="dojox.mobile.ListItem"
                        moveTo="metal">Metal</li>
                    <li dojoType="dojox.mobile.ListItem"
                        moveTo="progressive">Progressive</li>
                    <li dojoType="dojox.mobile.ListItem"
                        moveTo="randb">R&B</li>
                </div>
		</div>
		<div dojoType="dojox.mobile.ScrollableView">
	        <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="roundRectList">Action Movies</h1>
	        <div dojoType="dojox.mobile.RoundRect" style="width:280px;">
                <div dojoType="dojox.mobile.RoundRectList">
                    <li dojoType="dojox.mobile.ListItem">Braveheart</li>
                    <li dojoType="dojox.mobile.ListItem">Hellboy</li>
                    <li dojoType="dojox.mobile.ListItem">Iron Man</li>
                    <li dojoType="dojox.mobile.ListItem">Kill Bill</li>
                    <li dojoType="dojox.mobile.ListItem">Rambo</li>
                    <li dojoType="dojox.mobile.ListItem">Spider Man</li>
                    <li dojoType="dojox.mobile.ListItem">Terminator</li>
                    <li dojoType="dojox.mobile.ListItem">The Dark Knight</li>
                    <li dojoType="dojox.mobile.ListItem">Transformers</li>
                    <li dojoType="dojox.mobile.ListItem">True Lies</li>
                </div>
            </div>
	    </div>
	    <div dojoType="dojox.mobile.ScrollableView">
	        <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="roundRectList">Comedy Movies</h1>
	        <div dojoType="dojox.mobile.RoundRect" style="width:280px;">
                <div dojoType="dojox.mobile.RoundRectList">
                    <li dojoType="dojox.mobile.ListItem">Ace Ventura</li>
                    <li dojoType="dojox.mobile.ListItem">Pineapple Express</li>
                    <li dojoType="dojox.mobile.ListItem">Shrek</li>
                    <li dojoType="dojox.mobile.ListItem">Superbad</li>
                    <li dojoType="dojox.mobile.ListItem">The Simpsons Movie</li>
                </div>
            </div>
	    </div>
	    <div dojoType="dojox.mobile.ScrollableView">
	        <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="roundRectList">Sci-Fi Movies</h1>
	        <div dojoType="dojox.mobile.RoundRect" style="width:280px;">
                <div dojoType="dojox.mobile.RoundRectList">
                    <li dojoType="dojox.mobile.ListItem">Alien</li>
                    <li dojoType="dojox.mobile.ListItem">Avatar</li>
                    <li dojoType="dojox.mobile.ListItem">Back to the Future</li>
                    <li dojoType="dojox.mobile.ListItem">Blade Runner</li>
                    <li dojoType="dojox.mobile.ListItem">District 9</li>
                    <li dojoType="dojox.mobile.ListItem">Inception</li>
                    <li dojoType="dojox.mobile.ListItem">Star Wars</li>
                    <li dojoType="dojox.mobile.ListItem">The Matrix</li>
                </div>
            </div>
	    </div>
        <div dojoType="dojox.mobile.ScrollableView">
            <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="edgeToEdgeList">Baroque</h1>
            <div dojoType="dojox.mobile.EdgeToEdgeList">
                <li dojoType="dojox.mobile.ListItem">Antonio Vivaldi</li>
                <li dojoType="dojox.mobile.ListItem">Henry Purcell</li>
                <li dojoType="dojox.mobile.ListItem">Johann Sebastian Bach</li>
            </div>
        </div>
        <div dojoType="dojox.mobile.ScrollableView">
            <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="edgeToEdgeList">Romantic</h1>
            <div dojoType="dojox.mobile.EdgeToEdgeList">
                <li dojoType="dojox.mobile.ListItem">Ludwig van Beethoven</li>
                <li dojoType="dojox.mobile.ListItem">Hector Berlioz</li>
                <li dojoType="dojox.mobile.ListItem">Modest Petrovich</li>
                <li dojoType="dojox.mobile.ListItem">Mussorgsky</li>
            </div>
        </div>
        <div dojoType="dojox.mobile.ScrollableView">
            <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="edgeToEdgeList">Modern</h1>
            <div dojoType="dojox.mobile.EdgeToEdgeList">
                <li dojoType="dojox.mobile.ListItem">Aaron Copeland</li>
                <li dojoType="dojox.mobile.ListItem">Igor Stravinksy</li>
                <li dojoType="dojox.mobile.ListItem">Philip Glass</li>
            </div>
        </div>
        <div dojoType="dojox.mobile.ScrollableView">
            <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="edgeToEdgeList">Alternative</h1>
            <div dojoType="dojox.mobile.EdgeToEdgeList">
                <li dojoType="dojox.mobile.ListItem">Nirvana</li>
                <li dojoType="dojox.mobile.ListItem">R.E.M.</li>
                <li dojoType="dojox.mobile.ListItem">The White Stripes</li>
            </div>
        </div>
        <div dojoType="dojox.mobile.ScrollableView">
            <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="edgeToEdgeList">Metal</h1>
            <div dojoType="dojox.mobile.EdgeToEdgeList">
                <li dojoType="dojox.mobile.ListItem">Led Zeppelin</li>
                <li dojoType="dojox.mobile.ListItem">Metalica</li>
            </div>
        </div>
        <div dojoType="dojox.mobile.ScrollableView">
            <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="edgeToEdgeList">Progressive</h1>
            <div dojoType="dojox.mobile.EdgeToEdgeList">
                <li dojoType="dojox.mobile.ListItem">King Crimson</li>
                <li dojoType="dojox.mobile.ListItem">Pink Floyd</li>
                <li dojoType="dojox.mobile.ListItem">Yes</li>
            </div>
        </div>
        <div dojoType="dojox.mobile.ScrollableView">
            <h1 dojoType="dojox.mobile.Heading"  back="Back" moveTo="edgeToEdgeList">R&B</h1>
            <div dojoType="dojox.mobile.EdgeToEdgeList">
                <li dojoType="dojox.mobile.ListItem">Chuck Berry</li>
                <li dojoType="dojox.mobile.ListItem">Elvis Presley</li>
                <li dojoType="dojox.mobile.ListItem">Sam  Cooke</li>
            </div>
        </div>
    </div>
</div>