Sie sind auf Seite 1von 26

Chapter 4

ANIMATION
Mr. SAR Vathnak

June , 2018
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

OBJECTIVES
 To add characteristic behaviors like sliding, page flip, and more to
your web app
 Be able to use jQTouch, which is a Zepto/jQuery plugin for
mobile web development on the iPhone, Android, iPod Touch,
and other forward-thinking devices.

ANIMATION PROGRAMMING MOBILE APPLICATIONS| BY SAR VATHNAK >> 1


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

INSTALLING jQTouch FOR ANIMATION


 What is a jQTouch?
 jQTouch is a Zepto/jQuery plugin for mobile web development on the iPhone, Android,
iPod Touch, and other forward-thinking devices.
 It is built by David Kaneda and maintained by Thomas Yip.
 It may be freely distributed under the MIT license.

 Other information about jQTouch:


 Official homepage: http://jqtjs.com/
 Current version 1.0.1: https://github.com/senchalabs/jQTouch/releases/download/
v1.0.1/jqt-demo-v1.0.1-0-g8a462395772f.tgz
 Documentation & tutorials: https://github.com/senchalabs/jQTouch/wiki

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 2


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

INSTALLING jQTouch FOR ANIMATION


 To install jQTouch, just follow those following
steps:
 Import your jQTouch prefer theme:

 Using jQuery inside jQTouch:


 Calling 2 related jQTouch’s JavaScript files:
 Initialize one jQTouch’s object:

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3a


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

INSTALLING jQTouch FOR ANIMATION


 To install jQTouch, just follow those following
steps:
 Import your jQTouch prefer theme:
 Using jQuery inside jQTouch:

 Calling 2 related jQTouch’s JavaScript files:


 Initialize one jQTouch’s object:

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3b


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

INSTALLING jQTouch FOR ANIMATION


 To install jQTouch, just follow those following
steps:
 Import your jQTouch prefer theme:
 Using jQuery inside jQTouch:
 Calling 2 related jQTouch’s JavaScript files:

ANIMATION  Initialize one jQTouch’s object: PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3c
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

INSTALLING jQTouch FOR ANIMATION


 To install jQTouch, just follow those following
steps:
 Import your jQTouch prefer theme:
 Using jQuery inside jQTouch:
 Calling 2 related jQTouch’s JavaScript files:
 Initialize one jQTouch’s object:

This icon property tells jQTouch where to look for the custom home screen icon.

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3d


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

BUILDING A SAMPLE APP USING jQTouch


 Let’s build a simple calorie-tracking application called Kilo that allows the
user to add
and delete food entries for a given date.
 This app will contain 5 panels:
 Home
 Settings
 Dates
 Date
 New Entry

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 4


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

SLIDING HOME PANEL


 Create one html file
named as index.html
with the code in the
right hand side
Click on about will open
the About panel

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 5a


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

SLIDING HOME PANEL


 The result will look like
this:

Click on about will open


the About panel

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 5b


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

SLIDING HOME PANEL


 Some notes while using
jQTouch:
 <div id="..."> ... </div>
will become a panel in the
application ( only for those
<div>s which are descendants
of the <body> )
<div id="home">

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6a


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

SLIDING HOME PANEL


 Some notes while using
jQTouch:
 <div class="toolbar" >…</div>
will become a mobile phone
toolbar with the specific theme
(i.e., jqtouch/apple/vanilla, …)

<div class="toolbar"><h1>Kilo</h1></div>

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6b


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

SLIDING HOME PANEL


 Some notes while using
jQTouch:
 Any elements with a
class = "arrow" will add a
chevron to the right side of
that element.

<li class="arrow"><a href="#about">About</a></li>

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6c


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

SLIDING HOME PANEL


 Some notes while using
jQTouch:
 A single <h1> with a
<div class = "toolbar">
will become the panel’s title.

<div class="toolbar"><h1>Kilo</h1></div>

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6d


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

SLIDING HOME PANEL


 Some notes while using
jQTouch:
 Any <a> elements with
class = "button back",
which are children of the
<div class = "toolbar">, will
look & act like a Back button.

<a class="button back" href="#">Back</a>

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6e


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING DATES PANEL


 The Dates panel will have a list
of
relative dates beginning with
today
and going back to five days ago.
 update the Home panel with a
link to the Dates panel
 add the HTML for the Dates panel
right after the About panel

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 7


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING DATES PANEL


update the Home panel with a link
to the Dates panel in the index.html

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 8


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

add the below HTML for the Dates panel right after the About panel

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 9


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE DATE PANEL


 Add the HTML code for the Date panel right after the
Dates panel.

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 10a


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE DATE PANEL


 Add the HTML code for the Date panel right after the
Dates panel.
The Date panel toolbar has an additional button.
After clicking, this button will display the New Entry panel.

A class slideup tells jQTouch that we want the target


panel to slide up from the bottom of the screen

Currently, there are no entries, so the panel will be empty


aside from the toolbar by setting with this inline style.

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 10b


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE NEW ENTRY PANEL


 Add this below code to the end of index.html

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 11a


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE NEW ENTRY PANEL


 Add this below code to the end of index.html

jQTouch offers a convenience method that automatically removes the


cursor from the active field when a form is submitted. To take advantage
of this feature, add the submit class to the submit element of the form.

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 11b


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE SETTINGS PANEL


 Insert this below code in the Home panel of
index.html

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 12


PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY

ADDING THE SETTINGS PANEL


 Add this below code to the end of index.html

ANIMATION PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 13


PRACTICE
REFERENCES
[1] 2012_JonathanStark_Building-android-apps-with-html, css, and-javascript[2ed]
[2] Official homepage of jQT, http://jqtjs.com/
[3] Current used version of jQT used, https://github.com/senchalabs/jQTouch/releases/
download/v1.0.1/jqt-demo-v1.0.1-0-g8a462395772f.tgz
[4] Documentation & tutorials of jQT: https://github.com/senchalabs/jQTouch/wiki