글
ajax와 뒤로가기
참조 : http://blog.naver.com/barty82?Redirect=Log&logNo=80129299253
참조해야할 것 : http://tkyk.github.com/jquery-history-plugin/#documentation
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.1.min.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() { // button 클릭시 이벤트 처리를 함.
$("h1").text($(this).html()); // 뒤로가기 할 시에 차이점을 볼 수 있다.
$.history.load($(this).html()); // html() 함수 형식으로 반환하여 history.load 함수에 전달. 말그대로 로드하고 있음.
// 작동은 init()함수에 초기화했던 콜백함수를 실행시킨다. 실행 시키는 순간 history.js 어딘가에 history 시키는 것과같이 로드하고 있는 듯(로드했던 값을 ->(즉, $(this).html())하다. 그러므로? 뒤로가기를 누를 경우 전에 로드되었던 history를 되돌려준다. 첨에는 아무것도 로드되어있지 않았으니깐 깨끗한 상태로 ^^?
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>
'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.05 |
