jQuery UI 슬라이더 용 CSS 위아래 버튼

Question

CSS, 또 다른 약점 중 하나가 나를 죽이고 있습니다.

포스터 (this post)는 div에 슬라이더를 추가하는 방법을 보여주기에 충분했지만 내 스크롤바가 많은 단계를 거칠 수 있기 때문에 위로 및 아래로 버튼이 필요하다고 생각합니다.

나 자신을 당혹스럽게 만들지도, 잘못된 반복으로 나온 모든 반복 작업으로 당신을 지루하게하지 않을 것입니다.

위의 게시물에서 제공된 CSS와 함께 작동하도록 스크롤 막대처럼 보이게하려면 jQuery UI 아이콘을 세로 슬라이더의 위쪽과 아래쪽에 추가하는 방법을 보여줄 수 있습니까? 저를 위해 작동하지 않는 CSS입니다.

미리 감사드립니다.

편집

위대한 답변, 감사합니다 - 당신을 아주 많이. 슬라이더가 단추에 흘러 가지 않도록하는 방법이 있습니까? 나는 최대한 빨리 수표를 올리려고 노력할 것이다.

Nevermind. 위아래가 실제로 무엇을하는지 알아 냈습니다.

최종 결론

두 솔루션 작업, 그리고 쉽게 상단과 하단에 출혈를 조정 할 수 있었다.

하위 호환성 때문에 Abody97에 체크 표시를 했으므로 toarmroo가 앞으로 더 정확해질 것 같네요. 너무 나쁜 스택은 여러 개의 체크 박스 :(여기

Answer 1

을 허용하지 않는 것은 내 시도입니다 :에

<div id="vertical-slider"> 
<div class = "up">/\</div> 
<div class = "down">\/</div> 
</div> 

추가 된이 : 첫째, 나는 약간의 HTML을 수정 :. 기본적으로 내가 무슨 짓을

little link

CSS :. 당신이 클릭을 직접 처리해야 할 것이다, 그러나 이것은 당신에게 시각적 레이아웃을 달성하는 방법에 대한 아이디어를 줄 것이다

#vertical-slider { 
    position: relative; /*necessary for the buttons' positioning to work*/ 
} 
.up { 
    position: absolute; 
    top: 0; /*up there*/ 
    left: 0; /*on the left*/ 
} 
.down { 
    position: absolute; 
    bottom: 0; /*down there*/ 
    left: 0; /*on the left*/ 
} 
.up, .down { 
    width: 100%; /*take up all the width inside the slider*/ 
    background: rgb(0, 162, 232); /*prettiness*/ 
    color: white; /*prettiness, too*/ 
    z-index: 1000; /*make sure they're not covered*/ 
} 

주

,

Answer 2

당신은 CSS를 :before 및 :after pseudoselectors를 사용할 수 있습니다

Example

당신은 원하는 모양을 얻을 수있는 top 및 z-index 속성 재생할 수 있습니다.

#vertical-slider:before{ 
    content: url('/slidertop.png'); 
    position: absolute; 
    top: -8px; 
    z-index: 1; 
} 
#vertical-slider:after{ 
    content: url('/sliderbottom.png'); 
    position: absolute; 
    top: 192px; 
    z-index: 1; 
}