在jQuery mobile中创建侧​​边栏

Question

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

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

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

Answer 1

查看beta拆分视图语法,您可以像这样控制"补充工具栏":

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