Menu
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.
545
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.
82
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
