[mobile web] hash change 게시판
테스트된 페이지를 이용하면 hash change 게시판을 만들기에는 부족함이 없을 것으로 보입니다.
ajax과 hash change를 이용하여 구현하여 보았습니다.
1. hash 값을 가진 url 호출
http://127.0.0.1/hashchange/hash/board.jsp#page5
처음에 board.jsp 안에
<div data-role="page" id="firstPage"></div>
ajax으로 pageData를 가져와서 넣어주었습니다.
id="firstPage" 만 있고 calss는 ui-page-active 상태입니다.
[5 ]
2 page를 클릭했습니다.
브라우저의 url은 ~#page2로 변경되었습니다.
id="firstPage"의 class에 ui-page-active가 사라지고
id="page2"가 생기면서 calss가 ui-page-active로 변경되었습니다.
화면에서는 id="page2"만 보입니다.
[5 -> 2 ]
4 page를 클릭했습니다.
브라우저의 url은 ~#page4로 변경되었습니다.
id="page2"의 class에 ui-page-active가 사라지고
id="page4"가 생기면서 calss가 ui-page-active로 변경되었습니다.
화면에서는 id="page4"만 보입니다.
[5 -> 2 -> 4 ]
5 page를 클릭했습니다.
브라우저의 url은 ~#page5로 변경되었습니다.
id="page4"의 class에 ui-page-active가 사라지고
id="page5"가 생기면서 calss가 ui-page-active로 변경되었습니다.
화면에서는 id="page5"만 보입니다.
[5 -> 2 -> 4 -> 5 ]
1 page를 클릭했습니다.
브라우저의 url은 ~#page1로 변경되었습니다.
id="page5"의 class에 ui-page-active가 사라지고
id="page1"가 생기면서 calss가 ui-page-active로 변경되었습니다.
화면에서는 id="page1"만 보입니다.
[5 -> 2 -> 4 -> 5 -> 1]
이번에는 뒤로가기를 해 보았습니다.
앞에서 왔던 순서대로 뒤로 갑니다. 최종적으로는 id="firstPage" 로 가게 됩니다.
현재 화면에서
뒤로가기를 클릭합니다.
id="firstPage"로 돌아 왔습니다.
브러우저는 처음 페이지를 열 때 url에 #page5라는 값이 있었고
#page5를 가지고 ajax으로 data만 가지고 와서
페이지 있던 id="firstPage"에 data를 넣어주어서
#page5 가 호출 된 것으로 보여주었습니다.
브라우저는 id="firstpage"를 #page5로 기억하고 있기 때문에
뒤로가기에서 #page5의 위치가 되었을 때
id="firstpage"의 calss를 ui-page-active 상태 변경시켜주는 것입니다.
[5 -> 2 -> 4 -> 5 -> 1 -> 5]
뒤로가기를 클릭합니다.
id="page4"로 돌아 왔습니다.
[5 -> 2 -> 4 -> 5 -> 1 -> 5 -> 4]
뒤로가기를 클릭합니다.
id="page2"로 돌아 왔습니다.
[5 -> 2 -> 4 -> 5 -> 1 -> 5 -> 4 -> 2]
뒤로가기를 클릭합니다.
처음 id="firstPage"로 돌아 왔습니다. 더이상 뒤로 갈 곳이 없습니다.
[5 -> 2 -> 4 -> 5 -> 1 -> 5 -> 4 -> 2 -> 5]
* board.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>게시판</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
// hash값을 가진 상태에서 처음 페이지를 열 경우 해당 페이지로 이동함
// hash로 이동중인 페이에서는 적용 안 됨
var hash = window.location.hash.slice(1);
if(hash!='') {
goPage(hash.substring(4, hash.length), 0);
} else {
goPage(1, 1);
}
});
window.onload = function(){
}
function goPage(value1, value2){
$("#go").val(value1);
var id = "page"+value1;
var url = 'pageData.jsp';
if(value2==1) { // pagging에서 요청
// 동일 id가 존재한다면
if($("#"+id)) {
// active 상태라면 값만 바꾸어 주도록 처리해야 한다.
var check = $('#'+id).hasClass('ui-page-active');
if(check) { // 동일하고 active다
// id 삭제없이 진행함
} else {
$("#"+id).remove(); // id에 해당하는 page 추가함
$("<div data-role=\"page\" id=\""+ id +"\" ></div>").prependTo('body');
}
}
}
$.ajax({
type:'POST',
url: url,
data: $("#myForm").serialize(),
dataType: "text",
success: function(data){
if(value2==1) { // pagging에서 요청
$("#"+id).html(data);
$.mobile.changePage("#"+id, "slidedown", "reverse");
} else { // 첫페이지
// 첫페이지의 경우 화면 구성을 해서 보여주거나
// 기본 템플릿 구성 후 ajax 으로 구성하거나 해야 한다.
$("#firstPage").html(data);
}
}
});
}
</script>
</head>
<body>
<div data-role="page" id="firstPage"></div>
<form name="myForm" id="myForm" >
<input type="hidden" name="go" id="go" />
</form>
</body>
</html>
* pageData.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String go = request.getParameter("go");
int currentPage = Integer.parseInt(go);
%>
<header class="header">
<h1><%=go%> header</h1>
</header>
<section id="content">
<ul>
<li><%=currentPage%>- 1</li>
<li><%=currentPage%>- 2</li>
<li><%=currentPage%>- 3</li>
<li><%=currentPage%>- 4</li>
<li><%=currentPage%>- 5</li>
</ul>
<div>
<%
for(int i=0; i<5; i++) {
if(currentPage==(i+1)) {
out.println((i+1) +" ");
} else {
out.println("<a href=\"javascript:goPage("+ (i+1) +",1);\">"+ (i+1) +"</a> ");
}
}
%>
</div>
</section>
<footer id="footer">
<h1>footer</h1>
</footer>
hashchange.zip
[mobile web] hash change 게시판
'programming > mobile web' 카테고리의 다른 글
| [mobile web] 모바일웹 favicon 추가시 참고사항 (0) | 2012.11.08 |
|---|---|
| [mobile web] jquery mobile에서 a tag에 유사 클래스 사용하기 (0) | 2012.11.02 |
| [mobile web] Hash change의 GET, POST 방식 (0) | 2012.10.30 |
| [mobile web] 모바일웹 jquery mobile hash change 적용 게시판 (1) | 2012.10.26 |
| [mobile web] 모바일웹에서 화면전환 방법 (0) | 2012.10.25 |