A>jQuery moblie
모바일에서 보여지는 웹 페이지를 마치
휴대폰 앱 처럼 보여주는 jQuery 기반의 라이브러리
1. 앱의 종류
-- 네이티브 앱 : = 안드로이드 앱(apk 파일들)
-- 웹 앱 : = 웹 기반의 어플리케이션
-- 하이브리드 앱 : =웹 + 네이티브
--폰 갭 : 잘 사용하진 않지만, 하이브리드 앱 만드는 툴
2.cdn
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
--min 의 의미는 minimize == 압축했다는 뜻
3.data-role
-- 보여줄 페이지를 설정
|
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
|
<body>
<!-- begin 첫 번째 page -->
<section id="page1" data-role="page">
<header data-role="header">
<h1>jQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>첫 번째 페이지 !</p>
<a href="#page2"> 두 번째 페이지로 전환하기 !</a>
</div>
<footer data-role="footer">
<h1> copyright 2012 syj</h1>
</footer>
</section>
<!-- end 첫 번째 페이지 끝 부분-->
<!-- Begin 두 번째 page -->
<section id="page2" data-role="page">
<header data-role="header">
<h1>jQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>두 번째 페이지 !</p>
</div>
<footer data-role="footer">
<h1> copyright 2012 syj</h1>
</footer>
</section>
<!-- 두 번째 페이지 끝 부분-->
</body>
|
cs |
4.대화 상자 처럼 열기
data-rel 속성과 그 값을 dialog 로 사용
5.버튼 만들기
<a> 태그 속성에 data role = 'button'
'언어 > javascript' 카테고리의 다른 글
| Ajax (0) | 2021.02.18 |
|---|---|
| jQuery 9 -- 유저 인터페이스(UI) (0) | 2021.02.17 |
| jQuery8 --플러그 인 (plug in) (0) | 2021.02.17 |
| jQuery7 - 유틸리티(utility) (0) | 2021.02.17 |
| jQuery6 --이벤트(event) (0) | 2021.02.17 |