2

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

我想要这样的渲染：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);
}

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

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

编辑 ：

完整代码：

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

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

4

2 回答 2

0

这是我制作的小提琴：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);
});

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

.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 是绝对位置启用滚动。

于 2013-10-09T16:36:00.263 回答
0

我认为你不需要float这个，但你应该absolutely position把它放在左边。然后你需要让页面的其余部分填充它。没有更多代码或链接，我无法举个例子，但你应该能够理解我的想法。

于 2013-10-08T12:01:13.350 回答