Mobile development - jquery mobile phonegap

MOBILE DEVELOPMENTWith jQuery Mobile & PhoneGap by Pete Freitag / Foundeo Inc... A touch optimized HTML5 Framework for building mobile websites and apps... jQuery Mobile is currently in

Trang 1

MOBILE DEVELOPMENT

With jQuery Mobile & PhoneGap

by Pete Freitag / Foundeo Inc

petefreitag.com / foundeo.com

Trang 3

A touch optimized HTML5

Framework for building mobile

websites and apps

Trang 4

jQuery Mobile is currently in Alpha 2, so keep in mind that not all features are implemented

or stable at this time

Trang 5

TOUCH OPTIMIZED?

like swipe, swipeleft, swiperight, orientationchange, tap,

taphold, etc

Trang 6

MOBILE OS SUPPORT

Trang 7

BUT I DON’T KNOW JQUERY

simple jQuery Mobile Web Site or App

comes time to add dynamic interactions

Trang 8

WHAT’S IN JQUERY MOBILE?

Trang 9

LET’S GET STARTED

<!doctype html>

< html >

< head >

< title >jQuery Mobile Example</ title >

< link rel ="stylesheet"

href ="jquery.mobile-1.0a2/jquery.mobile-1.0a2.css" />

< script src ="jquery-1.4.4.min.js"></ script >

< script src ="jquery.mobile-1.0a2/jquery.mobile-1.0a2.js"></ script > </ head >

3) jQuery Mobile JS

Trang 10

associate an element with a widget For example:

Trang 11

custom data storage associated with the element

do <div data-id=”#cat.id#”> </div> and it will still pass as valid HTML5

Trang 12

linked together via a link to #pageElementID

Trang 13

EXAMPLE PAGES

< div data-role =" page " id =" home " >

< div data-role =" header " >

< h1 > Home </ h1 >

< a href =" #settings " data-role =" button " >

Settings </ a >

</ div >

< div data-role =" page " id =" settings " data-theme =" b " >

< div data-role =" header " >

Trang 14

be controlled using the data-theme attribute

Trang 15

button tag, an a tag, or input type=submit|button|reset|image

right, top or bottom by specifying data-iconpos or to just use the icon use data-iconpos=”notext”

Trang 16

BUTTON ICONS

custom icons easily

Trang 17

<li><a href =" #about " > About Us </a></li>

<li><a href =" #settings " > Settings </a></li>

</ul>

More Advanced List View options available, see docs.

Trang 18

WORKING WITH FORMS

data-role=”fieldcontain” attribute

< form >

< div data-role ="fieldcontain">

< label for ="slider">Slider:</ label >

< input type ="range" name ="slider" id ="slider" value ="0" min ="0" max ="100" /> </ div >

</ form >

Trang 19

ALPHA LIMITATIONS

content dynamically

some bugs

Trang 20

JQUERY MOBILE

jQuery Mobile

Trang 21

www.phonegap.com

Trang 22

WHAT IS PHONEGAP?

Blackberry, Symbian, and WebOS using HTML, CSS, and JavaScript

Trang 23

accessing native device API’s such as:

• GPS

Trang 24

PHONEGAP PLUGINS

be platform specific For Example:

Trang 25

CREATING AN IOS APP

Template

Trang 26

CREATING AN IOS APP

Trang 27

CREATING AN IOS APP

Edit

index.html

Trang 28

CREATING AN IOS APP

folder

Display Name

Trang 29

IPHONE DEMO

Trang 30

CREATING AN ANDROID APP

http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart

Trang 31

ANDROID DEMO

Trang 32

DEMO MILEAGEPAD.COM

ColdFusion Powered:

MileagePad.com

Trang 33

Thank You!

petefreitag.com / foundeo.com

Tiêu đề	Mobile development - jQuery mobile phonegap
Tác giả	Pete Freitag
Trường học	Foundeo Inc.
Chuyên ngành	Mobile Development
Thể loại	Article
Năm xuất bản	2011

Định dạng
Số trang	33
Dung lượng	1,43 MB