0

我目前正在使用jQuery. 相同的布局如下图所示：

最后面的橙色框应该是 100% 的高度和宽度，并有一些 5px 左右的边距。

徽标和标签栏如图所示放置，高度约为 50 像素。但是标签栏应该采用如图所示的大小并留有一些边距。

选项卡内容应该占据剩余的高度，并且应该滚动它占据的内容。

内部菜单栏和选项卡内容需要类似的结构。

任何人都可以建议采用的布局方法吗？或者我怎样才能操纵不同的高度/宽度？

该要求还建议使用响应式窗口，即在调整大小时操作的宽度/高度。

4

2 回答 2

2

我说我会做的jsFiddle 。

正如您将看到的，我将 jQueryUI 用于“选项卡”布局并简单地“添加”一些东西。我“添加”的几件事很简单，jQueryUI alreqady 提供了一个强大的 CSS 来操作以获得所需的结果。该页面还附加了一个主题切换器，因此您可以看到使用不同的 jQueryUI 默认主题会是什么样子。

我将尝试尽快解释该过程，而不会含糊其辞。

HTML

我首先从一个基本的页面包装器开始。不是太必要，但它提供了一个很好的“元素”，可以在其中工作，并可能在将来以其他方式对页面布局进行更改。现在它只是保持我们的页面“填充”为 5px。HTML 和 BODY 标签将被设置为默认值，并且不应超过该值，因为高度和其他属性开始在不同的浏览器中对这些标签具有不同的含义。

然后我在这个包装器中放置 2 个 div，同样，这些可以在不取决于您的需要的情况下完成。我喜欢这 2 个 div 并经常使用它，因为它提供了“垂直对齐 - > 中间”，正如人们所期望的那样。第一个，parent，是一个带有 class 的 div table。这将display设置为 table 以提供“类似表格”的布局，但仍然能够执行“圆角”之类的操作，或者在我的情况下，设置高度！第二个是 child，除了它的类和样式table-cell分别为 外，其他都是相同的。这允许我们设置类似的东西vertical-align: middle;并确保该元素位于页面/表格元素的垂直中间。同样，对于您的布局，这似乎是不必要的，但我不知道您的全部预期最终结果，我正在努力提供尽可能多的“

最后，我首先在预期的布局中插入 jQueryUI 选项卡 HTML，有 2 个小差异。我将我们的“徽标”放在自定义跨度标签中，就在ul. 我也拿ui-tab-panel（s）并将它们放在自己的容器中。这有助于我们根据需要调整标签区域的高度。我也给了这个容器溢出，所以即使溢出可能隐藏在身体上，它仍然可用于选项卡。（另见：我在 jQueryUI 标签上写的小博客）

<div class="page-wrapper">
    <div class="table">
        <div class="table-cell">
            <div id="tabs">
                <span class="my-logo">
                    <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="logo here" />
                </span>
                <ul>
                    <li><a href="#tabs-1">Nunc tincidunt</a></li>
                    <li><a href="#tabs-2">Proin dolor</a></li>
                    <li><a href="#tabs-3">Aenean lacinia</a></li>
                </ul>
                <div class="ui-tabs-panel-container">
                    <div id="tabs-1">
                        <<p> ... </p>
                    </div>
                    <div id="tabs-2">
                        <p> ... </p>
                    </div>
                    <div id="tabs-3">
                        <p> ... </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

正如我之前提到的，jQueryUI 已经为我们提供了强大的 CSS 来使用。您可能已经注意到，我通过在整个 HTML 中使用它们预定义的类名来利用其中的一些。这建立了诸如background, color, 甚至font-family更多的东西！现在已经结束了，让我们首先布局我们的页面机制。正如我所提到的，我给 和 提供了一组非常“直接”的HTML属性BODY。这将有助于消除“跨浏览器问题”。我还提供了背景颜色，您可以将其设置为其中一个子级别。这样做只是为了向您展示 HTML、BODY 的存在位置。

然后我设置我们的“框架”元素。.page-wrapper将提供我们的页面换行，大小将来自内部，因此这里无需处理。.table和.table-cell提供的显示与它们的名字所暗示的完全一样。如前所述，这提供了一种很好的能力，可以将元素保持在某物的确切“中心”，甚至垂直！

现在我们操作我们的标签和内容。我#tabs始终使用它来维护“名称间距”。这不仅有助于 jQueryUI 预设上的任何“css 覆盖”，还有助于将页面布局混乱降至最低。这总是一件好事。

我操作的第一件事是我们自定义徽标跨度的位置和设置。然后，当然，我必须将其更改ul为旁边。因此，我查看了uls 类的 CSS。如果我在浏览器中打开编辑工具，我可以看到 ul 被赋予了类名ui-tabs-nav，我可以看到它有一个边距设置。如果我玩margin-left这个 ul 我可以看到除了 ul 的左侧没有任何影响。完美的！这是我必须操作以将我们的日志设置在其“自己的空间”中。

最后，我简单地将我们的选项卡容器（给定自定义类名，ui-tabs-panel-container匹配 jQueryUI）设置为溢出，这样如果任何内容超过我们的页面高度，它仍然可以在此元素内滚动。

html, body {
    background-color: #ADDFFF;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100%;
}
.page-wrapper {
    padding: 5px;
}
.table { display: table; }
.table-cell { display: table-cell; vertical-align: middle; }
#tabs .my-logo {
    display: inline-block;
    float: left;
    height: 2em;
    margin: .5em 0 0;
    padding: 0;
    width: 2em;
}
#tabs .my-logo img {
    max-height: 100%;
    max-width: 100%;
    float: left;
}
#tabs .ui-tabs-nav {
    margin-left: 2em;
}
#tabs .ui-tabs-panel-container {
    overflow: auto;
}

JS

最后，轻松的工作。我编写了一个函数来设置标签内容区域的高度，因为它将“填充”页面的其余部分。这需要一点思考，但不难弄清楚。编写函数后，我只需将其添加到窗口调整大小事件中，然后立即调用该事件。通过这种方式，它会在加载时调整大小，从而为我们提供第一个视图的“结束高度”。我还建立了选项卡，尽管那里没有太多工作，因为我只是在制作“默认选项卡”。随意尝试，去狂野吧！

//  the following will resize our tabs content area and account for all the spacing neccessary
function setContentHeight(e) { return $(window).innerHeight() - $(this).offset().top - 10; }  // -10 to account for padding

$(function() {  //  our on page load call
    $("#tabs").tabs();  //  establish tabs
    //  add ability to resize tabs content area on window resize, then call resize event
    $(window).resize(function(e) { $("#tabs .ui-tabs-panel-container").height(setContentHeight) }).resize();
})

至于标签内容的布局，全凭你自己的想象。希望这将使您对从哪里开始有一个很好的了解！祝你好运！

于 2013-05-27T16:13:09.813 回答
1

你可以使用 Blueprint CSS 之类的东西：

http://www.blueprintcss.org/

这是一个非常快速和肮脏的布局（不使用蓝图 CSS，只是简单的 CSS），作为一般准则。它仍然需要工作，但它可以用作起点：

<html>

<head>
<style>
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;   /* hide page scrollbars */
}

div {
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;    /* for debugging */
    text-align: center;
}

#header {
    width: 100%;
    position: relative;
    overflow: auto;
}

#header > div {
    height: 5%;
    float: left;
}

#logo {
    width: 23%;
}

#spacer {
    width: 1%; /* -1% for borders */
}

#tabbar {
    width: 75%;
}

#tabContent {

}

#tabContent > div {
    width: 100%;
}

#tabContentMenuBar {
    height: 5%;
}

#tabContentMain {
    min-height: 80%;
}
</style>
</head>

<body>
    <div id="header">
        <div id="logo">Logo</div>
        <div id="spacer"></div>
        <div id="tabbar" class="fullWidth">Tab bar</div>
    </div>
    <div id="tabContent">
        Tab content
        <div id="tabContentMenuBar">Tab content - menu bar</div>
        <div id="tabContentMain">Tab content - main content</div>
    </div>
</body>

</html>
于 2013-05-27T14:36:15.923 回答