14. 페이지 전환(Transition)
페이지 정보
작성자 관리자 댓글 0건 조회 1,200회 작성일 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>
실습 : 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>
실습 : 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>
실습 : 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>
실습 : 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>
실습 : 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>
댓글목록
등록된 댓글이 없습니다.