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

HyperText Markup Language
網站「開外掛」 優化營業人員的戰鬥力 介紹 Web365行動展售網站系統的10大特色
浅析浏览器解析和渲染 偏右.
第5章 HTML 標籤介紹.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主
Web图片搜索引擎设计 ——基于文本的图片信息提取.
第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清單.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
RWD網頁設計實務 李欣螢 以誠研發有限公司.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
CT212 (02/03)-Network Programming and design
ASP动态网页设计实用教程 主讲教师: 开课单位:.
CSS简介 WEB前端三剑客之二.
武汉纺织大学传媒学院 cm.wtu.edu.cn
HTML5全栈开发序列课程 《前端入门》之HTML入门 余鹏作品.
Google 自訂搜尋 淡江大學資訊中心 專案發展組 朱家璁 2009/10/6.
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Ch01 HTML 5 資料格式 網頁程式設計.
JQuery Mobile简介 唐瑶 Write less, do more.
网站设计 前端 入门学习.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
JQuery Mobile 建國科技大學資管系 饒瑞佶 2012/11 V1 2013/3 V2 2103/4 v3.
HTML 钟晖云 QQ:
Ch.13 HTML網頁實作.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
作者:different(D姐),前端工程师 博客: 新浪微博:inline_block
Happy Designer 第四次聚會 課程內容分享 2008/11/20.
Web前端开发技术与实践 第3章:初识HTML5 阮晓龙 /
HTML5简介 WEB前端三剑客之一.
JavaScript 靜宜大學 資管系 楊子青.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
HTML & CSS.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
第八 课 n l 教学.
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
W3C标准网页制作 主讲教师:张 涛.
/ 第7讲:移动开发 冯顺磊 /
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
网页设计与制作 Dreamweaver CS6 标准教程
JQuery Mobile简介 唐瑶 Write less, do more.
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
第4章 CSS基础 主讲人:刘泰然 经济管理学院.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
Web Programming 網際網路程式設計
資訊專案系統開發 實作課程 講師:張秀山
第一個cordova project Cordova project建立與平台設定,均藉由cli(command line interface來完成 建立project請打開命令提示字元視窗應輸入下列命令 cordova create hello tw.edu.stust.mis.hello HelloWorld.
Ch09 在網頁之間傳遞資訊 網頁程式設計.
个人网站作业3 传媒学院.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
《网页设计与制作》.
網頁設計 清單設計 Instructor: Reporter:楊政勳 Date:
HTML大探索.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
Unity回傳統計資訊程式說明: 填寫回傳資訊網址(theUrl)。
第7章 使用CSS设置链接与导航菜单 经济管理学院.
人因設計 阿倫online分析 第四組 組員 : 劉雅欣 黃莉媛 林威志 王畯銨 林倢伃.
CSS基礎 靜宜大學 資管系 楊子青.
104學年度 進修學校期初工作報告.
活動頁製作規範 數位支付部/數位通路科.
新選課系統說明會 電算中心 林以仁.
教师:李金双 网页制作 教师:李金双
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.4.5 引用方式 jQuery Mobile官網下載檔案 http://jquerymobile.com/ 最新版本1.4.5 引用方式 jQuery Mobile官網下載檔案 http://jquerymobile.com/download/ 透過URL連結到jQuery Mobile的CDN-hosted <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-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.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.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.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"> <!--開始一個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="輸入關鍵字進行搜尋"> …

(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/