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。