9강 jQuery와 jQuery Mobile 개요
- jQuery는 John Resig에 의해 2006년 1월 BarCamp NYC에서 발표된 오픈소스 자바스크립트 프레임워크
- 'Write Less, Do More'
- DOM의 쉬운 조작에서부터, 쉽고 일관된 이벤트 처리, 각종 효과 기능 제공을 통한 쉬운 시각화 지원, 쉬운 Ajax 지원, 쉬운 내장형 객체의 확장까지 자바스크립트의 전반을 지원하는 프레임워크
- jQuery UI라고 불리는 UI기능을 포함해 JQuery 기반의 프러그인 라이브러리가 많음
- jQuery Mobile 스마트 디바이스 프레임워크는 현재 가장 많은 스마트 디바이스 지원 범위를 가지는 프레임워크
- 2010년 8월 프로젝트를 공식 발표함
- jQuery Mobile은 iOS 휴먼 인터페이스 가이드라인의 흐름을 적용한 스마트 디바이스용 프레임워크로 폭넓은 스마트 디바이스 지원과 더불어 시멘틱 웹의 HTML을 전제로 설계되어 있기 때문에 높은 접근성을 제공함
- 마크 업 기반의 개발 스타일을 채택하고 있어서 복잡한 자바스크립트 코드없이 HTML 태그의 속성 조작만으로도 간단한 웹 앱 제작이 가능
- HTML5와 CSS3기반의 사용자 인터페이스, 페이지 이동 애니메이션 Ajax 통신 지원 등 스마트 디바이스에 최적화된 기능을 제공하며, jQuery 기능을 활용하면 좀 더 고급스러운 기능을 가진 웹 앱을 구현할 수 있음
jQuery
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>09-01</title>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
// 여러분의 코드는 여기에...
</script>
</head>
<body>
</body>
</html> |
cs |
jQuery 모바일
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>09-02</title>
<link rel="stylesheet" href="js/jquery.mobile-1.4.2.css" />
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript">
// 여러분의 코드는 여기에...
</script>
</head>
<body>
</body>
</html> |
cs |
|
9강끝 |
10강 jQuery 기본
1. jQuery 핵심 개념
- jQuery는 자바스크립트에서 DOM 객체를 질의(query)해조작한다는 의미를 강조하듯이, 문서 탐색 및 조작을 위한 보다 쉬운 노드 접근 기술을 제공
- HTML DOM과 자바스크립트 사이의 상호작용을 간단하게 해주는 것이 jQuery의 가장 큰 특징
- jQuery는 HTML DOM 객체에 접근 하기 위해 셀렉터(selector) 매커니즘을 사용
- CSS 셀렉터로 문서의 특정 노드를 찾을 수 있음
2. jQuery() 와 $()
- jQuery()는 HTML DOM의 특정 노드에 접근하거나, DOM 요소를 생성하거나, DOM구조의 로딩을 완료한 후 실행할 콜백함수를 지정하기 위해 사용하는 함수
- ()안에 매개변수 셀렉터를 기술하면 셀렉터를 해석해 HTML DOM 구조 상의 노드를 찾아 jQuery 객체로 변환해 반환하고, HTML 태그 문자열이 매개변수로 전달되면 HTML DOM 요소를 생성하고, 매개변수로 함수가 전달되면 콜백함수로 등록하여 DOM 로딩 완료시 호출함
- jQuery 객체가 반환되면 해당 객체와 이벤트를 바인딩하거나, 효과를 연결하는 작업이 가능
- jQuery의 별칭으로 $를 사용할 수 있어 $()를 더 많이 사용함
- jQuery 객체의 메소드는 jQuery 객체 자신을 반환 값으로 전달하기 때문에 메소드 체인 구성이 가능
3, jQuery(document).ready(function(){...})
- jQuery 이벤트인 문서 로딩 이벤트에 대한 이벤트 핸들러를 구현할 때 사용
- 매개변수로 전달된 document 객체를 jQuery 객체로 변환하고, jQuery 객체의 프로토타입 멤버인 ready() 메소드의 매개변수인 함수가 문서 로딩 이벤트의 이벤트 핸들러 함수로 등록됨
- 주로 익명함수를 매개변수로 사용 $(document).ready(function(){...})형태로도 사용
- HTML 문서는 가장 먼저 DOM 구조가 로딩되고, 이어서 이미지와 같은 요소 컨텐츠들이 로딩
- 이후 Window 객체가 로딩되고, 웹 브라우저에서 Window 객체의 load이벤트가 발생되는데, ready() 메소드에 전달되는 이벤트 핸들러 함수의 호출 시점은 DOM 구조가 로딩이 완료되었을 때임
- 화면의 초기 상태를 제어하는 코드나 요소의 이벤트 핸들러를 등록하는 코드가 주로 기술됨
- jQuery(document).ready(function(){...})와 jQuery(function(){...})는 기본적으로 문서 로딩 이벤트 핸들러를 여러 개 등록할 수 있도록 지원
- 이 함수들은 HTML의 load 이벤트와는 다른 시점의 이벤트를 지원하기 때문에, DOM 구조 로딩 후 리소스들의 로딩이 완료되기 전과 후를 분리해 처리할 수 있음
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>10-01</title>
<style type="text/css">
div {
font-size: 12pt
}
.header {
color: #000080;
font-size: 24pt;
}
.content {
color: #008000;
}
.footer {
color: #800080;
font-size: 14pt;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#header').addClass('header');
$('#content').addClass('content');
$('#footer').addClass('footer');
});
</script>
</head>
<body>
<div id="header">
<p>
jQuery
</p>
</div>
<div id="content">
<p>
jQuery는 John Resig에 의해 2006년 1월 BarCamp NYC에서 발표된
오픈소스 자바스크립트 프레임워크로 'Write Less, Do More' 컨셉을
가진 프레임워크입니다. DOM의 쉬운 조작에서부터, 쉽고 일관된 이벤트
처리, 각종 효과 기능 제공을 통한 쉬운 시각화 지원, 쉬운 Ajax 지원,
쉬운 내장형 객체의 확장까지 자바스크립트의 전반을 지원하는 프레임워크
입니다. jQuery UI라고 불리는 UI 기능을 포함해 jQuery 기반의 플러그인
라이브러리가 많습니다.
</p>
</div>
<div id="footer">
<p>
© 2014 T academy
</p>
</div>
</body>
</html> |
cs |
|
|
11강 셀렉터
1. 셀렉터
- jQuery의 셀렉터(selector)는 문서 내의 노드를 쉡게 식별하고 참조하기 위해 사용하는 기술로 CSS 셀렉터와 동일
- jQuery가 자체적으로 제공하는 필터도 있음
2. HTML 요소 접근과 jQuery 객체화
- jQuery에서는 $() 함수의 매개변수 값으로 셀렉터를 전달하면 셀렉터를 해석해 DOM에서 노드를 찾아 jQuery 객체로 변환해서 반환함
- 이 때 사용하는 셀렉터의 종류는 기본 셀렉터, 계층 셀렉터, 속성 셀렉터 그리고 필터 셀렉터가 있음
3. HTML 요소 접근과 jQuery 객체화 - 기본 셀렉터
$('*')
$('h3')
$('.content')
$('#message')
$('div, .header, #menu')
|
분류 |
셀렉터 |
기능 |
|
Basic(기본) |
* |
모든 요소를 선택 |
|
#id |
id값을 가진 요소를 선택 | |
|
.class |
class속성 값을 가진 요소를 선택 | |
|
element |
요소를 선택 | |
|
selector1, selector2, selector3 |
복수의 셀렉터 중 일치하는 것을 선택 |
4. HTML 요소 접근과 jQuery 객체화 - 계층 셀렉터
$('div#lectures li')
$('div>p')
$('#first + li')
$('#second ~ li')
- 자식은 바로 밑에 있는 요소를 의미하고
- 자손은 자식 밑에 있는 자식들의 요소까지를 포함한다.
- first, second는 다음 형제요소를 나타낼 때 사용한다
|
분류 |
셀렉터 |
기능 |
|
Hierarchy |
ancestor descendant |
ancestor 요소의 모든 자손 요소 descendant를 선택 |
|
parent > child |
parent 요소 자식 요소를 선택 | |
|
prev + next |
prev 요소 다음의 형제 요소 next를 선택 | |
|
prev ~ siblings |
prev 요소 다음의 형제 요소들 siblings를 선택 |
5. HTML 요소 접근과 jQuery 객체화 - 속성 셀렉터
$('div#lectures li[href='#lec03']')
$('div#reference li[href^='http://']')
$('[src][alt]')
- 속성 셀렉터의 큰 특징은 [] 안에 속성을 기술한다.
|
분류 |
셀렉터 |
기능 |
|
Attribute |
[attr] |
attr 속성을 가지는 요소를 선택 |
|
[attr=value] |
attr 속성 값이 value인 요소를 선택 | |
|
[attr!=value] |
attr 속성 값이 value가 아닌 요소를 선택 | |
|
[attr^=value] |
attr 속성 값이 value로 시작하는 요소를 선택 | |
|
[attr$=value] |
attr 속성 값이 value로 끝나는 요소를 선택 | |
|
[attr*=value] |
attr 속성 값에 value를 포함하는 요소를 선택 | |
|
[selector1][selector2][selector3] |
셀렉터에 일치하는 속성을 가지고 있는 요소를 선택 |
6. HTML 요소 접근과 jQuery 객체화 - 필터 셀렉터
|
분류 |
셀렉터 |
기능 |
|
Basic |
:animate |
show, hide, slideUp, slideDown 등의 명령으로 현재 애니메이션 중인 요소를 선택 |
|
:first |
첫번째 요소를 선택 | |
|
:last |
마지막 요소를 선택 | |
|
:not(selector) |
selector에 의해 선택된 요소들 이외의 것을 선택 | |
|
:even |
짝수번째의 요소를 선택 | |
|
:odd |
홀수번째 요소를 선택 | |
|
:eq(index) |
index와 같은 index의 요소를 선택 | |
|
:gt(index) |
index와 같은 index의 요소를 선택 | |
|
:lt(index) |
index와 같은 index의 요소를 선택 | |
|
:header |
h1, h2, ... 요소를 선택 | |
|
Content |
:contains(text |
text 문자열을 내용으로 가지고 있는 요소를 선택 |
|
:empty |
요소에 텍스트가 없을 경우 요소를 선택 | |
|
:has(selector) |
selector에 일치하는 자손 요소를 가지고 있는 요소를 선택 | |
|
:parent |
:empty와 반대로 요소에 텍스트가 있을 경우 선택 | |
|
Visibility |
:hidden |
보이지 않는 요소를 선택 |
|
:visible |
보이는 요소를 선택 | |
|
Child |
:nth-child(index) |
index번째 자식 요소를 선택. index는 1부터 시작함에 유의. |
|
:nth-child(even | odd) |
짝수/홀수번째 자식 요소를 선택 | |
|
:nth-child(Nn) |
N배수번째 자식 요소를 선택 | |
|
:first-child |
첫번째 자식 요소를 선택 | |
|
:last-child |
마지막 자식 요소를 선택 | |
|
:only-child |
자식 노드가 하나인 요소를 선택 | |
|
Forms |
:hidden |
숨겨진 입력 요소를 선택 |
|
:enabled |
사용 가능 상태에 있는 요소를 선택 | |
|
:disabled |
사용 불가능 상태에 있는 요소를 선택 | |
|
:checked |
체크 상태에 있는 요소를 선택 | |
|
:selected |
선택 상태에 있는 요소를 선택 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>11-01</title>
<style type="text/css">
div {
font-size: 12pt;
line-height: 16pt;
}
.header {
color: #000080;
font-size: 24pt;
}
.content {
color: #008000;
}
.footer {
color: #800080;
font-size: 14pt;
}
.evenitem {
background-color: #4596CE;
color: #FFFFFF;
}
.odditem {
background-color: #FFF5BA;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#header').addClass('header');
$('#content').addClass('content');
$('#footer').addClass('footer');
$('#list > div:nth-child(2n)').addClass('evenitem');
$('#list > div:nth-child(2n+1)').addClass('odditem');
var $elements = $('#list > div');
$('#message').text('전체 강좌 ' + $elements.length + '건');
var resultStr = '';
$('<h4>강좌</h4>').appendTo('#result');
$elements.each(function(index, element) {
resultStr = (index + 1) + '. ' + $(element).text();
$('#result').append(resultStr);
$('#result').append('<br/>');
});
});
</script>
</head>
<body>
<div id="header">
<p>
jQuery Selector
</p>
</div>
<div id="content">
<div>
<p id="message"></p>
</div>
<div id="list">
<div>
안드로이드
</div>
<div>
iOS
</div>
<div>
하이브리드 앱
</div>
<div>
모바일 앱 기획
</div>
<div>
UX
</div>
</div>
<div>
<p id="result"></p>
</div>
</div>
<div id="footer">
<p>
© 2012 T academy
</p>
</div>
</body>
</html> |
cs |
- 통상 JavaScript 와 jQuery를 분리하기 위해서 jQuery앞에 $를 붙여서 구분한다.
- appendTo는 어디에 붙여라 라는 뜻
|
11강끝 |
12강 jQuery 이벤트 처리
1. 이벤트 종류
|
구분 |
이벤트 |
설명 |
|
문서 로딩 |
ready |
해당 DOM 로딩이 완료되었을 때 |
|
마우스 |
click |
마우스로 클릭할 때 (자바스크립트 이벤트) |
|
dbclick |
마우스로 더블클릭할 때 (자바스크립트 이벤트) | |
|
focusin |
요소가 포커스를 얻을 때 | |
|
focusout |
요소가 포커스를 잃을 때(자바스크립트 이벤트 | |
|
hover |
mouseenter와 mouseleave를 하나로 묶음 | |
|
mouseenter |
요소 안으로 마우스가 들어왔을 때 (자식 노드에서는 이벤트 감지 안함) | |
|
mouseleave |
요소로부터 마우스가 벗어날 때(자식 노드에서는 이벤트 감지 안함) | |
|
mousedown |
마우스 버튼을 눌렀을 때(자바스크립트 이벤트) | |
|
mouseup |
마우스 버튼을 놓았을 때(자바스크립트 이벤트) | |
|
mousemove |
마우스의 포인터를 이동하였을 때(자바스크립트 이벤트) | |
|
mouseout |
요소로부터 마우스가 벗어날 때(자바스크립트 이벤트) | |
|
mouseover |
요소 안으로 마우스 포인터가 들어왔을 때(자바스크립트 이벤트) | |
|
키보드 |
keypress |
키를 눌렀을 때(자바스크립트 이벤트) |
|
keydown |
키를 누르고 있을 때(자바스크립트 이벤트) | |
|
keyup |
키를 떼었을 때(자바스크립트 이벤트) | |
|
focusin |
요소가 포커스를 얻을 때 | |
|
focusout |
요소가 포커스를 잃을 때(자바스크립트 이벤트) | |
|
폼 |
focus |
요소가 포커스를 얻을 때(자바스크립트 이벤트) |
|
blur |
요소가 포커스를 잃을 때(자바스크립트 이벤트) | |
|
change |
요소의 값이 변경되었을 때(자바스크립트 이벤트) | |
|
select |
사용자가 텍스트를 선택했을 때(자바스크립트 이벤트) | |
|
submit |
폼의 내용을 전송할 때(자바스크립트 이벤트) | |
|
웹브라우저 |
resize |
요소의 사이즈가 변경되었을 때(자바스크립트 이벤트) |
|
scroll |
스크롤할 때(자바스크립트 이벤트) |
2. 이벤트 등록 및 제거
- jQuery는 이벤트 처리에 있어 크로스 브라우징 제공
- 이벤트를 요소에 등록하기 위해선 먼저 셀렉터를 이용해 이벤트를 처리하고자 하는 요소를 찾아 jQuery 객체를 생성한 후, on(), one(), off() 메소드 등을 이용하여 특정 이벤트에 대한 이벤트 핸들러를 등록하거나 제거함
3. 이벤트 등록 - on() 메소드
- on()메소드는 현재 선택된 요소에 대해 하나 이상의 이벤트와 이벤트 핸들러 함수를 연결하는 메소드
.on(events [, selector] [, data], handler(event))
.on(events-map [, selector] [, data])
- events : 스페이스로 구분된 하나 이상의 이벤트 문자열립니다.
- selector : 셀렉터 문자열은 이벤트가 트리가 되는 현재 선택된 요소의 자손 요소를 필터링합니다. 만일 null 값을 갖거나 생략되면 현재 선택된 요소에 이벤트가 도달했을 때 트리거됩니다.
- data : 이벤트가 트리거 되면 handler 함수에서 event.data 프로퍼티로 참조할 수 있습니다.
- handler(event) : 이벤트가 트리거 되면 실행되는 이벤트 핸들러 함수입니다.
- events-map : 스페이스로 구분된 하나 이상의 이벤트 문자열과 이벤트 핸들러 함수를 키: 값으로 구성한 맵입니다.
$('p').on('click', function(){
alert( $(this).text() );
});
$('body').on("click", "p", function(){
alert( $(this).text() );
});
function myHandler(event) {
alert(event.data.foo);
};
$('p').on('click',{foo: 'bar'}, myHandler);
$('form').on('submit', false);
$('form').on('submit', function(event) {
event.preventDefault();
});
$('form').on('submit', function(event) {
event.stopPropagation();
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-01</title>
<style type="text/css">
.test {
color: #000;
padding: .5em;
border: 1px solid #444;
}
.active {
color: #900;
font-weight: bold;
}
.inside {
background-color: aqua;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.test").on({
click : function() {
$(this).toggleClass("active");
},
mouseenter : function() {
$(this).addClass("inside");
$(this).text("mouseenter");
},
mouseleave : function() {
$(this).removeClass("inside");
$(this).text("mouseleave");
}
});
});
</script>
</head>
<body>
<div class="test">
ready
</div>
</body>
</html> |
cs |
4. 이벤트 등록 - one() 메소드
- one() 메소드 역시 현재 선택된 요소에 대해 하나 이상의 이벤트와 이벤트 핸들러 함수를 연결하는 메소드이지만, on() 메소드와 달리 한 번만 실행
.one(events [, selector] [, data], handler(event))
.one(events-map [, selector] [, data])
- events : 스페이스로 구분된 하나 이상의 이벤트 문자열립니다.
- selector : 셀렉터 문자열은 이벤트가 트리가 되는 현재 선택된 요소의 자손 요소를 필터링합니다. 만일 null 값을 갖거나 생략되면 현재 선택된 요소에 이벤트가 도달했을 때 트리거됩니다.
- data : 이벤트가 트리거 되면 handler 함수에서 event.data 프로퍼티로 참조할 수 있습니다.
- handler(event) : 이벤트가 트리거 되면 실행되는 이벤트 핸들러 함수입니다.
- events-map : 스페이스로 구분된 하나 이상의 이벤트 문자열과 이벤트 핸들러 함수를 키: 값으로 구성한 맵입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-02</title>
<style type="text/css">
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
background: green;
border: 10px outset;
cursor: pointer;
}
p {
color: red;
margin: 0;
clear: left;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var n = 0;
$('div').one('click', function() {
var index = $('div').index(this);
$(this).css({
borderStyle : "inset",
cursor : "auto"
});
$('p').text(index + '번 인덱스에 있는 div가 클릭되었습니다.(총 ' + ++n + ' 번 클릭됨)');
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>
녹색 상자를 클릭하세요...
</p>
</body>
</html> |
cs |
5. 이벤트 제거 - off() 메소드
- off() 메소드는 현재 선택된 요소에 대해 하나 이상의 이벤트와 이벤트 핸들러 함수의 연결을 제거하는 메소드
.off(events [, selector] [, handler(event)])
.off(events-map [, selector])
- events : 스페이스로 구분된 하나 이상의 이벤트 문자열입니다.
- selector : 셀렉터 문자열은 현재 선택된 요소의 자손 요소를 필터링합니다.
- handler(event) : 이벤트와 연결을 제거하고자 하는 하나 이상의 이벤트에 연결되어 있는 이벤트 핸들러 함수입니다.
- events-map : 이벤트와 연결을 제거하고자 하는 스페이스로 구분된 하나 이상의 이벤트 문자열과 이벤트 핸들러 함수를 키 : 값으로 구성한 맵입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-03</title>
<style type="text/css">
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function() {
$("body").on("click", "#theone", aClick).find("#theone").text("이 버튼에 클릭 기능이 추가되었습니다...");
});
//body태그안에서 #theone이라는 아이디가 click이 되었을 때 aClick을 실행해라
$("#unbind").click(function() {
$("body").off("click", "#theone", aClick).find("#theone").text("이 버튼은 클릭 기능이 제거되었습니다...");
});
});
</script>
</head>
<body>
<button id="theone">
이 버튼은 클릭 기능이 제거되었습니다...
</button>
<button id="bind">
클릭 기능 추가
</button>
<button id="unbind">
클릭 기능 제거
</button>
<div style="display:none;">
버튼이 클릭되었습니다!
</div>
</body>
</html> |
cs |
6. 이벤트 취소와 이벤트 전파 차단
- jQuery에서 이벤트 처리를 위해 이벤트 핸들러로 등록된 콜백함수가 호출될 때 인자로 jQuery 이벤트 객체가 전달되는데 이 이벤트 객체를 이용하면 쉽게 이벤트의 흐름을 제어할 수 있음
- 요소의 기본 액션을 취소하기 위해선 이벤트 등록 함수( on(), one() )의 콜백함수에 전달되는 jQuery이벤트 객체의 preventDefault()메소드를 호출함
- 특정 요소에서 발생한 이벤트의 버블링을 차단하기 위해선 이벤트 등록 함수( on(), one() )의 콜백함수에 전달되는 jQuery 이벤트 객체의 stopPropagation() 메소드를 호출함
$('form').on('submit', function(event){
...
event.preventDefault(); //form에 작성한 내용을 서버로 보내지 않겠다는 뜻
})
$('body').on('click', 'a', function(event){
...
event.preventDefault();//a링크의 링크기능이 비활성화됨
})
$('p').click(function(event){
event.stopPropagation(); //클릭 이벤트가 Bubbling되는 것을 방지하는 기능
...
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-04</title>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function(event) {
event.preventDefault();
$('<div/>').append('<a> 태그의 기본 ' + event.type + ' 액션이 취소되어 있습니다.').appendTo('#log');
});
});
</script>
</head>
<body>
<a href="http://jquery.com">jquery.com</a>
<div id="log"></div>
</body>
</html> |
cs |
JavaScript 이벤트에서 했던 코드를 jQuery로 변경한 소스 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>12-05</title>
<style type="text/css">
div {
cursor: pointer;
}
div#inner {
background-color: #adff2f;
}
div#outer {
background-color: #dda0dd;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#outer').click(function(event) {
$('<div/>').append('외부 div를 클릭하였습니다.').appendTo('#log');
});
$('#inner').on('click', function(event) {
event.stopPropagation();
//inner 이벤트를 클릭했을 때 outer 이벤트가 발생할 수 있으니
//이를 방지하기 위해서 event.stopPropagation()을 작성한 후
//추가로 이벤트를 작성하였음.
$('<div/>').append('내부 div를 클릭하였습니다.').appendTo('#log');
});
});
</script>
</head>
<body>
<div id="outer">
외부영역을
<div id="inner">
내부 영역을 클릭해 보세요!!!
</div>
클릭해보세요!!!
</div>
<div id="log"></div>
</body>
</html> |
cs |
|
12강끝 |
13강 jQuery 효과
1. 기본효과
- 기본효과는 HTML 요소를 보이거나 감추는 기능
- hide() 메소드는 요소에 대해 display:none을 적용하고, show()는 display:block 또는 display:inline을 적용함
- hide(), show(), toggle() 메소드를 사용하면 요소의 display 속성값을 jQuery 데이터 캐시에 저장해 두기 때문에 복원 시 display 설정을 이전 값으로 돌려줌
- hide() 메소드는 요소가 사라지는 애니메이션 효과를 주기 위해 사용
.hide()
.hide( duration [, callback] )
.hide( [duration] [, easing] [, callback] )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
- show() 메소드는 요소가 나타나는 애니메이션 효과를 주기 위해 사용
.show()
.show( duration [, callback] )
.show( [duration] [, easing] [, callback] )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
- toggle() 메소드는 show()와 hide()를 번갈아 실행시켜 애니메이션 효과를 주기 위해 사용
.toggle( duration [, callback] )
.toggle( [duration] [, easing] [, callback] )
.toggle( showOrHide )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
- showOrHide : 요소를 나타낼 것인지(true), 숨길 것인지(false) 알려주는 불리언 값입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>13-01</title>
<script src="js/jquery-1.11.1.js"></script>
<style type="text/css">
div.card {
background: #ece023;
width: 30px;
height: 40px;
margin: 2px;
float: left;
line-height: 2;
text-align: center;
font-weight: bold;
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#show").click(function() {
$("div.card").first().show("fast", function showCard() {
$(this).next("div.card").show("fast", showCard);
});
});
$("#hide").click(function() {
$("div.card").last().hide("fast", function hideCard() {
$(this).prev("div.card").hide("fast", hideCard);
});
});
});
</script>
</head>
<body>
<div>
<button id="show">
보이기
</button>
<button id="hide">
감추기
</button>
</div>
<div>
<div class="card">
1
</div>
<div class="card">
2
</div>
<div class="card">
3
</div>
<div class="card">
4
</div>
<div class="card">
5
</div>
</div>
</body>
</html> |
cs |
2. 페이딩
- 페이딩은 HTML 요소의 불투명도(opacity)를 조절하는 기능으로 fadeIn(), fadeOut(), fadeToggle(), fadeTo() 메소드를 사용해 요소를 점점 밝게 또는 점점 흐리게 보이도록 조절함
- fadeIn() 메소드는 요소가 display:none일 경우 display:block 또는 display:inline으로 복원하고, opacity를 0에서 1로 변경하여 서서히 나타나는 애니메이션 효과를 주기 위해 사용
.fadeIn( duration [, callback] )
.fadeIn( [duration] [, easing] [, callback] )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
- fadeOut() 메소드는 opacity를 1에서 0으로 변경하고, 모두 사라지면 display:none으로 변경해 서서히 사라지는 애니메이션 효과를 주기 위해 사용
.fadeOut( duration [, callback] )
.fadeOut( [duration] [, easing] [, callback] )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
- fadeToggle() 메소드는 fadeIn()과 fadeOut()를 번갈아 실행시켜 애니메이션 효과를 주기 위해 사용
.fadeToggle( [duration] [, easing] [, callback] )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
- fadeTo()메소드는 0~1 사이의 값을 가진 불투명도(opacity)를 지정하여 서서히 사라지거나 나타나는 애니메이션 효과를 주기 위해 사용
.fadeTo( duration, opacity [, callback] )
.fadeTo( duration, opacity [, easing] [, callback] )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- opacity : 0~1 사이의 불투명도를 나타내는 숫자 값입니다.
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>13-02</title>
<script src="js/jquery-1.11.1.js"></script>
<style type="text/css">
.pictframe {
color: #AAAAAA;
border: 1px solid #444;
width: 302px;
height: 400px;
}
#image {
position: relative;
width: 302px;
height: 400px;
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#fadein").click(function() {
$("#image").fadeIn(3000);
});
$("#fadeout").click(function() {
$("#image").fadeOut(3000);
});
});
</script>
</head>
<body>
<div class="pictframe">
<img src="alaskan_malamute.jpg" id="image" />
</div>
<div>
<button id="fadein">
페이드인
</button>
<button id="fadeout">
페이드아웃
</button>
</div>
</body>
</html> |
cs |
3. 슬라이딩
- 슬라이딩은 HTML 요소의 높이를 조절하여 접었다 폈다(collapsible)할 수 있는 기능
- slideDown(), slideUp(), slideToggle() 메소드를 이용해 아코디언(accordian) 혹은 네비게이션 등에 많이 사용
- 이미지를 사용할 경우엔 반드시 블록 요소에 감싸서 블록 요소에 슬라이딩 효과를 주어야 애니메이션 진행 과정에서 픽셀 깨짐 현상들이 발생하지 않음
- slideDown() 메소드는 요소의 높이를 0에서 원래 값으로 변경하면서 펼치는 애니메이션 효과를 주기 위해 사용
.slideDown( [duration] [, callback] )
.slideDown( [duration] [, easing] [, callback] )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
- slideUp() 메소드는 요소의 높이를 현재 높이에서 0으로 변경하면서 접히는 애니메이션 효과를 주기 위해 사용
- slideUp() 메소드가 수행을 완료하면 요소는 display:none 상태가 됨
.slideUp( [duration] [, callback] )
.slideUp( [duration] [, easing] [, callback] )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
- slideToggle 메소드는 slideUp()과 slideDown()을 번갈아 실행시켜 애니메이션 효과를 주기 위해 사용
.slideToggle( [duration] [, callback] )
.slideToggle( [duration] [, easing] [, callback] )
- duration : 애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. 'slow', 'normal', 'fast' 문자열을 사용할 수 있습니다. (각각 200, 400, 600)
- callback : 애니메이션이 끝났을 때 호출되는 함수입니다.
- easing : 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>13-03</title>
<script src="js/jquery-1.11.1.js"></script>
<style type="text/css">
body {
width: 360px;
}
.header {
color: #000080;
font-size: 24pt;
}
.content {
color: #008000;
}
.footer {
color: #800080;
font-size: 14pt;
}
ul#menubar {
width: 360px;
}
ul#menubar, ul#menubar ul {
text-indent: 10px;
list-style: none;
padding: 0;
}
li.menu {
margin-bottom: 2px;
}
div.menuitem {
height: 32px;
line-height: 2;
background: #6b8e23;
color: #ffffff;
font-weight: bold;
cursor: pointer;
}
ul.submenuitem li {
height: 32px;
line-height: 2;
background-color: #f5f5dc;
cursor: pointer;
}
ul.submenuitem li a {
color: #000000;
text-decoration: none;
overflow: hidden;
display: block;
width: 100%;
height: 100%;
}
ul.submenuitem li:hover {
background: #f0e68c;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#header').addClass('header');
$('#content').addClass('content');
$('#footer').addClass('footer');
$('.submenuitem').hide();
$('div.menuitem').bind('click', function() {
if ($(this).next().css('display') == 'none') {
$('.submenuitem').slideUp();
}
$(this).next().slideDown();
});
});
</script>
</head>
<body>
<div id="header">
<p>
jQuery Effect
</p>
</div>
<div id="content">
<ul id="menubar">
<li class="menu">
<div class="menuitem">
Andoird
</div>
<ul class="submenuitem">
<li>
<a href="#">Android 네트워크 고급활용</a>
</li>
<li>
<a href="#">Android를 위한 Advanced Java</a>
</li>
<li>
<a href="#">Android 기반의 모바일 게임 프로그래밍</a>
</li>
</ul>
</li>
<li class="menu">
<div class="menuitem">
iOS
</div>
<ul class="submenuitem">
<li>
<a href="#">iPhone을 위한 Objective-C</a>
</li>
<li>
<a href="#">iPhone 애플리케이션 프로그래밍</a>
</li>
</ul>
</li>
<li class="menu">
<div class="menuitem">
하이브리드 앱
</div>
<ul class="submenuitem">
<li>
<a href="#">웹 기술을 활용한 하이브리드 앱 프로그래밍</a>
</li>
<li>
<a href="#">HTML5 활용을 위한 자바스크립트</a>
</li>
<li>
<a href="#">HTML5와 CSS3를 활용한 모바일 웹 프로그래밍</a>
</li>
</ul>
</li>
<li class="menu">
<div class="menuitem">
모바일 앱 기획
</div>
<ul class="submenuitem">
<li>
<a href="#">논리적 사고와 기획안 작성</a>
</li>
<li>
<a href="#">모바일 웹 앱 동향</a>
</li>
<li>
<a href="#">모바일 서비스 기획</a>
</li>
<li>
<a href="#">앱 아이디어 도출 및 사업기획서 작성</a>
</li>
</ul>
</li>
<li class="menu">
<div class="menuitem">
UX
</div>
<ul class="submenuitem">
<li>
<a href="#">모바일 디자인을 위한 Photoshop Skill-Up</a>
</li>
<li>
<a href="#">Mobile UX Insight</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>
© 2014 T academy
</p>
</div>
</body>
</html> |
cs |
|
13강끝 |
14강 jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바
1. 단일 페이지와 다중 페이지에서 페이지 전환
- jQuery Mobile은 웹을 근간으로 하는 기술이기 때문에 화면 간의 전환에 HTML의 링크 <a>태그를 이용함
- jQuery Mobile은 단일 HTML 페이지 내에서 data-role="page"속성을 가진 여러 태그들을 페이지 컨테이너로 사용하며, 가장 먼저 기술한 페이지 컨테이너를 보여줌
- 나머지 페이지 컨테이너는 표시되지 않으며, 특정 페이지 컨테이너로의 전환은 <a> 태그의 href 속성의 id 셀렉터를 통해 이루어짐
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>14-01</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <!-- 첫 번째 페이지 시작 --> <div data-role="page" id="page1"> <div data-role="header"> <h3>첫 번째 페이지 헤더</h3> </div> <div data-role="content"> <p> 첫 번째 페이지 내용 </p> <p> <a href="#page2">두 번째 (내부)페이지 전환</a> </p> <p> <a href="14-02.html">세 번째 (외부)페이지 전환</a> </p> </div> <div data-role="footer"> <h4>첫 번째 페이지 풋터</h4> </div> </div> <!-- 첫 번째 페이지 끝 --> <!-- 두 번째 페이지 시작 --> <div data-role="page" id="page2" data-add-back-btn="true"> <div data-role="header"> <h3>두 번째 페이지 헤더</h3> </div> <div data-role="content"> <p> 두 번째 (내부)페이지 내용 </p> </div> <div data-role="footer"> <h4>두 번째 페이지 풋터</h4> </div> </div> <!-- 두 번째 페이지 끝 --> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="en"> <head> <title>14-02</title> </head> <body> <p> 이 내용은 jQuery Mobile에 의해 DOM에 추가되지 않습니다. </p> <!-- 세 번째 페이지 시작 --> <div data-role="page" id="page3" data-add-back-btn="true"> <div data-role="header"> <h3>세 번째 (외부)페이지 헤더</h3> </div> <div data-role="content"> <p> 세 번째 (외부)페이지 내용 </p> </div> <div data-role="footer"> <h4>세 번째 (외부)페이지 풋터</h4> </div> </div> <!-- 세 번째 페이지 끝 --> </body> </html> | cs |
2. 페이지 전환 애니메이션
효과 |
특징 |
fade |
페이드인/페이드아웃 효과를 적용합니다. |
pop |
화면 가운데서 페이지가 확대되며 나타납니다. |
flip |
화면 가운데 Y축을 기준으로 360도 회전하면서 나타납니다. |
turn |
화면 좌측의 Y축을 기준으로 360도 회전하면서 나타납니다. |
flow |
이전 화면은 밑으로 빠져 흘러가 사라지고, 새로운 화면이 흘러가다 밑에서 올라옵니다. |
slidefade |
좌우 슬라이딩과 페이드 효과가 함께 적용됩니다. |
slide |
좌우 슬라이딩 효과가 적용됩니다. |
slideup |
페이지가 위로 슬라이딩됩니다. |
slidedown |
페이지가 아래로 슬라이딩됩니다. |
- 페이지 전환 애니메이션을 설정하려면 <a> 태그에 data-transition 속성 값으로 효과 이름을 기술
- 아무런 설정을 하지 않았다면 fade가 적용
- <a> 요소에 대해 data-rirection 속성 값을 "reverse"로 설정하면 적용된 애니메이션 방향과 반대 방향의 효과를 줌
- 왼쪽으로 슬라이딩하는 slide의 경우 data-direction 속성에 "reverse"를 설정하면 페이지가 오른쪽으로 슬라이딩함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>14-03</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <!-- 첫 번째 페이지 시작 --> <div data-role="page" id="page1"> <div data-role="header"> <h3>첫 번째 페이지 헤더</h3> </div> <div data-role="content"> <p> 첫 번째 페이지 내용 </p> <p> <a href="#page2" data-transition="slide">두 번째 페이지 전환</a> </p> </div> <div data-role="footer"> <h4>첫 번째 페이지 풋터</h4> </div> </div> <!-- 첫 번째 페이지 끝 --> <!-- 두 번째 페이지 시작 --> <div data-role="page" id="page2"> <div data-role="header"> <h3>두 번째 페이지 헤더</h3> </div> <div data-role="content"> <p> 두 번째 페이지 내용 </p> <p> <a href="#page1" data-transition="slide" data-direction="reverse">첫 번째 페이지 전환</a> </p> </div> <div data-role="footer"> <h4>두 번째 페이지 풋터</h4> </div> </div> <!-- 두 번째 페이지 끝 --> </body> </html> | cs |
3, 페이지 돌아가기
- 첫 번째로 페이지 컨테이너에 data-add-back-btn="true"속성을 기술하면 자동으로 헤더 좌측에 Back 버튼이 생성
- data-back-btn-text와 data-back-btn-theme 속성을 설정해 텍스트와 적용 테마를 변경할 수 있음
- 두 번째로 <a> 태그의 data-rel 속성에 "back" 값을 지정
- href 속성을 직접 지정하는 것보다 data-rel="back" 속성을 기술해 사용할 것을 권장함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>14-04</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <!-- 첫 번째 페이지 시작 --> <div data-role="page" id="page1"> <div data-role="header"> <h3>첫 번째 페이지 헤더</h3> </div> <div data-role="content"> <p> 첫 번째 페이지 내용 </p> <p> <a href="#page2" data-transition="slide">두 번째 페이지 전환</a> </p> </div> <div data-role="footer"> <h4>첫 번째 페이지 풋터</h4> </div> </div> <!-- 첫 번째 페이지 끝 --> <!-- 두 번째 페이지 시작 --> <div data-role="page" id="page2" data-add-back-btn="true"> <div data-role="header"> <h3>두 번째 페이지 헤더</h3> </div> <div data-role="content"> <p> 두 번째 페이지 내용 </p> <p> <a data-rel="back">첫 번째 페이지로 돌아가기</a> </p> </div> <div data-role="footer"> <h4>두 번째 페이지 풋터</h4> </div> </div> <!-- 두 번째 페이지 끝 --> </body> </html> | cs |
4. 페이지 테마 적용하기
- jQuery Mobile은 기본 테마에 a(black), b(blue), c(gray), d(dark gray), e(yellow)까지 5개의 스왓치를
- data-role="page" 속성을 가지고 있는 페이지 컨테이너의 data-theme 속성에 5개의 값 중 하나를 정하면 기본 테마 색상이 변경됨
5. 기본 버튼과 옵션
- jQuery Mobile에서 버튼은 <a> 태그나 <button>, <input>태그를 사용해 만듭니다.
- <a>태그를 버튼으로 만들기 위해서는 data-role="button" 속성을 추가하면 됩니다.
옵션 |
특징 |
data-mini |
기본값 false, true 일 경우 버튼의 세로 높이와 글자의 크기를 작게 합니다. |
data-inline |
기본값 false, true일 경우 버튼의 폭을 텍스트에 맞춰 줄입니다. |
data-corner |
기본값 true, false일 경우 버튼의 모서리를 직각으로 만듭니다. |
data-shadow |
기본값 true, false일 경우 버튼의 그림자 스타일을 적용하지 않습니다. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>14-05</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h3>jQuery Mobile : Button</h3> </div> <div data-role="content"> <a href="#" data-role="button">Link Button</a> <a href="#" data-role="button" class="ui-disabled">Link Button (disabled)</a> <a href="#" data-role="button" data-mini="true">Link Button (mini)</a> <a href="#" data-role="button" data-inline="true">Link Button (inline)</a> <button> Button element </button> <input type="button" value="Button" /> <input type="submit" value="Submit Button" /> <input type="reset" value=" Reset Button" /> </div> <div data-role="footer"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
6. 아이콘 적용하기
- jQuery Mobile 에서는 버튼에 아이콘을 추가하기 위해서 data-icon 속성에 값을 추가하면 됨
- 아이콘은 기본적으로 왼쪽에 위치하며, 위치를 변경하기 위해 data-iconpos 속성 값으로 left, right, top, button 값을 사용하여 변경함
- data-iconpos 속성에 "notext" 값을 설정하면 아이콘만 있고 텍스트는 없는 버튼이 표시됨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>14-06</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h3>jQuery Mobile : Button</h3> </div> <div data-role="content"> <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top"> data-iconpos="top"</a> <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left"> data-iconpos="left"</a> <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right"> data-iconpos="right"</a> <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom"> data-iconpos="bottom"</a> <a href="#" data-role="button" data-icon="star" data-iconpos="notext"> data-iconpos="star"</a> </div> <div data-role="footer"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
7. 그룹버튼 만들기
- 여러 버튼을 <div> 태그로 묶고 data-role="controlgroup" 속성을 기술하면 세로로 그룹화된 버튼이 생성됨
- <div> 태그에 data-type="horizontal"속성을 추가하고 각 버튼에 data-line="true"를 지정하면 가로 방향의 그룹버튼을 만들 수 있음
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>14-07</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h3>jQuery Mobile : Button</h3> </div> <div data-role="content"> <div data-role="controlgroup"> <a href="#" data-role="button" data-icon="check">Yes</a> <a href="#" data-role="button" data-icon="delete">No</a> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="check" data-inline="true">Yes</a> <a href="#" data-role="button" data-icon="delete" data-inline="true">No</a> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="check" data-inline="true" data-mini="true">Yes</a> <a href="#" data-role="button" data-icon="delete" data-inline="true" data-mini="true">No</a> </div> </div> <div data-role="footer"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
8. 버튼에 테마 적용하기
- jQuery Mobile은 기본 테마에 a(black), b(blue), c(gray), d(dark gray), e(yellow)까지 5개의 스왓치를 제공
- 버튼에 data-theme 속성에 5개의 값 중 하나를 정하면 기본 테마 색상이 변경됨
9. 헤더 바와 풋터 바
- data-role="header" 속성을 가진 태그를 헤더 바(header bar)
- data-role="footer" 속성을 가진 태그를 풋터 바(footer bar)
- 헤더 바 안에는 <a> 태그를 최대 두 개까지 가질 수 있는데 먼저 기술된 <a> 태그는 좌측 버튼으로, 나중에 기술된 <a> 태그는 우측 버튼으로 생성됨
- 헤더 바 안에 <a> 태그 한 개가 있을 경우 <a> 태그에 class="ui-btn-right" 속성을 적용해 우측 버튼으로 만들 수도 있음
- 풋터 바는 풋터 바 내에 <a> 태그를 여럿 추가할 수 있지만 폭을 벗어나면 행을 바꿔 추가하게 됨
- 풋터 바는 추가된 내용들을 왼쪽 정렬하기 때문에 가운데 정렬을 고려할 필요가 있음
- 헤더 바와 풋터 바는 컨텐트 영역의 내용이 많아 스크롤이 되면 위 아래로 사라지는데 이를 방지하기 위해선 data-position="fixed" 속성을 기술하면 해결됨
- 컨텐트 영역을 탭 하는 순간 헤더 바와 풋터 바를 슬라이딩 애니메이션을 통해 위 아래로 사라지게 하려면 data-fullscreen="true" 속성을 주면 됨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>14-08</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <style type="text/css"> .footer { text-align: center; } </style> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header" data-position="fixed"> <h3>시인의 마을</h3> <a href="#" data-icon="delete">취소</a> <a href="#" data-icon="check">저장</a> </div> <div data-role="content"> <h3>희망을 만드는 사람이 되라</h3> <p> 이 세상 사람들 모두 잠들고 어둠속에 갇혀서 꿈조차 잠이 들 때 홀로 일어난 새벽을 두려워말고 별을 보고 걸어가는 사람이 되라 희망을 만드는 사람이 되라 </p> <p> 겨울밤은 깊어서 눈만 내리고 돌아갈 길 없는 오늘 눈오는 밤도 하루의 일을 끝낸 작업장 부근 촛불도 꺼져가는 어두운 방에서 슬픔을 사랑하는 사람이 되라 희망을 만드는 사람이 되라 </p> <p> 절망도 없는 이 절망의 세상 슬픔도 없는 이 슬픔의 세상 사랑하며 살아가면 봄눈이 온다. 눈 맞으며 기다리던 기다림 만나 눈 맞으며 그리웁던 기다림 만나 얼씨구나 부등켜안고 웃어 보아라 절씨구나 뺨 부비며 울어 보아라 </p> <p> 별을 보고 걸어가는 사람이 되어 희망을 만드는 사람이 되어 봄 눈 내리는 보리밭 길 걷는 자들은 누구든지 달려와서 가슴 가득히 꿈을 받아라 꿈을 받아라. </p> <p> 정호승 </p> </div> <div data-role="footer" data-position="fixed" class="footer"> <a href="#" data-icon="plus">추가</a> <a href="#" data-icon="arrow-u">위로</a> <a href="#" data-icon="arrow-d">아래로</a> </div> </div> </body> </html> | cs |
10. 네비게이션 바
- 네비게이션 바는 data-role ="navbar" 속성을 태그에 추가해 사용
- 네비게시션 바는 헤더 바나 풋터 바에 포함될 수 있는 탭 형태의 버튼 그룹
- 초기 활성화 버튼을 표시하고자 하면 <a> 태그에 class="ui-btn-active" 속성을 지정하면 됨
- 기본적으로 아이콘의 위치는 top이고, 일괄적으로 아이콘의 위치를 변경하려면 data-role="navbar" 속성을 가진 태그에 data-iconpos 속성을 추가하면 됨
- 한 행에 최대 5개까지 탭 버튼을 추가할 수 있으며 5개를 넘어가면 순서대로 한 행에 두개씩 여러 행으로 탭 버튼을 배치함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>14-09</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header" data-position="fixed"> <h3>header</h3> <a href="#" data-icon="gear" class="ui-btn-right">Options</a> <div data-role="navbar"> <ul> <li> <a href="#">One</a> </li> <li> <a href="#">Two</a> </li> <li> <a href="#">Three</a> </li> </ul> </div> </div> <div data-role="content"> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li> <a href="#" data-icon="grid">Summary</a> </li> <li> <a href="#" data-icon="star">Favs</a> </li> <li> <a href="#" data-icon="gear">Setup</a> </li> </ul> </div> </div> </div> </body> </html> | cs |
11. 툴바에 테마 적용하기
- jQuery Mobile은 기본 테마에 a(black), b(blue), c(gray), d(dark gray), e(yellow)까지 5개의 스왓치를 제공
- 버튼에 data-theme 속성에 5개의 값 중 하나를 정하면 기본 테마 색상이 변경됨
14강끝 |
15강 jQuery Mobile 컴포넌트 - 리스트 뷰
1. 리스트 뷰
- jQuery Mobile에서는 리스트뷰(Listview)라는 리스트를 표시하는 UI를 제공
- 리스트는 <ul>, <ol> 태그를 기반으로 만들며, data-role="list view"속성을 추가하면 스마트 디바이스에 최적화된 리스트를 제공함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-01</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header" data-position="fixed"> <h3>리스트 뷰</h3> </div> <div data-role="content"> <ul data-role="listview"> <li> <a href="15-02.html" data-transition="slide">연결된 리스트</a> </li> <li> <a href="15-03.html" data-transition="slide">일련번호를 가진 리스트</a> </li> <li> <a href="15-04.html" data-transition="slide">중첩 리스트</a> </li> <li> <a href="15-05.html" data-transition="slide">스플릿 버튼 리스트</a> </li> <li> <a href="15-06.html" data-transition="slide">리스트 디바이더</a> </li> <li> <a href="15-07.html" data-transition="slide">카운트 버블</a> </li> <li> <a href="15-08.html" data-transition="slide">썸네일 리스트</a> </li> <li> <a href="15-09.html" data-transition="slide">아이콘 리스트</a> </li> <li> <a href="15-10.html" data-transition="slide">리스트 형식 적용</a> </li> <li> <a href="15-11.html" data-transition="slide">인셋 스타일</a> </li> <li> <a href="15-12.html" data-transition="slide">검색 필터 적용</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
2. 연결된 리스트
- 리스트의 항목 <li>태그 안에 <a> 태그를 입력하면 오른쪽 끝에 화살표가 표시가 되는 연결된 리스트(linked list)가 생성됨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-02</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="linkedlist" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>연결된 리스트</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#">item #1</a></li> <li><a href="#">item #2</a></li> <li><a href="#">item #3</a></li> <li><a href="#">item #4</a></li> <li><a href="#">item #5</a></li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
3. 일련번호를 가진 리스트
- <ol> 기반의 리스트를 구성하면 일련번호가 표시되는 리스트 생성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-03</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="numberedlist" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>일련번호를 가진 리스트</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ol data-role="listview"> <li> <a href="#">item #1</a> </li> <li> <a href="#">item #2</a> </li> <li> <a href="#">item #3</a> </li> <li> <a href="#">item #4</a> </li> <li> <a href="#">item #5</a> </li> </ol> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
4. 중첩 리스트
- 리스트의 항목<li> 안에 중첩된 <ul> 또는 <ol> 기반의 연결 리스트를 구성할 수 있는데, 하위 리스트에는 상위 리스트에서 선택한 항목이 헤더에 표시되고, 기본적으로 테마 b가 적용됨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-04</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="nestedlist" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>중첩 리스트</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview"> <li> item #1 <ul> <li> <a href="#nestedlist">child item #1</a> </li> <li> <a href="#nestedlist">child item #2</a> </li> <li> <a href="#nestedlist">child item #3</a> </li> </ul> </li> <li> item #2 <ul> <li> <a href="#nestedlist">child item #1</a> </li> <li> <a href="#nestedlist">child item #2</a> </li> <li> <a href="#nestedlist">child item #3</a> </li> </ul> </li> <li> item #3 <ul> <li> <a href="#nestedlist">child item #1</a> </li> <li> <a href="#nestedlist">child item #2</a> </li> <li> <a href="#nestedlist">child item #3</a> </li> </ul> </li> <li> item #4 <ul> <li> <a href="#nestedlist">child item #1</a> </li> <li> <a href="#nestedlist">child item #2</a> </li> <li> <a href="#nestedlist">child item #3</a> </li> </ul> </li> <li> item #5 <ul> <li> <a href="#nestedlist">child item #1</a> </li> <li> <a href="#nestedlist">child item #2</a> </li> <li> <a href="#nestedlist">child item #3</a> </li> </ul> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
5. 스플릿 버튼 리스트
- 리스트의 항목 <li> 태그에 <a> 태그를 2개 작성하면 스플릿 버튼 리스트(split button list)가 생성됨
- 스플릿 버튼 리스트는 첫번째 <a> 태그의 텍스트는 출력하고, 두번째 <a> 태그는 연결 아이콘만 표시됨
- 리스트에 data-split-icon 속성을 추가해 아이콘을 변경할 수 있고, data-split-theme 속성으로 아이콘의 테마(기본은 테마 b)를 변경할 수 있음
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-05</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="splitbuttonlist" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>스플릿 버튼 리스트</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview" data-split-icon="gear" data-split-theme="a"> <li> <a href="#">item #1</a><a href="#"></a> </li> <li> <a href="#">item #2</a><a href="#"></a> </li> <li> <a href="#">item #3</a><a href="#"></a> </li> <li> <a href="#">item #4</a><a href="#"></a> </li> <li> <a href="#">item #5</a><a href="#"></a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
6. 리스트 디바이더
- 리스트의 <li> 태그에 data-role="list-divider" 속성을 추가하면 리스트 디바이더(list divider)를 생성
- 리스트 디바이더는 주로 카테고리나 제목을 표시하는 경우 많이 사용함
- 리스트에 data-dividertheme 속성을 추가해 리스트 디바이더의 테마(기본 테마 B)를 변경할 수 있음
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-06</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="listdivider" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>리스트 디바이더</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider"> title </li> <li> <a href="#">item #1</a> </li> <li> <a href="#">item #2</a> </li> <li data-role="list-divider"> title </li> <li> <a href="#">item #3</a> </li> <li> <a href="#">item #4</a> </li> <li> <a href="#">item #5</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
7. 카운트 버블
- 리스트의 <li> 태그 내의 <span> 영역에 class="ui-li-count" 속성을 추가하면 항목의 오른쪽에 카운트 버블(count bubble)을 표시함
- 주로 새로운 소식의 건수 혹은 신규 등을 표시하는데 사용
- 리스트에 data-count-theme 속성을 추가해 카운트 버블의 테마를 변경할 수 있음
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-07</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="countbubble" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>카운트 버블</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview" data-count-theme="a"> <li> <a href="#">item #1<span class="ui-li-count">New</span></a> </li> <li> <a href="#">item #2<span class="ui-li-count">0</span></a> </li> <li> <a href="#">item #3<span class="ui-li-count">15</span></a> </li> <li> <a href="#">item #4<span class="ui-li-count">7</span></a> </li> <li> <a href="#">item #5<span class="ui-li-count">11</span></a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
8. 썸네일 리스트
- 리스트의 <li> 태그 안에 <img> 태그를 사용하면 왼쪽에 이미지가 표시되는 썸네일 리스트(thumbnail list)를 만들 수 있음
- 썸네일 리스트는 왼쪽 영역에 가로 80px, 세로 80px로 이미지를 표시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-08</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="thumbnaillist" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>썸네일 리스트</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview"> <li> <a href="#"><img src="alaskan_malamute.jpg" />item #1</a> </li> <li> <a href="#"><img src="goldenretriever_puppies.jpg" />item #2</a> </li> <li> <a href="#"><img src="goldenretriever_puppy.jpg" />item #3</a> </li> <li> <a href="#"><img src="samoyed.jpg" />item #4</a> </li> <li> <a href="#"><img src="samoyed_puppy.jpg" />item #5</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
9. 아이콘 리스트
- 리스트의 <li> 태그 안에 <img> 태그에 class="ui-li-icon" 속성을 추가하면 아이콘처럼 더 작은 이미지로 표시되는 아이콘 리스트를 만들 수 있음
- 아이콘 리스트는 왼쪽 영역에 가로 16px, 세로 16px로 이미지를 표시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-09</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="iconlist" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>아이콘 리스트</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview"> <li> <a href="#"><img src="alaskan_malamute_16X16.jpg" class="ui-li-icon"/>item #1</a> </li> <li> <a href="#"><img src="goldenretriever_puppies_16X16.jpg" class="ui-li-icon" />item #2</a> </li> <li> <a href="#"><img src="goldenretriever_puppy_16X16.jpg" class="ui-li-icon" />item #3</a> </li> <li> <a href="#"><img src="samoyed_16X16.jpg" class="ui-li-icon" />item #4</a> </li> <li> <a href="#"><img src="samoyed_puppy_16X16.jpg" class="ui-li-icon" />item #5</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
10. 컨텐트 형식 적용하기
- 리스트 내의 <li> 태그에 <h#>, <p>, <strong>과 같은 태그들을 이용해서 형식을 적용할 수 있으며, <p> 와 같은 태그에 class="ui-li-aside" 속성을 추가하여 오른쪽 상단에 표시되게 할 수도있음
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-10</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="listformatting" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>리스트 형식 적용</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview" data-dividertheme="a" data-count-theme="b"> <li data-role="list-divider" > 2014년 6월 19일<span class="ui-li-count" >3</span> </li> <li> <a href="#"> <p class="ui-li-aside"> <strong>12:47 오후</strong> </p> <h3>title #1</h3> <p> <strong>subject #1</strong> </p> <p> description #1 </p> </a> </li> <li> <a href="#"> <p class="ui-li-aside"> <strong>10:13 오전</strong> </p> <h3>title #2</h3> <p> <strong>subject #2</strong> </p> <p> description #2 </p> </a> </li> <li> <a href="#"> <p class="ui-li-aside"> <strong>07:45 오전</strong> </p> <h3>title #3</h3> <p> <strong>subject #3</strong> </p> <p> description #3 </p> </a> </li> <li data-role="list-divider"> 2014년 6월 18일<span class="ui-li-count">2</span> </li> <li> <a href="#"> <p class="ui-li-aside"> <strong>03:28 오후</strong> </p> <h3>title #4</h3> <p> <strong>subject #4</strong> </p> <p> description #4 </p> </a> </li> <li> <a href="#"> <p class="ui-li-aside"> <strong>10:45 오전</strong> </p> <h3>title #5</h3> <p> <strong>subject #5</strong> </p> <p> description #5 </p> </a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
11. 인셋 스타일
- 리스트에 data-inset="true" 속성을 추가하면 인셋 스타일(inset style)의 리스트를 만들 수 있음
- 이 속성이 적용되면 모서리가 둥글고 여백이 있는 리스트를 표시함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-11</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="insetstyle" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>인셋 스타일</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li> <a href="#">item #1</a> </li> <li> <a href="#">item #2</a> </li> <li> <a href="#">item #3</a> </li> <li> <a href="#">item #4</a> </li> <li> <a href="#">item #5</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
12. 검색 필터 적용 리스트
- jQuery Mobile은 리스트 내의 항목을 검색할 수 있는 검색 필터 구현 기능을 제공
- 리스트에 data-filter="true" 속성을 추가하면 리스트 상단에 검색 상자가 표시됨
- 리스트에 data-filter-placeholder 속성과 문자열 값을 함께 추가하면 플레이스 홀더 값으로 표시됨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15-12</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="index" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>검색 필터 적용</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <ul data-role="listview" data-filter="true" data-filter-placeholder="검색어를 입력하세요..."> <li> <a href="#">item #1</a> </li> <li> <a href="#">item #2</a> </li> <li> <a href="#">item #3</a> </li> <li> <a href="#">item #4</a> </li> <li> <a href="#">item #5</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
13. 리스트 뷰에 테마 적용하기
- 리스트 전체의 테마는 리스트에 data-theme 속성을 추가해 변경할 수 있음
- data-theme 속성은 <li> 태그에도 지정할 수 있어서 항목 별로도 다른 테마를 설정할 수 있음
15강끝 |
16강 jQuery Mobile 컴포넌트 - 폼
1. 필드 컨테이너
- jQuery Mobile은 스마트 디바이스에서 사용자 입력을 최적화한 폼 요소를 제공
- 이러한 폼 요소를 사용하기 위해선 data-role="fieldcontain" 속성을 가진 요소 안에 폼 입력 요소를 추가해야 함
- 이 속성을 적용하면 화면 폭에 따라 라벨의 위치가 폼 요소의 좌측 혹은 좌측 상단 위에 놓이게 됨
- jQuery Mobile은 텍스트 입력을 위한 <input> 태그의 다양한 타입을 지원하며, 입력 타입에 맞춰서 스마트 디바이스의 소프트 키보드가 제공됨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>16-01</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header" data-position="fixed"> <h3>폼 요소</h3> </div> <div data-role="content"> <ul data-role="listview"> <li> <a href="16-02.html" data-transition="slide">텍스트 입력 필드</a> </li> <li> <a href="16-03.html" data-transition="slide">슬라이더</a> </li> <li> <a href="16-04.html" data-transition="slide">플립 토글 스위치</a> </li> <li> <a href="16-05.html" data-transition="slide">라디오 버튼</a> </li> <li> <a href="16-06.html" data-transition="slide">체크박스 버튼</a> </li> <li> <a href="16-07.html" data-transition="slide">셀렉트 메뉴</a> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>16-02</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="text" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>텍스트 입력 필드</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <form name="myform"> <div data-role="fieldcontain"> <label for="name">이름</label> <input type="text" id="name"/> </div> <div data-role="fieldcontain"> <label for="pass">패스워드</label> <input type="password" id="pass"/> </div> <div data-role="fieldcontain"> <label for="email">이메일</label> <input type="email" id="email"/> </div> <div data-role="fieldcontain"> <label for="phone">전화</label> <input type="tel" id="phone"/> </div> <div data-role="fieldcontain"> <label for="age">나이</label> <input type="number" id="age"/> </div> <div data-role="fieldcontain"> <label for="url">URL</label> <input type="url" id="url"/> </div> <div data-role="fieldcontain"> <label for="search">검색</label> <input type="search" id="search" placeholder="검색어를 입력하세요."/> </div> <div data-role="fieldcontain"> <label for="content">내용</label> <textarea id="content" cols="40" rows="8"></textarea> </div> </form> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
2. 슬라이더
- jQuery Mobile은 HTML 5에 추가된 range 타입의 input 태그를 지원함
- 범위를 나타내기 위해 min, max 속성을 지정하고 초기값을 value 속성에 지정
- step 속성이 있어서 슬라이딩 시 증감 설정 가능
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>16-03</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="slider" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>슬라이더</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <form name="myform"> <div data-role="fieldcontain"> <label for="year">년도</label> <input type="range" id="year" value="2014" min="1900" max="2030"/> </div> </form> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
3. 플립 토글 스위치
- 플립 토글 스위치(flip toggle switch)는 on/off 스위치처럼 동작하는 사용자 인터페이스
- select 요소에 data-role="slider" 속성을 추가하면 사용 가능
- 일반적으로 스위치 on에 해당하는 값을 두 번째 옵션으로 지정해서 사용함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>16-04</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="fliptoggle" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>플립 토글 스위치</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <form name="myform"> <div data-role="fieldcontain"> <label for="gender">성별</label> <select name="gender" id="gender" data-role="slider"> <option value="남자">남자</option> <option value="여자">여자</option> </select> </div> </form> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
4. 라디오 버튼
- jQuery Mobile 에서는 라디오 버튼을 사용하기 위해 radio 타입의 <input> 태그와 <label>을 묶어 사용함
- 라디오 버튼 그룹을 만들기 위해 data-role="controlgroup"속성을 가진 <fieldset> 태그 안에 위치시키면 사용하기 쉬운 라디오 버튼이 생성됨
- <fieldset> 태그에 <legend> 태그를 추가해 라디오 버튼 그룹에 대한 라벨을 생성함
- 기본적으로 세로로 출력되며 <fieldset> 태그에 data-type="horizontal"속성을 추가하면 가로로 배치됨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>16-05</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="radio" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>라디오 버튼</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <form name="myform"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend> 가장 좋아하는 견종 </legend> <input type="radio" name="dog" value="골든 리트리버" id="dog1" checked="checked"/> <label for="dog1">골든 리트리버</label> <input type="radio" name="dog" value="알래스칸 말라뮤트" id="dog2"/> <label for="dog2">알래스칸 말라뮤트</label> <input type="radio" name="dog" value="사모예드" id="dog3"/> <label for="dog3">사모예드</label> <input type="radio" name="dog" value="시베리안 허스키" id="dog4"/> <label for="dog4">시베리안 허스키</label> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend> 방문 횟수 </legend> <input type="radio" name="visit" value="1회" id="visit1" checked="checked"/> <label for="visit1">1회</label> <input type="radio" name="visit" value="2회" id="visit2"/> <label for="visit2">2회</label> <input type="radio" name="visit" value="3회" id="visit3"/> <label for="visit3">3회</label> <input type="radio" name="visit" value="4회 이상" id="visit4"/> <label for="visit4">4회 이상</label> </fieldset> </div> </form> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
5. 체크박스 버튼
- jQuery Mobile에서는 체크박스 버튼을 사용하기 위해 checkbox 타입의 <input> 태그와 <label>을 묶어 사용
- 체크박스 버튼 그룹을 만들기 위해 data-role="controlgroup" 속성을 가진 <fieldset> 태그 안에 위치시키면 사용하기 쉬운 체크박스 버튼이 생성됨 <fieldset> 태그에 <legend> 태그를 추가해 체크박스 버튼 그룹에 대한 라벨을 생성함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>16-06</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="checkbox" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>체크박스 버튼</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <form name="myform"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend> 좋아하는 견종 </legend> <input type="checkbox" name="dog1" value="골든 리트리버" id="dog1"/> <label for="dog1">골든 리트리버</label> <input type="checkbox" name="dog2" value="알래스칸 말라뮤트" id="dog2"/> <label for="dog2">알래스칸 말라뮤트</label> <input type="checkbox" name="dog3" value="사모예드" id="dog3"/> <label for="dog3">사모예드</label> <input type="checkbox" name="dog4" value="시베리안 허스키" id="dog4"/> <label for="dog4">시베리안 허스키</label> </fieldset> </div> </form> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
6. 셀렉트 메뉴
- 셀렉트 메뉴는 네이티브 옵션 메뉴를 기반으로 동작
- data-native-menu="false" 속성을 지정하면 jQuery Mobile이 제공하는 팝업 방식의 셀렉트 메뉴를 사용
- 다중 선택 기능은 data-native-menu 속성의 값이 false일 경우에만 가능하며, mutiple="mutiple"속성을 설정해 사용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>16-07</title> <link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="select" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>셀렉트 메뉴</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content"> <form name="myform"> <div data-role="fieldcontain"> <label for="dog1">가장 좋아하는 대형 견종</label> <select name="dog1" id="dog1"> <option value="">선택하세요</option> <option value="골든 리트리버">골든 리트리버</option> <option value="알래스칸 말라뮤트">알래스칸 말라뮤트</option> <option value="사모예드">사모예드</option> <option value="시베리안 허스키">시베리안 허스키</option> </select> </div> <div data-role="fieldcontain"> <label for="dog2">가장 좋아하는 중소형 견종</label> <select name="dog2" id="dog2" data-native-menu="false" multiple="multiple"> <option value="">선택하세요</option> <option value="포메라니안">포메라니안</option> <option value="웰시코기">웰시코기</option> <option value="푸들">푸들</option> <option value="비글">비글</option> </select> </div> </form> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
16강끝 |
17강 jQuery Mobile 컴포넌트 - 컨텐트 서식 적용, 테마롤러
1. 레이아웃 그리드
- 스마트 디바이스는 스크린 폭이 그다지 넓지 않기 때문에 다중 컬럼 레이아웃을 사용하는 것을 일반적으로 비권장
- 버튼이나 네비게이션 탭과 같이 옆으로 작은 요소들을 배치해야 하는 경우 jQuery Mobile은 ui-grid로 불리는 블록 스타일 클래스를 통해 CSS기반의 다중 컬럼 분할 기능을 제공함
클래스 |
설명 |
ui-grid-a |
두 개의 컬럼을 균등 분할해 레이라웃을 구성합니다. |
ui-grid-b |
세 개의 컬럼을 균등 분할해 레이라웃을 구성합니다. |
ui-grid-c |
네 개의 컬럼을 균등 분할해 레이라웃을 구성합니다. |
ui-grid-d |
다섯 개의 컬럼을 균등 분할해 레이라웃을 구성합니다. |
- 그리드는 폭을 100% 사용하고, 패딩과 마진이 없으며, 보더와 백그라운드가 없는 보이지 않는 컨테이너임
- 그리드 컨테이너 내에서 자식 요소는 순차적으로 ui-block-a/b/c/d/e 클래스를 지정하여 배치함
- 다중 행을 구성할 때 ui-block-a 클래스가 적용된 요소가 각 행의 맨 앞에 배치됨
2. 콜렙서블 컨텐트 블록
- data-role="collapsible" 속성을 이용하면 탭(tap) 조작으로 내용을 접었다 폈다하는 콜렙서블 컨텐트 블록(collapsible content block)을 만들 수 있음
- 콜렙서블 컨텐트 블록에서는 h1 ~ h6 요소를 이용해 제목을 설정
- 콜렙서블 컨텐트 블록은 블록이 접힌 상태를 기본값으로 가지며, data-collapsed="false" 속성을 지정해 펼친 상태를 표시할 수 있음
- 기본적으로 인셋이 적용되어 있기 때문에 인셋을 제거하기 위해선 data-inset="false" 속성을 지정하면 됨
- data-mini="true" 속성으로 컴팩트 버전을 만들 수 있으며, data-collapsed-icon 과 data-expanded-icon 속성을 이용해 아이콘을 변경할 수 있음
3. 콜렙서블 셋(아코디언)
- data-role="collapsible-set" 속성을 이용하면 탭(tap) 조작으로 내용을 접었다 폈다하는 콜렙서블 셋(collapsible set)을 생성
- 콜렙서블 셋은 모든 블록이 접힌 상태를 기본값으로 가지며, data-collapsed="false 속성을 지정한 블록은 펼친 상태를 표시
4. 테마롤러 디자인하기
- jQuery Mobile에서는 테마롤러라는 온라인 도구를 이용해 직관적으로 테마를 디자인할 수 있는 도구를 제공함
- 이 도구를 통해 테마 디자인 작업을 완료하면 사용자 정의 테마의 CSS 파일을 다운로드 받을 수 있음
- http://themeroller..jquerymobile.com/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>17-01</title> <link rel="stylesheet" href="themes/forbeto.css" /> <link rel="stylesheet" href="js/jquery.mobile.structure-1.3.2.css" /> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="formtheme" data-add-back-btn="true" data-theme="a"> <div data-role="header" data-position="fixed" data-theme="a"> <h3>폼 테마 적용</h3> <a href="#index" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a> </div> <div data-role="content" data-theme="a"> <form name="myform"> <div data-role="fieldcontain"> <label for="textinput">텍스트 입력 필드</label> <input type="text" id="textinput" placeholder="입력하세요."/> </div> <div data-role="fieldcontain"> <label for="slider">슬라이더</label> <input type="range" id="slider" value="0" min="0" max="100" step="1"/> </div> <div data-role="fieldcontain"> <label for="flipswitch">플립 토글 스위치</label> <select name="flipswitch" id="flipswitch" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend> 라디오 버튼(세로) </legend> <input type="radio" name="radiov" value="선택 #1" id="radio1" checked="checked"/> <label for="radio1">선택 #1</label> <input type="radio" name="radiov" value="선택 #2" id="radio2"/> <label for="radio2">선택 #2</label> <input type="radio" name="radiov" value="선택 #3" id="radio3"/> <label for="radio3">선택 #3</label> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend> 라디오 버튼(가로) </legend> <input type="radio" name="radioh" value="선택 #1" id="radio4" checked="checked"/> <label for="radio4">#1</label> <input type="radio" name="radioh" value="선택 #2" id="radio5"/> <label for="radio5">#2</label> <input type="radio" name="radioh" value="선택 #3" id="radio6"/> <label for="radio6">#3</label> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend> 체크박스 버튼 </legend> <input type="checkbox" name="checkbox1" value="선택 #1" id="checkbox1"/> <label for="checkbox1">선택 #1</label> <input type="checkbox" name="checkbox2" value="선택 #2" id="checkbox2"/> <label for="checkbox2">선택 #2</label> <input type="checkbox" name="checkbox3" value="선택 #3" id="checkbox3"/> <label for="checkbox3">선택 #3</label> </fieldset> </div> <div data-role="fieldcontain"> <label for="selectnative">셀렉트 메뉴(native)</label> <select name="selectnative" id="selectnative"> <option value="">선택하세요</option> <option value="선택 #1">선택 #1</option> <option value="선택 #2">선택 #2</option> <option value="선택 #3">선택 #3</option> <option value="선택 #4">선택 #4</option> </select> </div> <div data-role="fieldcontain"> <label for="selectjqm">셀렉트 메뉴(jqm)</label> <select name="selectjqm" id="selectjqm" data-native-menu="false" multiple="multiple"> <option value="">선택하세요</option> <option value="선택 #1">선택 #1</option> <option value="선택 #2">선택 #2</option> <option value="선택 #3">선택 #3</option> <option value="선택 #4">선택 #4</option> </select> </div> </form> <label for="columngrid">컬럼 레이아웃 그리드</label> <div name="columngrid" id="columngrid"> <div class="ui-grid-a"> <div class="ui-block-a"> <button data-theme="c" data-icon="arrow-l" > Previous </button> </div> <div class="ui-block-b"> <button data-theme="c" data-icon="arrow-r" data-iconpos='right'> Next </button> </div> </div> <div class="ui-grid-b"> <div class="ui-block-a"> <button data-theme="c"> Cancel </button> </div> <div class="ui-block-b"> <button data-theme="a"> No </button> </div> <div class="ui-block-c"> <button data-theme="b"> Yes </button> </div> </div> <div class="ui-grid-solo"> <div class="ui-block-a"> <button data-theme="b"> More </button> </div> </div> </div> <label for="collapsibleblock">콜랩서블 컨텐트 블록</label> <div name="collapsibleblock" id="collapsibleblock" data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c"> <h3>제목</h3> <p> 컨텐트 </p> <div data-role="collapsible" data-theme="c" data-content-theme="c"> <h3>제목</h3> <p> 컨텐트 </p> <div data-role="collapsible" data-theme="d" data-content-theme="d"> <h3>제목</h3> <p> 내용 </p> </div> </div> <div data-role="collapsible" data-content-theme="c"> <h3>제목</h3> <form action="#" method="get"> <div data-role="fieldcontain"> <label for="textarea">내용:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> </div> <fieldset class="ui-grid-a"> <div class="ui-block-a"> <button type="reset" data-theme="c"> 취소 </button> </div> <div class="ui-block-b"> <button type="submit" data-theme="b"> 전송 </button> </div> </fieldset> </form> </div> <div data-role="collapsible" data-content-theme="c"> <h3>제목</h3> <p> 내용 </p> <ul data-role="listview" data-inset="true" data-theme="d"> <li> <a href="#">아이템 #1</a> </li> <li> <a href="#">아이템 #2</a> </li> <li> <a href="#">아이템 #3</a> </li> <li> <a href="#">아이템 #4</a> </li> </ul> </div> </div> <label for="collapsibleset">콜랩서블 셋</label> <div name="collapsibleset" id="collapsibleset" data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false"> <h3>제목</h3> <p> 내용 </p> </div> <div data-role="collapsible"> <h3>제목</h3> <p> 내용 </p> </div> <div data-role="collapsible" data-collapsed="false"> <h3>제목</h3> <p> 내용 </p> </div> <div data-role="collapsible"> <h3>제목</h3> <p> 내용 </p> </div> <div data-role="collapsible"> <h3>제목</h3> <p> 내용 </p> </div> </div> </div> <div data-role="footer" data-position="fixed" data-theme="a"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
17강끝 |
18강 jQuery Mobile 이벤트
1. mobileinit 이벤트
- jQuery Mobile이 구동되면 document 객체에서 mobileinit 이벤트가 트리거 되는데, on() 메소드에서 이 mobileinit 이벤트에 대한 이벤트 핸들러를 등록하면 jQuery Mobile 환경설정에 대한 사용자 초기화가 가능함
$(document).on("mobileinit", function(event){
//사용자 정의 환경 설정 초기화를 실행합니다.
});
- 스크립트는 mobileinit 이벤트가 jQuery Mobile 라이브러리 로딩 시 발생하므로, jQuery 라이브러리 참조 구문과 jQuery Mobile 라이브러리 참조 구문 사이에 위치시킴
<script src="js/jquery-1.11.1.js></script>
<script src="js/custom-scripting.js></script>
<script src="js/jquery.mobile--1.4.2.js></script>
설정 프로퍼티 |
기본값 |
설명 |
activeBtnClass |
"ui-btn-active" |
활성화된 버튼에 사용되는 CSS 클래스 |
activePageClass |
"ui-page-active" |
현재 페이지에 대한 CSS 클래스 |
ajaxEnabled |
true |
Ajax 방식의 페이지 전환을 사용할지에 대한 설정 |
allowCrossDomainPages |
false |
기존의 페이지 전환 방식을 도메인 간에서도 사용할지에 대한 설정. 폰 갭을 사용하면 true로 설정해야 함 |
autoInitializePage |
true |
DOM이 준비되면 $.moblie.initialize() 메소드를 자동으로 호출할 지에 대한 설정 |
defaultDialogTransition |
'pop' |
다이얼로그 화면 전환 기본 설정 |
defaultPageTransition |
'fade' |
페이지 전환 기본 설정 |
ns | "" | data- 속성에 사용되는 네임스페이스. "myns-"로 지정하면 data-myns- 속성으로 바뀜. 이 프로퍼티를 변경하면 테마CSS 변경이 필요 |
pageLoadErrorMessage | "Error Loading Page" | Ajax를 통해 페이지 로딩이 실패할 때 보여줄 텍스트 |
pageLoadErrorMessageTheme | "e" | 에러 메시지박스가 사용하는 테마 |
transitionFallbacks.[transition] | "fade" | 특정 화면 전환의 3D 변환을 지원하지 않는 브라우저에 대한 대체 화면 전환 |
3. 페이지 초기화 이벤트(pagebeforecreate, pagecreate, pageinit)
- jQuery Mobile은 페이지의 태그들과 관련된 플러그 인들을 자동 초기화함
- 페이지 플러그인에 의해 제어되는 자동 초기화는 실제 자동 초기화 전과 후에 이벤트를 디스패치(event dispatch)하는데, 이 때 사전 초기화와 사후 초기화를 통해 페이지를 조작할 수 있음
- 이 이벤트는 매번 페이지가 나타나고 사라질 때마다 발생하는 페이지 전환 이벤트와 달리 페이지 당 한 번만 발생한다는 점에 주의
- jQuery Mobile에서는 페이지를 직접 로딩하는 Ajax를 이용한 페이지 로딩이든 간에 상관없이 작동하는 pagenit 이벤트를 ready 이벤트 대신 사용할 것을 권장함
- pagebeforecreate→pagecreate→pageinit 순으로 작동
$( '#aboutPage' ).on( 'pagebeforecreate', function(event){
//위젯이 자동 초기화(auto-initialization)되기 전 이 페이지를 여기서 조작합니다.
});
$( '#aboutPage' ).on( 'pagecreate', function(event){
//페이지가 DOM에 생성되었을 때 page create 이벤트가 발생하며 커스텀 위젯을 만드는 작업 등을 여기서 합니다.
});
$( '#aboutPage' ).on( 'pageinit', function(event) ){
//페이지에서 필요한 초기화 작업을 여기서 조작합니다.
});
4. 페이지 변경 이벤트(pagebeforechange, pagechange, pagechangefailed)
- 페이지 간의 네비게이션은 $.mobile.changePage() 메소드 호출을 통해 이렁남
- 이 메소드는 우리가 이동하고자 하는 페이지가 DOM에 로드되고 추가된 후, 현재 페이지와 다음 페이지 사이의 페이지 전환 애니메이션이 시작되도록 하는 것을 담당함
- 이 과정에서 changePage() 메소드는 두 개의 이벤트를 발생 시키는데, pagebeforechange 이벤트가 먼저 발생하고, 변경 요청의 성공 여부에 따라 pagechange 이벤트 혹은 pagechangefailed 이벤트가 발생함
pagebeforechange→pagechange(성공시)
→pagechangefailed(실패시)
5. 페이지 전환 이벤트(pagebeforeshow, pagebeforehide, pageshow, pagehide)
- 페이지 전환 이벤트는 현재 페이지를 새 페이지로의 변경을 애니메이션 처리하는 데 사용
- 페이지 전환 이벤트는 페이지가 나타나거나 사라지기 전후 발생
pagebeforehid→pagebeforeshow→pagehide→pageshow
6. 페이지 로드 이벤트(pagebeforeload, pageload, pageloadfailed)
- 외부 페이지가 DOM으로 로드될 때 발생하는 이벤트 입니다. 가장 먼저 pagebeforeload 이벤트가 발생하고, 다음으로 pageload나 pageloadfailed이벤트가 발생합니다.
pagebeforeload→pageload
→pageloadfailed
7. tap, taphold 이벤트
- tap 이벤트는 터치 발생후 트리거되는 이벤트이고 taphold는 터치를 계속 유지하면 트리거되는 이벤트
- taphold 이벤트 발생을 위한 유지시간은
$.event.special.tap.tapholdThreshold 프로퍼티에 설정
- 기본 값은 750(ms)
8. swipe, swipeleft,swiperight 이벤트
- 1초 안에 수평 30픽셀 이상, 수직 75픽셀 이하 드래그가 발생하면 swipe 이벤트가 발생
- 모든 swipe 이벤트는 조건을 만족할 때 발생하게 되며, 설정 프로퍼티를 통해 변경이 가능
- swipeleft 이벤트는 왼쪽으로 움직이는 스와이프 이벤트가 발생했을 때 트리거 되고, swiperright 이벤트는 오른쪽으로 움직이는 스와이프 이벤트가 발생했을 때 트리거 됨
설정 프로퍼티 |
기본값 |
설명 |
$.event.special.swipe.scrollSuppressionThredshold |
10px |
수평 이동이 이 이상이면 스크롤이 일어나지 않도록 합니다. |
$.event.special.swipe.durationThredshold |
1000ms |
스와이프 이동 최대 시간 |
$.event.special.swipe.horizontalDistanceThredshold |
30px |
스와이프 수평이동의 최소값 |
$.event.special.swipe.verticalDistanceThredshold |
75px |
스와이프 수직이동의 최대값 |
9. orientationchange 이벤트
- 디바이스가 수직 혹은 수평으로 방향을 바꾸면 orientationchange 이벤트가 발생
- 이벤트가 발생할 때 window 객체의 orientation 프로퍼티 값을 이용하면 세부 제어가 가능
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>18-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"> // mobileinit 이벤트가 발생할 경우의 처리 $(document).on('mobileinit', function(event) { // 기본 화면 전환이 fade인 것을 slide로 변경합니다. $.extend($.mobile, { defaultPageTransition : "slide", }); console.log(event.type); }); // 페이지 초기화 이벤트 발생 시 $(document).on({ pagebeforecreate : function(event) { console.log(event.type); }, pagecreate : function(event) { console.log(event.type); }, pageinit : function(event) { console.log(event.type); } }); // 페이지 변경 이벤트 발생 시 $(document).on({ pagebeforechange : function(event) { console.log(event.type); }, pagechange : function(event) { console.log(event.type); }, pagechangefailed : function(event) { console.log(event.type); }, }); // 페이지 전환 이벤트 발생 시 $(document).on({ pagebeforeshow : function(event) { console.log(event.type); }, pageshow : function(event) { console.log(event.type); }, pagebeforehide : function(event) { console.log(event.type); }, pagehide : function(event) { console.log(event.type); } }); // 페이지 로드 이벤트 발생 시 $(document).on({ pagebeforeload : function(event) { console.log(event.type); }, pageload : function(event) { console.log(event.type); }, pageloadfailed : function(event) { console.log(event.type); } }); </script> <script src="js/jquery.mobile-1.3.2.js"></script> </head> <body> <div data-role="page" id="first"> <div data-role="header" data-position="fixed"> <h3>Events</h3> </div> <div data-role="content"> <p> 첫번째 페이지 </p> <div> <a href="#second" data-role="button">두 번째 페이지로</a> <a href="18-02.html" data-role="button">세 번째 페이지(외부)로</a> </div> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> <div data-role="page" id="second" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>Events</h3> </div> <div data-role="content"> <p> 두 번째 페이지 </p> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>18-03</title> </head> <body> <div data-role="page" id="third" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h3>Events</h3> </div> <div data-role="content"> <p> 세 번째 페이지(외부) </p> </div> <div data-role="footer" data-position="fixed"> <h4>© 2014 T academy</h4> </div> </div> </body> </html> | cs |
18강끝 |
19강 jQuery Mobile 유틸리티
1. $.mobile.changPage()
- 페이지 간의 네비게이션은 $.mobile.changePage()메소드 호출을 통해 일어남
- 이 메소드는 우리가 이동하고자 하는 페이지가 DOM에 로드되고 추가된 후, 현재 페이지와 다음 페이지 사이의 페이지 전환 애니메이션이 시작되도록 하는 것을 담당
프로퍼티 |
타입 |
기본값 |
설명 |
allowSamePageTransition |
boolean |
false |
동일한 현재 페이지에 대한 요청에 페이지전환 적용 |
changeHash |
boolean |
true |
로케이션 바의 해시를 갱신할 지 여부 |
data |
object, string |
undefined |
Ajax 페이지 요청을 통해 전달할 데이터 |
dataUrl |
string |
undefined |
changePage() 완료 시 로케이션을 갱신할 때 사용할 URL |
pageContainer |
jQuery collection |
$.mobile.pageContainer |
페이지를 포함하는 요소 |
reloadPage |
boolean |
false |
강제로 페이지를 리로드 |
reverse |
boolean |
false |
페이지가 나타날 때의 방향 |
role |
string |
undefined |
페이지를 나타낼 때 사용하는 data-role의 기본 값 |
showLoadMsg |
boolean |
true |
외부 페이지 로딩시 로딩메시지 표시 여부 |
transition | string | $.mobile.defaultPageTransition | 페이지를 나타낼 때의 기본 전환 애니메이션 |
type | string | "get" | 페이지 요청 메소드(get/post) |
2. $.mobile.loadPage()
- 외부 페이지를 로딩해 DOM에 추가하는 역할을 담당
- changePage()가 내부적으로 호출하는 이 메소드는 첫 번째 인자로 전달된 URL에 해당하는 페이지를 백그라운드에서 로딩하는 역할을 하며 현재 페이지에 영향을 주지는 않음
- 두 번째 인자로 프로퍼티를 이용해 객체 리터럴을 전달
프로퍼티 |
타입 |
기본값 |
설명 |
data |
object, string |
undefined |
Ajax 페이지 요청을 통해 전달할 데이터 |
loadMsgDelay |
number |
50 |
로딩 메시지가 나타나기 전의 지연시간(ms) |
pageContainer |
jQuery collection |
$.mobile.pageContainer |
로드된 후 페이지를 포함하는 요소 |
reloadPage |
boolean |
false |
강제로 페이지를 리로드 |
role |
string |
undefined |
페이지를 나타낼 때 사용하는 data-role의 기본 값 |
showLoadMsg |
boolean |
false |
외부 페이지 로딩 시 로딩 메시지 표시 여부 |
type | string | "get" | 페이지 요청 메소드(get/post) |
3. $.mobile.loading()
- $.mobile.loader.prototype.options의 옵션들을 이용하거나 프로퍼티를 이용해 객체 리터럴을 전달하면 페이지 로딩 메시지를 표시하거나 보이지 않게 함
프로퍼티 |
타입 |
기본값 |
설명 |
theme |
string |
"a" |
에시지에 대한 테마 스와치 |
text |
string |
"loading" |
로딩 메시지 문자열 |
textonly |
boolean |
false |
true일 경우 메시지가 나타나면 스피너 이미지가 사라짐 |
textVisible |
boolean |
false |
true일 경우스피너 아래 메시지가 보임 |
html |
string |
"" |
로더의 innerHTML을 교체 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <!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> <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> | cs |
19강끝 |
'Legend 개발자 > T아카데미' 카테고리의 다른 글
| 모바일 GUI 디자인 (0) | 2017.09.05 |
|---|---|
| UX/UI 기획 (0) | 2017.09.04 |
| 컴퓨터 알고리즘 중급 (0) | 2017.08.31 |
| JavaScript (0) | 2017.08.30 |
| HTML&CSS (0) | 2017.08.28 |