JQuery Mobile基礎 (開發跨平台行動裝置網頁)

Slides:



Advertisements
Similar presentations
第 5 章 建立 jQuery Mobile 網頁應用程式 5-1 jQuery Mobile 的基礎 5-1 jQuery Mobile 的基礎 5-2 行動網路瀏覽器與 Mobile 網頁 5-2 行動網路瀏覽器與 Mobile 網頁 5-3 建立 jQuery Mobile 開發環境 5-3 建立.
Advertisements

第 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 應用實例:關鍵字建議清單.
浅析浏览器解析和渲染 偏右.
第5章 HTML 標籤介紹.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
5 工具列與ListView清單 5-1 巡覽工具列 5-2 標準工具列 5-3 基本ListView清單 5-4 進階ListView清單.
RWD網頁設計實務 李欣螢 以誠研發有限公司.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
第 1 章 使用 APP INVENTOR 2 開發 ANDROID APP
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Ch01 HTML 5 資料格式 網頁程式設計.
JQuery Mobile简介 唐瑶 Write less, do more.
MIT App Inventor簡介及 「Hello World」程式初體驗 靜宜大學資管系 楊子青
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
JQuery Mobile 建國科技大學資管系 饒瑞佶 2012/11 V1 2013/3 V2 2103/4 v3.
HTML 钟晖云 QQ:
JavaScript 靜宜大學 資管系 楊子青.
Ch.13 HTML網頁實作.
Working with Databases (II) 靜宜大學資管系 楊子青
CSS樣式 靜宜大學 資管系 楊子青.
R教學 安裝RStudio 羅琪老師.
ASP.NET基本設計與操作 建國科技大學 資管系 饒瑞佶 2007年.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
Android App簡介及 App Inventor 2體驗 靜宜大學資管系 楊子青
HTML & CSS.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
Bluetooth (藍牙) 靜宜大學資管系 楊子青
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
人事差勤系統 網路簽到退 資訊室 黃怡智.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
/ 第7讲:移动开发 冯顺磊 /
App Inventor 2初體驗 靜宜大學資管系 楊子青
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
网页设计与制作 Dreamweaver CS6 标准教程
JQuery Mobile简介 唐瑶 Write less, do more.
網路程式設計期末project 指導教授:馬尚彬 學生:楊依林 學號:B
第一個cordova project Cordova project建立與平台設定,均藉由cli(command line interface來完成 建立project請打開命令提示字元視窗應輸入下列命令 cordova create hello tw.edu.stust.mis.hello HelloWorld.
網頁程式概論 建國科技大學資管系 饒瑞佶 2015/9 V1 2016/4 V2 2016/9 V3.
个人网站作业3 传媒学院.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
《网页设计与制作》.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
智慧型手機程式設計 建國科技大學資管系 饒瑞佶 2011年(992).
武汉纺织大学传媒学院 cm.wtu.edu.cn
App Inventor 2體驗 及呼叫PHP程式存取資料庫 靜宜大學資管系 楊子青
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
Unity回傳統計資訊程式說明: 填寫回傳資訊網址(theUrl)。
Video 影像 (VideoPlayer 影像播放器、Camcorder 錄影機) 靜宜大學資管系 楊子青
Text To Speech (TTS, 文字轉 語音)、讀簡訊 靜宜大學資管系 楊子青
CSS樣式 靜宜大學 資管系 楊子青.
JQuery 標籤操作 建國科技大學 資管系 饒瑞佶 2013/4 V1.
從HTML表格到CSS 靜宜大學 資管系 楊子青.
Dreamweaver 進階網頁製作 B 許天彰.
Welcome to my badminton world
進階UI元件:ListView元件以及複選 靜宜大學資管系 楊子青
打Mole不打Ladybug (IV): 讓使用者控制Ladybug移動 靜宜大學資管系 楊子青
CSS基礎 靜宜大學 資管系 楊子青.
清單的CSS樣式.
Activity的生命週期: 播放音樂與影片 靜宜大學資管系 楊子青
HTML基本語法及文字 靜宜大學 資管系 楊子青.
NFC (近場通訊, Near Field Communication) 靜宜大學資管系 楊子青
Jquery Mobile開發須知 周季賢.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

JQuery Mobile基礎 (開發跨平台行動裝置網頁) 靜宜大學 資管系 楊子青

jQuery Mobile Lists (列表) jQuery Mobile 按鈕 大綱 jQuery Mobile簡介 jQuery Mobile基本網頁架構 jQuery Mobile Lists (列表) jQuery Mobile 按鈕

1. jQuery Mobile簡介 行動裝置普及 會寫PC瀏覽的網頁已經不夠,需要開發行動裝置網頁 行動裝置品牌眾多,光使用Apple iOS和Android系統就有多種不同規格尺寸的手持裝置,更遑論平板裝置 jQuery推出一套新的函式庫jQuery Mobile,希望統一目前行動裝置的使用者介面

jQuery Mobile特色 jQuery Mobile使用jQuery函數庫,因此語法相同 使用介面是使用標記驅動(Markup-driven)來設定與配置 直接使用HTML 5的data-*標籤來建立使用介面元素 提供觸摸、觸摸且按住、滑過和方向改變等自訂事件,可以輕鬆處理手機行動裝置的觸控操作。 使用佈景(Themes)來建立一致的使用介面外觀。

jQuery Mobile Demo http://www.w3schools.com/jquerymobile/

jQuery Mobile引用 官方網站 最新版本1.3.2 引用方式 jQuery Mobile官網下載檔案 http://jquerymobile.com/ 最新版本1.3.2 引用方式 jQuery Mobile官網下載檔案 http://jquerymobile.com/download/ 透過URL連結到jQuery Mobile的CDN-hosted <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>

header、content與footer組成 2. jQuery Mobile基本網頁架構 header、content與footer組成 <div data-role="page"> <!--開始一個page --> <div data-role="header"> 標題(header) </div> <div data-role="content"> 網頁內容(content) <div data-role="footer"> 頁尾(footer)

jQuery Mobile完整網頁實例 指定行動裝置的縮放比例 <!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"> <!--開始一個page --> <div data-role="header"> 標題(header) </div> <div data-role="content"> 網頁內容(content) <div data-role="footer"> 頁尾(footer) </body> </html> 指定行動裝置的縮放比例

行動裝置模擬器 Opera Mobile Emulator 可在桌上型電腦執行的手機版瀏覽器,最新版Opera Mobile Classic Emulator 12.1 for Windows http://www.opera.com/zh-tw/developer/mobile-emulator

自行練習

3. jQuery Mobile Lists (列表) 有序清單(ordered list) <ol>標記+<li>標記 無序清單(unordered list) <ul>標記+<li>標記 <div data-role="content"> <h2>Ordered List:</h2> <ol data-role="listview"> <li><a href="http://www.pu.edu.tw">靜宜大學</a></li> <li><a href="http://www.csim.pu.edu.tw">靜宜資管</a></li> </ol> <h2>Unordered List:</h2> <ul data-role="listview"> <li><a href="http://www1.pu.edu.tw/~tcyang">楊子青</a></li> </ul> </div>

(1) jQuery Mobile List Views 圓角 data-inset="true" 分群 data-role="list-divider" attribute to an <li> element <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">靜宜大學資訊學院</li> <li><a href="http://www.csim.pu.edu.tw">資管系</a></li> <li><a href="http://www.csie.pu.edu.tw">資工系</a></li> <li><a href="http://www.csce.pu.edu.tw">資傳系</a></li> <li data-role="list-divider">楊子青</a></li> <li><a href="http://www1.pu.edu.tw/~tcyang">個人網頁</a></li> </ul> </div>

jQuery Mobile List Views 根據字母自動分群 data-autodividers="true" <div data-role="content"> <ul data-role="listview" data-inset="true" data-autodividers="true"> <li><a href="http://www.csim.pu.edu.tw">資管系</a></li> <li><a href="http://www.csie.pu.edu.tw">資工系</a></li> <li><a href="http://www.csce.pu.edu.tw">資傳系</a></li> <li><a href="http://www.ba.pu.edu.tw">企管系</a></li> <li><a href="http://www.csim.pu.edu.tw">CSIM</a></li> <li><a href="http://www.csie.pu.edu.tw">CSIE</a></li> <li><a href="http://www.csce.pu.edu.tw">CSCE</a></li> </ul> </div>

jQuery Mobile List Views Search Filter(搜尋過濾): data-filter="true" <div data-role="content"> <ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true"> … data-filter-placeholder="Search For Names" <div data-role="content"> <ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Search For Names"> …

(2) jQuery Mobile List Content jQuery Mobile List Thumbnails (縮圖) 運用img標籤,網頁會自動縮圖成80*80px <li> <a href="http://www1.pu.edu.tw/~tcyang"> <img src="http://www.cs.pu.edu.tw/~tcyang/george/image/tcyang/drifter/drifter2.jpg"> <h2>楊子青</h2> <p>唸碩士班尚未發福,在研究室拍的照片...</p> </a> </li>

jQuery Mobile List Content 圖示 class="ui-li-icon" <li> <a href="http://www1.pu.edu.tw/~tcyang"> <img src=http://www.cs.pu.edu.tw/~tcyang/george/image/tcyang/drifter/drifter2.jpg class="ui-li-icon" > 楊子青</a> </li>

jQuery Mobile List Content Split Buttons 同一個<li>標籤,放入第二個超鏈結 <li> <a href="http://www1.pu.edu.tw/~tcyang"> <img src=http://www.cs.pu.edu.tw/~tcyang/george/image/tcyang/drifter/drifter2.jpg class="ui-li-icon" > 楊子青</a> <a href="http://www.cs.pu.edu.tw/~tcyang/georgeM/project/project.htm">競賽指導</a> </li>

jQuery Mobile List Content Count Bubbles display numbers associated with list items <li> <a href="http://www1.pu.edu.tw/~tcyang"> <img src=http://www.cs.pu.edu.tw/~tcyang/george/image/tcyang/drifter/drifter2.jpg class="ui-li-icon" >楊子青 <span class="ui-li-count">25</span></a> <a href="http://www.cs.pu.edu.tw/~tcyang/georgeM/project/project.htm" data-rel="dialog" data-transition="pop">競賽指導</a> </li>

4. jQuery Mobile 按鈕 三種設法 <button>Button</button> <input type="button" value="Button"> 在a元素加上data-role="button"屬性 <a href="#" data-role="button">確定</a> 如果使用介面擁有多個相關按鈕,可以在div元素使用data-role="controlgroup"屬性來群組多個按鈕 <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">放棄</a> <a href="#" data-role="button">取消</a> </div> <a href=“#” data-role=“button”>其他</a>

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