끌어당겨셔 새로고침 하기 javascript 버젼 pullToRefresh

끌어당겨셔 새로고침 하기 javascript 버젼

모바일웹페이지에서 상단을 끌어당겨 새로고침을 하기
- 사용 모듈 : https://github.com/BoxFactura/pulltorefresh.js
- 사용 방법

< script src="https://github.com/BoxFactura/pulltorefresh.js"></ script>
< script>
    // initialize
    PullToRefresh.init({
      mainElement: '.global-body',
  instructionsPullToRefresh:'새로고침 하려면 당기세요',
  instructionsReleaseToRefresh:'새로고침 하려면 놓으세요',
  instructionsRefreshing :'새로고침 하는중...',
  shouldPullToRefresh:function(){return $('.global-body').scrollTop() === 0},
      onRefresh: function() { 
        // on refresh code goes here
        //alert('refresh') 
if($('.global-body').scrollTop() === 0){
location.reload(true);
}
      }
    });
</ script>

위에 간단하게 적용하는 스크립트이다.
내용은,
* mainElement : 새로고침할때 어떤 요소(element)앞에서 당겨지는지 해당 엘리먼트를 입력.
ㄴ적용해 보면 해당 엘리먼트(ID, class, element)앞에 새로고침하는 표시가 나오게 된다
* pullToRefresh가 기본으로 적용 되었을때는 영문으로 표시 되니, 텍스트로 변경할려고 하면 아래 정보를 변경한다
- instructionsPullToRefresh:'새로고침 하려면 당기세요',
- instructionsReleaseToRefresh:'새로고침 하려면 놓으세요',
- instructionsRefreshing :'새로고침 하는중...',
* 끌어당겨새로침 기능을 적용하다 보면, 스크롤을 내린 후 위로 올리는 동작중에 새로고침이 동작되는 경우가 있는데..
이때는 정확한 조건에 맞는지 확인을 해야 한다. 이 부분을 체크하는게 shouldPullToRefresh 부분이다.
- shouldPullToRefresh: 특정 엘리먼트의 scrollTop을 비교해서 처리하거나, 어떤 조건을 받아서 처리해 주면 된다.
ㄴ위 소스에서 처럼 하거나, mainElement가 body 가 아닌 경우
shouldPullToRefresh:function(){return !this.mainElement.scrollTop}

* onRefresh : 새로고침 처리 수행에 대한 결과 처리(action) 하는 부분. 
ㄴ일반적으로 페이지 새로고침. 그외 특별한 동작을 만들 수 있겠다.