如何使jQuery UI选项卡显示在页面底部
[英]How to make jQuery UI tabs appear at the bottom of a page
问题描述
Is there some way to make the jQuery UI tab widget tabs appear at the bottom of a page? 
有没有办法让jQuery UI选项卡小部件选项卡出现在页面底部？ Using the example from the jQuery site: 使用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>
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 个解决方案
解决方案1
4 2014-07-10 18:11:27
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: 不幸的是，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;
}
This will position the tabs on the bottom on your #tabs container. 这会将标签放在#tabs容器的底部。 If you want to keep a static height you can give your #tabs container a height value. 如果要保持静态高度，可以为#tabs容器指定高度值。
Note: the above CSS was adapted from Keith Wood's example . 注意：上面的CSS改编自Keith Wood的例子 。
解决方案2
3 2015-04-27 08:16:18
In jquery UI 1.10.0 after changing order of list - it should be at the bottom of tab outline div, everything works perfect: 在更改列表顺序后的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
1 2010-10-27 22:57:45
Have you tried using CSS to move the tabs under the content area? 您是否尝试过使用CSS移动内容区域下的标签？ I think thats what you are going for. 我认为那就是你想要的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.