jquery horizo​​ntal ul /导航栏滑块

Question

我正在使用具有水平导航栏（twitter引导样式）的常规主页。

问题：基于当你进入网站的输入，页面上会显示按钮在导航栏中的混合。它可能会显示4个按钮或20个按钮，具体取决于该输入。

当存在太多的按钮（一个简单的按钮，如果> x）的我想申请一个水平滑块当用户点击上/下一个按钮，将通过一个按钮动画/滑动。

到目前为止，我已经尝试bxSlider（www.bxslider.com）和hoverscroll。 Hoverscroll没问题，但我需要基于点击而不是鼠标悬停。 BxSlider在每次点击时只滑动一个固定的大小，我想要的东西可以滑动到一个元素，而不是像素。

谢谢。

<div id="divone"> 
    <div id="divtwo"> 
    <ul id="my-list"> 
     <li>Link<li> 
     <li>Link<li> 
     <li>Link<li> 
     <li>Link<li> 
     <li>Link<li> 
     etc. 
    <ul> 
    </div> 
</div> 



      #divone 
      { 
       width: 678px; 
       height: 51px; 
       position: relative; 
      } 

      #divtwo 
      { 
       width: 678px; 
       height: 51px; 
       overflow: hidden; 
      } 

      #my-list 
      { 
       width: 6000px; 
      } 

这是结构，可能与另一个'overflow：hidden'div父母，所以我可以制作一个可滚动/滑动区域。

我很感激任何帮助。

Answer 1

在您的规格，你说，如果你有一定数目的按钮，说：“比X按钮的更多”，你想滑块出现。因此，您需要创建一个导航栏，无论是否存在滑块，该导航栏都将显得很正常。不幸的是，除非我能看到你的CSS，否则我不能帮你解决这个问题。我只能用jQuery来帮助你。

首先，你必须写出您的条件：

if ($("button").length > x) { ...show slider...} 

现在我们继续之前，我想指出一个明显的事实，有很多不同的方式去制作滑块。无法看到你的代码（我知道我可能听起来像一个破碎的记录在这一点上，但你仍然是新的堆栈溢出，所以这是我教你），我能想到的最兼容的解决方案将是创建导航栏和滑块按钮的左右两侧留有足够的空间（我们将操作visibility属性显示/隐藏，而不是display财产 - 这也将让导航栏在较慢的负载跳浏览器）。

要实现这一点，我们需要先从两个元素（只选择显示）的按钮：

var buttonLeft = $("#buttonLeft"); 
var buttonRight = $("#buttonRight"); 

下一步，我们将要添加以下行来，如果我们的条件运行的是真：

buttonLeft.css("visibility", "visible") 
      .on("click.sliderLeft", function() {...show more on the left...}; 
buttonRight.css("visibility", "visible") 
      .on("click.sliderRight", function() {...show more on the right...}; 

现在我们开始写的幻灯片功能之前，一定要记住，当你想滑块显示从左边更多的元素是很重要的，你真正想要的是滑动的元素将移至右边。

这也是可以实现几十种脚本的另一部分。您选择的实施将主要基于您的HTML和CSS。对于这个方法，我会简单地假设你将要使用滑动元素position: relative以及一些包含overflow: hidden的包装div。

var navBar = $("#navBar"); // sliding element 

下一步是确定您想要用于幻灯片效果的内容。为了方便起见（因为你正在使用的引导 - 这样，你更有可能拥有所有的按钮是相同的大小，反正）我将承担所有的导航按钮的大小相同：

var navButtonWidth = $(".navButtons").width(); 

为了方便起见，我还假定您的按钮的左右边距都设置为5px。我将进一步假设每个动画将花费1000毫秒。因此，你会希望下面的行添加到您的点击处理作为幻灯片效果：

var slideAmount = navButtonWidth + 10; //button width plus margin left plus margin right 

//left button 
... 
var slideLeftStr = "+=" + slideAmount + "px"; 
navBar.animate({ left: slideStr }, 1000); 
... 

//right button 
... 
var slideRightStr = "-=" + slideAmount + "px"; 
navBar.animate({ left: slideStr }, 1000); 
... 

这几乎是它。您必须定制它，对其进行自定义，添加一些条件以在条形结束时禁用幻灯片效果，添加一些解决方法以防止双击等问题，但这应该会为您提供基本的启动指出自己动态的幻灯片效果。

让我知道如果您有任何问题。祝你好运！ :)

UPDATE：

要回答你的问题有关使用按钮滑动到特定的按钮，答案是“是的，你可以做到这一点”，但你会什么真正想要做的是滑动到下一个或上一个按钮（分别）的开始位置。我可以告诉你，这可能会惨不忍睹，但这里是代码反正：

... 
//put this function outside of the click handlers 
var slideTo = function (destButton) { 
    //destButton is the button you are sliding to 
    return destButton.offset().left + "px"; 
}  

//put this in both click handlers 
... 
var destinationButton = ....get the previous or next button based on which handler you're in 
navBar.animate({ left: slideTo(destinationButton) }, 1000); 
... 

，我会建议的选项，但是，慢慢地，只要写出具有导航栏滑动点击处理程序用户仍然在按钮上按住mousedown。