<!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"/>
<style>
#div1 .red{
color:red;
}
#div1 .blue{
color:blue;
}
</style>
<script src="http://code.jquery.com/jquery.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">
$(function(){
$(window).on("orientationchange", function(event){
$("#div1").toggleClass("ui-body-b");
$("#div1").toggleClass("ui-body-a");
var orient = "";
var color = "";
if(window.orientation == 0){
color="red";
orient = "portrait";
}else{
//90도회전, -90회전
color="blue";
orient="landscape";
}
$("#div1").append("<div class='"+color+"'>"+orient+"</div>");
});
});
</script>
<!-- OrientationChange 이벤트
디바이스의 방향이 세로에서 가로로 전환될 때 발생하는 이벤트이다.
-->
</head>
<body>
<div data-role="page" id="firstPg">
<div data-role="header" data-position="fixed" id="header">
<h3>OrientationChange</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<div id="div1" class="ui-body ui-body-a"></div>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div><!-- footer -->
</div><!-- page1 -->
</div>
</body>
</html>