jquery 水平 ul/navbar 滑块

Question

我正在开发一个带有水平导航栏（twitter 引导样式）的常规主页。

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

当按钮太多时（一个简单的 if 按钮 > x）我想应用一个水平滑块，当用户单击上一个/下一个按钮时，该滑块将动画/滑动一个按钮。

到目前为止，我已经尝试过 bxSlider (www.bxslider.com) 和 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

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

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

不过，我建议的选项是编写一个单击处理程序，只要用户仍将鼠标悬停在按钮上，导航栏就会缓慢滑动。