mobileinit 이벤트


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

jQuery ( ".selector") .on ( "mobileinit", function (event) {...})
이 이벤트는 jQuery Mobile의 로딩이 끝난 후 시작 페이지가 강조되기 전에 트리거됩니다. 따라서이 이벤트의 핸들러는 jQuery Mobile의 글로벌 구성 옵션 과 모든 위젯의 기본 옵션 값이 라이브러리 동작에 영향을 미치기 전에이를 수정할 수있는 기회를 제공합니다.

jQuery Mobile은 라이브러리로드 프로세스의 일부로 트리거되기 때문에 jQuery Mobile을로드하기 전에 핸들러를 mobileinit 이벤트에 연결해야합니다. 이를 달성하는 가장 쉬운 방법은 jQuery를로드 하는 script태그 다음에 jQuery Mobile을로드 script하는 script태그 앞에 태그 를 배치하는 것입니다.

<!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>