글
Ajax와 뒤로가기 버튼
플러그인 다운은
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery AjaxHistory Plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript" src="./jquery.history.js"></script>
<script type="text/javascript">
/**
* 동적으로 html을 변경시 $.history.load() 함수호출시 이곳이 호출되어진다.
*/
function historyStorage(hash){
if(hash){
$('#field').text(hash);
}else{
$('#field').empty();
}
}
jQuery(document).ready(function(){
//뒤로가기 버튼 클릭시 생성된 iframe을 history.back() 하면서historyStorage에 매개변수를 넘겨주는듯하다.
$.history.init(historyStorage);
//버튼정의
$('button').click(function(){
$.history.load($(this).val());
return false;
});
});
</script>
</head>
<body>
<h1>jQuery AjaxHistory Plugin</h1>
<button>aaa</button>
<button>bbb</button>
<button>ccc</button>
<div id="field"></div>
</body>
</html>
[출처] jQuery AjaxHistory Plugin-뒤로가기|작성자 지구촌아이
이번에는 Ajax 플로그인 중 History라는 플로그인을 살펴보도록 하겠습니다.
Ajax 기술은 페이지에 필요한 데이터만 request를 하고 response를 하여 Web App.이 구동되도록 구성이 되고 있습니다.
이렇게 편하고 좋은 기술에도 역시 단점이 있습니다.
바로 브로우저의 '뒤로가기' 버튼을사용 할 수 없다는 것 입니다.
인터넷 기술이 출연한 후 전세계적으로 기본이 되는 UX인 '뒤로가기' 버튼을
Ajax 기술로 인하여 사용할 수 없다는 것은 기획적인 부분을 포함하여
UX적인 측면에서 정말 Critical한 issue가 아닐 수 없습니다.
Ajax History 플로그인은 그러한 단점을 보완해주기 위해 나온 플로그인입니다.
사실 자바스크립트 기본 함수에서 'window.location.hash' 객체를 통해
비슷한 기능을 구현할 수 있습니다. 하지만, 크로스 브라우져 이슈를 해결해 놓은
좋은 플로그인을 사용하는 것이 더 현명한 방법이 아닐가 싶네요.^^
그럼 예제 소스를 살펴보도록 합시다.
'J > Jquery' 카테고리의 다른 글
| jQuery JSONP ajax 호출, JSON 관하여 (0) | 2014.03.19 |
|---|---|
| [jQuery] $(document).ready(function(){}); (0) | 2012.03.10 |
| ajax 뒤로가기 구현 (0) | 2012.03.08 |
| jquery 사용시 prototype.js 충돌시 해결 방법 (0) | 2012.03.03 |
| ajax와 뒤로가기 (0) | 2012.02.06 |
