4. 애니메이션 4.1 jqtouch 활용 jquery 기반의 모바일 웹 프레임워크
DESCRIPTION
4. 애니메이션 4.1 JQTouch 활용 jQuery 기반의 모바일 웹 프레임워크 jQTouch is an Open Source JQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone , G1 ( Android ), and Palm Pre . - PowerPoint PPT PresentationTRANSCRIPT
Web App (4. Animation) 1
4. 애니메이션
4.1 JQTouch 활용 jQuery 기반의 모바일 웹 프레임워크
jQTouch is an Open Source JQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone , G1 ( Android ), and Palm Pre.
It enables programmers to develop mobile applications with a native look and feel for the target device using HTML , CSS , and JavaScript.
4.2 Home 패널 ‘kilo’ 라는 간단한 칼로리 추적 앱 : 5 개의 패널 (Home, Settings, Dates, Date, N
ew Entry) 로 구성
Home 과 About 패널을 위한 index.html
Web App (4. Animation) 2
<html> <head> <title>Kilo</title> </head> <body> <div id="home"> <div class="toolbar"> <h1>Kilo</h1> </div> <ul class="edgetoedge"> <li class="arrow"><a href="#about">About</a></li> </ul> </div> <div id="about"> <div class="toolbar"> <h1>About</h1> <a class="button back" href="#">Back</a> </div> <div> <p>Kilo gives you easy access to your food diary.</p> </div> </div> </body></html>
• 툴바 : 윈도나 웹 브라우저 따위의 응용 프로그램 가운데 사용자가 자주 사용하는 명령어들을 따로 모아 아이콘 모양으로 만들어 놓은 것 (CSS 클래스 , jQTouch 테마 ).
#jqt .toolbar { -webkit-box-sizing: border-box; border-bottom: 1px solid #000; padding: 10px; height: 45px; background: url(img/toolbar.png) #000000 repeat-x; position: relative;.
}
해당 박스모델의 가로 / 세로 면적이 width+padding+border 였던 기존의 계산 content-box
을 바꾸어 width(padding+border) 으로 계산하게 하는 속성 = border-box
Web App (4. Animation) 3
edgetoedge 클래스 : 가시권 영역의 좌측에서 우측으로 목록을 최대한 펼쳐 놓는다 .
#jqt ul.edgetoedge { border-width: 1px 0; margin: 0; padding: 0;}
jQTouch 를 활성화해 줄 head 를 추가한 html<html> <head> <title>Kilo</title> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/themes/jqt/theme.css"> <script type="text/javascript" src="jqtouch/jquery.js"></script> <script type="text/javascript" src="jqtouch/jqtouch.js"></script> <script type="text/javascript"> var jQT = $.jQTouch({ icon: 'kilo.png' }); </script> </head> <body> <div id="home"> <div class="toolbar"> <h1>Kilo</h1> </div> <ul class="edgetoedge"> <li class="arrow"><a href="#about">About</a></li> </ul> </div> <div id="about"> <div class="toolbar"> <h1>About</h1> <a class="button back" href="#">Back</a> </div> <div> <p>Kilo gives you easy access to your food diary.</p> </div> </div> </body></html>
Web App (4. Animation) 4
4.3 Dates 패널 추가 오늘부터 5 일전까지 상대적 날짜 리스트를 가지는 Dates 패널 추가
<html> <head> <title>Kilo</title> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/themes/jqt/theme.css"> <script type="text/javascript" src="jqtouch/jquery.js"></script> <script type="text/javascript" src="jqtouch/jqtouch.js"></script> <script type="text/javascript"> var jQT = $.jQTouch({ icon: 'kilo.png' }); </script> </head> <body> <div id="home"> <div class="toolbar"> <h1>Kilo</h1> </div> <ul class="edgetoedge"> <li class="arrow"><a href="#dates">Dates</a></li> <li class="arrow"><a href="#about">About</a></li> </ul> </div> <div id="about"> <div class="toolbar"> <h1>About</h1> <a class="button back" href="#">Back</a> </div> <div> <p>Kilo gives you easy access to your food diary.</p> </div> </div> <div id="dates"> <div class="toolbar"> <h1>Dates</h1> <a class="button back" href="#">Back</a> </div> <ul class="edgetoedge"> <li class="arrow"><a id="0" href="#date">Today</a></li> <li class="arrow"><a id="1" href="#date">Yesterday</a></li> <li class="arrow"><a id="2" href="#date">2 Days Ago</a></li> <li class="arrow"><a id="3" href="#date">3 Days Ago</a></li> <li class="arrow"><a id="4" href="#date">4 Days Ago</a></li> <li class="arrow"><a id="5" href="#date">5 Days Ago</a></li> </ul> </div> </body></html>
Web App (4. Animation) 5
4.4 Date 패널 추가 Date 패널을 위한 html
<html> <head> . . . </head> <body> . . . <div id="dates"> <div class="toolbar"> <h1>Dates</h1> <a class="button back" href="#">Back</a> </div> <div id="date"> . . . </div> <div id="date"> <div class="toolbar"> <h1>Date</h1> <a class="button back" href="#">Back</a> <a class="button slideup" href="#createEntry">+</a> </div> <ul class="edgetoedge"> <li id="entryTemplate" class="entry" style="display:none"> <span class="label">Label</span> <span class="calories">000</span> <span class="delete">Delete</span> </li> </ul> </div> </body></html>
Web App (4. Animation) 6
jQuery slideup 클래스 예제
<!DOCTYPE html> <html> <head> <style> div { background:#3d9a44; margin:3px; width:80px; height:40px; float:left; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> Click me! <div></div> <div></div> <div></div> <div></div> <div></div> <script> $(document.body).click(function () { if ($("div:first").is(":hidden")) { $("div").show("slow"); } else { $("div").slideUp(); } }); </script> </body> </html>
화면에 보이지 않는 요소들을찾아주는 선택자 . 요소들은 몇 가지 원인에 의해
숨겨져 있게 됩니다 .◎ CSS display 속성값이 none 일때 ◎ form 요소 중에 type='hidden'
일때 ◎ 요소의 width 와 height 가 0
일때 ◎ 부모 요소가 보이지 않거나 숨겨져
있을 때
Web App (4. Animation) 7
4.5 New Entry 패널 추가 POST 전송은 웹 페이지의 폼 (form) 양식을 서버로 전송하는 규칙인데 , jQTouc
h 에서는 POST 전송을 내부적으로 Ajax 호출로 처리한다 . 그리고 POST 처리 결과를 받아서 자동으로 페이지요소를 생성 , id 를 부여하여 자연스럽게 jQTouch 화면으로 구성해 준다 .
<html> <head> . . . </head> <body> . . . <div id="createEntry"> <div class="toolbar"> <h1>New Entry</h1> <a class="button cancel" href="#">Cancel</a> </div> <form method="post"> <ul class="rounded"> <li><input type="text" placeholder="Food" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="submit" class="submit" name="action" value="Save Entry" /></li> </ul> </form> </div> </body></html>
Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.submitHandler function (jqouch.js) 가 실행 .showPageByHref() 로 AJAX 를 통해 페이지 조각을 로드하고 다음 슬라이드를 수행해야 한다 .
Web App (4. Animation) 8
4.6 Settings 패널 추가 최종적인 html 코드
<!DOCTYPE html><html> <head> <title>Kilo</title> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css"> <script type="text/javascript" src="jqtouch/jquery.js"></script> <script type="text/javascript" src="jqtouch/jqtouch.js"></script> <script type="text/javascript"> var jQT = $.jQTouch({ icon: 'kilo.png' }); </script> </head> <body> <div id="home"> <div class="toolbar"> <h1>Kilo</h1> <a class="button flip" href="#settings">Settings</a> </div> <ul class="edgetoedge"> <li class="arrow"><a href="#dates">Dates</a></li> <li class="arrow"><a href="#about">About</a></li> </ul> </div>
Web App (4. Animation) 9
<div id="about"> <div class="toolbar"> <h1>About</h1> <a class="button back" href="#">Back</a> </div> <div> <p>Kilo gives you easy access to your food diary.</p> </div> </div> <div id="dates"> <div class="toolbar"> <h1>Dates</h1> <a class="button back" href="#">Back</a> </div> <ul class="edgetoedge"> <li class="arrow"><a id="0" href="#date">Today</a></li> <li class="arrow"><a id="1" href="#date">Yesterday</a></li> <li class="arrow"><a id="2" href="#date">2 Days Ago</a></li> <li class="arrow"><a id="3" href="#date">3 Days Ago</a></li> <li class="arrow"><a id="4" href="#date">4 Days Ago</a></li> <li class="arrow"><a id="5" href="#date">5 Days Ago</a></li> </ul> </div> <div id="date"> <div class="toolbar"> <h1>Date</h1> <a class="button back" href="#">Back</a> <a class="button slideup" href="#createEntry">+</a> </div>
Web App (4. Animation) 10
<ul class="edgetoedge"> <li id="entryTemplate" class="entry" style="display:none"> <span class="label">Label</span> <span class="calories">000</span> <span class="delete">Delete</span> </li> </ul> </div> <div id="createEntry"> <div class="toolbar"> <h1>New Entry</h1> <a class="button cancel" href="#">Cancel</a> </div> <form method="post"> <ul class="rounded"> <li><input type="text" placeholder="Food" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="submit" class="submit" name="waction" value="Save Entry" /></li> </ul> </form> </div> <div id="settings"> <div class="toolbar"> <h1>Settings</h1> <a class="button cancel" href="#">Cancel</a> </div>
Web App (4. Animation) 11
<form method="post"> <ul class="rounded"> <li><input placeholder="Age" type="text" name="age" id="age" /></li> <li><input placeholder="Weight" type="text" name="weight" id="weight" /></li> <li><input placeholder="Budget" type="text" name="budget" id="budget" /></li> <li><input type="submit" class="submit" name="action" value="Save Changes" /></li> </ul> </form> </div> </body></html>