發表於2024-12-30
《jQuery Mobile移動網站開發》是一本由淺入深、係統地介紹jQuery Mobile移動網站開發知識的指導書。全書以jQuery Mobile框架為主綫,把在開發中涉及的HTML 5、CSS 3、jQuery,以及jQuery Mobile框架的定製與擴展等一並介紹,形成一個完整的體係。本書內容涵蓋瞭jQuery Mobile中的各種UI組件、頁麵布局、事件處理、網頁設計策略、瀏覽器兼容性、移動網站特點、技術標準的發展與適用性等大量理論與實踐過程中需要注意的細節,全書的各個知識點均配有實例,以供參考。
《jQuery Mobile移動網站開發》適閤具有初步HTML/CSS/JavaScript網頁設計與編程經驗,並對開發移動網站有興趣的讀者學習,不要求讀者擁有在移動應用和大型網站開發方麵的經驗,適用於移動網站開發的初學者。
第1章 移動Web開發簡介 1
1.1 移動Web的發展 2
1.2 移動Web的特點和設計策略 5
1.3 jQuery Mobile 12
1.4 準備工作 17
1.5 本章習題 24
第2章 HTML 5開發基礎 27
2.1 HTML 5的語法結構 28
2.2 HTML 5常用元素簡介 36
2.3 HTML 5 API 61
2.4 HTML 5的增強功能 66
2.5 HTML 5代碼的語法驗證 70
2.6 本章習題 71
第3章 CSS 3設計基礎 73
3.1 CSS簡介 74
3.2 樣式選擇器 77
3.3 基本樣式 93
3.4 圖形變換與動畫效果 114
3.5 CSS與輸齣設備 124
3.6 本章習題 129
第4章 jQuery入門 133
4.1 jQuery的基本使用方法 134
4.2 jQuery選擇器 140
4.3 jQuery網頁特效 152
4.4 jQuery的事件處理 158
4.5 jQuery網頁的動態處理 167
4.6 jQuery UI簡介 178
4.7 本章習題 181
第5章 jQuery Mobile開發基礎 185
5.1 jQuery Mobile應用環境 186
5.2 jQuery Mobile程序的基本組織結構 191
5.3 屏幕切換動畫特效 207
5.4 本章習題 209
第6章 UI組件 - 工具欄 211
6.1 工具欄基礎 212
6.2 工具欄的內容和樣式特徵 221
6.3 導航欄 230
6.4 網頁中的網頁 237
6.5 本章習題 239
第7章 jQuery Mobile的UI組件 241
7.1 按鈕和圖標 242
7.2 錶單輸入元素 253
7.3 錶格與網格 264
7.4 本章習題 280
第8章 jQuery Mobile的UI組件(續) 283
8.1 滑動條 284
8.2 列錶視圖 291
8.3 可收放的UI組件 306
8.4 麵闆 313
8.5 選擇菜單 320
8.6 選擇開關 326
8.7 本章習題 331
第9章 jQuery Mobile的樣式定製 333
9.1 jQuery Mobile主題樣式係統簡介 334
9.2 使用第三方樣式主題 337
9.3 ThemeRoller工具 342
9.4 UI組件定製實例 348
9.5 本章習題 357
第10章 jQuery Mobile功能的擴展 359
10.1 圖標集的擴展 360
10.2 網頁切換過渡效果擴展 376
10.3 UI組件擴展 380
10.4 本章習題 387
第11章 jQuery Mobile事件處理 389
11.1 網頁與初始化事件 390
11.2 用戶操作事件 397
11.3 本章習題 403
第12章 jQuery和jQuery Mobile的
插件 405
12.1 日期選擇器插件 - DateBox 406
12.2 窗口插件 - Windows 412
12.3 圖片插件 - OWL Carousel 419
12.4 Google地圖 424
12.5 本章習題 430
附錄A Web服務器設置方法簡介 431
附錄B 習題解答 441
2.1 HTML 5的語法結構
相信HTML對於大多數讀者來說應該已經不是什麼陌生的新技術瞭。但我們仍將在這一節中簡要介紹HTML網頁設計的基本方法和技巧,並在此過程中逐步介紹HTML 5與過去傳統HTML在語法結構和設計思想上的不同、HTML 5的優點和特點,以及HTML 5對桌麵Web和移動Web在設計理念上帶來的變化。
在第1章中,我們介紹瞭HTML 5在逐步標準化的過程中,WHAT工作組,以及經由W3C參與組建的HTML工作組起到瞭關鍵的作用。但是,WHAT工作組與W3C在設計理念和技術標準化方麵的看法有很多不同,從2011年起,HTML 5技術標準逐漸齣現瞭一些分支。其中最主要的錶現是W3C和WHAT工作組分彆發布瞭HTML 5技術標準的草稿。W3C發布的草稿以WHAT工作組的最新更新為前提,並補充瞭一部分W3C認為必須馬上標準化的內容。而WHAT工作組堅信HTML 5技術的發展是一個漫長的漸進過程,他們更願意維護一個逐漸發展的版本,而不是一個可以馬上實現標準化的版本。分歧使我們可以同時看到兩個非常類似、但在某些技術細節上存在著一些顯著差異的HTML 5技術規範草稿。
HTML 5的設計與一些正在使用的其他技術標準在個彆內容上有衝突。細心的讀者在閱讀技術規範草稿原文的時候,可能會注意到這些差彆。本書將介紹已經被廣為接受的HTML 5語法,對於HTML 5在技術理論的層麵上不做探討。
2.1.1 HTML 5網頁的基本結構
HTML網頁從源代碼上看,是由一組標簽經過一定的嵌套規則而組成的樹狀結構代碼。HTML的標簽嵌套不需要像XML那樣嚴格,也就是說,有一些HTML元素並不要求必須使用結束標簽。在HTML 5中,某些元素的結束標簽在特定情況下是可有可無的。有關這些元素標簽的特殊語法規則,我們將在本章的2.2.7小節中介紹。
HTML 5的語法與傳統的HTML相似,同時帶有XHTML的特徵。作為一種標記語言,HTML 5保留瞭語法簡潔的特點,同時,稍微嚴格的語法規則使HTML 5更容易以DOM方式處理。代碼2.1展示瞭一個含有基本組成部分的HTML 5網頁樣本。
代碼2.1 一個含有最基本結構的HTML 5樣本文件
你好, HTML5!
代碼2.1與平常所見的HTML文檔(比如HTML 4.0格式的網頁文檔)非常相似。它含有HTML文檔的最外層的標簽。標簽是HTML網頁文檔的根元素,網頁開發人員可以在根元素中添加lang屬性,用於說明當前網頁所用的語言,比如錶示當前網頁中的內容使用法語。lang屬性值為由兩個字母組成的國際標準語言代碼 。添加瞭語言描述的網頁更易於在綫翻譯工具準確地識彆和翻譯。錶2.1列舉瞭常用的語言代碼。
錶2.1 常用的ISO 639-1語言代碼
語 言 標準代碼
阿拉伯語 ar
中文 zh
簡體中文 zh-Hans
繁體中文 zh-Hant
英語 en
法語 fr
德語 de
日語 ja
韓語 ko
俄語 ru
西班牙語 es
標簽的內容含有由和分彆標記的兩部分。標簽及其和兩大組成部分組成瞭HTML文檔的基本結構。網頁的部分的作用在於說明網頁的標題、標題圖標、附加的腳本語言程序、網頁樣式,以及有關網頁其他屬性的描述等。這部分內容除瞭網頁的標題和圖標以外,還有其他內容,能夠影響到網頁的顯示方式,例如附加的樣式定義;另外還有一些能夠影響到網頁的動作行為,例如網頁自動跳轉等,但本身並不直接顯示在網頁上。網頁的部分包含瞭網頁在瀏覽器中顯示的全部內容,這也是本章將要著重介紹的部分。
很多開發人員在網站的開發過程中已經通過DOCTYPE使用瞭文檔類型聲明,尤其是CSS的某些功能,比如z-index,要求網頁必須含有文檔類型聲明,纔能夠在IE瀏覽器中正確顯示。DOCTYPE聲明沒有結束標簽,它必須齣現在網頁文檔的第一行,即在標簽之前,用於嚮瀏覽器聲明當前網頁文檔所采用的HTML的語法版本。DOCTYPE聲明源自於XML中引用DTD驗證文檔有效性的方法。
在過去的HTML版本中,我們能夠看到下麵一些文檔類型聲明:
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
在HTML 5中,DOCTYPE聲明不再引用DTD,隻需要簡單的即可。但是在HTML 5網頁中,DOCTYPE聲明不能省略,否則瀏覽器不會使用HTML 5的語法,而是會自動啓用早期版本的HTML語法處理程序來解析當前的HTML 5網頁。
HTML是大小寫無關的標記語言。包括DOCTYPE聲明在內,瀏覽器不會區分DOCTYPE或者doctype、或者。在HTML 5網頁中,混閤使用大小寫是允許的。從編寫HTML 5代碼的慣例角度來看,DOCTYPE通常用大寫字母來聲明,而HTML標簽則用小寫錶示。代碼2.1中的源代碼編寫格式就遵循瞭這個慣例。
2.1.2 成員元素
網頁部分用於定義樣式規則、引用樣式錶和腳本語言,或者用於網頁本身屬性等相關信息的描述等。
1. 網頁的標題
網頁標題是顯示在瀏覽器標題欄中的若乾主題說明文字,如圖2.1所示為清華大學主頁上的網頁標題。
圖2.1 瀏覽器標題欄中的標題和圖標(來源:清華大學網站)
從原則上說,一個HTML 5文檔(不是一個Web頁麵,因為一個HTML 5文檔可以錶現為多個網頁。一個文檔也能是一個字符流,而不是一個文件)的部分必須包含一個,並且隻能包含一個
代碼2.2演示瞭通過
代碼2.2 通過
2. 網頁的圖標
在圖2.1中,我們在瀏覽器的標題欄上除瞭看到網頁標題以外,在標題文字的旁邊,還很容易找到網頁的圖標。網頁的圖標是通過元素實現的。
元素用於鏈接當前HTML文檔和其他資源。元素必須包含rel屬性或者itemprop屬性中的一個,但是,不允許同時使用這兩個屬性。這兩個屬性中的rel是個常用屬性,用於說明所鏈接的資源與當前文檔的關係。當使用rel屬性時,元素隻允許在的範圍內使用,而當使用itemprop屬性時,元素既可以包含在網頁的部分,也可以包含在網頁的部分。當我們為一個網頁鏈接網頁圖標時,應該按照代碼2.3所演示的方法,指定rel屬性的值為“icon”,並且通過href屬性指嚮實際所鏈接的圖標資源文件,這樣就能得到如圖2.2所示的效果。
代碼2.3 通過元素引用網頁圖標
注意: 在Chrome等瀏覽器中測試代碼2.3時,需要Web服務器的支持纔能正確顯示網頁圖標,而在Firefox瀏覽器中,則不需要Web服務器的支持。
圖2.2 網頁的標題與圖標
在不同的使用場閤中,網頁圖標也被稱為快捷圖標、書簽圖標,或者標簽頁圖標等。圖標文件一般采用16×16像素的ICO文件,也可以采用GIF,或者PNG等圖片格式。另外,在元素中,可以通過type屬性聲明所鏈接的圖標文件的MIME類型。
一些讀者可能會注意到一些網頁有類似的用法,而shortcut並不是HTML 5中rel屬性有效的屬性值。實際上,rel=“shortcut icon”的用法在HTML 5中是允許的,但這僅僅是為瞭滿足嚮過去的HTML版本兼容的要求,如果在rel屬性中使用shortcut屬性值,另一個屬性值icon必須緊隨其後,而且兩個屬性值之間必須使用一個空格來分隔。
3. 網頁的樣式
層疊式樣式錶CSS在Web設計中起到瞭網站風格統一、用戶界麵美觀、優化用戶體驗等作用。定義和引用樣式規則有3種常見的方式:在特定的元素上通過定義style屬性值的方法為相應的元素添加樣式規則、通過
你好, HTML5!
代碼2.5 通過元素引用樣式錶文件(此處省略樣式錶文件)
你好, HTML5!
圖2.3 在部分通過樣式定義或引用外部樣式錶來改變網頁內容的錶現形式
綜閤代碼2.3和2.5,兩者都用到瞭元素來鏈接外部資源文件,其中的不同點是在rel屬性中所描述的外部資源類型。當使用rel=“stylesheet”鏈接一個樣式錶文件時,即使省略MIME類 jQuery Mobile移動網站開發(附光盤) 下載 mobi epub pdf txt 電子書 格式
jQuery Mobile移動網站開發(附光盤) 下載 mobi pdf epub txt 電子書 格式 2024
jQuery Mobile移動網站開發(附光盤) 下載 mobi epub pdf 電子書12345
評分jQuery Mobile移動網站開發(附光盤)
評分吃灰中
評分不錯
評分看起來不錯。看起來不錯。
評分吃灰中
評分恩,書不錯。買來看瞭一周,還可以。
評分實用的書,很不錯.....
評分書迴來的特彆快,很好!很高興!!
jQuery Mobile移動網站開發(附光盤) mobi epub pdf txt 電子書 格式下載 2024