jquery水平ul/导航栏滑块

Question

我在一个常规的主页上工作，有一个水平导航栏(twitter bootstrap风格)。

问题:根据您进入网站时的输入，页面将在导航栏中显示多个按钮。它可能会显示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...}

在我们继续之前，我想指出一个显而易见的事实，那就是有很多不同的方法来制作滑块。在不能看到你的代码的情况下(我知道在这一点上我可能听起来像一张坏掉的唱片，但你仍然是Stack Overflow的新手，所以这就是我教你的)，我能想到的最兼容的解决方案是创建导航栏，并在左侧和右侧为滑块按钮留出足够的空间(我们将操作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

下一步是确定要用于幻灯片效果的内容。为了方便起见(也因为你使用的是bootstrap --因此，无论如何，你更有可能让所有按钮的大小相同)，我将假设你所有的导航按钮都是相同的大小：

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);
...

差不多就是这样。你将不得不定制它，自定义它，添加一些条件来禁用滑动效果，添加一些变通方法来防止双击等问题，但这应该给你一个基本的起点来制作自己的动态滑动效果。

如果你有任何问题，请告诉我。祝你好运！:)

更新：

要回答您关于使用按钮滑动到特定按钮的问题，答案是“是的，您可以这样做”，但您真正想要做的是分别滑动到下一个或上一个按钮的开始位置。我可以告诉你，这可能看起来很可怕，但不管怎样，下面是代码：

...
//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);
...

然而，我建议的选择是编写一个单击处理程序，让导航栏在用户仍将鼠标按下按钮时缓慢滑动。