jQuery Mobile CSS 類別

---

#jQuery CSS 類別

jQuery Mobile  CSS 類別來設定不同元素的樣式。

以下清單包含了通用的CSS 樣式：

---

全域類別

以下類別可以在jQuery Mobile 小工具中使用(按鈕，工具條，面板，表格，列表等。

為元素添加圓角#按鈕類別除了全域類別外，你可以向<a> 或 <button> 元素加入以下類別(不是<input> 按鈕):

ui-shadow	為元素添加陰影
ui-overlay-shadow	為元素新增多層陰影
ui-mini	#讓元素變小

描述

---

ui-btnui-btn-inlineui-btn-icon-topui-btn -icon-rightui-btn-icon-bottomui-btn-icon-leftui-btn-icon-notext ui-btn-a|b

新增在<a> 元素上並以按鈕形式展示
在同一行上顯示按鈕
定位圖示在按鈕文字之上
定位圖示在按鈕文字的右邊
定位圖示在按鈕文字之下
定位圖示在按鈕文字的左邊
只顯示圖示

指定按鈕示範。 "a" 是預設的 (灰色背景黑色文字樣式),  "b" 修改顏色為黑色背景白色文字#############

---

圖示類別

所有可用圖片的類別用在<a> 和<button> 元素上(查看jQuery Mobile 圖示參考手冊了解如何在其他元素上使用) :

# #ui-icon-arrow-l左角箭頭ui-icon-arrow-rui-icon-arrow-uui-icon-arrow-dui-icon- back######返回#####################ui-icon-bars######三條水平線，一般用於展示清單按鈕圖標##################ui-icon-grid##ui-icon-heart心型，可用來文章收藏ui-icon-home首頁#ui-icon-info#訊息ui-icon-location定位ui-icon-lock鎖定#ui-icon-mail #郵件/ 信封ui-icon-minus減號ui-icon-navigation導航ui-icon-phone電話ui-icon-power開關(On/off)#ui-icon-plus#加號ui-icon -recycle###循環 標識###############

Class	圖示描述	圖示
#ui-icon-action	#動作(一般用於頁面跳躍切換)
#ui-icon-alert	三角形內的感嘆號
ui-icon-audio	音響/音響
ui-icon-arrow-d-l	左下角箭頭
#ui-icon-arrow-d-r	右下角箭頭
ui-icon-arrow-u-l	#左上角箭頭
#ui-icon-arrow-u-r	右方箭頭
右角箭頭
向上箭頭
向下箭頭
ui-icon-bullets	用於展示清單按鈕圖示
#ui-icon-calendar	日曆
ui-icon-camera	相機
ui-icon-carat-d	#向下滑動圖示
-icon -carat-l	向左滑動圖示
#ui-icon-carat-r	##向右滑動圖示
ui-icon-carat-u	向上滑動圖示
ui-icon-check	勾選
ui-icon-clock	鬧鐘
ui-icon-cloud	雲
ui-icon-comment	評論/ 訊息
ui-icon-delete	刪除
ui-icon-edit	編輯/ 鉛筆
#ui-icon-eye	眼睛
ui-icon- forbidden	停用識別sign
ui-icon-forward	撤銷- (返回上一步)
ui-icon-gear	齒輪，一般用於設定按鈕圖示
#ui-icon-grid
ui-icon-refresh	刷新
#ui-icon-search	搜尋/ 放大鏡
ui-icon-shop	商店/購物袋
ui-icon-star	星號
ui-icon-tag	標籤
ui-icon-user	使用者/ 人物
#ui-icon-video	#影片/ 相機

---

主題類別Classes

jQuery Mobile 提供了兩個主題類別: a (灰色) 和b (黑色)。 但是，你可以建立你自己的自訂類別 - 可定義到字母 "z" （查看  jQuery Mobile 主題 ）。 下表列出了可用的主題類別。 字母 (a-z) 意為樣式可以指定 a 到 z。例如 ui-bar-a 或 ui-bar-b等。

Class	描述
#ui-bar-(a-z)	#指定欄位示範- 頭部，底部及其他欄位
ui-body-(a-z)	指定內容區塊的顏色- 頁面內容部分 ( 1.4.0 版本已廢棄), 列表視圖， 彈跳窗, 側欄，面板，加載，折疊。
ui-btn-(a-z)	指定按鈕顏色
ui-group-theme-(a-z)	定義了控制組的示範listviews 和collapsible 集合。
ui-overlay-(a-z)	定義了頁面背景顏色，包括對話框，彈窗和其他出現在最頂層的頁面容器
ui-page-theme-(a-z)	定義了頁面示範

---

網格類別

網格中的欄位是等寬的（總計是 100%），沒有邊框、背景、margin 或 padding。 這裡有四個佈局網格可供使用：

網格類別	#列	列寬	對應	實例
ui-grid-solo	#1	100%	ui-block- a	試試看
ui-grid-a	#2	50% / 50%	ui- block-a|b	試試看
ui-grid-b	3	33% / 33% / 33%	ui-block-a|b|c	試試看
#ui-grid-c	4

#25% / 25% / 25% / 25%

ui-block-a|b|c|d