제이쿼리 모바일 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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 1386 |
부트스트랩
부트 스트랩 그리드 시스템
|
| 1385 |
AngularJS
주형
|
| 1384 |
AngularJS
컨트롤러
|
| 1383 |
AngularJS
$ routeProvider
|
| 1382 |
AngularJS
AngularJS Routing - 무엇이 필요합니까?
|
| 1381 |
AngularJS
AngularJS Routing
|
| 1380 |
AngularJS
CSS 애니메이션
|
| 1379 |
AngularJS
ngAnimate는 무엇을합니까?
|
| 1378 |
AngularJS
AngularJS Animations 무엇이 필요합니까?
|
| 1377 |
AngularJS
AngularJS Animations
|
| 1376 |
AngularJS
AngularJS 교차 도메인 포함
|
| 1375 |
AngularJS
AngularJS 코드 포함
|
| 1374 |
AngularJS
AngularJS Includes
|
| 1373 | |
| 1372 | |
| 1371 |
AngularJS
angular.uppercase () 문자열을 대문자로 변환합니다.
|
| 1370 |
AngularJS
AngularJS API
|
| 1369 |
AngularJS
검증 예제
|
| 1368 |
AngularJS
사용자 정의 유효성 검사
|
| 1367 |
AngularJS
CSS 클래스
|
| 1366 |
AngularJS
양식 상태 및 입력 상태
|
| 1365 |
AngularJS
이메일
|
| 1364 |
AngularJS
AngularJS 양식 검증
|
| 1363 |
AngularJS
선택 상자
|
| 1362 |
AngularJS
라디오 버튼
|
| 1361 |
AngularJS
체크 박스
|
| 1360 |
AngularJS
AngularJS 양식
|
| 1359 |
AngularJS
$event 객체
|
| 1358 |
AngularJS
토글, 참 / 거짓
|
| 1357 |
AngularJS
AngularJS 이벤트 - ng-click 지시문
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기