# 主題 ## 主題樣式綜述 Theming overview Jquery Mobile中每一個布局和組件都被設計為一個全新的面向對象的css框架，使我們能夠給站點和應用程序適用完全統一的視覺設計主題。Jquery Mobile的主題樣式系統與Jquery UI的ThemeRoller 系統很類似，但是做出了幾點重要的改進.他使用的**css3**來顯示圓角，文字和盒陰影和顏色漸變，而不是圖片，使得主題文件非常輕量級，減輕了服務器的負擔主體框架包含了幾套**顏色色板**。每一套都包含了可以自由混搭和匹配的頭部欄，body，按鈕狀態。用來構建視覺紋理，創建豐富的設計**開放的主題框架**允許你創建最多6套主題樣式，給設計增加近乎無限的多樣性一套簡化的圖標集，包含了移動設備上大部分需要使用的圖標，并且sprite到一張圖片里減少了圖片大小 ## 主題與色板 Themes & swatches 主題系統的關鍵在于把針對顏色與材質的規則，和針對布局結構的規則（例如padding和尺寸）的定義相分離。這使得主體的顏色和材質在樣式表中只需要定義一次，就可以在站點中混合，匹配以及結合，得到廣泛的使用?每一套主題樣式包括幾項全局設置，包括字體陰影，按鈕和盒模型的圓角值。另外，主題也包括幾套顏色色板，每一個都定義了工具欄，內容區塊，按鈕和列表項的顏色以及字體的陰影Jquery Mobile默認內建了5套主題樣式，用（a,b,c,d,e）引用。為了使我們的顏色主題能夠保持一直地映射到我們的組件中，我們遵從的規約是：a主題是視覺上最高級別的主題（黑色），b主題為次級用主題（藍色），c主題為基準主題，在很多情況下是默認使用的，主題d為備用的次級內容用主題，主題e為強調用主題。 你也可以手動添加主題用于強調，或者是特殊的場合。例如：你可以手動添加新的主題“i",用于制作紅色的工具欄或者按鈕，用于錯誤提示全新的ThemeRoller工具會在2011年 Jquery Mobile 1.0 release 版本時發布。在這之前，也很容易手動編輯默認的基準樣式而且/或者編輯css文件增加主題：拷貝主題樣式那一段css，將它用新的字母重命名，然后更換顏色 ## Bars 默認的主題包含了一下的5種bar的樣 默認情況下，Jquery Mobile給所有的頭部欄和尾部欄分配的是a主題，因為他們在應用中是視覺優先級最高的。如果要給bar設置一個不同的主題，只需要給頭部欄和尾部欄容器增加 data-theme 屬性，然后設定一個主題樣式字母即可，例如b,d等? 更多參見工具欄主題樣式 ## 內容 Content Blocks 默認主題也包含了用于內容的顏色樣式，使得在設計上與頭部欄的顏色相匹配 如果沒有特別指定的話，Jquery Mobile會默認給content分配主題c，使得在視覺上與頭部欄區分開來 ## 列表和按鈕 Lists & Buttons 每一套主題也包含了針對交互元素，比如說列表項和按鈕的默認樣式 默認情況下，所有放置在一個bar里的按鈕都會被自動分配一個和它所在的bar或者box的主題樣式所匹配的主題，用以 在視覺上形成一個整體，像變色龍。這樣的默認行為可以使你很容易地通過設置父容器的主題樣式改變整個頁面的主題，因為你知道按鈕在不同主題的視覺配重都是一樣的。而因為表單元素用按鈕的樣式，他們也會適配他們的父容器如果你要給按鈕在視覺上進行強調，來幫助他從工具欄中凸現出來，可以給鏈接增加data-theme="a"屬性。給按鈕在標記中設置了不同的主題后，父容器主題更改時框架不會覆蓋其顏色，因為你決定了要設置它更過參見。。 ## 全局“活動”狀態 Global "Active" state Jquery Mobile框架用一個單獨的主題叫做"active"(藍色)，用來總是指示被選中的狀態，無視該組件的主題. 我們給導航與表單元素應用了這樣的"活動"主題，不管是否有指示被選中的狀態的需要。因為這一個主題樣式是設計用來給用戶清晰的，一致的反饋的，所以不能通過標記來覆蓋，在主題中該項只要設置一次，，Jquery Mobile會在不管被選中或者活動狀態需要時都應用他。該樣式在樣式表中的ui-btn-active規則來設置 “活動”狀態用來給可切換的元素標記“on”狀態  ## 圖標 Icons Jquery Mobile包含了一套標準的圖標，可以分配給按鈕。為了盡量減小核心圖標的文件大小，Jquery Mobile只包含了圖標白色的圖案，然后在圖標背后自動添加了半透明的黑色圓形背景，使得圖標在所有背景色下都可以看的明晰