12/19 67-2 [JQuery] WidthHeight/ShowHide/SlideUpDown/FadeInOut

WidthHeight

 

****** width()나 height() 혹은 css("속성명")으로 가로폭 세로폭을 얻을 때는 마진 및 패딩 그리고 보더 값이 
        미 포함됨  값임. outerWidth(),outerHeight()로 얻을 때 (디폴트:false) 패딩값하고 보더값이 포함됨.
       true로 설정 시에는 마진값도 포함 됨.

폼

<fieldset>
    <legend>width(),height(),outerWidth(),outerHeight()</legend>
    <div></div>
    <button>가로폭/세로폭 구하기</button>
</fieldset>

이건 걍 한 방에 가쟈

$(function(){
    var div=$('div');
     
     패딩.테두리,마진 모두 포함 안됨
     var width = div.width();
     var height = div.height();

     패딩.테두리 포함
     var outerWidth = div.outerWidth();
     var outerHeight = div.outerHeight();

     패딩.테두리,마진 모두 포함 
     var outerWidthWithMargin = div.outerWidth(true);
     var outerHeightWithMargin = div.outerHeight(true);

     $('button').click(function(){  
        parseInt 할 필요 가 없음 그냥 숫자만 나옴
        console.log('가로폭:%s,세로폭:%s(마진/패딩/보더 미 포함)',width,height);
        console.log('가로폭:%s,세로폭:%s(마진만 미 포함)',outerWidth,outerHeight);
        console.log('가로폭:%s,세로폭:%s(마진/패딩/보더 미 포함)',outerWidthWithMargin,outerHeightWithMargin);
      css속성명으로 얻기 (단위 포함)
    console.log('가로폭:%s,세로폭:%s(css()함수)',parseInt(div.css('width')),div.css('height'));
    });   
 });

 

 

---

[ShowHide]

말 그대로 클릭 시 숨겼다 보였다 

show() 보였다

hide() 숨겼다

요거 두 개 합친 기능이 toggle()함수임!

 

폼 

<fieldset>
    <legend>show(),hide()함수</legend>
    <div id="accordion"><!-- 제이쿼리 UI적용시 추가DIV -->
        <div class="title"><h2>제목1</h2></div>
        <div class="content">
            내용입니다1<br/>
            내용입니다1<br/>
            내용입니다1<br/>
        </div>
        <div class="title"><h2>제목2</h2></div>
        <div class="content">
            내용입니다2<br/>
            내용입니다2<br/>
            내용입니다2<br/>
        </div>
        <div class="title"><h2>제목3</h2></div>
        <div class="content">
            내용입니다3<br/>
            내용입니다3<br/>
            내용입니다3<br/>
        </div>
    </div>
</fieldset>

 

 $(function(){
        페이지 최초 실행 시 숨기기
        $('.content').hide();   //style='display:none ;' 검사창 보니 이렇게 적용되네!

        제목 클릭 시 내용 보이기
        1.show()함수 사용 
       $('.title').click(function(){
           $(this).next().show();  //이렇게 하면 너무 밋밋함
           $(this).next().show(500,function(){  //이렇게 하면 애니메이션처럼 효과 넣을 수 있음 ! 
                $(this).css('backgroundColor','yellow');  // function안에서의this는  $(this).next()임 title의 this 아님 !!
           });              
        })

		 2.토글 함수 사용
         $('.title').click(function(){
            $(this).next().toggle(500,function(){  
                $(this).css('backgroundColor','yellow');
           });              
        })

         3.toggle함수 미 시용  show랑hide 함수로 아코디언 효과
        $('.title').click(function(){   //내용이 숨겨져 있으면 보여주고 보여주고 있으면 숨기고               
           if($(this).next().css('display') === 'none'){
                $('.content').hide(300);
                $(this).next().show(300);
            }
           else
                $(this).next().hide(300);           
       })
 })

이럴 줄 알고 

제이쿼리는 아코디언 함수를 준비 해 놨다...

$( "#accordion" ).accordion({
     collapsible: true,
     active: 0
 });

한 방이면 끝남.... 허무...

 

---

SlideUpDown

이건 위랑 너무 기능이동일해서.... 보이는 애니메이션 효과만 조금 다를 뿐?

폼

 <fieldset>
    <legend>slideDown(),slideUp(),slideToggle()함수</legend>	
        <h2 class="title">제목1</h2>
        <div class="content">
            내용입니다1<br/>
            내용입니다1<br/>
            내용입니다1<br/>
        </div>
        <h2 class="title">제목2</h2>
        <div class="content">
            내용입니다2<br/>
            내용입니다2<br/>
            내용입니다2<br/>
        </div>
        <h2 class="title">제목3</h2>
        <div class="content">
            내용입니다3<br/>
            내용입니다3<br/>
            내용입니다3<br/>
        </div>
    </div>
</fieldset>

똑같으니까 한 큐에 가요

$(function(){ 
        페이지 최초 시는  숨겨
        $('.content').hide();

       1.SlideDown()함수 사용
       $('.title').click(function(){
           $(this).next().SlideDown(); 이것 밋밋
           $(this).next().slideDown(200 , function(){  약간의 애니메이션?
                $(this).css('backgroundColor','yellow');
           });              
        })

        2.slideToggle -slidedown/up 동시구현
        $('.title').click(function(){
            $(this).next().slideToggle(500,function(){  
                $(this).css('backgroundColor','yellow');
           });              
        })

         3.slideToggle() 함수 미시용  slidedown 랑 slideup 함수로 아코디언 효과
          $('.title').click(function(){   //내용이 숨겨져 있으면 보여주고 보여주고있으면 숨기고               
           if($(this).next().css('display') === 'none'){
                $('.content').slideUp(300);
                $(this).next().slideDown(300);
            }
           else
                $(this).next().slideUp(300);           
          });
    });

---

[FadeInOut] 

얘도 똑같.... 폼도 완전 같으니 폼도 생략

$(function(){ 
        페이지 최초 시는  숨겨
        $('.content').hide();

        1.fadeIn()함수 사용
        $('.title').click(function(){
           // $(this).next().fideIn();
           $(this).next().fadeIn(300 , function(){  
                $(this).css('backgroundColor','yellow');
           });              
        })

          2.fadeToggle -fadeIn/out 동시구현
        $('.title').click(function(){
            $(this).next().fadeToggle(500,function(){  
                $(this).css('backgroundColor','yellow');
           });              
        })

        3.FadeToggle함수 미시용  FadeIn 랑 FadeOut 함수로 아코디언 효과
          $('.title').click(function(){   //내용이 숨겨져 있으면 보여주고 보여주고있으면 숨기고               
           if($(this).next().css('display')=== 'none'){
                $('.content').fadeOut(500);
                $(this).next().fadeIn(500);
            }
           else
                $(this).next().fadeOut(500);           
          });

    });