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

发布于 2024-09-29 09:15:05 字数 1787 浏览 3 评论 0原文

有没有办法让 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>

选项卡显示在顶部，这是正常的，但我想做一个电子表格应用程序，因此选项卡应显示在底部。先感谢您。

原文

Is there some way to make the jQuery UI tab widget tabs appear at the bottom of a page?
Using the example from the jQuery site:

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

The tabs appear at the top, which is normal, but I'd like to do a spreadsheet application, so the tabs should appear at the bottom. Thank you in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一生独一 2024-10-06 09:15:05

不幸的是，“内容下方的选项卡”示例不再出现在 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 的示例。

Unfortunately the 'tabs below content' example is no longer present in the jQuery documentation, so you can use the following CSS to reposition your jQuery UI tab controls:

#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; 
}

This will position the tabs on the bottom on your #tabs container. If you want to keep a static height you can give your #tabs container a height value.

Note: the above CSS was adapted from Keith Wood's example.

回复收藏 0 原文

旧故 2024-10-06 09:15:05

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

In jquery UI 1.10.0 after changing order of list - it should be at the bottom of tab outline div, everything works perfect:

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

回复收藏 0 原文