如何使jQuery UI选项卡显示在页面底部 [英] How to make jQuery UI tabs appear at the bottom of a page
问题描述
是否有某种方法可使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>
选项卡显示在顶部，这是正常的，但是我想创建电子表格应用程序，因此选项卡应显示在底部.预先谢谢你.
不幸的是，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改编自基思·伍德的示例.
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.
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.
这篇关于如何使jQuery UI选项卡显示在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
