jQuery Mobile offers CSS-based enhancementsfor common user interface elements.
jQuery mobile提供了一些基於CSS之上的增強元素。(-。。-我是這樣理解的,有木有人有更好的翻譯)。
Classes 類
CSS classes forcommon styles. 一些CSS的基本樣式。jQuery mobile運用了以下的css類:
1.Style classes 通用類:
ui-corner-all 將標記元素的全部邊角都轉化爲圓角。
ui-shadow 爲標記元素的周圍添加一種陰影效果
ui-overlay-shadow 爲標記元素添加一種覆蓋的陰影效果。使用此class的最佳時機是
當被此類標記的元素顯示時要覆蓋在其他元素之上的時候。
ui-mini 減小元素內字體的大小和級別以用來讓元素可以很好的適應工具欄和密集的空間內。
以上類可以在框架內的任何組件中使用。
2.Widget-specificclasses 爲組件提供的定製類:
ui-collapsible-inset 能使collapsible組件擁有一個水平方向的外邊距,邊線和圓角。
ui-listview-inset 能使listview組件擁有一個水平方向的外邊距,邊線和圓角。
3.Button-specific classes 爲按鈕提供的定製類:
爲了使用按鈕提供的定製樣式,你必須在a標記或者button元素上添加如下這些類:
Basic options 基本選項:
ui-btn 必須添加的一個class,這是使用這些樣式的一個先決條件,有了它才能使用其他定製的按鈕類。
ui-btn-inline 使按鈕轉化爲行內樣式,避免佔用一整行的空間。
ui-shadow-icon 爲按鈕上的圖標添加一種陰影效果。
Icon positioning 圖標位置:
ui-btn-icon-top 將圖標添加到按鈕中的文本之上。
ui-btn-icon-right將圖標添加到按鈕中的文本右邊。
ui-btn-icon-bottom將圖標添加到按鈕中的文本之下。
ui-btn-icon-left 將圖標添加到按鈕中的文本左邊。
ui-btn-icon-notext將按鈕中的文本隱藏,只顯示圖標。
Theme 主題:
ui-btn-[a-z] 爲按鈕定義顏色,a到z每一個字母都代表一種樣式。
3.Icon classes 爲圖標提供的定製類:
圖標被許多組件使用。下面這張表列出了所有圖表的類:
ui-icon-alert |
一個在三角形中的感嘆號 |
ui-icon-arrow-l |
一個向左的箭頭 (←). |
ui-icon-arrow-r |
一個向右的箭頭 (→). |
ui-icon-arrow-u |
一個向上的箭頭 (↑). |
ui-icon-arrow-d |
一個向下的箭頭 (↓). |
ui-icon-back |
一個返回標誌. |
ui-icon-bars |
三條從上到下的水平線. |
ui-icon-carat-b |
一個形似字母v的圖案 (v). |
ui-icon-carat-l |
指向朝左的zimu(<). |
ui-icon-carat-r |
A carat pointing right (>). |
ui-icon-carat-t |
A carat pointing up (^). |
ui-icon-check |
A checkmark (✓). |
ui-icon-delete |
A diagonal cross similar to (✕). |
ui-icon-edit |
A pencil - similar to (✎) but pointing to the lower left. |
ui-icon-forward |
A curved arrow arcing clockwise upwards. |
ui-icon-gear |
A gear (⚙). |
ui-icon-grid |
A 3✕3 grid. |
ui-icon-home |
A house similar to (⌂). |
ui-icon-minus |
A "minus" sign (-). |
ui-icon-plus |
A "plus" sign (+). |
ui-icon-refresh |
A circular arrow similar to (⟳). |
ui-icon-search |
A magnifying glass. |
ui-icon-star |
A star similar to (✭). |
4.Theme-related classes與主題相關的類
這些類的前綴都是用一些客戶常用接口命名的.實際上的名字應該是後面的字母。
ui-bar-[a-z] |
爲一個欄目設置一種顏色。這些欄目可以是headers和footers或者其他在這個頁面上的工具欄。 |
ui-body-[a-z] |
爲內容塊設置一種顏色.在1.4.0版本後已經過期,這些內容塊可以是listview items, popups, collapsibles, the loader widget, sliders和panels. |
ui-btn-[a-z] |
爲按鈕設置一種顏色 |
ui-group-theme-[a-z] |
爲controlgroups, listviews和collapsible sets (accordions)設置一種顏色 |
ui-overlay-[a-z] |
爲諸如popup widgets和page containers設置一種背景色 |
ui-page-theme-[a-z] |
爲頁面設置一種顏色 |
ui-panel-page-container-[a-z] |
爲出現在頁面上的面板設置一個暫時的顏色 |