jQuery Mobile:是否可以使静态导航不会因页面转换而消失？

Question

使用jQuery Mobile,有没有一种方法可以让导航栏在左边占用200px(或百分比),与.ui-content div分开？这意味着当内容通过滑动(转换)改变时,导航将在左侧保持静态.

我该如何设置呢？我找不到任何关于编辑内容视图或如何规避某些内容的页面转换的文档!

我的示例代码的问题是href链接不会链接到任何地方.他们根本行不通.当我把它们放在data-role ="page"中时,它就可以了.

       <div id="nav">
            <ul>
                <li><a href="#one">One</a></li>
                <li><a href="#two">Two</a></li>
                <li><a href="#three">Three</a></li>
            </ul>
        </div>

        <div data-role="page" id="one" data-transition="slide">
            <div data-role="content" style="background-color:#ff0;">    
                <h1>One</h1>
            </div>
        </div><!-- /page one -->

Answer 1

您可以更改data-role="page"元素的CSS以为导航栏腾出空间:

.ui-mobile [data-role="page"] {
    left : 200px !important;
    width : auto !important;
    right : 0;
}
#leftNav {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 200px;
    height   : 100%;
    z-index  : 100;
}?

#leftNav 是导航栏元素:

<div class="ui-body-a" id="leftNav">
    <a data-direction="reverse" href="#zero">Zero</a>
    <a href="#one">One</a>
</div>

这是一个演示:http://jsfiddle.net/j8nkn/2/

这不是完美的,但这应该让你开始.