[Jquery] 반응형 웹에서 jquery 다르게 불러오는 방법

디바이스 크기 마다 jquery 를 다르게 불러오는 방법입니다. 

 

기본구조

$(window).resize(function(){ 
    if (window.innerWidth > 640) {  // 현재 띄워진 창 크기가 640px 이상일때

    /* 640 이상일때의 스크립트 */ 

    } else {

    /* 640 이하일때의 스크립트 */ 

    }

}).resize();

예제

pc화면에서는 3개씩 나타나게 하는 더보기 버튼이

모바일에서는 2개씩 나타나게 해보았습니다.

 

html 구조

<ul class="review">
    <li>
        <img src="image/sub/img1.png" alt="">
        <div class="review_txt">						
            리뷰텍스트 내용
        </div>
    </li>
    <li>
        <img src="image/sub/img2.png" alt="">
        <div class="review_txt">						
            리뷰텍스트 내용
        </div>
    </li>
    <li>
        <img src="image/sub/img3.png" alt="">
        <div class="review_txt">						
            리뷰텍스트 내용
        </div>
    </li>
    <li>
        <img src="image/sub/img4.png" alt="">
        <div class="review_txt">						
            리뷰텍스트 내용
        </div>
    </li>
    <li>
        <img src="image/sub/img5.png" alt="">
        <div class="review_txt">						
            리뷰텍스트 내용
        </div>
    </li>
    <li>
        <img src="image/sub/img6.png" alt="">
        <div class="review_txt">						
            리뷰텍스트 내용
        </div>
    </li>
</ul>

리뷰들이 나타나게 html 을 ul li 로 구성 해 놓은 상태입니다.

 

js부분

$(window).resize(function(){ 
    if (window.innerWidth > 640) {  // 다바이스 크기가 640이상
    $(function(){
    $(".review li").slice(0, 3).show(); // 초기갯수
        $("#load").click(function(e){ // 클릭시 more
            e.preventDefault();
            $(".review li:hidden").slice(0, 3).show(); // 클릭시 more 갯수 지저정
            if($(".review li:hidden").length == 0){ // 컨텐츠 남아있는지 확인
                alert("게시물의 끝입니다."); // 컨텐츠 없을시 alert 창 띄우기 
            }
        });
    });

    } else {
    $(function(){
    $(".review li").slice(0, 2).show(); // 초기갯수
        $("#load").click(function(e){ // 클릭시 more
            e.preventDefault();
            $(".review li:hidden").slice(0, 2).show(); // 클릭시 more 갯수 지저정
            if($(".review li:hidden").length == 0){ // 컨텐츠 남아있는지 확인
                alert("게시물의 끝입니다."); // 컨텐츠 없을시 alert 창 띄우기 
            }
        });
    });

    }

    }).resize();

640px을 기준으로 클때는 3개씩, 작을때(모바일상) 에서는 2개씩 더보기 버튼을 사용한 js부분입니다.