Creating a sidebar in jQuery mobile

Normally, when you create a data-role="page" element with jQuery mobile, i开发者_如何学运维t takes over the entire viewing area. For this reason, I don't understand how to create a sidebar. I'd like to emulate the following, but view source doesn't help much:

http://jquerymobile.com/demos/1.0b1/docs/lists/index.html

Notice that when you click an item in the list, it turns into a sidebar and shows another list in the main content area. Additionally, if the display is shrunk enough it only displays the main content area. Is there a special feature in jQuery mobile that allows this, or is there a large amount of opaque javascript and CSS behind it?

---

Looking over the beta Split View syntax you can control the "Sidebar" like this:

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content"> 
        <div class="content-secondary"> 
            This would be the sidebar/split view on a tablet, 
            would show up stacked on a mobile device
        </div><!-- end content-secondary -->    

        <div class="content-primary"> 
            This is the main content. 

            If Tablet device this would be to the right of the above content, 
            if mobile this would be below the above content.

        </div><!-- end content-primary -->
    </div><!-- end content -->
</div><!-- end page -->

Docs: http://jquerymobile.com/demos/1.0b1/ (right click to view source)

Pertinent CSS: http://jquerymobile.com/demos/1.0b1/docs/_assets/css/jqm-docs.css

A decent ALA article talking about media queries (what they used to do this): http://www.alistapart.com/articles/responsive-web-design/

---

You need to add this code to a javascript file:

function setPositions(){
    var winwidth = $( window ).width()

    if( winwidth >= 750 ){
        $('.content-secondary').css({'float':'left','width':'35%'});
        $('.content-primary').css({'margin-left':'36%'});
    }
    else{
        $('.content-secondary').css({'float':'none','width':'100%'});
        $('.content-primary').css({'margin-left':'0px'});
    }
}


$(function(){
    setDefaultTransition();
    $( window ).bind( "throttledresize", setPositions );
});