Création d'une barre latérale dans jQuery mobile

Question

Normalement, lorsque vous créez un élément data-role = "page" avec jQuery mobile, il prend en charge toute la zone de visualisation. Pour cette raison, je ne comprends pas comment créer une barre latérale. Je voudrais imiter ce qui suit, mais la source de vue ne nous aide pas beaucoup:

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

Notez que lorsque vous cliquez sur un élément dans la liste, il se transforme en une barre latérale et montre une autre liste dans la principale zone de contenu. De plus, si l'affichage est suffisamment réduit, il affiche uniquement la zone de contenu principale. Existe-t-il une fonctionnalité spéciale dans jQuery mobile qui permet cela, ou y a-t-il une grande quantité de javascript opaque et de CSS derrière?

Answer 1

Recherche sur la beta de Split Voir syntaxe vous pouvez contrôler la "Sidebar" comme ceci:

<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/ (clic droit pour afficher la source)

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

Un article de l'ALA décent sur les requêtes des médias (ce qu'ils faisaient pour cela): http://www.alistapart.com/articles/responsive-web-design/

Answer 2

Vous devez ajouter ce code à un fichier 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); 
});