유혁의 개발 스토리

[Hybird App] 페이지간 링크 연결 본문

Android

[Hybird App] 페이지간 링크 연결

유혁. 2017. 11. 6. 17:31

 

이전 포스팅에서 안드로이드의 Intent 페이지 이동에 대해

하이브리드 환경에서 제작해보았습니다.

 

이번에는 외부 URL로 연결하거나 다이어로그로 띄우거나 등등

페이지간 링크를 연결해 보겠습니다.

 

페이지 링크 방식으로는

1. 같은 내부 페이지로 이동

2. 대화상자 열기

3. 외부 도메인 열기

4. 내부 도메인 파일을 외부 도메인으로 열기

 

4가지 방식을 사용해 보며

페이지 전환효과에 대해 알아보겠습니다.

 

 

페이지 링크 방식

 

 

 

index.html

<!DOCTYPE html> 

<head>
<title>페이지 링크</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head> 
 
   <div data-role="page" id="page">
	<div data-role="header" data-theme="b">
		<h1>페이지 링크</h1>
	</div>
	<div data-role="content">	
	    <ul data-role="listview" >
			<li data-role="list-divider"> 내부 도메인</li>
			<li><a href="sub.html" data-transition="slide">내부 페이지</a></li>
            <li><a href="sub.html" data-rel="dialog" >다이어로그 페이지</a></li>
            <li data-role="list-divider"> 외부 도메인</li>
            <li><a href="http://www.naver.com" data-transition="slide" > www.naver.com</a></li>
            <li><a href="sub.html" rel="external" data-transition="slide">외부링크 사용 내부페이지 열기</a></li>
	    </ul>
	</div>
	<div data-role="footer" data-theme="b">
		<h4>클릭하시면 연결됩니다.</h4>
	</div>
   </div>

 

sub.html

<!DOCTYPE html> 

<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head> 
 

<div data-role="page" id="page">
	<div data-role="header" >
		<h1>서브 페이지</h1>
	</div>
	<div data-role="content">
    		<h1>페이지 링크 연습</h1>
			<p>다양한 종류의 링크 연결 </p>
			<a href="#" data-role="button" data-rel="back" data-theme="b" >돌아가기</a> 	
    </div>
	<div data-role="footer" >
		<h4>Footer</h4>
	</div>
</div>

 

 

참고 - Do it 쉽게 배우는 웹앱&하이브리드앱

 

 

결과

 

 

 

페이지 테스트 해보시면 됩니다.

 

 

 

 

----------------------------------------------------------------------

 

 

페이지 전환 효과

 

 

위의 링크 보시면 data-transition="slide"가 페이지 전환 효과를 설정하는 부분입니다.

slide, Pop, Fade 등등 여러 전환 효과가 존재합니다.

 

fade

pop

flip

turn

flow

slide

slidefade

slideup

slidedown

none

 

가 있습니다. 많은 관계로 생략하겠습니다.

 

 

 

다양한 아이콘들 지원

http://demos.jquerymobile.com/1.4.5/icons/

 

 

 

 

한번씩 해보세요~ 감사합니다.

 

'Android' 카테고리의 다른 글

[Android] NDK를 이용한 C/C++ 연동 개발  (3) 2017.11.30
[Hybrid App] Custom 테마 만들기  (0) 2017.11.07
[Hybird App] 모바일 UI 프레임워크(JQuery Mobile) 사용법  (1) 2017.10.30
[Hybird App] 하이브리드 앱 개발환경 세팅  (2) 2017.10.24
[Android] 카카오톡 페이지 만들기(PagerSlidingTabStrip + Viewpager)  (0) 2017.09.12
'Android' Related Articles more