jquery horizontal ul/navbar slider

Question

수평 탐색 모음 (트위터 부트 스트랩 스타일)이있는 일반 홈페이지에서 작업하고 있습니다.

문제 : 사이트를 입력 할 때 입력에 따라 페이지에 탐색 모음에 여러 가지 단추가 표시됩니다. 입력에 따라 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; 
      } 

그 구조는 아마도 '오버 플로우 : 숨겨진'div 부모와 구조이므로 스크롤 가능/슬라이딩 영역을 만들 수 있습니다.

감사합니다.

Answer 1

스펙에서 "버튼 x 개 이상"과 같이 특정 개수의 버튼이있는 경우 슬라이더를 나타 내기를 원했습니다. 따라서 슬라이더의 존재 여부에 관계없이 정상적으로 보일 탐색 바를 만들고 싶습니다. 불행히도, 귀하의 CSS를 볼 수 없으면 문제의이 부분을 도와 드릴 수 없습니다. 나는 jQuery에 대해서만 당신을 도울 수있을 것이다. 우선 들어

, 당신이 밖으로 작성해야 조건부 : 우리는 계속하기 전에

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

지금, 나는을 가야하는 여러 가지 방법이 많이 있다는 것을 명백한 사실을 지적하고 싶습니다 슬라이더. 코드를 볼 수 없으면 (아마도이 ​​시점에서 깨진 레코드처럼 들릴지 모르겠지만 스택 오버플로에서는 아직 익숙하지 않으므로이 점을 가르쳐 드리겠습니다.) 생각할 수있는 가장 호환 가능한 솔루션은 탐색 막대를 만들고 슬라이더 버튼의 왼쪽과 오른쪽에 충분한 공간을 남겨 둡니다 (display 속성이 아닌 visibility 속성을 표시하거나 숨기기를 조작합니다) - 탐색 막대가 느리게로드되는 것을 방지합니다 브라우저).

이를 구현하기 위해, 우리는 버튼에 (만 선택기가 표시됩니다) 두 가지 요소로 시작해야합니다 우리의 조건부 경우

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으로, 래퍼 div를 overflow: hidden으로 사용한다고 가정합니다.

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을 버튼 위에 올려 놓고 있습니다.