關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

Size: px

Start display at page:

Download "關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK"

禅嘏贡
6 years ago
Views:

1 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 <article> <section> <nav> <header> <footer> <video> <audio> <canvas> CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript JavaScript JavaScript JavaScript JavaScript DOM window document element jquery Mobile jquery Mobile jquery Mobile UI

2 關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK ios SDK App A PDF ( ) HTML CSS JavaScript HTML CSS JavaScript bgcolor="#rrggbb" rrggbb RGB [] font-family: 1[, 2] [, 2] font-style:normal italic oblique font-style normal italic oblique PowerPoint (02) (04) (06) (07)

3 19 Chapter jquery Mobile API 19-1 jquery Mobile 19-2 jquery Mobile 19-3

4 19-2 l 跨裝置網頁設計 19-1 jquery Mobile jquery Mobile $.mobile JavaScript API API jquery Mobile framework ( jquery Mobile category/methods/ ) jquery.mobile.changepage() jquery.mobile.changepage(to [, options]) to to URL "a.html" jquery $("#pageid") $ jquery $() jquery jquery to "#pageid" options options allowsamepagetransition (default:false) changehash (default:true) data (default:undefined) dataurl (default:undefined) changepage() true false Ajax changepage() to URL changepage() URL pagecontainer (default: jquery $.mobile.pagecontainer) <body>

5 jquery Mobile API l 19-3 reloadpage (default:false) reverse (default:false) role (default:undefined) showloadmsg (default:true) transition (default: $.mobile. defaultpagetransition) type (default:"get") false ( ) data-role HTTP method "get" "post" ( 19 ) jqmui1.html ( 12 ) 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title> jquery Mobile </title> 06: <link rel="stylesheet" href=" /> 07: <script src=" 08: <script src=" 09: <meta name="viewport" content="width=device-width, initial-scale=1"> 10: <script> 11: function piece(){ 12: $.mobile.changepage("jqmui1.html", {transition: "slideup", changehash: false}); 13: } a b c d 14: </script> 15: </head> 16: <body> 17: <div data-role="page" id="page1"> 18: <div data-role="content"> 19: <a href="javascript:piece();" data-role="button"> </a> 20: </div> 21: </div> a $ jquery 22: </body> 23:</html> <\Ch19\jQMAPI1.html> b URL c ( ) d

19-4 l 跨裝置網頁設計 1 2 1 2 results.php id "search" HTTP method "post" $.mobile.changepage("results.php", { type: "post", data: $("form#search").

6 19-4 l 跨裝置網頁設計 results.php id "search" HTTP method "post" $.mobile.changepage("results.php", { type: "post", data: $("form#search").serialize(), changehash: false }); jquery Mobile jquery.mobile.loadpage() DOM (Document Object Model) ( ) jquery.mobile.loadpage(url [, options]) url URL "a.html" options jquery.mobile.changepage() changepage() URL loadpage()

7 jquery Mobile API l URL jquery.mobile.path.get() URL url URL jquery.mobile.path.get(url) URL " Books" ( $ jquery ) $.mobile.path.get(" URL jquery.mobile.path.isabsoluteurl() URL true false url URL jquery.mobile.path.isabsoluteurl(url) true false $.mobile.path.isabsoluteurl(" // true $.mobile.path.isabsoluteurl("css3.html") // false URL jquery.mobile.path.isrelativeurl() URL true false url URL jquery.mobile.path.isrelativeurl(url) false true $.mobile.path.isrelativeurl(" // false $.mobile.path.isrelativeurl("css3.html") // true

8 19-6 l 跨裝置網頁設計 URL jquery.mobile.path.parseurl() URL url URL jquery.mobile.path.parseurl(url) url URL JavaScript location hash host URL # # URL hostname href pathname port protocol search authority directory domain filename hrefnohash hrefnosearch password username URL URL URL URL URL : URL?? URL URL URL hash URL search authority authority parseurl() URL host protocol directory filename search

jquery Mobile API l 19-7 <!doctype html> <html> <head> <meta charset="utf-8"> <title> jquery Mobile </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.

9 jquery Mobile API l 19-7 <!doctype html> <html> <head> <meta charset="utf-8"> <title> jquery Mobile </title> <link rel="stylesheet" href=" /> <script src=" <script src=" <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div data-role="page" id="page1"> <div data-role="content"> <script> var obj = $.mobile.path.parseurl(" window.document.write("host " + obj.host + "<br>"); window.document.write("protocol " + obj.protocol + "<br>"); window.document.write("directory " + obj.directory + "<br>"); window.document.write("filename " + obj.filename + "<br>"); window.document.write("search " + obj.search + "<br>"); </script> </div> </div> </body> </html> <\Ch19\jQMAPI2.html>

10 19-8 l 跨裝置網頁設計 jquery.mobile.path.makeurlabsolute() relurl absurl relurl absurl jquery.mobile.path.makeurlabsolute(relurl, absurl) "CSS3.html" " " $.mobile.path.makeurlabsolute("css3.html", " "CSS3.html" "/x/y/z/jquery.html" "/x/y/z/css3.html" $.mobile.path.makeurlabsolute("css3.html", "/x/y/z/jquery.html") "../CSS3.html" "/x/y/z/jquery.html" "/x/y/css3.html" $.mobile.path.makeurlabsolute("../css3.html", "/x/y/z/jquery.html") jquery.mobile.silentscroll() Y scroll ypos Y 0 jquery.mobile.silentscroll(ypos) Y 100 $.mobile.silentscroll(100)

text(" portrait "); jquery $("*") $('*') id $("#btn1") id "btn1" class $(".

11 jquery Mobile API l 19-9 備註 jquery DOM jquery JavaScript $( ).method( ); $ jquery $() jquery (selector) DOM id "orientation" jquery text() $("#orientation").text(" portrait "); jquery $("*") $('*') id $("#btn1") id "btn1" class $(".heading") class "heading" HTML $("h1") <h1> HTML $("div p") <div> <p> jquery DOM html( ) DOM HTML text( ) DOM append( ) HTML prepend( ) HTML remove( ) DOM

12 19-10 l 跨裝置網頁設計 19-2 jquery Mobile 16-7 HTML 5 DOM jquery Mobile ypagebeforecreate ypagecreate DOM ( Ajax ) (widget) ypageinit ypagebeforeload ypageload DOM ypageloadfailed ypageremove jquery Mobile framework DOM ypagebeforechange ypagechange changepage() DOM ypagechangefailed changepage() ypagebeforeshow ypageshow ypagebeforehide ypagehide

13 jquery Mobile API l yswipe 30 ( 75 ) yswipeleft swipe yswiperight swipe ytap ytaphold yorientationchange yscrollstart yscrollstop yvclick click ( ) yvmousecancel mousecancel. yvmousedown mousedown yvmousemove mousemove yvmouseout mouseout yvmouseover mouseover yvmouseup mouseup yupdatelayout

19-12 l 跨裝置網頁設計 orientationchange portrait landscape ( jquery Mobile http://api.jquerymobile.com/category/ events/ ) 01:<!

14 19-12 l 跨裝置網頁設計 orientationchange portrait landscape ( jquery Mobile events/ ) 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title> jquery Mobile </title> 06: <link rel="stylesheet" href=" /> 07: <script src=" 08: <script src=" 09: <meta name="viewport" content="width=device-width, initial-scale=1"> 10: </head> 11: <body> 12: <div data-role="page" id="page1"> <\Ch19\jQMEvt1.html> ( 1/2)

15 jquery Mobile API l : <div data-role="content"> 14: <h3 id="orientation"> orientationchange </h3> 15: <div> 16: </div> 17: <script> 18: // orientationchange 19: $(window).on("orientationchange", function(event) { 20: $("#orientation").text(" " + event.orientation + " "); 21: }); 22: // orientationchange 23: $(window).orientationchange(); 24: </script> 25: </body> 26:</html> <\Ch19\jQMEvt1.html >( 2/2) 19 ~ 21 jquery on() orientationchange id "orientation" event orientation "portrait" "landscape" on() jquery 1.7 bind() live() bind() DOM DOM live() 20 id "orientation" jquery text() 23 jquery orientationchange() orientationchange 19 ~ 21 orientationchange id "orientation" <h3> portrait landscape 14 orientationchange

19-14 l 跨裝置網頁設計 pagebeforecreate 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title> jquery Mobile </title> 06: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.

16 19-14 l 跨裝置網頁設計 pagebeforecreate 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title> jquery Mobile </title> 06: <link rel="stylesheet" href=" /> 07: <script src=" 08: <script src=" 09: <meta name="viewport" content="width=device-width, initial-scale=1"> 10: </head> 11: <body> 12: <div data-role="page" id="page1"> 13: <script> 14: $("#page1").on("pagebeforecreate", function(event) { 15: $(this).append('<div data-role="header"><h1> </h1></div>'); 16: $(this).append('<div data-role="content"><p> </p></div>'); 17: $(this).append('<div data-role="footer"><h4> </h4></div>'); 18: }); 19: </script> 20: </div> jquery 21: </body> 22:</html> append() HTML <\Ch19\jQMEvt2.html>

17 jquery Mobile API l load jquery framework jquery document ready jquery Mobile framework jquery Mobile document mobileinit jquery Mobile framework UI mobileinit mobileinit ready load mobileinit $(document).on("mobileinit", function(){ // }); jquery on() mobileinit jquery framework mobileinit jquery Mobile framework jquery Mobile framework mobileinit jquery framework jquery Mobile framework <head> <meta charset="utf-8"> <title> jquery Mobile </title> <link rel="stylesheet" href=" /> <script src=" <script> $(document).on("mobileinit", function(){ // }); </script> <script src=" <meta name="viewport" content="width=device-width, initial-scale=1"> </head>

18 19-16 l 跨裝置網頁設計 "flip" ( ) <!doctype html> <html> <head> <meta charset="utf-8"> <title> jquery Mobile </title> <link rel="stylesheet" href=" /> <script src=" <script> $(document).on("mobileinit", function(){ $.mobile.defaultpagetransition="flip"; }); </script> <script src=" <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html> jquery Mobile defaultpagetransition defaultdialogtransition activebtnclass activepageclass ajaxenabled allowcrossdomainpages autoinitializepage minscrollback "fade" "pop" CSS "ui-btn-active" CSS "ui-page-active" Ajax true Ajax false true 250 ( )

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5 網頁程式設計 HTML JavaScript CSS HTML JavaScript CSS HTML 5 JavaScript JavaScript HTML 5 API CSS CSS Part 1 HTML HTML 5 API HTML 5 Apple QuickTime Adobe Flash RealPlayer Ajax XMLHttpRequest HTML 4.01 HTML 5