第七章講 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 開發有關係,沒特別細看,到時候再來找。
- Apr 03 Wed 2013 17:39
JQuery Mobile Web Development Essentials (第7章~第8章)
close
文章標籤
全站熱搜
留言列表
發表留言