JQuery Mobile ????

1
JQuery Mobile ????

• ???? ??? ???

2
??

• ??????
• ???
• ?????
• ??????
• ????
• ?????

3
1. ??????

• jQuery Mobile?????,???????
• ltdiv data-role"page" id"name"gt
• ltdiv data-role"header"gtlt/divgt
• ltdiv data-role"content"gtlt/divgt
• ltdiv data-role"footer"gtlt/divgt
• lt/divgt
• ???id?????????
• ???jQuery Mobile??,????id????????

4
??(1/2)

• lt!DOCTYPE htmlgt
• lthtmlgt
• ltheadgt
• ltmeta charset"utf-8"gt
• ltmeta name"viewport" content"widthdevice-widt
  h, initial-scale1"gt
• ltlink rel"stylesheet" href"http//code.jquery.
  com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /gt
• ltscript src"http//code.jquery.com/jquery-1.11.
  1.min.js"gtlt/scriptgt
• ltscript src"http//code.jquery.com/mobile/1.4.5
  /jquery.mobile-1.4.5.min.js"gtlt/scriptgt
• lt/headgt
• ltbodygt
• ltdiv data-role"page" id"Page1"gt
• ltdiv data-role"header"gt??lt/divgt
• ltdiv data-role"content"gt
• ltimg src"http//www.cs.pu.edu.tw/tcyang/
  george/course1021/tcyang.gif"gtlt/imggt
• lta href"Page2" data-role"button"gt???lt/a
  gt
• lta href"Page3" data-role"button"gt??lt/agt
  

5
??(2/2)

• ltdiv data-role"page" id"Page2"gt
• ltdiv data-role"header"gt???????lt/divgt
• ltdiv data-role"content"gt
• ltimg src"http//www.cs.pu.edu.tw/tcyang/
  george/image/love/91japan/snow05.jpg"gtlt/imggtlt/agt
• lta href"Page1" data-role"button"gt???lt/a
  gt
• lta href"Page3" data-role"button"gt??lt/agt
  
• lt/divgt
• ltdiv data-role"footer"gt??????????????lt/divgt
  
• lt/divgt
• ltdiv data-role"page" id"Page3"gt
• ltdiv data-role"header"gt??????????lt/divgt
• ltdiv data-role"content"gt
• ltimg src"http//www.cs.pu.edu.tw/tcyang/
  george/image/travel/2003/day02f.jpg"gtlt/imggtlt/agt
• lta href"Page1" data-role"button"gt???lt/a
  gt
• lta href"Page2" data-role"button"gt???lt/a
  gt
• lt/divgt
• ltdiv data-role"footer"gt??????????????lt/divgt
  
• lt/divgt

6
????header?footer

• ?????,??????header?footer
• ??data-position
• ??data-tap-toggle??Specifies whether the user is
  able to toggle toolbar-visibility on taps/clicks
  or not
• ltdiv data-role"header" data-position"fixed"
  data-tap-toggle"false"gt??lt/divgt
• ltdiv data-role"footer" data-position"fixed"
  data-tap-toggle"false"gt??????????????lt/divgt

7
??????

• Email??
• hrefmailtotcyang_at_pu.edu.tw
• hrefmailtotcyang_at_pu.edu.tw?cctcyang_at_gm.pu.edu.t
  wbcctcyang1971_at_gm.comsubject?????body???????
  ??????
• ??????
• ??? href"tel[phone]"
• ??? (?????) href"tel[phone],18110"

8
2. ???

• ?div????data-role"navbar"??,???????ul?li????????

ltdiv data-role"page" id"Page1"gt ltdiv
data-role"header"gt??lt/divgt ltdiv
data-role"content"gt ltdiv
data-role"navbar"gt ltul gt
ltligtlta href"Page1" data-role"button"gt??lt/agtlt/li
gt ltligtlta href"Page2"
data-role"button"gt???lt/agtlt/ligt
ltligtlta href"Page3" data-role"button"gt??lt/agtlt/li
gt lt/ulgt lt/divgt ltimg
src"http//www.cs.pu.edu.tw/tcyang/george/course
1021/tcyang.gif"gtlt/imggt lt/divgt
ltdiv data-role"footer"gt??????????????lt/divgt
lt/divgt
9
3. ?????

• ?????data-rel"dialog"

ltligtlta href"Page2" data-role"button"
data-rel"dialog"gt???lt/agtlt/ligt
10
4. ??????

• ?????data-transition??,???????

ltligtlta href"Page2" data-role"button"
data-transition "slideup"gt???lt/agtlt/ligt
11
5. ????

• jQuery Mobile????(Themes)??5?????
• ??data-theme???? ae???????,??
• ltdiv data-role"header" data-theme"e"gt??lt/divgt
• ltdiv data-role"content" data-theme"e"gt

12
??????

• jQuery Mobile??ThemeRoller????????
• http//themeroller.jquerymobile.com/
• Step 1 ???jQuery??

13
??????

• Step 2 ???? (??????,?????)

14
??????

• Step 3 ???? ,???????,?????

15
??????

• Step 4 ????,????themes???,copy?html?
• ??????css
• ltlink rel"stylesheet" href"themes/tcyang.min.css
  " /gt
• ltlink rel"stylesheet" href"themes/jquery.mobile.
  icons.min.css" /gt
• Step 5 ????

16
6. ?????

• ??data-role"collapsible"??,??????????
• ltdiv data-role"collapsible" data-collapsed"true"
  gt
• lth3gt??jQuery Mobilelt/h3gt
• ltpgtjQuery Mobile???jQuery?????,
• ??iOS?Android?BlackBerry?bada?
• Windows Phone?webOS?Symbian?
• MeeGo????????????lt/pgt
• lt/divgt

17
jQuery Mobile Demo?????

• http//jquerymobile.com/demos/

18
Detect Mobile Browsers (PC?????????????)

• http//detectmobilebrowsers.com/

• lt!DOCTYPE htmlgt
• lthtmlgt
• ltheadgt
• ltmeta charsetutf-8 /gt
• lttitlegtlt/titlegt
• ltscript type"text/JavaScript"gt var
  refurlwindow.location.href if(refurl.lastIndex
  Of("?")-1) (function(a,b)if(/androidavantgo
  blackberryblazercompalelainefennechiptopiemo
  bileip(honeod)iriskindlelge
  maemomidpmmpopera m(obin)ipalm(
  os)?phonep(ixire)\/pluckerpocketpspsymbian
  treoup\.(browserlink)vodafonewapwindows
  (cephone)xdaxiino/i.test(a)/1207631065903g
  so4thp501-6i770s802sa waabacac(eroos\-)
  ai(korn)al(avcaco)amoian(exnyyw)aptuar(
  chgo)as(teus)attwau(di\-mr s
  )avanbe(ckllnq)bi(lbrd)bl(acaz)br(ev)wb
  umbbw\-(nu)c55\/capiccwacdm\-cellchtmcldc
  cmd\-co(mpnd)crawda(itllng)dbtedc\-sdevi
  dicadmobdo(cp)ods(12\-d)el(49ai)em(l2ul)
  er(ick0)esl8ez(4-70oswaze)fetcfly(\-_)
  g1 ug560genegf\-5g\-mogo(\.wod)gr(adun)h
  aiehcithd\-(mpt)hei\-hi(ptta)hp(
  iip)hs\-cht(c(\- _agpst)tp)hu(awtc)i
  \-(20goma)i230iac( \-\/)ibroideaig01ikom
  im1kinnoipaqirisja(tv)ajbrojemujigskddi
  kejikgt( \/)klonkpt kwc\-kyo(ck)le(noxi)
  lg( g\/(klu)5054e\-e\/\-a-w)libwlynxm
  1\-wm3gam50\/ma(teuixo)mc(0121ca)m\-crme
  (dircri)mi(o8oats)mmefmo(0102bidedot(\
  - ov)zz)mt(50p1v )mwbpmywan100-2n202
  -3n30(02)n50(025)n7(0(01)10)ne((cm)\-o
  ntfwfwgwt)nok(6i)nzpho2imop(tiwv)orano
  wg1p800pan(adt)pdxgpg(13\-(1-8c))philp
  irepl(ayuc)pn\-2po(ckrtse)proxpsiopt\-gq
  a\-aqc(0712213260\-2-7i\-)qtekr380r600
  raksrim9ro(vezo)s55\/sa(gemammmsnyva)s
  c(01h\-oop\-)sdk\/se(c(\-01)47mcndri)s
  gh\-sharsie(\-m)sk\-0sl(45id)sm(alarb3it
  t5)so(ftny)sp(01h\-v\-v )sy(01mb)t2(185
  0)t6(001018)ta(gtlk)tcl\-tdg\-tel(im)tim
  \-t\-moto(plsh)ts(70m\-m3m5)tx\-9up(\.bg
  1si)utstv400v750verivi(rgte)vk(4050-3\
  -v)vm40vodavulcvx(5253606170808183859
  8)w3c(\- )webcwhitwi(g ncnw)wmlbwonux700
  xda(\-2g)yas\-yourzetozte\-/i.test(a.substr
  (0,4)))window.locationb)(navigator.userAgentna
  vigator.vendorwindow.opera,'http//www.pu.edu.tw
  ')
• lt/scriptgt
• lt/headgt
• ltbodygt
• ????
• lt/bodygt
• lt/htmlgt

19
????

• ???
• ????????,?????????????HTML5CSS3JavaScript,2012?
  ,???
• Chap 18 ???????????jQuery Mobile
• ????
• http//www.w3schools.com/jquerymobile/
• http//jquerymobile.com/
• http//jquerymobile.com/themeroller/