JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.

Slides:



Advertisements
Similar presentations
第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例:關鍵字建議清單 15-4 應用實例:關鍵字建議清單.
Advertisements

低年段语文跨越式教学中的问题及对策 圆桌会议讨论
浅析浏览器解析和渲染 偏右.
08 CSS 基本語法 8-1 CSS 的演進 8-2 CSS 樣式規則與選擇器 8-3 連結HTML 文件與CSS 樣式表
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
5 工具列與ListView清單 5-1 巡覽工具列 5-2 標準工具列 5-3 基本ListView清單 5-4 進階ListView清單.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
RWD網頁設計實務 李欣螢 以誠研發有限公司.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
CSS简介 WEB前端三剑客之二.
武汉纺织大学传媒学院 cm.wtu.edu.cn
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Ch01 HTML 5 資料格式 網頁程式設計.
JQuery Mobile简介 唐瑶 Write less, do more.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
JQuery Mobile 建國科技大學資管系 饒瑞佶 2012/11 V1 2013/3 V2 2103/4 v3.
JavaScript 靜宜大學 資管系 楊子青.
Ch.13 HTML網頁實作.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
Working with Databases (II) 靜宜大學資管系 楊子青
作者:different(D姐),前端工程师 博客: 新浪微博:inline_block
JavaScript 靜宜大學 資管系 楊子青.
HTML5简介 WEB前端三剑客之一.
CSS樣式 靜宜大學 資管系 楊子青.
Text To Speech (TTS, 文字轉語音) 靜宜大學資管系 楊子青
網頁切換移轉 JS vs. ASP.NET.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
Android App簡介及 App Inventor 2體驗 靜宜大學資管系 楊子青
HTML & CSS.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
網頁切換移轉 JS vs. ASP.NET.
Bluetooth (藍牙) 靜宜大學資管系 楊子青
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
/ 第7讲:移动开发 冯顺磊 /
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
App Inventor 2初體驗 靜宜大學資管系 楊子青
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
JQuery Mobile简介 唐瑶 Write less, do more.
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
第一個cordova project Cordova project建立與平台設定,均藉由cli(command line interface來完成 建立project請打開命令提示字元視窗應輸入下列命令 cordova create hello tw.edu.stust.mis.hello HelloWorld.
Ch09 在網頁之間傳遞資訊 網頁程式設計.
个人网站作业3 传媒学院.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
UI 软件 设计 页面布局(一).
《网页设计与制作》.
IIS Internet Information Services
創意App實作 課程簡介 靜宜大學資管系 楊子青.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
Text To Speech (TTS, 文字轉語音) 靜宜大學資管系 楊子青
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
Unity回傳統計資訊程式說明: 填寫回傳資訊網址(theUrl)。
Video 影像 (VideoPlayer 影像播放器、Camcorder 錄影機) 靜宜大學資管系 楊子青
Text To Speech (TTS, 文字轉 語音)、讀簡訊 靜宜大學資管系 楊子青
CSS樣式 靜宜大學 資管系 楊子青.
JQuery 標籤操作 建國科技大學 資管系 饒瑞佶 2013/4 V1.
從HTML表格到CSS 靜宜大學 資管系 楊子青.
進階UI元件:ListView元件以及複選 靜宜大學資管系 楊子青
打Mole不打Ladybug (IV): 讓使用者控制Ladybug移動 靜宜大學資管系 楊子青
Activity的生命週期: 播放音樂與影片 靜宜大學資管系 楊子青
HTML基本語法及文字 靜宜大學 資管系 楊子青.
NFC (近場通訊, Near Field Communication) 靜宜大學資管系 楊子青
新選課系統說明會 電算中心 林以仁.
Presentation transcript:

JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青

大綱 建立多個頁面 巡覽列 彈出對話框 頁面轉場特效 可摺疊內容

jQuery Mobile的頁面結構,基本架構的語法: 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可以建立多個頁面

實例(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.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-2.1.4.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.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>

實例(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 data-role="page" id="Page3"> <div data-role="header">九州阿蘇火山纜車入口</div> <img src="http://www.cs.pu.edu.tw/~tcyang/george/image/travel/2003/day02f.jpg"></img></a> <a href="#Page2" data-role="button">北海道</a> </body> </html>

若網頁太長,希望固定出現header與footer: 設定data-position 補充:data-tap-toggle屬性Specifies whether the user is able to toggle toolbar-visibility on taps/clicks or not <div data-role="header" data-position="fixed" data-tap-toggle="false">首頁</div> … <div data-role="footer" data-position="fixed" data-tap-toggle="false">版權所有:靜宜大學資管系楊子青</div>

其他導向技巧 Email導向 電話號碼導向 href=mailto:tcyang@pu.edu.tw href=mailto:tcyang@pu.edu.tw?cc=tcyang@gm.pu.edu.tw&bcc=tcyang1971@gm.com&subject=行動版寄信&body=我是修習網頁設計實務的學生 電話號碼導向 撥電話 href="tel:0426328001" 撥電話 (含分機號碼) href="tel:0426328001,18110"

在div元素指定data-role="navbar"屬性,就可以將其中的ul和li元素轉變成巡覽列 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 data-role="footer">版權所有:靜宜大學資管系楊子青</div>

超鏈結加上data-rel="dialog" 3. 彈出對話框 超鏈結加上data-rel="dialog" <li><a href="#Page2" data-role="button" data-rel="dialog">北海道</a></li>

超鏈結加上data-transition屬性,可設定轉場特效 4. 頁面轉場特效 超鏈結加上data-transition屬性,可設定轉場特效 <li><a href="#Page2" data-role="button" data-transition= "slideup">北海道</a></li>

使用data-role="collapsible"屬性,可建立摺疊內容的區塊 5. 可摺疊內容 使用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>

jQuery Mobile Demo與自學資源 http://jquerymobile.com/demos/

Detect Mobile Browsers (PC版與手機版網頁切換範例程式) http://detectmobilebrowsers.com/ <!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> 輸入行動版網頁網址

參考資料 教科書 網路資源 榮欽科技、陳婉凌,網頁設計必學的程式實作技術:HTML5+CSS3+JavaScript,2012年,博碩。 Chap 18: 開發跨平台行動裝置網頁jQuery Mobile 網路資源 http://www.w3schools.com/jquerymobile/ http://jquerymobile.com/ http://jquerymobile.com/themeroller/