如何让jQuery UI选项卡出现在页面底部

有什么方法让jQuery UI选项卡widget选项卡出现在页面底部？使用从jQuery网站的例子：如何让jQuery UI选项卡出现在页面底部

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

的标签出现在顶部，这是正常的，但我喜欢做一个电子表格应用程序，所以标签应该出现在底部。先谢谢你。

来源

2010-10-26 maximus

你可以张贴一些示例代码，你已经尝试过什么，所以远？ – drudge 2010-10-26 21:00:09

该问题已修改为包含代码。我浏览了API文档，并且找不到任何选项。我猜想唯一的办法是修改源代码页面小部件。虽然，我希望我错了。 – maximus 2010-10-27 22:59:07

有关更多详细信息，请查看[内容示例下方的jQuery UI选项卡]（http://jqueryui.com/demos/tabs/#bottom）。 – Lorenzo 2010-10-27 22:59:46

您是否尝试过使用CSS来移动内容区域下的选项卡？我想这就是你要做的。

来源

2010-10-27 22:57:45

不幸的是，“标签下的内容”的例子是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容器中。如果你想保持一个静态高度，你可以给你的容器一个高度值。

注意：上述CSS改编自Keith Wood's example。

来源

2014-07-10 18:11:27 nullability

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

来源

2015-04-27 08:16:18

如何让jQuery UI选项卡出现在页面底部

回答

相关问题