Question

我在jQuery-mobile应用程序上创建侧边栏工具箱时遇到了困难。

我想要一个这样的渲染：http://www.paultrifa.com/envato/themeforest/side/red/preview/带有固定的左侧导航栏。我在文档中看到页眉和页脚具有本机“固定”功能，但无法找到符合我需要的东西。

我已经使用网格系统（PIXEL中的固定大小 - 用于工具箱）和另一部分（页面内容）进行了测试，但是响应速度非常快！

我如何构建我的代码？最好的方法是将侧边栏HTML代码放在页面容器之外，但我有一些问题。

我尝试了一个基本的CSS：

.sidebar{
    display:inline-block;
    width:47px;
    float:left;
    height:100%;
    position:fixed;
    background-image:url(images/sidebar-bg.png);
}

它可以工作，但页面的内容会被裁剪。我必须重新调整“page”容器的宽度，但我的面板大小以像素为单位，所以我有另一个问题......

如果有人有一些提示，那就太棒了！

编辑：

完整代码：

<div data-role="page" data-theme="a">

    <!-- header -->
    <div data-role="header">

    </div> <!-- /header -->

    <!-- content -->
    <div data-role="content">

        <div class="ui-grid-b my-breakpoint">
            <div class="ui-block-a">
                <div class="sidebar">   
                    <!-- SIDEBAR CONTENT -->
                </div>
            </div>
            <div class="ui-block-b">
                {% block body %}
                {% endblock %}
            </div>
        </div>

    </div> <!-- /content -->

    <!-- footer -->
    <div data-role="footer">

    </div><!-- /footer -->

</div><!-- /page -->

我的问题是工具栏位于页眉和页脚之间......

Answer 1

我认为你不需要float这个，但你应该absolutely position向左。然后你需要让你的页面的其余部分填充它。没有更多的代码或链接，我不能举一个例子，但你应该能够抓住我的漂移。

Answer 2

这是我制作的小提琴：http://jsfiddle.net/ezanker/xTFRr/。这样做你想要的吗？

在pagebeforeshow上，我将内容div调整为屏幕高度：

$('#page1').on("pagebeforeshow", function(e){
    var viewport_height = $(window).height();
    var content = $('#contentDiv');
    var content_height = viewport_height - 5;
    content_height -= (content.outerHeight() - content.height());
    content.height(content_height);
});

在页面内容中，我有一个侧栏div和mainCont div，带有以下CSS：

.sidebar{
display:inline-block;
    position:absolute;
    top: 0; left: 0; bottom: 0;
width:47px;
background-color:#C34848;   
}
.mainCont{
    display:inline-block;
    position:absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin-left: 47px;
    overflow: auto;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}

绝对定位用于将侧边栏放在左侧，然后mainCont div绝对位置且启用了滚动。

JQuery-mobile，左侧边栏/工具箱

2 个答案: