JQuery Mobile 세미나 스팍스 10 주은진. 웹앱 네이티브 앱 –iOS -> Objective-C –Android -> Java 웹앱 – 웹 표준 기술로 네이티브 앱 수준 까지 개발

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">

http://jquerymobile.com/demos/1.0/docs/lists/index.html

그 외 못다룬 리스트 ..

그 외 못다룬 리스트 ..

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> </div>

http://jquerymobile.com/demos/1.0/docs/toolbars/docs-navbar.html



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

http://jquerymobile.com/demos/1.0/

http://jquerymobile.com/

http://blog.naver.com/PostView.nhn?blogId=damanegi_kr&logNo=121710664



감사합니다 ^0^

Documents

JQuery Mobile 세미나 스팍스 10 주은진. 웹앱 네이티브 앱 –iOS -> Objective-C –Android -> Java 웹앱 – 웹 표준 기술로 네이티브 앱 수준 까지 개발