스크롤 최하단 도착

from Develop/Jquery 2012. 4. 27. 17:49

<script>

function scrollEnd(){

 var scrollHeight = document.compatMode=="CSS1Compat"? document.documentElement.scrollHeight : document.body.scrollHeight;

 var clientHeight = document.compatMode=="CSS1Compat"? document.documentElement.clientHeight : document.body.clientHeight;

 var ScrollTop = document.compatMode == "CSS1Compat"? document.documentElement.scrollTop : document.body.scrollTop;

 var scrollPos = scrollHeight - ScrollTop;

 if (clientHeight == scrollPos)

 {

  alert("끝!");

 }

}

</script>

 

<Body onscroll=scrollEnd();>




<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<script type="text/javascript">

   $(window).scroll(function(){

   if  ($(window).scrollTop() == $(document).height() - $(window).height()){

      alert("끝!");

   }

  }); 

  

 });

 </script>

 

,

아래 코드는 간단하게 페이지가 로드됐을때


핸드폰에서 왼쪽으로 30px(?), 오른쪽으로 30px(?) 이상씩 마우스무브를 하면


페이지 이동을 시키는 코드이다.





해당 페이지에 swipeleft , swiperight 이벤트를 등록시키면


왼쪽으로 마우스슬라이드, 오른쪽으로 마우스슬라이드시에 이벤트가 발생한다.(휴대폰에서도)





페이지 이동방식은 두가지.





일반 웹폼 전송방식


JQM 페이지 전송방식





먼저 일반 웹폽전송방식은 말그대로 기존에 웹페이지에서 폼 전송하듯 하는 방식이고.


JQM 페이지 전송방식은


 $.mobile.changePage("Page1.aspx", { transition: "slide", reverse: false }, true, false); 

 

이런식으로 전송한다. 


한가지 주의할점은 Page.aspx 페이지에 <data-role="page">로 선언된 부분만 긁어 온다는것.





그러므로 Page1.aspx스크립트구문에 


백날 


$(document).readey(function(){


alert("HHH");


});


이렇게 해도 작동안한다. page로 선언된 부분만 긁어서 


메인페이지부분에 긁어 넣기 때문에.





 $(document).ready(function () { 


        $("#page").live("swipeleft", function () {


            // jqm 방식  $.mobile.changePage("Page1.aspx", { transition: "slide", reverse: false }, true, false); 


// 일반 Form 전송 방식


                location.href = "Page1.aspx";


        });





        $("#page").live("swiperight", function () {


            // $.mobile.changePage("Page1.aspx", { transition: "slide", reverse: false }, true, false); 


                location.href = "Page1.aspx";


        });


    });


,

mobileinit 이벤트는 jQuery mobile이 시작되자마자 발생하는 초기화 이벤트
jquery.mobile.min.js가 로드되기 이전에 바인딩해야 함.

<script>
$(document).bind("mobileinit", function(){
$.extend($.mobile , {
defualtTransition :'slide',   <- 페이지 이동 기본 애니메이션 효과 설정
loadingMessage : 'Now Loading...', <-페이지를 불러올 대 나타나는 로딩 메시지   
   ajaxEnabled : true,  <- jQuery Mobile 는 기본으로 모든 페이지 이동을 ajax로 처리한다. ajax처리가 아닌 페이지 직접이동을 할때 설정 
   autoInitialize:true, <- false일 경우 $.mobile.initializePage() 메서드가 호출되기 전까지 초기화 작업 안함. 특별한 작업 후 애플리케이션이 나타나도록 할 때 사용
   metaViewportContent : 'width=device-width, minimum-scale=1, maximum-scale=1'
      // false로 지정하면 메타 태그가 생성되지 않음. 뷰포트 설정값 변경 할대 사용  
}
})
</script>

,