前言:
本來是打算按照API來安排課程,但是,想想,這樣寫無非就是在造一個輪子而已,沒啥意思,而且,學習JQM的人群都是有一定的編程能力,新事物的接受能力都很不錯,寫些官方文檔都寫了東西無非就是翻譯一遍,所以,我打算把一些東西糅合到一起,用JQM做一些實際的東西,如果有些東西看不懂的話,請好好對比一下官方文檔的介紹.
今天的安排:
其實,JQM的組件不多就分類的話就只有4種
Page&Dialogs
Toolbars
Buttons
List views
今天的任務就是把這四個組件糅合到一起,做一個很小的實際項目.
項目設計:
項目簡介:
讓讀者能夠利用手機瀏覽器方便的獲取書籍信息.
項目的邏輯圖:
今天,不會說jqm與動態服務器的交互,所以,以上的判斷也將會是靜態的判斷,這樣判斷這部分功能在課程稍后幾天將會介紹
預備知識
1.Pages & dialogs
在JQM中Pages與dialogs,其實本質還是最原始的內容包含器,簡單來說,page能用的,dialog也能用,它們的作用就是用於區分我們的設計,用於展示實體內容的我們用pages,用於作為行為的我們用dialogs.
例如如下的示例:
<div data-role="page” > <div data-role="content"> <a href="dialog.html"> 跳轉到一個Dialog頁面 </a> </div> </div>
下面開始寫我們的dialog的頁面：dialog.html
<div data-role="dialog" > <div data-role="header"> <h1>登錄成功</h1> </div> <div data-role="content"> <a href="secondDay_success.html">返回!</a> </div> </div>這里有要注意的地方!!
在jqm 1.0正式版之前,dialog這個data-role是不存在的,所以,在之前的資料中,dialog就是一個page,必須在跳轉的時候用 data-rel='”dialog” 用於區分那些是pages或者dialogs,所以要在跳轉的時候必須這樣寫
<a href="dialog.html" data-role="dialog">而在正式版中,dialog成為了一種特定的數據角色,所以,在使用dialog的時候可以不用具體指明data-rel=”dialog”,不過,之前的那種寫法現在一樣能用.
由於這是在正式版出現的新角色,在某些IDE工具就沒法體現出這個角色,例如 dreamweaver cs5.5 就算是把JS替換成最新的版本,還是一樣不認dialog參數,這個所導致的問題就是我們無法在dw里面預覽我們的dialog.當然有個簡單的辦法可以處理,先用page預覽,然后再改為dialog….
對話框實機效果圖:
注意:如果在測試的發現,更改了dialog的設置,但是,使用的時候沒發現改變,請注意清一些瀏覽器的緩存
2.Toolbars
Toolbars即工具欄,我們可以分為三類:
Header bars
Footer bars
以上兩個本質就是在原本的顯示中添加幾個動作按鈕,具體的例子,請參考官方例子.
Navbars
這個是一個特定的數據角色
data-role="navbar"用於聲明一個導航條,在使用上也是很簡單
<div data-role="header" id="top"> <h1>jQuery Mobile 體驗之旅</h1> <div data-role="navbar"> <ul> <li><a href="secondDay.html">書籍</a></li> <li><a href="resources.html">資源</a></li> </ul> </div> </div>
導航條實機使用截圖:
3.Button
button在jqm上的實質就是一推CSS樣式,html 的元素如果作為button 角色就會成為附上button的樣式用於控制顯示,剩下的就是我們怎么布局我們的button,在jqm 中有兩套用於管理button的方式
一: inline
在jqm中一個button 默認是block就是說,我們再加一個button就會換行,有時候我們需要在一行中顯示只須加上data-inline=”true”
這里建議去看官方的文檔有非常詳盡的說明
二:controlgroup
如果,我們懶得每個button都添加data-inline=”true”用於水平布局,那么我們就可以使用controlgroup這個數據角色我們只須要在一堆button外面加上一個div,並設置 data-role=”controlgroup” data-type=”horizontal” 就可以讓我們的button水平布局了.更多查看官方文檔:
額外提一下:button 還可以進行設置,方法,和事件,具體使用和例子在官方文檔中:
請認真閱讀和比較
4.listView
listView用於列項顯示,要使用它只需要:
<ul data-role="listview"> <li>xxx</li> <li>yyy</li> <li>zzz</li> </ul>
看似很簡單的使用,但是,使用起來太靈活了,我建議各位好好閱讀一下官方文檔,掌握一些基本的listview的顯示,在以后的課程中我會用實例進行listview的使用.各位,先去看下官方文檔吧…
5.總結
其實整個JQM框架的組件就這么多了,在以后的課程,我會用一個小項目對這些知識進行實戰.
進行項目實戰:
在做好我們的知識儲備以后,我們就開始,把學到的東西進行一些練習吧.注意:所有頁面暫時全部為靜態頁面!!!
上面的項目設計中我們需要設計5個頁面
1,還沒登錄的主頁
2,已經登錄的主頁
3,注冊的頁面
5,成功的頁面
6,失敗的頁面
實際代碼的打包下載
http://115.com/file/e6a8mhid#
jqm_d1_d2.rar
在線demo
http://jqmobiletest.sinaapp.com