하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

14. 페이지 전환(Transition)

페이지 정보

작성자 관리자 댓글 0건 조회 487회 작성일 22-01-11 15:57

본문

14. 페이지 전환(Transition)

//fade 효과: 기본 Default값

<a href="#page2" data-transition="fade">다이얼로그 상자 띄우기</a>


//flip효과: 뒤집기

<a href="#page2" data-transition="flip">다이얼로그 상자 띄우기</a>


//pop효과

<a href="#page2" data-transition="pop">다이얼로그 상자 띄우기</a>


//slide효과

<a href="#page2" data-transition="slide">다이얼로그 상자 띄우기</a>


//slide+fade효과

<a href="#page2" data-transition="slidefade">다이얼로그 상자 띄우기</a>


//slideup효과

<a href="#page2" data-transition="slideup">다이얼로그 상자 띄우기</a>


//slidedown효과

<a href="#page2" data-transition="slidedown">다이얼로그 상자 띄우기</a>


//turn효과

<a href="#page2" data-transition="turn">다이얼로그 상자 띄우기</a>


//none: 아무효과를 주지않은 경우

<a href="#page2" data-transition="none">다이얼로그 상자 띄우기</a>

<a href="#page2" data-transition="flow">다이얼로그 상자 띄우기</a>



실습 : jMobile30.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>

</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" id="header">
<h3>Trnasition</h3>
</div>
<div role="main" class="ui-content">
<a href="#page2" data-transition="flow">다이얼로그 상자 띄우기</a>
</div>
<div data-role="footer" data-position="fixed">
<h3>jQuery</h3>
</div>
</div>
<div data-role="page" data-dialog="true" id="page2">
<div data-role="header">
<h2>Dialog Box</h2>
</div>
<div data-role="main" class="ui-content">
<a href="#page1">페이지로 이동</a>
</div>
<div data-role="footer">
<h2>Footer in Dialog</h2>
</div>
</div>
</body>
</html>



3.PNG



실습 : jMobile31.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

var init = function(){

$("#movePage2").click(function(){

$.mobile.changePage("#page2",{transition:"slide",reverse:true});

});

$("#movePage1").click(function(){

$.mobile.changePage("#page1",{transition:"slide",reverse:false});

});

};

$(document).ready(init);

</script>

</head>

<body>

<div data-role="page" id="page1">

<div data-role="header" data-position="fixed" id="header">

<h3>Page1</h3>

</div>

<div role="main" class="ui-content">

<input type="button" id="movePage2" value="페이지2로 이동">

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

</div>

<div data-role="page" id="page2">

<div data-role="header">

<h2>Page2</h2>

</div>

<div data-role="main" class="ui-content">

<input type="button" id="movePage1" value="페이지1으로 이동">

</div>

<div data-role="footer" data-position="fixed">

<h2>Footer in Page</h2>

</div>

</div>

</body>

</html>



4.PNG



실습 : jMobile32.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

var init = function(){

$("#movePge2").click(function(){

$('#input2').val($('#input1').val());

$.mobile.changePage("#page2",{transition:"flow", reverse:false});

} );

$("#movePge1").click(function(){

$('#input1').val("");

$.mobile.changePage("#page1",{transition:"flow", reverse:true});

} );

};

$(document).ready(init);

</script>

</head>

<body>

<div data-role="page" id="page1">

<div data-role="header" data-position="fixed" id="header">

<h3>Page1</h3>

</div>

<div role="main" class="ui-content">

<input type="text" id="input1">

<input type="button" id="movePge2" value="2페이지 이동">

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

</div>

<div data-role="page" id="page2">

<div data-role="header">

<h2>page2</h2>

</div>

<div data-role="main" class="ui-content">

 <input type="text" id="input2">

 <input type="button" id="movePge1" value="1페이지 이동">

</div>

<div data-role="footer" data-position="fixed">

<h2>Footer in Page</h2>

</div>

</div>

</body>

</html>



5.PNG


실습 : jMobile33_1.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

var init = function(){

$('#btn1').click(function(){

$.mobile.changePage("jMobile33_2.html");

});

};

$(document).ready(init);

</script>

</head>

<body>

<div data-role="page" id="page1">

<div data-role="header" data-position="fixed" id="header">

<h3>Page1</h3>

</div>

<div role="main" class="ui-content">

<!-- <a href="./jMobile33_2.html" data-role="button">두번째 페이지 이동</a> -->

<a href="#" data-role="button" id="btn1">두번째 페이지 이동</a>

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

</div>

</body>

</html>



6.PNG



실습 : jMobile33_2.html 


<!doctype html>

<html>

<head>

<!--  jQuery를 이용한 페이지 이동일 경우에는 아래의 <head>안의 내용은 없어도 무관하다.-->

      <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

</head>

<body>

<div data-role="page" id="page2">

<div data-role="header" data-position="fixed" id="header">

<h3>Page2</h3>

</div>

<div role="main" class="ui-content">

<!-- <a href="./jMobile33_1.html" data-role="button">첫번째 페이지 이동</a> -->

<a href="#" data-role="button" id="btn2">첫번째 페이지 이동</a>

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

<script type="text/javascript">

var movePage=function(){

$('#btn2').click(function(){

 $.mobile.changePage("jMobile33_1.html");

});

};

$(document).on("pageshow", movePage);

    </script>

</div>

</body>

</html>



7.PNG



실습 : jMobile34_1.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

var init = function(){

$('#btn1').click(function(){

$.mobile.changePage("jMobile34_2.html?aa="+$('#input1').val());

});

};

$(document).ready(init);

</script>

</head>

<body>

<div data-role="page" id="page1">

<div data-role="header" data-position="fixed" id="header">

<h3>Page1</h3>

</div>

<div role="main" class="ui-content">

<input type="text" id="input1">

<a id="btn1" data-role="button">두번째 페이지로 이동</a>

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

</div>

</body>

</html>


실습 : jMobile34_2.html 


<!doctype html>

<html>

<head>

</head>

<body>

<div data-role="page" id="page2">

<div data-role="header" data-position="fixed" id="header">

<h3>Page2</h3>

</div>

<div role="main" class="ui-content">

<input type="text" id="input2">

<a id="btn2" data-role="button">첫번째 페이지로 이동</a>

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

  <script type="text/javascript">

var getUrl = function(name){

var vars = [], hash;

var hashes = window.location.href.slice(window.location.href.indexOf('?')+1).split('&');

for(var i=0; i<hashes.length; i++){

hash = hashes[i].split('=');

vars.push(hashes[0]);

vars[hash[0]] = hash[1];

}

return vars[name];

};

var movePage = function(){

$('#input2').val(decodeURIComponent(getUrl("aa")));

$('#btn2').click(function(){

$.mobile.changePage("jMobile34_1.html");

});

};

$(document).on("pageshow",movePage);

</script>

</div>

</body>

</html>



8.PNG


9.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.