jQuery Mobile(6)-摺疊面版與清單檢示

摺疊面版的基本功能是把內容縮進標題裡面,點擊標題以展開內容。當有好幾個標題內容形成一個組別時,摺疊面版就可以使用進階類似風琴夾的形式。清單檢示只是單純的條列清單,配合按鈕可以製成目錄。當摺疊面版與清單檢示相結合時,則可以做出群組式的目錄了。

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

摺疊面版

摺疊面版是使用

建立,裡面”必須”要有一個 H1~H6 的標籤作為面版的標題(有二個以上時以第一個作為面版標題)。展開的內容直接寫在標題下面即可。由於行動裝置的畫面可能不大,面版的寬度無法調整,一定是和網頁(母元素)一樣寬。預設的面版按鈕是有圓角的,加入 data-inset=“false” 屬性可以取消。對於樣式與圖示的套用可以參考顏色與樣式設計

摺疊面板標題

點擊展開後的內容

群組摺疊面板一

群組摺疊面板二

群組式的摺疊面版也非常容易,只要在好幾個 collapsible 物件外面,加上

即可,jQuery Mobile 會自動將它們綁在一起(如上圖)。

清單檢示

與摺疊面版相比,清單檢示的設定就複雜多了。基本的清單檢示是在項目清單 ul 或 ol 中,加入 data-role=“listview” 屬性。如果在

  • 裡面有 元素,那麼該項目就會變成按鈕,點擊之後連結到 href 指定的位置。在 li 裡面的 H1~H6 會變成項目標題,而其它內容則會變成補充說明。如果項目清單是巢狀的內容,在點擊該項目之後,子清單才會顯示出來。請參考下面程式碼及圖片,圖1 點擊 清單1-1 後,才會顯示 圖2 清單1-1-1 等內容,此時清單檢示的標題會自動換成 清單1-1,但預設的標題樣式是藍色,要在母清單加入 data-header-theme 屬性指定子清單標題的樣式。

    
    
    
    
    
    
    
    
    1. 清單2-1 5
    2. 清單2-2 側邊
    3. 清單2-3分割按鈕

    參照上面的程式碼第 1 行,清單檢示可以加入搜尋列,當使用者在搜尋欄中輸入文字時,下面的清單會動態顯示出現該文字的項目。第 10 行是加入分隔線的範例,可以使用 data-divider-theme 指定佈景。第 11、12 行是清單圖示,若圖片裡沒有 class=“ui-li-icon” 屬性,會自動以 80x80 的大小顯示(即使圖片很小也會留下 80x80 的空白)。第 26-28 行分別是氣泡計數、側邊內容與分割按鈕的範例,使用上也非常容易,只要多加一個 span 或 a 元素即可。

    清單檢示與表單、摺疊面板結合

    清單檢示還有更多的應用,例如與表單或摺疊面板結合。請參考下面的程式碼,與表單的結合就是把 li 設定成表單欄位,關於表單的使用會在下一篇做說明。至於與摺疊面板的結合,就是把它放在 collapsible 物件裡面。可以製作群組目錄甚至更複雜的內容。