Jquery ui css framework
更新時間:2010年06月28日 17:58:53 作者:
Jquery ui css framework是jquery ui中的一個樣式框架,可以利用jquery Theme roller 來生成自己想要的css樣式效果。我們可以利用jquery ui的一些框架來開發(fā)出基于jquery ui css framework效果的插件來。
Jquery ui中兩大核心的css文件是ui.core.css和ui.theme.css.這兩個css樣式貫穿整個基于jquery ui的界面上,并且可以通過jquery ui ThemeRoller來生成自己的樣式。
.ui-helper-hidden :為元素應用display:none
.ui-helper-hidden-accessible:將元素的絕對位置設置為不可見
.ui-helper-clearfix:適用于浮動包裹父元素的屬性
. ui-helper-zfix:適用于修復iframe元素覆蓋的問題
.ui-state-default:元素的默認樣式
.ui-state-hover:元素為hover狀態(tài)的樣式
.ui-state-focus:元素為focus狀態(tài)的樣式
.ui-state-active:元素為active狀態(tài)(一般為鼠標選中)的樣式
.ui-state-hightlight:需要高亮狀態(tài)的樣式
.ui-state-error:元素為錯誤狀態(tài)(一般描述錯誤信息)的樣式
.ui-state-error-text:描述錯誤文字的樣式
.ui-state-disabled:元素被禁用的樣式
.ui-priority-primary:被應用于級別為第一級的button,如果button需要區(qū)分曾記的話。將應用加粗字體
.ui-priority-secondary:被應用于級別為第二級的button,和上一場景相對應,將應用一般粗細的字體,并且相對于元素輕度透明
Icon types:css framework提供了一套默認的圖標,這些圖標適用于大多場景,一般使用的方式是“ui-icon ui-icon-****”來指定icon
.ui-corner-tl:左上角圓角,基于css3,ie不支持
.ui-corner-tr:右上角圓角,基于css3,ie不支持
.ui-corner-bl:左下角圓角,基于css3,ie不支持
.ui-corner-br:右下角圓角,基于css3,ie不支持
.ui-corner-top:上面兩個角圓角,基于css3,ie不支持
.ui-corner-bottom:底部兩個角圓角,基于css3,ie不支持
.ui-corner-right:右部兩個角圓角,基于css3,ie不支持
.ui-corner-left:左部兩個角圓角,基于css3,ie不支持
.ui-corner-all:全部角圓角,基于css3,ie不支持
.ui-widget-overlay:遮罩
.ui-widget-shadow:陰影
在寫jquery ui widget的時候合適的利用這些css就可以做出和jquery ui theme兼容的自定義ui來。
.ui-helper-hidden :為元素應用display:none
.ui-helper-hidden-accessible:將元素的絕對位置設置為不可見
.ui-helper-clearfix:適用于浮動包裹父元素的屬性
. ui-helper-zfix:適用于修復iframe元素覆蓋的問題
.ui-state-default:元素的默認樣式
.ui-state-hover:元素為hover狀態(tài)的樣式
.ui-state-focus:元素為focus狀態(tài)的樣式
.ui-state-active:元素為active狀態(tài)(一般為鼠標選中)的樣式
.ui-state-hightlight:需要高亮狀態(tài)的樣式
.ui-state-error:元素為錯誤狀態(tài)(一般描述錯誤信息)的樣式
.ui-state-error-text:描述錯誤文字的樣式
.ui-state-disabled:元素被禁用的樣式
.ui-priority-primary:被應用于級別為第一級的button,如果button需要區(qū)分曾記的話。將應用加粗字體
.ui-priority-secondary:被應用于級別為第二級的button,和上一場景相對應,將應用一般粗細的字體,并且相對于元素輕度透明
Icon types:css framework提供了一套默認的圖標,這些圖標適用于大多場景,一般使用的方式是“ui-icon ui-icon-****”來指定icon
.ui-corner-tl:左上角圓角,基于css3,ie不支持
.ui-corner-tr:右上角圓角,基于css3,ie不支持
.ui-corner-bl:左下角圓角,基于css3,ie不支持
.ui-corner-br:右下角圓角,基于css3,ie不支持
.ui-corner-top:上面兩個角圓角,基于css3,ie不支持
.ui-corner-bottom:底部兩個角圓角,基于css3,ie不支持
.ui-corner-right:右部兩個角圓角,基于css3,ie不支持
.ui-corner-left:左部兩個角圓角,基于css3,ie不支持
.ui-corner-all:全部角圓角,基于css3,ie不支持
.ui-widget-overlay:遮罩
.ui-widget-shadow:陰影
在寫jquery ui widget的時候合適的利用這些css就可以做出和jquery ui theme兼容的自定義ui來。
相關文章
使用jQuery快速解決input中placeholder值在ie中無法支持的問題
本篇文章主要介紹了使用jQuery快速解決input中placeholder值在ie中無法支持的問題。需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01
jQuery Validation PlugIn的使用方法詳解
這篇文章主要介紹了jQuery Validation PlugIn的使用方法,需要的朋友可以參考下2015-12-12

