Tworzenie paska bocznego w jQuery mobile

Question

Normalnie, gdy tworzysz element data-role = "page" z jQuery mobile, przejmuje on cały obszar wyświetlania. Z tego powodu nie rozumiem, jak utworzyć pasek boczny. Chciałbym naśladować następujące, ale źródłowy nie pomaga:

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

Zauważ, że po kliknięciu elementu na liście, to zamienia się w pasku bocznym i pokazuje inną listę w głównym obszar zawartości. Dodatkowo, jeśli wyświetlacz jest wystarczająco skrócony, wyświetla tylko główny obszar zawartości. Czy istnieje specjalna funkcja w jQuery mobile, która pozwala na to, czy jest za tym dużo nieprzejrzystych javascriptów i CSS?

Answer 1

Patrząc na beta Podziel widok składni można kontrolować "Sidebar" tak:

<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/ (prawy przycisk myszy, aby wyświetlić źródło)

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

Przyzwoity artykuł ALA mówiący o zapytaniach o media (co robili): http://www.alistapart.com/articles/responsive-web-design/

Answer 2

Musisz dodać ten kod do pliku 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); 
});