在jQuery mobile中创建侧​​边栏 [英] Creating a sidebar in jQuery mobile

问题描述

通常，当您使用jQuery mobile创建data-role ="page"元素时，它将占据整个查看区域.因此，我不了解如何创建侧边栏.我想模拟以下内容，但是查看源代码并没有太大帮助:

Normally, when you create a data-role="page" element with jQuery mobile, it takes over the entire viewing area. For this reason, I don't understand how to create a sidebar. I'd like to emulate the following, but view source doesn't help much:

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

请注意，当您单击列表中的项目时，该项目变为侧边栏并在主内容区域中显示另一个列表.此外，如果显示缩小，则仅显示主要内容区域. jQuery mobile中是否有一个特殊的功能可以实现此目的，或者它背后有大量不透明的javascript和CSS?

Notice that when you click an item in the list, it turns into a sidebar and shows another list in the main content area. Additionally, if the display is shrunk enough it only displays the main content area. Is there a special feature in jQuery mobile that allows this, or is there a large amount of opaque javascript and CSS behind it?

推荐答案

查看beta拆分视图语法，您可以像这样控制边栏":

Looking over the beta Split View syntax you can control the "Sidebar" like this:

<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/(右键单击以查看源代码)

Docs: http://jquerymobile.com/demos/1.0b1/ (right click to view source)

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

关于媒体查询(他们曾经使用过的媒体查询)的一篇体面的ALA文章: http://www .alistapart.com/articles/sensitive-web-design/

A decent ALA article talking about media queries (what they used to do this): http://www.alistapart.com/articles/responsive-web-design/

这篇关于在jQuery mobile中创建侧​​边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！