JQueryMobile基礎-靜宜大學資訊學院.pptVIP

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 /jquerymobile/ jQuery Mobile引用 官方網站 / 必威体育精装版版本1.3.2 引用方式 jQuery Mobile官網下載檔案 /download/ 透過URL連結到jQuery Mobile的CDN-hosted link rel=stylesheet href=/mobile/1.3.2/jquery.mobile-1.3.2.min.css / script src=/jquery-1.9.1.min.js/script script src=/mobile/1.3.2/jquery.mobile-1.3.2.min.js/script 2. jQuery Mobile基本網頁架構 header、content與footer組成 jQuery Mobile完整網頁實例 行動裝置模擬器 Opera Mobile Emulator 可在桌上型電腦執行的手機版瀏覽器，必威体育精装版版Opera Mobile Classic Emulator 12.1 for Windows /zh-tw/developer/mobile-emulator 自行練習 3. jQuery Mobile Lists (列表) 有序清單(ordered list) ol標記+li標記 無序清單(unordered list) ul標記+li標記 (1) jQuery Mobile List Views 圓角 data-inset=true 分群 data-role=list-divider attribute to an li element jQuery Mobile List Views 根據字母自動分群 data-autodividers=true jQuery Mobile List Views Search Filter(搜尋過濾)： data-filter=true (2) jQuery Mobile List Content jQuery Mobile List Thumbnails (縮圖) 運用img標籤，網頁會自動縮圖成80*80px jQuery Mobile List Content 圖示 class=ui-li-icon jQuery Mobile List Content Split Buttons 同一個li標籤，放入第二個超鏈結 jQuery Mobile List Content Count Bubbles display numbers associated with list items 4. jQuery Mobile 按鈕 三種設法 buttonButton/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 a href=# data-role=button取消/a /div a href=“#” data-role=“button”其他/a 參考資料 教科書 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScr