第七章講 dialog, grid 跟 collapsible content。

dialog 的布局是以 page 為基礎,所以得建立一個 data-role="page" 的 div,假設是 page3,然後就可以用 a href="#page3" data-rel="dialog" 來顯示。
grid 不是使用 table,其實都是 div。 所以要先有一個 class 為 ui-grid- 的 div,最多可以有五欄,ui-grid-a 就是兩欄,ui-grid-b 是三欄,以此類推。
格子也是 div,class 則是用 ui-block-a, ui-block-b ... ui-block-e ,換列的話,就從 a 再一次。
書裡沒提到的,ui-block-a div 裡面可以再用一個 class 有 ui-body ui-body-d 的 div,這樣就會有比較好看的格子出來。

collapsible content 就是一個可以收起來的區塊,再點擊就可以打開。一樣也是在 div 加上 data-role="collapsible" 就可以。

第八章講設定 jQuery mobile 的方法,這要透過 bind 去繫結/處理 mobileinit 事件,用 $.mobile 去設置相關設定,p105~p107 有一章詳細的表格介紹。
除了設定以外,也有提供一些好用的工具函式跟變數,讓開發者可以判斷目前狀態或是處理。這邊很多細節的東西,主要都跟 javascript 開發有關係,沒特別細看,到時候再來找。

更多有關 JQuery Mobile Web Development Essentials 的事情

arrow
arrow

    elleryq 發表在 痞客邦 留言(0) 人氣()