建立jQueryMobile程式與佈景.ppt

建立jQuery Mobile程式與佈景 3-1 jQuery Mobile的基礎 3-2 行動網路瀏覽器與Viewport 3-3 下載、安裝與使用jQuery Mobile 3-4 建立第一個jQuery Mobile程式 3-5 jQuery Mobile頁面結構 3-6 jQuery Mobile的佈景 3-1 jQuery Mobile的基礎 3-1-1 認識jQuery Mobile 3-1-2 jQuery Mobile的檔案與支援平台 3-1-1 認識jQuery Mobile jQuery Mobile是由jQuery專案小組開發，在2011年11月推出1.0正式版，它是一套建立在jQuery函數庫之上的使用介面系統（User Interface System，UI），一個觸控最佳化的Web框架，提供眾多最佳化觸控操作的使用介面元素，可以讓我們不用撰寫一行JavaScript程式碼，就輕鬆使用HTML標籤建立跨行動裝置網站或Mobile Web應用程式的使用介面。 3-1-2 jQuery Mobile的檔案與支援平台-檔案 jQuery Mobile所需的檔案 在jQuery Mobile的HTML5網頁文件需要內嵌JavaScript函數庫和CSS外部樣式，其檔案內容如下所示： jQuery函數庫的JavaScript程式檔。 jQuery Mobile核心JavaScript程式檔。 jQuery Mobile核心CSS外部樣式檔。 jQuery Mobile佈景的外部樣式檔（選項）。 3-1-2 jQuery Mobile的檔案與支援平台-支援平台 3-2 行動網路瀏覽器與Viewport 3-2-1 行動網路瀏覽器與模擬器 3-2-2 Meta標籤Viewport 3-2-3 瀏覽Mobile網頁 3-2-1 行動網路瀏覽器與模擬器 目前桌上型電腦的主要瀏覽器有：Internet Explorer、Firefox、Safari、Opera和Chrome等，在Mobile平台的行動網路瀏覽器也一樣有很多種，除了各平台內建的行動網路瀏覽器外，還有一些桌上型瀏覽器的Mobile版，例如：Opera和Firefox。 基本上，行動裝置的行動網路瀏覽器和桌上型瀏覽器之間的最大差異在行動裝置的螢幕尺寸比較小，目前巿面上行動裝置平台有Apple的iPhone iOS、Google的Android和Windows Phone等平台，其內建行動網路瀏覽器都支援必威体育精装版HTML5、CSS3和JavaScript。 3-2-2 Meta標籤Viewport-語法 Meta標籤Viewport最早出現在Apple公司iPhone手機的Safari瀏覽器，可以正確告訴行動瀏覽器所看到的網頁尺寸，如果沒有此Meta標籤Viewport，行動瀏覽器會認為它是在瀏覽一頁桌上型電腦看到的網頁，如下所示： meta name=viewport content=width=device-width, initial-scale=1 上述meta標籤的name屬性值是viewport，可以告訴使用WebKit瀏覽器引擎的行動瀏覽器，和需要顯示的頁面尺寸為何？ 3-2-2 Meta標籤Viewport-參數1 在content屬性提供一些參數來定義進一步尺寸和縮放資訊，相關參數說明如下表所示： 3-2-2 Meta標籤Viewport-參數2 在Android作業系統的內建行動瀏覽器支援額外參數，其說明如下表所示： 3-2-2 Meta標籤Viewport-範例 現在，我們就可以建立Ch3_2_2.html，在head區塊加上Meta標籤Viewport來建立Mobile網頁，如下所示： head meta charset=utf-8/ meta name=viewport content=width=device-width, initial-scale=1 titleCh3_2_2.html/title /head 上述content屬性的參數指定使用行動裝置的螢幕寬度，1個viewport顯示螢幕的像素等於1個螢幕像素。 3-2-3 瀏覽Mobile網頁 現在，我們就可以使用iPhone Simulator和Opera Mobile Emulator來瀏覽Mobile網頁。 3-3 下載、安裝與使用jQuery Mobile 3-3-1 下載jQuery與jQuery Mobile 3-3-2 安裝jQuery Mobile至WebMatrix站台 3-3-3 在HTML網頁使用jQuery Mobile 3-3-1 下載jQuery與jQuery Mobile-下載 下載jQuery Mobile jQuery