1. $.mobile.changePage() 메소드
2. $.mobile.loadPage() 메소드
3. $.mobile.loading() 메소드
19-01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>19-01</title>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).on('mobileinit', function() {
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.textVisible = false;
});
$(document).on('pagecreate', function() {
//디폴트임
$('#default').on('tap', function(event) {
$.mobile.loading('show', {
theme: $.mobile.loader.prototype.options.theme,
text: $.mobile.loader.prototype.options.text,
textonly: $.mobile.loader.prototype.options.textonly,
textVisible: $.mobile.loader.prototype.options.textVisible
});
});
//좀 바꿔봄
$('#textonly').on('tap', function(event) {
$.mobile.loading('show', {
theme: $.mobile.loader.prototype.options.theme,
text: "텍스트만 표시되는 로더",
textonly: true,
textVisible: true
});
});
//텍스트를 바꿔봄 테마도 바꿈
$('#theme_a').on('tap', function(event) {
$.mobile.loading('show', {
theme: "a",
text: "페이지 로딩 중 (Theme a)",
textonly: false,
textVisible: true
});
});
$('#theme_b').on('tap', function(event) {
$.mobile.loading('show', {
theme: "b",
text: "페이지 로딩 중 (Theme b)",
textonly: false,
textVisible: true
});
});
//진행 상태를 제거해라
$('#hide').on('tap', function(event) {
$.mobile.loading('hide');
});
});
</script>
<!--역시 mobile를 참조하기 전에 스크립트를 짜야된다. -->
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header" data-position="fixed">
<h3>Utilities</h3>
</div>
<div data-role="content">
<p>메시지 로더</p>
<div>
<button id="default">Default Loader</button>
<button id="textonly">Text Only</button>
<button id="theme_a" data-theme="a">Theme a</button>
<button id="theme_b" data-theme="b">Theme b</button>
<button id="hide">Hide</button>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 생활코딩 Javascript 정리 - Object Model (0) | 2017.06.17 |
|---|---|
| 생활코딩 Javascript 정리 - 자바스크립트 개념 및 HTML에서 자바스크립트 로드하기 (0) | 2017.06.17 |
| window.location 객체 (0) | 2016.05.05 |
| 자바스크립트 - apply와 call 차이점 (0) | 2015.02.03 |
| Javascript - jQuery Mobile 이벤트 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 컨텐트 서식 적용, 테마롤러 사용법 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 폼 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 리스트뷰 (0) | 2015.01.30 |