How to make jQuery UI tabs appear at the bottom of

2019-02-18 10:11发布

站内问答 / jQuery
858 3 4

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.

3条回答
贪生不怕死
2楼-- · 2019-02-18 10:37

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人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2019-02-18 10:38

Have you tried using CSS to move the tabs under the content area? I think thats what you are going for.

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
4楼-- · 2019-02-18 10:46

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)