天天看點

html5 jquerymobile 修改class,jQuery Mobile 所有class選項,開發全解+完美注釋

全棧工程師開發手冊 (作者:栾鵬)

jQuery Mobile 所有class選項:

全局類:

//ui-corner-all 為元素添加圓角

//ui-shadow 為元素添加陰影

//ui-overlay-shadow 為元素添加多層陰影

//ui-mini 讓元素變小

按鈕類:

// 或 元素添加以下類 (不是 按鈕):

//ui-btn 添加在 元素上并以按鈕形式展示

//ui-btn-inline 在同一行上顯示按鈕

//ui-btn-icon-top 定位圖示在按鈕文本之上

//ui-btn-icon-right 定位圖示在按鈕文本的右邊

//ui-btn-icon-bottom 定位圖示在按鈕文本之下

//ui-btn-icon-left 定位圖示在按鈕文本的左邊

//ui-btn-icon-notext 隻顯示圖示

//ui-btn-a|b 指定按鈕示範。"a" 是預設的 (灰色背景黑色文本樣式), "b" 修改顔色為黑色背景白色文本

//ui-btn-left 按鈕位置靠左

//ui-btn-right 按鈕位置靠右

圖示類:

//ui-icon-action 動作 (一般用于頁面跳轉切換) action

//ui-icon-alert 三角形内的感歎号 alert

//ui-icon-audio 音響/音箱 audio

//ui-icon-arrow-d-l 左下角箭頭 arrow-d-l

//ui-icon-arrow-d-r 右下角箭頭 arrow-d-r

//ui-icon-arrow-u-l 左上角箭頭 arrow-u-l

//ui-icon-arrow-u-r 右上角箭頭 arrow-u-r

//ui-icon-arrow-l 左角箭頭 arrow-l

//ui-icon-arrow-r 右角箭頭 arrow-r

//ui-icon-arrow-u 向上箭頭 arrow-u

//ui-icon-arrow-d 向下箭頭 arrow-d

//ui-icon-back 傳回 back

//ui-icon-bars 三條水準線,一般用于展示清單按鈕圖示 bars

//ui-icon-bullets 用于展示清單按鈕圖示 bullets

//ui-icon-calendar 月曆 calendar

//ui-icon-camera 相機 camera

//ui-icon-carat-d 向下滑動圖示 carat-d

//ui-icon-carat-l 向左滑動圖示 carat-l

//ui-icon-carat-r 向右滑動圖示 carat-r

//ui-icon-carat-u 向上滑動圖示 carat-u

//ui-icon-check 勾選 check

//ui-icon-clock 鬧鐘 clock

//ui-icon-cloud 雲 cloud

//ui-icon-comment 評論 / 消息 comment

//ui-icon-delete 删除 delete

//ui-icon-edit 編輯 / 鉛筆 edit

//ui-icon-eye 眼睛 eye

//ui-icon-forbidden 禁用辨別 sign forbidden

//ui-icon-forward 撤銷 - (傳回上一步) forward

//ui-icon-gear 齒輪,一般用于設定按鈕圖示 gear

//ui-icon-grid 網格 grid

//ui-icon-heart 心型,可用于文章收藏 heart

//ui-icon-home 首頁 home

//ui-icon-info 資訊 info

//ui-icon-location 定位 location

//ui-icon-lock 鎖 lock

//ui-icon-mail 郵件 / 信封 mail

//ui-icon-minus 減号 minus

//ui-icon-navigation 導航 navigation

//ui-icon-phone 電話 phone

//ui-icon-power 開關 (On/off) power

//ui-icon-plus 加号 plus

//ui-icon-recycle 循環 辨別 recycle

//ui-icon-refresh 重新整理 refresh

//ui-icon-search 搜尋 / 放大鏡 search

//ui-icon-shop 商店/購物袋 shop

//ui-icon-star 星号 star

//ui-icon-tag 标簽 tag

//ui-icon-user 使用者 / 人物 user

//ui-icon-video 視訊 / 相機

//ui-nodisc-icon 移除圖示的灰色圓圈,

//ui-alt-icon 圖示顯示為黑色(預設為白色)

主題類:

// Classes 字母 (a-z) 意為樣式可以指定 a 到 z。例如 ui-bar-a 或 ui-bar-b等

//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 100% ui-block-a

//ui-grid-a 50% / 50% ui-block-a|

//ui-grid-b 33% / 33% / 33% ui-block-a|b|c

//ui-grid-c 25% / 25% / 25% / 25% ui-block-a|b|c|d

//ui-grid-d 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e