jQuery Mobile(4)-按鈕與網格

過去CSS尚未發展出來前,網頁普遍使用隱藏的表格(table)來做排版。CSS發展的當下,已經不建議使用表格來排版,因為那會讓電腦分不清楚這個表格是有意義的內容,還是排版的框架而已(CSS排版文章請參考:模組方塊設計圖層控制版面配置)。為了讓不擅長CSS排版的人也能輕鬆地在手機網頁上排版,jQuery Mobile 很貼心的提供了網格(grids)的語法,使用HTML標籤就可以做基本的排版。本篇介紹按鈕(button)與網格(grids)的建立。

資料來源:跨裝置網頁設計jQuery Mobile Demos

基本按鈕與種類

在傳統網頁中,按鈕通常是在表單裡才會使用到,一般的連結常用圖示來取代按鈕。不過在手機介面中,連結常使用按鈕來表現,因為手指比較好點擊。因此除了傳統的按鈕外,jQuery Mobile 也允許將連結(links)自動轉成按鈕。建議在設計行動網頁時,若非使用表單,則以連結的方式製作按鈕。

  • 使用按鈕文字
    • 若是沒有 data-role=“button” 則顯示一般連結。
    • 使用 data-ajax=“false” 禁止以Ajax方式載入(參考行動網頁建立與連結)。
  • 使用傳統
    • 加入 data-role=“none” 屬性則顯示傳統按鈕。

按鈕屬性與群組按鈕

按鈕在未設定的情況下,寬度會和網頁一樣寬,這是為了讓使用者一目了然,加入 data-inline=“true” 屬性後就會調整成內容寬度。原始的按鈕胖胖的,若是希望它瘦一點,可以加入 data-mini=“true” 讓它變細一些。它可以套用不同的樣式與圖示,詳情請見顏色與樣式設計。另外,預設的樣式是有陰影和圓角的,加入 data-shadow=“false” 屬性可以取消陰影,data-corners=“false” 可以取消圓角。參考的程式碼如下:


想建立群組式的按鈕,只要把按鈕使用

包起來即可。預設的群組按鈕是直式(每個按鈕都和網頁一樣寬),加入 data-type=“horizontal” 屬性可使群組按鈕變成水平排列。

網格佈局

行動網頁上不建議多欄式的佈局,但若有需要時,還是可以使用 jQuery Mobile 提供的網格(grids)來調整位置。使用 class=“ui-grid-#” 來宣告多欄式排版,其中 # 可以是 a、b、c、d 其中一個編號,分別代表 2、3、4、5 欄,而欄的寬度則分別佔 50%、33%、25%、20%。欄的內容則使用 class=“ui-block-#” 屬性來分隔,由於最多只有五欄,所以 # 的編號為 a-e。重點在於 ui-grid 的宣告,詳情請見下面程式碼:

不分欄的區域

第一欄

第二欄

1.1

1.2

1.3

2.1

2.2

2.3

不分欄的區域