如何使jQuery UI选项卡显示在页面底部

有没有办法让jQuery UI选项卡小部件选项卡出现在页面底部？ 使用jQuery站点中的示例：

            $(function() { $("#tabs").tabs(); });    
 
 
 
Nunc tincidunt
 
Proin dolor
 
Aenean lacinia
 
 
 
Blah
 
 
 
More blah
 
 
 
The return of blah
 
 
 
 
 
Click tabs to swap between content that is broken into logical sections.
 
   

标签显示在顶部，这是正常的，但我想做一个电子表格应用程序，因此标签应显示在底部。 先感谢您。

Answer 1

不幸的是，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改编自Keith Wood的例子 。

Answer 2

在更改列表顺序后的jquery UI 1.10.0中 – 它应该位于选项卡大纲div的底部，一切都很完美：

 
 
 
 
 
 
 
Tab1
 
Tab2
 
  

Answer 3

您是否尝试过使用CSS移动内容区域下的标签？ 我认为那就是你想要的。