일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 잡토이
- 리브레캐드
- tomcat
- 운정
- 예제
- 라즈베리파이
- 오라클
- 코딩
- 설정
- Spring Security
- librecad
- 톰캣
- html5
- 시작하기
- Android
- oracle
- 아두이노
- Unity
- jobtoy
- mysql
- 설치
- 파주
- 스크래치
- 유니티
- MSSQL
- s4a
- 잡토이 메이킹 코딩 학원
- jsp
- 안드로이드
- 강좌
- Today
- Total
랩제이
[mobile web] jquery hash change 본문
[mobile web] jquery hash change
모바일웹 사이트를 하나 만들려고 보니까 hash change를 사용해야 하더군요
그래서 간단한 샘플을 만들어 보았습니다.
샘플이라면 소스까지 같이 올라와 있는게 좋을것 같습니다. 나중에 참고하기도 쉬우니까요 ^^
<!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="./commons/scripts/jquery-1.8.1.js"></script>
<script type="text/javascript" src="./commons/scripts/jquery.ba-hashchange.1.3.min.js" />"></script>
<script type="text/javascript">
$(window).hashchange(function() {
var hash = window.location.hash.slice(1);
if(hash == "searchPage") {
$('#searchPage').css('display','block');
$('#bodyCheck').css('display','none');
} else if(hash == "bodyCheck"){
$('#searchPage').css('display','none');
$('#bodyCheck').css('display','block');
}
}).hashchange();
</script>
</head>
<body>
<a href="#searchPage">searchPage</a>
<a href="#bodyCheck">bodyCheck</a>
<div id="searchPage" style="display:none;">
searchPage 안녕하세요 하하하
</div>
<div id="bodyCheck" style="display:none;">
bodyCheck 안녕하세요 하하하
</div>
</body>
</html>
[mobile web] jquery hash change
'programming > mobile web' 카테고리의 다른 글
[mobile web] 모바일웹에서 화면 높이가 작을 경우 footer 아래에 붙이는 방법 (0) | 2012.10.23 |
---|---|
[mobile web] 주소창 올리기 (0) | 2012.10.23 |
[mobile web] jquery mobile 초기화 설정 ajax 관련 오류 수정하기 (0) | 2012.07.19 |
[mobile web] User Agent Switcher (0) | 2012.07.02 |
[mobile web] 바로가기 아이콘 (0) | 2012.07.01 |