title: Creating a sidebar in jQuery mobile
body: <p>Normally, when you create a data-role="page" element with jQuery mobile, it 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:</p>
  
  <p><a href="http://jquerymobile.com/demos/1.0b1/docs/lists/index.html" rel="noreferrer">http://jquerymobile.com/demos/1.0b1/docs/lists/index.html</a></p>
  
  <p>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?</p>