제이쿼리 모바일 mobileinit event



설명 : jQuery Mobile의로드가 완료되었음을 나타내는 이벤트입니다.



jQuery ( ".selector") .on ( "mobileinit", function (event) {...})

이 이벤트는 jQuery Mobile의로드가 끝나고 시작 페이지가 강조되기 전에 트리거됩니다.

따라서이 이벤트의 핸들러는 jQuery Mobile의 글로벌 구성 옵션과 모든 위젯의 기본 옵션 값이 라이브러리 동작에 영향을 미치기 전에이를 수정할 수있는 기회를 제공합니다.



jQuery Mobile은 라이브러리의로드 프로세스의 일부로 트리거되기 때문에 jQuery Mobile을로드하기 전에 handler를 mobileinit 이벤트에 연결해야합니다.

이를 달성하는 가장 쉬운 방법은 jQuery를로드하는 script 태그 다음에 script 태그를 배치하고 jQuery Mobile을로드하는 스크립트 태그 앞에 스크립트 태그를 배치하는 것입니다.



<!doctype html>

<html>

<head>

<title>Example illustrating use of the "mobileinit" event</title>

<meta charset=utf-8 />

<meta name="viewport" content="width=device-width, initial-scale=1">

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

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

// Update configuration to our liking

$( document ).on( "mobileinit", function() {



// We want popups to cover the page behind them with a dark background

$.mobile.popup.prototype.options.overlayTheme = "b";



// Set a namespace for jQuery Mobile data attributes

$.mobile.ns = "jqm-";

});

</script>

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

</head>

<body>

<div data-jqm-role="page">

<div data-jqm-role="header">

<h2>jQuery Mobile Example</h2>

</div>

<div data-jqm-role="content">

<div id="the-popup" data-jqm-role="popup" data-jqm-position-to="window">

<p>Example popup.</p>

</div>

<a href="#the-popup" data-jqm-rel="popup" class="ui-btn ui-corner-all ui-shadow">Open Popup</a>

</div>

</div>

</body>

</html>