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
關於本書 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 ( ) http://books.gotop.com.tw/download/acl039600 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 http://www.gotop.com.tw/ (02)2788-2408 (04)2452-7051 (06)270-8568 (07)384-7699
19 Chapter jquery Mobile API 19-1 jquery Mobile 19-2 jquery Mobile 19-3
19-2 l 跨裝置網頁設計 19-1 jquery Mobile jquery Mobile $.mobile JavaScript API API jquery Mobile framework ( jquery Mobile http://api.jquerymobile.com/ category/methods/ ) 19-1-1 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>
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="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 07: <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 08: <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 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").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()
jquery Mobile API l 19-5 19-1-2 URL jquery.mobile.path.get() URL url URL jquery.mobile.path.get(url) URL "http://www.lucky.com/ Books" ( $ jquery ) $.mobile.path.get("http://www.lucky.com/books/css3.html") 19-1-3 URL jquery.mobile.path.isabsoluteurl() URL true false url URL jquery.mobile.path.isabsoluteurl(url) true false $.mobile.path.isabsoluteurl("http://www.lucky.com/books/css3.html") // true $.mobile.path.isabsoluteurl("css3.html") // false 19-1-4 URL jquery.mobile.path.isrelativeurl() URL true false url URL jquery.mobile.path.isrelativeurl(url) false true $.mobile.path.isrelativeurl("http://www.lucky.com/books/css3.html") // false $.mobile.path.isrelativeurl("css3.html") // true
19-6 l 跨裝置網頁設計 19-1-5 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.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <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("http://www.arts.idv.tw/~jean/test.html?number=100"); 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>
19-8 l 跨裝置網頁設計 19-1-6 jquery.mobile.path.makeurlabsolute() relurl absurl relurl absurl jquery.mobile.path.makeurlabsolute(relurl, absurl) "CSS3.html" "http://www.lucky.com/books/" "http://www.lucky.com/books/css3.html" $.mobile.path.makeurlabsolute("css3.html", "http://www.lucky.com/books/") "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") 19-1-7 jquery.mobile.silentscroll() Y scroll ypos Y 0 jquery.mobile.silentscroll(ypos) Y 100 $.mobile.silentscroll(100)
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
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
jquery Mobile API l 19-11 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:<!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.3.1/jquery.mobile-1.3.1.min.css" /> 07: <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 08: <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 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)
jquery Mobile API l 19-13 13: <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.3.1/jquery.mobile-1.3.1.min.css" /> 07: <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 08: <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 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> 15 16 17 jquery 21: </body> 22:</html> append() HTML <\Ch19\jQMEvt2.html>
jquery Mobile API l 19-15 19-3 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="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(document).on("mobileinit", function(){ // }); </script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
19-16 l 跨裝置網頁設計 "flip" ( ) <!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.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(document).on("mobileinit", function(){ $.mobile.defaultpagetransition="flip"; }); </script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html> jquery Mobile http://api.jquerymobile.com/global-config/ defaultpagetransition defaultdialogtransition activebtnclass activepageclass ajaxenabled allowcrossdomainpages autoinitializepage minscrollback "fade" "pop" CSS "ui-btn-active" CSS "ui-page-active" Ajax true Ajax false true 250 ( )