Создание боковой панели в jQuery mobile

Question

Обычно, когда вы создаете элемент data-role="page" с помощью jQuery mobile, он занимает всю область просмотра. По этой причине я не понимаю, как создать боковую панель. Я хотел бы подражать следующему, но просмотр источника мало помогает:

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

Обратите внимание, что при щелчке элемента в списке он превращается в боковую панель и показывает другой список в основной области содержимого. Кроме того, если дисплей достаточно сжат, он отображает только основную область содержимого. Есть ли в jQuery mobile специальная функция, позволяющая это сделать, или за ней скрывается большое количество непрозрачного javascript и CSS?

Answer 1

Просматривая синтаксис бета-версии Split View, вы можете управлять "боковой панелью" следующим образом:

<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 -->

Документы: http://jquerymobile.com/demos/1.0b1/ (щелкните правой кнопкой мыши, чтобы просмотреть исходный код)

Соответствующий CSS: http://jquerymobile.com/demos/1.0b1/docs/_assets/css/jqm-docs.css

Достойная статья ALA, рассказывающая о медиазапросах (что они использовали для этого): http://www.alistapart.com/articles/responsive-web-design/

Answer 2

Вам нужно добавить этот код в файл 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 );
});