PowerPoint

Download Report

Transcript PowerPoint 

jQuery Mobile #3-1
Jeon Yong ju
jQuery Mobile #3-1
1, 2장 에서는…
<section><header><footer>태그를 사용한 동작원리
내부페이지, 외부페이지, 대화상자
네비게이션과 히스토리, 전환
지금까지 사용해 본 jQuery Moblie 속성
data-role=“page/header/content/footer”
data-add-back-btn=“true”
data-prefetch=“true”
data-rel=“dialog”
datatransition=“fade/flip/pop/slide/slidedown/sildeup”
jQuery Mobile #3-1
data-direction=“reverse”
jQuery 플러그인과 위젯
jQuery 플러그인과 위젯이란?
개발자가 본인의 필요에 맞게 작성한 사용자 정의 함수
(커스텀 메서드)
쉽게 말하면, 단순한 형태 – 플러그인, 복잡한 형태 - 위젯
활용 원리?
커스텀 메서드 작성 -> 마크업 작성 -> 커스텀 메서드 적
용
jQuery Mobile #3-1
jQuery 플러그인과 위젯
활용예시 –
setReadOnly라는 사용자 정의 함수 활용
jquery.setreadonly.js
Index.html
(function($){
$.fn.setReadOnly = function(readonly){
return this.filter(‘input:text’)
.attr(‘readonly’, readonly)
.css(‘opacity’, readonly? 0.5 : 1.0)
}
})( jquery);
<html>
<head>
중략
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript” src=“jquery.setreadonly.js”>
</script>
<script type=“text/javascript”>
$(function(){
$(‘#sameAddressControl’).click(function(){
var same = this.checked;
(중략)
$(‘#billingAddress input’).setReadOnly(same);
})
})
</script>
</head>
<body>
마크업작성
</body>
</html>
jQuery Mobile #3-1
2. 목록 뷰
- 1 기본적인 목록 뷰
기본적인 목록 뷰
data-role=“listview”
<h3>Unordered List</h3>
<ul data-role="listview">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<h3>Ordered List</h3>
<ol data-role="listview">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
jQuery Mobile #3-1
2. 목록 뷰
목록 뷰 버튼 –
- 1 기본적인 목록 뷰
<a>속성 추가
<h3>Unordered List</h3>
<ul data-role="listview">
<li><a herf="#">Item</a></li>
<li><a herf="#">Item</a></li>
<li><a herf="#">Item</a></li>
</ul>
<h3>Ordered List</h3>
<ol data-role="listview">
<li><a herf="#">Item</a></li>
<li><a herf="#">Item</a></li>
<li><a herf="#">Item</a></li>
</ol>
jQuery Mobile #3-1
2. 목록 뷰
- 1 기본적인 목록 뷰
목록 뷰 구분자 –
data-role=“list-divider”
<h3>Unordered List</h3>
<ul data-role="listview">
<li data-role="list-divider">Things</li>
<li><a herf="#">Item</a></li>
<li><a herf="#">Item</a></li>
<li><a herf="#">Item</a></li>
<li data-role="list-divider">Stuff</li>
<li><a herf="#">Item</a></li>
<li><a herf="#">Item</a></li>
<li data-role="list-divider">Miscellaneus</li>
<li><a herf="#">Item</a></li>
<li><a herf="#">Item</a></li>
<li><a herf="#">Item</a></li>
(중략)
</ul>
jQuery Mobile #3-1
2. 목록 뷰
- 2 발전된 목록 뷰
중첩된 목록
<ul data-role="listview">
<li>Restaurants
<ul>
<li>French
<ul>
<li>Le Central</li>
<li>Bistro Vandome</li>
<li>Antonie's</li>
</ul>
</li>
<li>Cajun an Creole
<ul>
(중략)
</ul>
</li>
</ul>
jQuery Mobile #3-1
2. 목록 뷰
- 2 발전된 목록 뷰
목록 뷰 내 분할 버튼
- 목록 아이템 요소 안에 두개의 <a>요소
<ul data-role="listview">
<li>Restaurants
<ul>
<li>French
<ul>
<li>
<a href="#">Le Central</a>
<a href="#">Make Reservations</a>
</li>
</ul>
(후략)
jQuery Mobile #3-1
2. 목록 뷰
- 2 발전된 목록 뷰
썸네일 thumbnail 과 아이콘
- 엄지손톱, 미리보기용 이미지
<ul data-role="listview">
<li>Restaurants
<ul>
<li>
<a href="#">
<img src="images/icons/icon-french.png"
alt="French flag icon“
class="ui-li-icon">French</a>
<ul>
<li>
<img src="images/logo-generic.png" alt="Le Central logo">
Le Central</a>
<a href="#">Make Reservations</a>
</li>
</ul>(후략)
jQuery Mobile #3-1
2. 목록 뷰
- 2 발전된 목록 뷰
Count Bubble –
숫자를 표시하는 비누방울 모양
<ul data-role="listview">
<li data-role="list-divider">Items<span class="ui-li-count">10</span></li>
<li><a href="#">Restaurants</a><span class="ui-li-count">9</span>
<ul>
<li>
<a href="#">
<img src="images/icons/icon-french.png"
alt="French flag icon“
class="ui-li-icon">French</a>
<ul>
<li>
<img src="images/logo-generic.png" alt="Le Central logo">
Le Central</a>
<a href="#">Make Reservations</a>
</li>
(후략)
jQuery Mobile #3-1
2. 목록 뷰
목록 뷰 갱신 –
– 3 이면에서
listview 위젯의 ‘refresh’메서드 사용
<script>
$(’ul.twitter-feed’).listview(); //목록 뷰 초기화
var updateTweets = function(){
var strNewTweetsHtml = getNewTweets();
$(‘ul.tweeter-feed’).prepend(strNewTweetsHtml).listview(‘’refresh’’);
//트윗 더 가져와서 ul.tweeter-feed목록 앞에 붙인 후 갱신(refresh)
}
</script>
jQuery Mobile #3-1
3. 툴바
– 1 내비게이션 바
기본 내비게이션 바 –
<nav data-role=“navbar>
<section id="page1" data-role="page">
<header data-role="header">
<h1>jQuery Mobile</h1>
<nav data-role="navbar">
<a href="#" class="ui-btn-active">First</a>
<a href="#">Second</a>
<a href="#">Third</a>
<a href="#">Fourth</a>
<a href="#">Fifth</a>
</nav>
</header>
<div data-role="content">
<h3>Content</h3>
</div>
<footer data-role="footer">
<h1>O'reilly</h1>
</footer>
</section>
jQuery Mobile #3-1
3. 툴바
– 1 내비게이션 바
버튼의 너비를 같게 –
<ul>안에 담기
<section id="page1" data-role="page">
<header data-role="header">
<h1>jQuery Mobile</h1>
<nav data-role="navbar">
<ul>
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
<li><a href="#">Fifth</a></li>
</ul>
</nav>
</header>
(후략)
jQuery Mobile #3-1
3. 툴바
– 2 header와 footer의 위치조절
data-position=“___________”- 74~6쪽 예제 확인
Standard - 기본값
Fixed – header와 footer의 위치가 고정됨
Standard – 스크롤 시 header와 footer를 숨기고, 스크롤을 멈추면 보임
<section id="page1" data-role="page">
<header data-role="header“ data-position=“fixed”>
<h1>jQuery Mobile</h1>
<nav data-role="navbar">
<ul>
<li><a href="#">First</a></li>
jQuery Mobile #3-1
4. 버튼
jQuery mobile이 스타일 적용 후 버튼으로 바꾸는 경우
1. input 태그의 버튼,
2. button 태그,
3. data-role=“button”속성의 a 요소
<div data-role="content">
<h3>Buttons</h3>
<a href="#" data-role="button">Link-Based button</a>
<input type="submit" value="submit" data-inline="true">
<input type="reset" value="reset" data-inline="true">
</div>
* data-inline=“true” 버튼의 너비를 글자에 맞춤
jQuery Mobile #3-1
4. 버튼
– 1 버튼 컨트롤 그룹
버튼 컨트롤 그룹 버튼 컨테이너에 넣고 data-role=“controlgroup”
<div data-role="content">
<h3>Control Group Buttons</h3>
<div data-role="controlgroup"> -컨테이너
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
<div data-role="controlgroup“
data-type=“horizontal”>
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
</div>
* data-type=“horizontal” 가로로 표시(인라인 적용)
jQuery Mobile #3-1
4. 버튼
– 2 버튼 아이콘
data-icon=“ ______”- 모양
data-iconpos=“______”- 위치
80쪽 표 3-1,2
data-icon 속성값, data-iconpos 속성값 확인
<div data-role="content">
<h3>Control Group Buttons</h3>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="home“ data-iconpos=“left”>Home</a>
<a href="#" data-role="button" data-icon="gear">Config</a>
<a href="#" data-role="button" data-icon="search">Search</a>
</div>
</div>
jQuery Mobile #3-1
4. 버튼
– 커스텀 아이콘
커스텀 아이콘 사용 절차
1. 아이콘 이미지 만들기 – 18 × 18 pixel, png 형식 권장
2. 나만의 CSS에 아이콘 이름과 이미지의 url 연결
- 단, 아이콘 이름은 기본 data-icon 속성값과
반드시 달라야 함.
.ui-icon-mymail { backgroundimage:url(images/icons/icon-mail.png); }
3. data-icon, data-iconpos 속성을 사용하여 적용
- 나머지 작업은 jQuery Mobile이 알아서함.
jQuery Mobile #3-1
Thank you
jQuery Mobile #3-1
jQuery Mobile #3-1