我正在尝试创建一个简单的选项卡栏,该网站具有滚动选项卡以便显示无法适应页面的选项卡。这很简单,不需要任何ajax或动态加载的内容...它只显示所有选项卡,当您单击其中一个时,它会带您到另一个页面。
我已搜索互联网,但除了这个网址之外似乎找不到其他东西: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html 然而,这非常复杂且过重...我正在寻找一个用jquery实现的轻量级示例。如果有人能帮忙,我将感激不尽!
我正在尝试创建一个简单的选项卡栏,该网站具有滚动选项卡以便显示无法适应页面的选项卡。这很简单,不需要任何ajax或动态加载的内容...它只显示所有选项卡,当您单击其中一个时,它会带您到另一个页面。
我已搜索互联网,但除了这个网址之外似乎找不到其他东西: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html 然而,这非常复杂且过重...我正在寻找一个用jquery实现的轻量级示例。如果有人能帮忙,我将感激不尽!
最终我自己写了一个div,并将其溢出设置为隐藏。 然后使用下面的jQuery将选项卡移动到该div中。
$(document).ready(function()
{
$('.scrollButtons .left').click(function()
{
var content = $(".tabs .scrollable .content")
var pos = content.position().left + 250;
if (pos >= 0)
{
pos = 0;
}
content.animate({ left: pos }, 1000);
});
$('.scrollButtons .right').click(function()
{
var content = $(".tabs .scrollable .content")
var width = content.children('ul').width();
var pos = content.position().left - 250;
//var width = content.width();
if (pos <= (width * -1) + 670)
{
pos = (width * -1) + 600;
}
content.animate({ left: pos }, 1000);
});
});
我的HTML代码是这样的:
<div class="tabs">
<div class="scrollable">
<div class="content">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
<div class="scrollButtons">
<ul>
<li>
<div class="left">
</div>
</li>
<li>
<div class="right">
</div>
</li>
</ul>
</div>
</div>
我刚刚自己创建了一个插件: 项目主页:http://jquery.aamirafridi.com/jst
我经常使用JQuery UI选项卡作为选项卡的起点。您可以在网站下载区自定义JQuery UI下载。如果您已经在网站上使用JQuery,则此方法应该比任何其他实现更轻巧。
默认情况下,JQuery UI选项卡不会提供您所需的滚动效果。我认为这可以通过修改CSS来实现,但更可能更容易地通过改变站点导航(即创建更多级别,使用较短的标题)来实现。
希望这有所帮助