글 수 34
보짱.toggle()
.toggle() 은 어떤 경우에 사용하면 좋을까?
여러 경우가 있겠지만, 레이어의 디스플레이 제어에 가장 많이 사용하지 않을까 생각됩니다.
1. 디스플레이 제어
- jQuery
$("a.toggleLink").click(function () {
$(".layerBox").toggle();
});- html
<a href="#" class="toggleLink">display Control</a> <div class="layerBox">contents</div>
- css
.layerBox {display:none; padding:10px; border:1px solid #ddd;}
위 예에서는 a 태그로 제거하고 있지만 일반적으로 <button></botton>을 사용하는것이 접근성 측면에서 더 좋습니다.
2. 슬라이드 효과 : .slideToggle();
.slideToggle( 동작속도, 콜백 )
동작 속도는 fast, slow 를 쓰거나 1000분의 1초로 계산한 숫자를 쓸 수 있다.
예) .slideToggle(slow) / .slideToggle(600)
$("a.toggleLink").click(function() {
$(".layerBox").slideToggle();
});3. 클래스 추가/삭제 첫번째 방법 : .toggleClass();
.toggleClass("클래스명")
$("a.toggleLink").click(function() {
$(".layerBox").toggleClass("orange");
});orange라는 이름의 클래스를 추가/삭제 합니다.4. 클래스 추가/삭제 두번째 방법
위 3번의 클래스 추가/삭제는 a 태그를 클릭해서 a태그가 아닌 다른 엘리먼트에 토글 이벤트를 걸어준 것이었습니다.
그러나 이 4번의 클래스 추가/삭제는 해당 엘리먼트에 직접 클래스를 추가/삭제 하는 것이지요.
$(".layerBox").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);selected라는 이름의 클래스를 추가/삭제 하고 있지요.계속 작성 중...........................................................
소속 : 밀짚모자 해적단
