Cultura Africana J.M.A.S. – PORTUAL - 2007 自動換頁 音樂: Casablanca 自動換頁 音樂: Casablanca.
JQuery Mobile 網頁切換
description
Transcript of JQuery Mobile 網頁切換
網頁設計實務
JQuery Mobile 網頁切換靜宜大學 資管系 楊子青
網頁設計實務
22
大綱 建立多個頁面
巡覽列
彈出對話框
頁面轉場特效
佈景主題
可摺疊內容
網頁設計實務
33
1. 建立多個頁面 jQuery Mobile 的頁面結構,基本架構的語法:
<div data-role="page" id="name">
<div data-role="header">…</div>
<div data-role="content">…</div>
<div data-role="footer">…</div>
</div>
語法的 id 屬性可以替頁面命名– 同一個 jQuery Mobile 程式,透過不同 id 可以建立多個頁面
網頁設計實務
44
實例 (1/2)
<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head>
<body>
<div data-role="page" id="Page1"> <div data-role="header">首頁 </div> <div data-role="content"> <img src="http://www.cs.pu.edu.tw/~tcyang/george/course1021/tcyang.gif"></img> <a href="#Page2" data-role="button">北海道 </a> <a href="#Page3" data-role="button">九州 </a> </div>
<div data-role="footer">版權所有:靜宜大學資管系楊子青 </div> </div>
網頁設計實務
55
實例 (2/2)
<div data-role="page" id="Page2"> <div data-role="header">北海道小樽運河 </div> <div data-role="content"> <img src="http://www.cs.pu.edu.tw/~tcyang/george/image/love/91japan/snow05.jpg"></
img></a> <a href="#Page1" data-role="button">回首頁 </a> <a href="#Page3" data-role="button">九州 </a> </div> <div data-role="footer">版權所有:靜宜大學資管系楊子青 </div> </div>
<div data-role="page" id="Page3"> <div data-role="header">九州阿蘇火山纜車入口 </div> <div data-role="content"> <img src="http://www.cs.pu.edu.tw/~tcyang/george/image/travel/2003/day02f.jpg"></img></a> <a href="#Page1" data-role="button">回首頁 </a> <a href="#Page2" data-role="button">北海道 </a> </div> <div data-role="footer">版權所有:靜宜大學資管系楊子青 </div> </div>
</body></html>
網頁設計實務
66
固定出現 header與 footer
若網頁太長,希望固定出現 header與 footer :– 設定 data-position與 data-tap-toggle 屬性
<div data-role="header" data-position="fixed" data-tap-toggle="false"> 首頁 </div>
…
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 版權所有:靜宜大學資管系楊子青 </div>
網頁設計實務
77
其他導向技巧 Email導向
– href=mailto:[email protected]– href=mailto:[email protected]?
[email protected]&[email protected]&subject=TestJQUERY&body=Hello JQUERY!
電話號碼導向– 撥電話 href="tel:0426328001"– 撥電話 ( 含分機號碼 ) href="tel:0426328001,18110"
網頁設計實務
88
2. 巡覽列在 div元素指定 data-role="navbar"屬性,就可以將其中的 ul和 li元素轉變成巡覽列
<div data-role="page" id="Page1"> <div data-role="header">首頁 </div> <div data-role="content">
<div data-role="navbar"> <ul > <li><a href="#Page1" data-role="button">首頁 </a></li> <li><a href="#Page2" data-role="button">北海道 </a></li> <li><a href="#Page3" data-role="button">九州 </a></li> </ul> </div>
<img src="http://www.cs.pu.edu.tw/~tcyang/george/course1021/tcyang.gif"></img> </div>
<div data-role="footer">版權所有:靜宜大學資管系楊子青 </div> </div>
網頁設計實務
99
3. 彈出對話框超鏈結加上 data-rel="dialog"
<li><a href="#Page2" data-role="button" data-rel="dialog">北海道 </a></li>
網頁設計實務
1010
4. 頁面轉場特效超鏈結加上 data-transition屬性,可設定轉場特效<li><a href="#Page2" data-role="button" data-transition=
"slideup">北海道 </a></li>
網頁設計實務
1111
5. 佈景主題 jQuery Mobile預設佈景 (Themes)提供 5種色彩搭配
– 使用 data-theme 屬性指定 a~e色彩搭配的佈景,例如: <div data-role="header" data-theme="e"> 首頁 </div>
<div data-role="content" data-theme="e">
網頁設計實務
1212
自行設計佈景 jQuery Mobile 提供 ThemeRoller 自行設計佈景主題– http://jquerymobile.com/themeroller/
Step 1: 先選擇 jQuery 版本
網頁設計實務
1313
自行設計佈景 Step 2: 設計佈景 ( 上方顏色拖曳,或左方設定 )
網頁設計實務
1414
自行設計佈景 Step 3: 下載佈景 ,給一個佈景名字,下載解壓縮
網頁設計實務
1515
自行設計佈景 Step 4: 解壓縮後,會有一個 themes 資料夾, copy至 html 下– 網頁內容引用 css :
<link rel="stylesheet" href="themes/tcyang.css" />
Step 5: 最後結果
網頁設計實務
1616
6. 可摺疊內容使用 data-role="collapsible" 屬性,可建立摺疊內容的區塊<div data-role="collapsible" data-collapsed="true">
<h3> 關於 jQuery Mobile</h3>
<p>jQuery Mobile 是基於 jQuery 建立的框架, 支援 iOS、 Android、 BlackBerry、 bada 、 Windows Phone、 webOS、 Symbian 和 MeeGo 的手機網頁應用程式開發。 </p>
</div>
網頁設計實務
1717
jQuery Mobile 線上編輯工具
http://jquerymobile.com/– Codiqa
網頁設計實務
1818
jQuery Mobile Demo與自學資源
http://view.jquerymobile.com/1.3.2/dist/demos/
網頁設計實務
1919
Detect Mobile Browsers (PC版與手機版網頁切換範例程式 )
<!DOCTYPE html><html><head><meta charset=utf-8 /><title></title>
<script type="text/JavaScript"> var refurl=window.location.href; if(refurl.lastIndexOf("?")==-1) { (function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://www.pu.edu.tw'); }
</script>
</head><body>靜宜大學 </body></html>
http://detectmobilebrowsers.com/
網頁設計實務
2020
參考資料
教科書– 榮欽科技、陳婉凌,網頁設計必學的程式實作技術:
HTML5+CSS3+JavaScript, 2012 年,博碩。 Chap 18: 開發跨平台行動裝置網頁 jQuery Mobile
網路資源– http://www.w3schools.com/jquerymobile/ – http://jquerymobile.com/– http://jquerymobile.com/themeroller/