如何使 jQuery UI 选项卡出现在页面底部答案

【问题标题】：How to make jQuery UI tabs appear at the bottom of a page如何使 jQuery UI 选项卡出现在页面底部
【发布时间】：2010-10-26 20:44:08
【问题描述】：

有没有办法让 jQuery UI 选项卡小部件选项卡出现在页面底部？使用来自 jQuery 站点的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Tabs - Default functionality</title>
    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>

    <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
    </script>
</head>
<body>
<div class="demo">
<div id="tabs">
    <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 id="tabs-1">
        <p>Blah</p>
    </div>
    <div id="tabs-2">

        <p>More blah</p>
    </div>
    <div id="tabs-3">
        <p>The return of blah</p>
    </div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Click tabs to swap between content that is broken into logical sections.</p>
</div><!-- End demo-description -->
</body>
</html>

标签出现在顶部，这很正常，但我想做一个电子表格应用程序，所以标签应该出现在底部。提前谢谢你。

【问题讨论】：

您能发布一些示例代码吗？
问题已被修改为包含代码。我浏览了 API 文档，但找不到任何选项。我猜唯一的方法是将源修改为选项卡小部件。虽然，我希望我错了。
更多详情请查看jQuery UI tab below content sample。

标签： jquery jquery-ui tabs jquery-ui-tabs

【解决方案1】：

遗憾的是，jQuery 文档中不再存在“内容下方的选项卡”示例，因此您可以使用以下 CSS 重新定位 jQuery UI 选项卡控件：

#tabs { 
    position: relative; 
    padding-bottom: 3em; 
} 
#tabs .ui-tabs-nav { 
    position: absolute; 
    left: 0.25em; 
    right: 0.25em; 
    bottom: 0.25em; 
    padding: 0em 0.2em 0.2em; 
} 
#tabs .ui-tabs-nav li { 
    border-top: none; 
    border-bottom: 1px solid #ccc; 
    -moz-border-radius: 0px 0px 4px 4px; 
    -webkit-border-radius: 0px 0px 4px 4px; 
    border-radius: 0px 0px 4px 4px; 
} 
#tabs .ui-tabs-nav li.ui-tabs-selected, 
#tabs .ui-tabs-nav li.ui-state-active { 
    top: -1px; 
}

这会将标签放置在#tabs 容器的底部。如果你想保持一个静态高度，你可以给你的 #tabs 容器一个高度值。

注意：以上 CSS 改编自 Keith Wood's example。

【讨论】：

【解决方案2】：

在 jquery UI 1.10.0 中更改列表顺序后 - 它应该在选项卡大纲 div 的底部，一切正常：

<div id="tabs">
        <div id="tabs-1">

        </div>
        <div id="tabs-2">

        </div>
        <ul>
            <li><a href="#tabs-1">Tab1</a></li>
            <li><a href="#tabs-2">Tab2</a></li>
        </ul>
    </div>

【讨论】：

【解决方案3】：

您是否尝试过使用 CSS 来移动内容区域下的选项卡？我想这就是你想要的。

【讨论】：