창 크기가 변경 될 때 div에서 속성 변경

Question

jQuery 모바일에서 작업합니다. 이 경우 960px 미만의 화면 너비 일 때 div에 데이터 역할 축소를 추가하려고합니다.

내 예제에서는 사이트를로드 할 때만 작동합니다. 하지만 페이지를 다시로드하지 않고 브라우저의 크기를 조정할 때도 작동합니다.

960 픽셀에서 < 960 픽셀로 변경하는 것은 예를 들어 태블릿을 돌리거나 브라우저 창 크기를 수동으로 조정할 때입니다.

$(document).on("pagebeforecreate", function() { 
    if ($(window).width() < 960) { 
     $(".medis_collaps").attr("data-role","collapsible") 
    } 
}); 

편집

.resize() 내가 = "축소"작업 데이터 역할을하는 페이지를 다시로드해야한다는 것 때문에, 작동하지 않습니다.

Answer 1

사용은 resize

$(window).resize(function() { 
    if ($(window).width() < 960) { 
     $(".medis_collaps").attr("data-role","collapsible") 
    } 
}); 

Answer 2

당신은 다음과 같은 크기 조정 및로드 이벤트를 바인딩 할 수 있습니다 :이 경우

$(window).on('resize load pagebeforecreate', function(){ 
    if ($(window).width() < 960) { 
     $(".medis_collaps").attr("data-role","collapsible") 
    } 
}); 

적 이벤트에 대해 동일한 기능을 결합 할 필요가 없다.

Answer 3

당신은 다음과 같이 사용할 수 있습니다

는 아마도

$(document).on("load resize pagebeforecreate", function() { 
    if ($(window).width() < 960) { 
     $(".medis_collaps").attr("data-role","collapsible") 
    } 
});