scrollspy, tooltip, affix

scrollspy
스크롤스파이는 스크롤이 긴 페이지에서 유저가 길을 잃지 않게 도와주는 역할을 한다.
기본 사용방법
네비게이션의 a태그의 href속성값으로 #id명 을 주고 각 해당하는 영역의 div에
id=“id명”을 추가한다.
데이터속성을 활용하여 scrollspy구현하는 방법
body의 스타일로 position:relative를 주고 body태그에 data-spy=“scroll”을 추가하고
data-target의 속성값으로 .nav요소의 부모 id명 혹은 클래스명을 추가한다.

자바스크립트를 활용하여 scrollspy구현하는 방법
body의 스타일로 position:relative를 주고 자바스크립트 코드로
$('body').scrollspy({ target: '.nav요소의 부모 id명 혹은 클래스명' }) 를 추가한다.
스크롤의 위치가 맞지 않을 때에는 자바스크립트를 이용하여 offset옵션의 속성값
에 보정 픽셀값을 주어 맞춘다.

tooltip
링크나 버튼 위에 마우스를 올리거나 클릭했을 때 말풍선 툴팁이 뜨도록 구현하려면 <button>태그에 data-toggle="tooltip"을 주고 title="툴팁내용"을 준 후 아래의 자바스크립트로 호출한다.
$(function(){
$('[data-toggle="tooltip"]').tooltip()
})
툴팁의 위치를 top, right, bottom, left 정렬 4가지 방향으로 설정 가능하다. data-placement의 속성값을 원하는 방향으로 설정한다.
툴팁의 이벤트를 활용하여 툴팁이 작동하는 시점을 설정한다.
 animation: 기본값은 true이나 false로 설정하면 fade 효과가 사라진다.
delay : 나타나는 시간을 지연시킬수 있다.
trigger : hover시 툴팁이 나타날것인지 click을 할때 나타날것인지 설정할 수 있다.
 
popover
버튼에 호버하거나 클릭했을 때 타이틀과 컨텐츠를 말풍선으로 띄워주는 팝오버를 구현하려면 data-toggle=“popover”, title=“팝오버의 제목”, data-content=“팝오버의 내용” 을 준 후 아래의 자바스크립트로 호출한다.
$(function () { 
$('[data-toggle="popover"]').popover() 
})

팝오버의 위치를 top, right, bottom, left 정렬 4가지 방향으로 설정 가능하다. data-placement의 속성값을 원하는 방향으로 설정한다.
collapse
버튼을 클릭하면 단일 컨텐츠가 보이거나 숨겨지는 요소를 컬랩스라 하며 <a>태그나 <button>태그를 만들어서 data-toggle=“collapse”로 주고 컨텐츠를 감싸는 div를 만들어 class=“collapse”를 부여하여 구현한다.
컬랩스를 확장하여 그룹으로 만든후 각 타이틀을 클릭하면 컬랩스가 되는 요소를 아코디언이라고 한다.
아코디언이 처음부터 컨텐츠가 활성화되어 열려있게 구동하려면 collapse를 가지고 있는 요소에 in을 추가해준다.
toggle: false
//활성화하고 싶은 컨텐츠의 타이틀을 클릭하면 자동으로 다른 컨텐츠가 닫히는 부분이 동작 안함

.carousel
회전목마처럼 이미지나 텍스트 요소들을 순환시키는 콤포넌트와 플러그인을 캐러셀이라 한다.
.item 안의 .carousel-caption 안에 텍스트를 넣으면 손쉽게 슬라이드에 캡션을 추가할 수 있다.
캐로셀이 슬라이드 되는 간격시간을 2초로 조절하기위해 옵션을 활용하려면 .carousel을 가지고 있는 div에 data-interval=“2000”으로 설정하면 된다.
버튼을 클릭하여 이미지를 다음 항목으로 이동하려면 메소드를 활용하여 $(".carousel").carousel(“next");로 설정한다.
pause : null
(마우스 호버시 캐로셀 동작 멈추는 부분을 무효화)
keyboard : false
(키보드 동작을 무효화)

.affix
스크롤을 내리면 해당요소의 position속성값이 static에서 fixed로 변경되면서 스크롤을 따라서 같이 움직이다가 어떤 포인트에서 고정값으로 바뀌는 요소를 Affix라고 한다.
data-spy="affix"속성값을 가지고 있으면 해당요소는 .affix-top이라는 클래스명을 가지고 있다가 data-offset-top=“200”을 주면 스크롤값이 200이 되면서 .affix라는 클래스명으로 바뀐다.
.affix라는 클래스명으로 가지면 .affix{position:fixed;}의 스타일을 가지게 된다.
클래스명을 가지게 되는 순서는 .affix-top->.affix->.affix-bottom 이다.