第二天 jQuery mobile 的Page&Dialogs,Toolbars,Button,listView全接觸

前言:

本來是打算按照API來安排課程,但是,想想,這樣寫無非就是在造一個輪子而已,沒啥意思,而且,學習JQM的人群都是有一定的程式設計能力,新事物的接受能力都很不錯,寫些官方文檔都寫了東西無非就是翻譯一遍,是以,我打算把一些東西糅合到一起,用JQM做一些實際的東西,如果有些東西看不懂的話,請好好對比一下官方文檔的介紹.

今天的安排:

其實,JQM的元件不多就分類的話就隻有4種 Page&Dialogs Toolbars Buttons List views 今天的任務就是把這四個元件糅合到一起,做一個很小的實際項目.

項目設計:

項目簡介:

讓讀者能夠利用手機浏覽器友善的擷取書籍資訊.

項目的邏輯圖:

<a target="_blank" href="http://blog.51cto.com/attachment/201202/200050860.jpg"></a>

 今天,不會說jqm與動态伺服器的互動,是以,以上的判斷也将會是靜态的判斷,這樣判斷這部分功能在課程稍後幾天将會介紹

預備知識

1.Pages &amp; dialogs

在JQM中Pages與dialogs,其實本質還是最原始的内容包含器,簡單來說,page能用的,dialog也能用,它們的作用就是用于區分我們的設計,用于展示實體内容的我們用pages,用于作為行為的我們用dialogs.

例如如下的示例:

&lt;div data-role="page” &gt;   &lt;div data-role="content"&gt;     &lt;a href="dialog.html"&gt;     跳轉到一個Dialog頁面    &lt;/a&gt;   &lt;/div&gt; &lt;/div&gt; 

 下面開始寫我們的dialog的頁面：dialog.html

&lt;div data-role="dialog" &gt;     &lt;div data-role="header"&gt;         &lt;h1&gt;登入成功&lt;/h1&gt;   &lt;/div&gt;     &lt;div data-role="content"&gt;          &lt;a href="secondDay_success.html"&gt;傳回!&lt;/a&gt;     &lt;/div&gt;   &lt;/div&gt; 

這裡有要注意的地方!!

在jqm 1.0正式版之前,dialog這個data-role是不存在的,是以,在之前的資料中,dialog就是一個page,必須在跳轉的時候用 data-rel='”dialog” 用于區分那些是pages或者dialogs,是以要在跳轉的時候必須這樣寫

&lt;a href="dialog.html" data-role="dialog"&gt; 

而在正式版中,dialog成為了一種特定的資料角色,是以,在使用dialog的時候可以不用具體指明data-rel=”dialog”,不過,之前的那種寫法現在一樣能用.

由于這是在正式版出現的新角色,在某些IDE工具就沒法展現出這個角色,例如 dreamweaver cs5.5 就算是把JS替換成最新的版本,還是一樣不認dialog參數,這個所導緻的問題就是我們無法在dw裡面預覽我們的dialog.當然有個簡單的辦法可以處理,先用page預覽,然後再改為dialog….

對話框實機效果圖:

<a target="_blank" href="http://blog.51cto.com/attachment/201202/200423723.png"></a>

注意:如果在測試的發現,更改了dialog的設定,但是,使用的時候沒發現改變,請注意清一些浏覽器的緩存

2.Toolbars

Toolbars即工具欄,我們可以分為三類:

Header bars

Footer bars

以上兩個本質就是在原本的顯示中添加幾個動作按鈕,具體的例子,請參考官方例子.

Navbars

這個是一個特定的資料角色

data-role="navbar" 

用于聲明一個導覽列,在使用上也是很簡單

&lt;div data-role="header" id="top"&gt;     &lt;h1&gt;jQuery Mobile 體驗之旅&lt;/h1&gt;     &lt;div data-role="navbar"&gt;       &lt;ul&gt;         &lt;li&gt;&lt;a href="secondDay.html"&gt;書籍&lt;/a&gt;&lt;/li&gt;         &lt;li&gt;&lt;a href="resources.html"&gt;資源&lt;/a&gt;&lt;/li&gt;       &lt;/ul&gt;     &lt;/div&gt;   &lt;/div&gt; 

導覽列實機使用截圖:

<a target="_blank" href="http://blog.51cto.com/attachment/201202/200605354.png"></a>

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用于列項顯示,要使用它隻需要:

&lt;ul data-role="listview"&gt;   &lt;li&gt;xxx&lt;/li&gt;   &lt;li&gt;yyy&lt;/li&gt;   &lt;li&gt;zzz&lt;/li&gt; &lt;/ul&gt; 

看似很簡單的使用,但是,使用起來太靈活了,我建議各位好好閱讀一下官方文檔,掌握一些基本的listview的顯示,在以後的課程中我會用執行個體進行listview的使用.各位,先去看下官方文檔吧…

5.總結

其實整個JQM架構的元件就這麼多了,在以後的課程,我會用一個小項目對這些知識進行實戰.

進行項目實戰:

在做好我們的知識儲備以後,我們就開始,把學到的東西進行一些練習吧.注意:所有頁面暫時全部為靜态頁面!!!

上面的項目設計中我們需要設計5個頁面

1,還沒登入的首頁

<a target="_blank" href="http://blog.51cto.com/attachment/201202/200749730.png"></a>

2,已經登入的首頁

<a target="_blank" href="http://blog.51cto.com/attachment/201202/200800446.png"></a>

3,注冊的頁面

<a target="_blank" href="http://blog.51cto.com/attachment/201202/200811868.png"></a>

5,成功的頁面

<a target="_blank" href="http://blog.51cto.com/attachment/201202/200819963.png"></a>

 6,失敗的頁面

實際代碼的打包下載下傳

jqm_d1_d2.rar

線上demo

<a href="http://jqmobiletest.sinaapp.com/">http://jqmobiletest.sinaapp.com </a>

<a href="http://jqmobiletest.sinaapp.com/"></a>