第6章使用表格和CSS漸變

1、 當內(nèi)容需要以一種靈活的方式編組到區(qū)域時，移 動應用程序通常會為之應用表格。在需要該行為 的設計中，jQuery Mobile的自適應表格就是一種 有效的解決方案。在本章中，我們會學習jQuery Mobile表格組件的基本知識，并通過幾個示例來 講解如何在表格中樣式化圖標、圖形和文本。我 們還會創(chuàng)建可折疊的內(nèi)容塊，并討論了它與內(nèi)嵌 的頁面結(jié)構(gòu)相比較時，所具有的優(yōu)勢。我們使用 CSS變來修飾一下我們的設計，并討論CSS漸變 在和漸進式增強方面所提供的優(yōu)勢。 jQuery Mobile的表格是可配置的。它可以 支持25列的表格布局。從HTML的角度 來看，表格是使用CSS屬性配置得罪div元 素

2、。表格相當靈活，而且會占據(jù)顯示屏幕 的整個寬度。表格不包括邊界、內(nèi)間距、 邊距，這樣就不會對其內(nèi)部包含的元素的 樣式形成干擾。在我們查看表格示例之前， 首先來講解表格模板。 在創(chuàng)建多列表格時，表格模板將是一個非 常有用的參考（見程序清單6-1） 在創(chuàng)建表格時，需要創(chuàng)建具有兩個或更多個內(nèi)層塊的外層表格容器。 1.表格布局：表格容器需要CSS屬性ui-grid-*來配置表格中列的數(shù)量。 例如，要創(chuàng)建一個兩列的表格，我們需要將表格CSS屬性設置為ui- grid-a 2.塊：塊包含在表格內(nèi)。塊需要CSS屬性 ui-block-*來識別其列的位置。例如，如果 我們有一個兩列的表格，則第一個塊會用 CS

3、S屬性ui-block-a來樣式化，而第二個塊 會用CSS屬性ui-block-b來樣式化。 一個兩列的表格（50%，50%）示例，相 關(guān)代碼清單如下： 外層表格使用CSS表格屬性ui-grid-a進行配 置。接下來，我們添加兩個內(nèi)層塊。第一 個塊被分配了一個CSS屬性ui-block-a，第 二個塊被分配了一個CSS屬性ui-block-b。 如圖6-1所示，列是等間距、無邊界的，而 且每個塊內(nèi)的文本在必要時會換行顯示。 另外，jQuery Mobile內(nèi)的表格相當靈活， 會根據(jù)不同的屏幕顯示尺寸以自適應的方 式進行呈現(xiàn)。 一個三列表格（33%，33%，33%）的示 例，其相關(guān)代碼見程序清單

4、 它與前面看到的兩列表格非常相似，但是它配置 了CSS屬性以支持三個列，而且我們?yōu)榈谌刑?加了一個額外的塊。我們還使用可主題化的類對 塊進行了樣式化。在本例中，我們添加了ui-bar以 應用CSS內(nèi)間距，還添加了ui-bar-e以便為“e”工 具欄主題調(diào)色板應用背景漸變和字體樣式。你可 以使用范圍為ae內(nèi)的任何工具欄主題來樣式 化（style=“height:100px”）。從視覺上看，這些 增強都是使用線性的背景漸變來樣式化表格，現(xiàn) 在塊與塊之間使用邊界進行分隔。 一個四列表格（25%，25%，25%，25%） 的示例，其相關(guān)代碼 它與三列表格相似，只不過為該表格配置 了CSS屬性（ui-

5、grid-c），以支持4個列。 而且我們?yōu)榈谒牧性黾恿艘粋€額外的塊。 此外，出于平衡和一致性考慮，我們將app 圖標放置在表格的中央位置（style=“text- align：center；”）。從視覺上看，這個表 格具有個大小相等的app圖標，它與應用程 序springboard非常相似。 一個五列表格（20%，20%，20%，20%， 20%）的示例如圖示，其相關(guān)代碼程序如 程序清單6-5 該表格與前面講解的四列表格非常相似， 只不過為該表格配置了CSS屬性（ui-grid- d），以支持5個列，而且我們?yōu)榈谖辶?（ui-block-e）添加了一個額外的塊。每一 個塊都包含獨特的Emoji

6、圖標。 注意：Emoji圖標能夠替代圖象，而且它無 需HTTP請求，其負載只有少量的文本字符， 因此性能出色，但Emoji圖標當前只能支持 iOS系統(tǒng)。 目前為止，我們看到的表格都只有一行。 為了添加其他行，只需為其簡單地重復第 一行的塊模式即可。我們最終生成的是一 個三行五列的表格。列的寬度都是相等的， 而且你在塊組件上手動調(diào)整行的高度 目前為止，我們看到的每一個表格，列的 寬度都是相等的，這是因為jQuery Mobile 在默認情況下會平均地劃分所有的列。但 是，如果需要自定義列的尺寸，可以在 CSS中調(diào)整其寬度。例如，通過設置每一 個塊的自定義寬度，我們可以將兩列表格 的寬度修改為一個

7、25%，75%的表格。另 外表格可以進行修改，以支持各種尺寸。 Springboard是一個可以應用我們的表格布 局的理想物件。在下面的例子中，我們會 看到兩種類型的springboard。首先，我們 會看到使用app圖標進行樣式化的 springboard，然后會看到使用Glyphish圖 標樣式化的springboard。 準備好應對springboard的挑戰(zhàn)了么？如果 準備好了，先創(chuàng)建一個與上面任意一個圖 相似的springboard吧。從表格的角度來看， 這兩個示例的配置方式相同。但是，為了 適應不相等的圖標高度，帶有Glyphish圖標 的springboard與帶有app圖標的

8、springboard相比，在樣式化的方式上略有 不同。 你有沒有發(fā)現(xiàn)，當你在閱讀整個移動頁面的內(nèi)容 時，需要反復滾動頁面？盡管這可以鍛煉到我們 手指，但是由于用戶必須反復滾動頁面，因此用 戶體驗相當糟糕。如果你正在查找某種替換方式， 你可能會考慮將內(nèi)容編組到可折疊的內(nèi)容塊中。 提示：與內(nèi)嵌的頁面結(jié)構(gòu)相比，可折疊的內(nèi)容塊 具有很大優(yōu)勢。首先，我們可以將內(nèi)容折疊到分 段的組中，以讓它們在單個視圖中都是可見的。 此外，由于我們淘汰了滾動操作，用戶的體驗也 會得到提升。 在創(chuàng)建可折疊的內(nèi)容塊時，需要兩個元素 1.創(chuàng)建一個容器并添加data-role=“collapsible”屬 性。你也可以通過添加

9、data-collapsed屬性將容器 配置為折疊的或展開的。默認情況下，可折疊的 區(qū)域塊將會以展開方式顯示（data- collapsed=“false”）。為了在最初以折疊方式顯示 區(qū)域塊，需要為容器添加data-collapsed=“true”屬 性。例如，我們啟動程序清單6-10中的代碼，則 最初的界面如圖6-11所示。在程序清單中，除了 默認情況下為展開狀態(tài)的“Application”區(qū)域塊之 外，其他所有的內(nèi)容塊都已經(jīng)顯式設置為折疊狀 態(tài)。 2.在容器內(nèi)，添加任意的頁眉元素（H1-H6）。 jQuery Mobile框架會對頁眉進行樣式化，使其看 起來就像是一個帶有左對齊的加號圖標

10、或減號圖 標的可單擊按鈕，其中加號圖標或減號圖標用來 指示該容器是否是展開的。 在頁眉之后，可以為可折疊的區(qū)域塊添加任何 HTML標記。 jQuery Mobile框架會將該標記包含 在容器內(nèi)，當用戶輕敲頁眉時，該容器或者是展 開的，或者是折疊的。通過為可折疊的容器添加 data-theme和data-content-theme屬性，可以分 別主題化可折疊的塊和與其相關(guān)聯(lián)的按鈕。見程 序清單6-10. 注意：可折疊的塊允許用戶同時讓多個塊 呈展開狀態(tài)或折疊狀態(tài)。在下一節(jié)，我們 在處理可折疊的設置時，情況就不是這樣 了。 可折疊的設置（見圖6-13）與可折疊的塊相似，只不過它 的可折疊的區(qū)域在視

11、覺上是組合在一起的，而且一次只能 展開一個區(qū)域，這使得可折疊的設置的外觀就像手風琴那 樣（見圖6-14）。 在設置內(nèi)打開一個新的區(qū)域時，之前展開的任何區(qū)域都會 自動折疊起來。 用于可折疊設置的標記與構(gòu)建可折疊塊時使用的標記相同。 然而，為了創(chuàng)建手風琴樣式的行為和編組，我們需要使用 data-role=“collapsible-set”添加一個父包裝，如程序清單 6-11所示。通過為可折疊的設置添加data-theme和data- content-theme屬性，可以分別主題化可折疊的區(qū)域和與 其相關(guān)聯(lián)的按鈕。 打算裝飾一下你的移動UI?可以在你通常使 用背景圖像的地方使用CSS漸變。CSS漸 變能夠代替圖片，而且性能更好，它能夠 很好地適用于靈活的布局，而且當瀏覽器 不提供支持時，也可以優(yōu)雅地降級。例如， 通過添加漸變，我們可以將一個原始的 springboard（見圖6-15）以一種更為優(yōu)雅 的方式顯示出來（見圖6-16和圖6-17） 但凡使用背景圖像的地方，就可以使用漸 變。例如，漸變通常用于樣式化你的