본문 바로가기

jQuery/jQueryMobile

[jQueryMobile] jQueryMobile의 초기화 이벤트

반응형






mobileinit 를 이용한 이벤트



 jQuery Mobile의 mobileinit 이벤트는 페이지가 형성될때 실행된다. 이때 주의할 점은 jQuery Mobile과 관련된 자바 스크립트 파일을 읽을 때 실행하는 이벤트이므로 mobileinit 이벤트가 실행된 이후에 jQueryMobile.js파일이 추가되어야 한다.



01. mobileinit 이벤트의 실행 방법은 아래와 같다.

 mobileinit_event.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
    jQuery(document).bind('mobileinit', function() {
        alert("Mobile Init!!");
    });
</script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>MOBILE</h1>
    </div>
    <div data-role="content">
        <h1>Hello Wicked</h1>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</div>
</body>
</html>





02. 출력결과는 아래와 같다.











■ 뒤로가기 버튼 자동으로 생성하기




01. 일반적으로 mobileinit 이벤트가 발생할 때 mobile 페이지의 기본 설정을 바꾼다.

    아래와 같이 뒤로 가기 버튼을 따로 입력하지 않고 자동으로 생성하여 사용할 수 도 있다.

 mobileinit_back.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
    jQuery(document).bind('mobileinit', function() {
        jQuery.mobile.page.prototype.options.addBackBtn = true;
    });
</script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <!-- 첫 번째 페이지 -->
    <div data-role="header" data-position="fixed">
        <h1>FIRST</h1>
    </div>
    <div data-role="content">
        <a href="#second_page" data-role="button">To Second Page</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
<div data-role="page" id="second_page" data-position="fixed">
    <!-- 두 번째 페이지 -->
    <div data-role="header" data-add-back-btn="true">
        <h1>FIRST</h1>
    </div>
    <div data-role="content"></div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 출력결과는 아래와 같다.



위와같은 방식으로 모든 옵션을 강제적으로 설정할 수 있다.

jQuery Mobile의 설정과 관련된 메서드는 모두 mobileinit 이벤트 핸들러 안에서 실행해야 함을 기억하자.






반응형