5月20日- 行動網頁教學簡介
Download
Report
Transcript 5月20日- 行動網頁教學簡介
行動網頁製作簡介
指導老師：廖述盛 教授
報 告 人：幸廣泰 助理
jQuery Mobile 的特性
• jQuery mobile 可跨不同的移動裝置：
jQuery mobile 可支援許多不同的平台，包括：iOS, Android,
Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile,
bada, MeeGo，以及其他可以看得懂 HTML 的設備。 詳細支援狀況
可參考 Mobile Graded Browser Support
• 支援新舊瀏覽器：
可讓較舊的手機一樣可以看到基本的功能(即使不支援 javascipt)，同
時又可以讓支援度比較好的瀏覽器享受較先進的功能。
• 透過設定 HTML 標籤來完成 jQuery Mobile 的設定：
jQuery 主要是透過 HTML5 data-* tag 來達成種種 UI 的設定，只要
認識了大概的語法，不用寫一行 javascript，就可以快速建出 app 的
雛型。
jQuery mobile 運作步驟
• 宣告 HTML5 documnt
• 載入jQuery mobile CSS, jQuery, jQuery mobile 函式庫
• 使用 jquery mobile 所定義的語法，如 data-role 等來定義
頁面架構
• 官網：http://demos.jquerymobile.com/1.4.2/
行動網頁語法及基本架構
1.
2.
3.
4.
5.
<!DOCTYPE html>
<html>
1.宣告 HTML5 documnt
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>行動網頁</title>
6. <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
7. <link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
8. <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
9. <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
10. </head>
11. <body>
2.載入JQ函式庫
12. <div data-role="page" id="page">
3. 使用
jquery
mobile
所定義
的頁面
結構
13.
14.
15.
<div data-role="header">
<h1>頁首</h1>
</div>
16.
17.
18.
<div data-role="content">
網頁內容
</div>
19.
20.
21.
<div data-role="footer">
<h4>頁尾</h4>
</div>
22. </div>
23. </body>
24. </html>
網頁內容
加入背景及設定網頁大小
•
語法加入的位置：
請將下列語法加在 <head> …. </head> 之間
顏色編碼
•
加入背景顏色：
語法： <style>.ui-page{background:#66FF33;} </style>
(資料夾位置/圖檔)
•
加入背景圖片：
語法：<style>.ui-page{ background-image:url(images/bgs_title.gif);}</style>
•
色碼表：http://rhinejo.myweb.hinet.net/home/color/color-cord.html
設定網頁大小及Viewport設定
• 設定網頁大小：
語法：
<script>
function changesize(){
window.resizeTo(480,760); //指定預開啟的寬度與高度
}
window.onload=changesize;
window.onresize=changesize;
</script>
• Viewport：一般是響應式網頁設計用來設定移動裝置瀏覽網頁的寬度
和基本設定
語法：
<meta name="viewport" content="width=device-width, initial-scale=1">
固定頁首/尾位置及設定顏色
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<div data-role="page" id="page">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>頁首</h1>
</div>
固定頁首位置
設定顏色(a – e)
<div data-role="content">
內容
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>頁尾</h4>
</div>
13. </div>
Data-theme屬性
銀
灰
參考網頁：http://www.lampweb.org/jquerymobile/8/25.html
於頁首設定返回鍵及超連結
1. <div data-role="header" data-position="fixed" data-theme="a">
2. <a href=“index.htm” rel=“external” data-theme=“b” data-icon="home" >回首頁</a>
3.
4.
<h1>頁首</h1>
</div>
不同網站間的網頁無法以Ajax
方式建立超連結，必須取消
Ajax功能，也就是明確定義為
絕對外部連結
1.設定圖示
2.各種圖示語法及連結
設定ListView介面元件
• 語法
1. <div data-role="content">
2.
<ul data-role="listview">
3.
<li><a href=“#page2“ rel="external">第二頁</a></li>
4.
<li><a href="#page3“ rel="external">第三頁</a></li>
5.
<li><a href="#page4“ rel="external">第四頁</a></li>
6.
</ul>
超連結或網址
7. </div>
• listview加入圖片
1. <div data-role="content">
2.
<ul data-role="listview">
3.
<li><a href=“p5.htm” rel=“external”><img border=“0” src=“images/1.jpg”><h3>薄荷</h3></a></li>
4.
<li><a href="#page3">第三頁</a></li>
5.
<li><a href="#page4">第四頁</a></li>
6.
</ul>
7. </div>
可折疊內容區塊
• 語法：
1.
2.
3.
4.
<div data-role="collapsible" data-collapsed="true">
<h3> 標題</h3>
…內容…
</div>
True：關閉
false：展開
操作練習
• 請各組製作有關醫學或醫管等行動教學/學習網站
• 每人至少3頁，請於每頁右上角註明該頁作者(學
號/姓名)
• 請於5/26前上傳完整網頁架構，並於6/2前完成網
頁內容
• 請各組將網站FTP上傳後，將網址填報至
http://www2.cmu.edu.tw/~cmuapp/1022ia/index.php
參考資料
•
http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-websitedevelopment/
•
http://www.lampweb.org/jquerymobile/
•
http://lms.tzuchi.com.tw/epaper/artical/index.php?id=file/37/digiinfo_0
•
http://www.jqmgallery.com/jquery-mobile-tutorials/
•
http://w3schools.com/jquerymobile/default.asp
•
http://www.jquery4u.com/mobile/50-jquery-mobile-development/
•
http://www.jqmapi.com/
•
http://www.lynda.com/jQuery-Mobile-tutorials/Essential-Training/866442.html