제이쿼리 모바일 mobileinit event
제이쿼리 모바일 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>
설명 : 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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 1547 | |
| 1546 |
CSS
스크롤 애니메이션 인터랙션
|
| 1545 |
CSS
이미지 비율 유지 반응형 처리
|
| 1544 |
CSS
CSS 변수와 다크 모드 테마
|
| 1542 | |
| 1541 | |
| 1540 | |
| 1539 | |
| 1538 | |
| 1537 |
CSS
박스 모델 완전 이해
|
| 1535 | |
| 1534 | |
| 1533 | |
| 1532 | |
| 1531 | |
| 1512 | |
| 1508 |
CSS
CSS 스위치형 버튼
4
|
| 1479 |
CSS
간단하게 메뉴꾸미기2
13
|
| 1478 |
CSS
간단하게 메뉴꾸미기 1
16
|
| 1475 | |
| 1474 | |
| 1460 |
부트스트랩
비활성화 및 활성 항목
2
|
| 1459 |
부트스트랩
드롭 다운 헤더
7
|
| 1458 |
부트스트랩
드롭 다운 분배기
2
|
| 1457 |
부트스트랩
부트 스트랩 드롭 다운
|
| 1456 |
부트스트랩
패널 바닥 글, 패널 그룹
|
| 1455 |
부트스트랩
부트스트랩 패널 제목
|
| 1454 |
부트스트랩
부트스트랩 panel
|
| 1453 | |
| 1452 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기