IT/제이쿼리모바일

제이쿼리 모바일 hashchange event

조원태 2017. 1. 19. 23:41
반응형

제이쿼리 모바일  hashchange event 


설명 : 북마크 가능한 #hash 기록을 사용하도록 설정합니다. 



jQuery ( ".selector") .on ( "hashchange", function (event) {...}) 


jQuery Mobile .hashchange () 이벤트 핸들러는 window.onhashchange 이벤트에 바인딩 된 콜백 함수를 제공하여 매우 기본적인 북마크 가능한 #hash 기록을 가능하게합니다. 


onhashchange 이벤트는 창 해시가 변경 될 때 발생합니다. 

지원하는 브라우저에서는 기본 HTML5 window.onhashchange 이벤트가 사용됩니다.

IE6 / 7 (및 IE7 호환성 모드에서 작동하는 IE8)에서는 숨겨진 iframe이 만들어져 뒤로 버튼과 해시 기반 기록을 사용할 수 있습니다. 

이 플러그인은 jQuery의 내장 메소드를 확장합니다.

 jQuery Mobile이로드되어 있지 않으면 메서드가 계속 존재하므로 .hashchange () 메서드를 호출하는 것이 직접 실패하지 않을 수도 있습니다. 

그러나 예상 된 동작이 발생하지 않습니다.


$(function() {

  // Bind an event to window.onhashchange that, when the hash changes, gets the

  // hash and adds the class "selected" to any matching nav link.

  $( window ).hashchange(function() {

    var hash = location.hash;

 

    // Set the page title based on the hash.

    document.title = "The hash is " + ( hash.replace( /^#/, "" ) || "blank" ) + ".";

 

    // Iterate over all nav links, setting the "selected" class as-appropriate.

    $( "#nav a" ).each(function() {

      var that = $( this );

      that[ that.attr( "href" ) === hash ? "addClass" : "removeClass" ]( "selected" );

    });

  });

  // Since the event is only triggered when the hash changes, we need to trigger

  // the event now, to handle the hash the page may have loaded with.

  $( window ).hashchange();

});

반응형