Creación de una barra lateral en jQuery mobile

Question

Normalmente, al crear un elemento de datos = "página" elemento con jQuery móvil, se ocupa de toda el área de visualización. Por esta razón, no entiendo cómo crear una barra lateral. Me gustaría emular lo siguiente, pero ver fuente no ayuda mucho:

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

en cuenta que al hacer clic en un elemento de la lista, se convierte en una barra lateral y se muestra otra lista en el principal área de contenido. Además, si la pantalla se reduce lo suficiente, solo muestra el área de contenido principal. ¿Hay alguna característica especial en jQuery mobile que lo permita, o hay una gran cantidad de javascript y CSS opacos detrás?

Answer 1

Mirando por encima de la versión beta Dividir vista sintaxis se puede controlar la "barra lateral" de esta manera:

<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/ (derecha haga clic para ver fuente)

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

Un artículo decente de ALA que habla de consultas de medios (lo que solían hacer esto): http://www.alistapart.com/articles/responsive-web-design/

Answer 2

Necesita agregar este código a un archivo javascript:

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); 
});