Geek Answers Handbook

How to make jQuery user interface tabs at the bottom of the page

Is there a way to make jQuery tabs tab widget tabs at the bottom of the page? Using an example from 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>

Tabs are displayed at the top, which is normal, but I would like to make a spreadsheet application, so the tabs should be displayed at the bottom. Thank you in advance.

+4
source share
3 answers

Unfortunately, the “tabs below content” example is no longer in the jQuery documentation, so you can use the following CSS to move the 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 position will be located on the tabs at the bottom of your #tabs container. If you want to maintain a static height, you can provide your #tabs container #tabs a height value.

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

+3
source

In jQuery UI 1.10.0 after changing the list order - this should be at the bottom of the div tab, everything works fine:

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

Have you tried using CSS to move tabs in the content area? I think this is what you are going to do.

+1
source

More articles:


All Articles