Upload
nicolette-ingerson
View
222
Download
2
Embed Size (px)
Citation preview
jQuery Mobile 세미나
스팍스 10 주은진
웹앱
• 네이티브 앱– iOS -> Objective-C– Android -> Java
• 웹앱–웹 표준 기술로 네이티브 앱 수준 까지 개발
목표 !– jQueryMobile, Sencha Touch
jQueryMobile
jQTouch
jQuery
• 특징– HTML 5 마크업 중심의 개발언어 –웹 표준기술 HTML, CSS, javascript –쉽다 !
• 웹앱 ?– PhoneGap – Appspresso
• jQueryMobile 을 사용하려면 ?!
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
만 있으면 되요 !
<!DOCTYPE html><html>
<head><meta charset="UTF-8"><title>jQuery Mobile</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script></head>
<body><div data-role="page" id="home">
<div data-role="header"> <h1>jQueryMobile</h1> </div> <div data-role="content"> <p>Hello World</p> </div> <div data-role="footer“> <p>Hello world for jQueryMobile</p> </div>
</div></body></html>
기본화면 !
페이지의 구조
<div data-role="page" id="home"> <div data-role="header"> <h1>jQueryMobile</h1> </div> <div data-role="content"> <p>Hello World</p> </div> <div data-role="footer“ > <h3>Hello world for jQueryMobile</h3> </div></div>
//data-position=“fixed”
내부 (internal) 페이지간 이동
<div data-role="page" id="home"> <div data-role="header"> <h1>jQueryMobile</h1> </div> <div data-role="content"> <p>Hello World</p>
<p>click <a href=“page2”>here</a>to move to internal page! </p>
</div> <div data-role="footer“> <p>Hello world for jQueryMobile</p> </div></div>
<div data-role="page" id=“page2"> <div data-role="header"> <h1>This is next page!</h1> </div> <div data-role="content"> <p>Hello! Welcome to
Page2!</p> </div> <div data-role="footer“> <p>Hello world for jQueryMobile</p> </div></div>
Back button 의 필요성 ?
• Default 로는 없다 !
• <div data-role=“page” id=“page2”data-add-back-btn=“true”>
이렇게 하면 생겨요 ~
다른 버튼 !
<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1> <a href="index.html" data-icon="check">Save</a>
</div>
Page Transition
<a href=“#page2" data-transition="pop">I'll pop</a>
<a href=“#page2" data-transition=“slideup">I'll pop</a>
<a href=“#page2" data-transition=“fade">I'll pop</a>
<a href=“#page2" data-transition=“flip">I'll pop</a>
외부페이지<a href="b.html" data-role="button"
rel="external">click to go the external </a>
• Internal page– 기본적으로 page-transition 효과가 들어간다– 로딩이 빠르다– Javascript 가 새로 로딩되지 않는다 !
• External page– Page-transition 효과가 들어가지 않는다– 조금 느리고 끊김 현상이 있다– Javascript 가 새로 로딩된다 .
리스트
Convention<ul data-role="listview" >
<li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li>
</ul>
• data-inset=“true”• data-theme=“c”• <li data-role=“list-divider”>List divider</li>
리스트 응용 !
• Count bubble <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
• Search filter <ul data-role="listview" data-filter="true">
그 외 못다룬 리스트 ..
그 외 못다룬 리스트 ..
Collapsible Data
• Basic<div data-role="collapsible">
<h3>I'm a header</h3> <p>I'm the collapsible content. </p>
</div>
• Not collapsed<div data-role="collapsible" data-collapsed="false">
• Nested collapsible• Collapsible List
네비게이션 바 <div data-role="footer">
<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><!-- /navbar --> </div><!-- /footer -->
Form<div data-role="fieldcontain">
<label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain"> <label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" /> </div>
<div data-role="fieldcontain"> <label for="textarea">Textarea:</label><textarea cols="40" rows="8" name="textarea“id="textarea"></textarea>
</div>
Form
<div data-role="fieldcontain"> <label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="slider"> <option value="off">Off</option> <option value="on">On</option>
</select> </div>
그 외의 Form…
Reference
• 공식싸이트– Docs
http://jquerymobile.com/demos/1.0/ –공식
http://jquerymobile.com
• 설명 http://blog.naver.com/PostView.nhn?blogId=damanegi_kr&logNo=121710664
감사합니다 ^0^