Создание боковой панели в мобильном устройстве jQuery

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

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

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

Ответ 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/

Ответ 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 );
});