在jQuery mobile中创建侧栏

通常，使用jQuery mobile创建data role=“page”元素时，它会接管整个查看区域。由于这个原因，我不知道如何创建侧边栏。我想模仿以下内容，但view source没有多大帮助：

---

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

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

这将是平板电脑上的侧边栏/分割视图，
将堆叠显示在移动设备上
这是主要内容。
如果平板电脑设备位于上述内容的右侧，
如果是移动的，这将低于上述内容。

单据：（右击查看来源）

相关CSS：

---

一篇关于媒体查询的文章（他们过去是如何做的）：

您需要将以下代码添加到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 );
});

---

是的，我也看到了，但我不认为边栏是在那里制作的。我相信这就是将你刚才给出的链接中显示的两个单独列表分开的代码。这就是为什么我不认为“查看源代码”在这种情况下很有帮助…它只显示演示的根。这实际上就是侧边栏是如何完成的-看一看-这是演示的额外css-如果有足够的屏幕空间，他们只是使用媒体查询将内容推到左边的第二位。我的观点是正确的，但我仍然感到困惑。当我尝试模拟上面的代码时，单击侧栏中的任何链接都会导致整个视图被我链接到的新数据role=“page”元素替换。所需的行为（演示中有）是更改主内容区域，而侧边栏保持不变。链接是如何工作的？仔细看，他们似乎在使用不同的转换进行轻微的欺骗-侧边栏只是根据需要复制到每个页面上。-看起来它们覆盖了转换，要么在非常宽的屏幕上变为无，要么在稍小的屏幕上变为淡入淡出。用JavaScript做CSS应该做的事情通常不是一个好主意。你应该用CSS媒体查询来做，请阅读：我更喜欢用js而不是媒体查询。。。css不应该被用来处理逻辑（这就是媒体查询的有效功能）。。。这是一种脚本语言的工作，比如js。。。css的工作是保存数据（基本上是一个布局相关值的“数据库”，在解析过程中被“查询”）