在jQuery mobile中创建侧​​边栏

Question

通常，当您使用jQuery mobile创建data-role =“page”元素时，它会占用整个查看区域。出于这个原因，我不明白如何创建侧边栏。我想模仿以下内容，但是查看源代码没有多大帮助：

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

请注意，当您单击列表中的某个项目时，它会变为侧边栏并在主要内容区域中显示另一个列表。此外，如果显示器足够收缩，它只显示主要内容区域。 jQuery mobile中是否有一个特殊功能允许这个，或者它背后是否有大量不透明的javascript和CSS？

Answer 1

查看测试版拆分视图语法，您可以像这样控制“补充工具栏”：

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