Jquery ui css framework

2024-09-06 12:45:34

字體：大中小

來源：轉載

供稿：網友

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狀態的樣式

.ui-state-focus:元素為focus狀態的樣式

.ui-state-active:元素為active狀態（一般為鼠標選中）的樣式

.ui-state-hightlight:需要高亮狀態的樣式

.ui-state-error:元素為錯誤狀態（一般描述錯誤信息）的樣式

.ui-state-error-text:描述錯誤文字的樣式

.ui-state-disabled:元素被禁用的樣式

.ui-priority-primary:被應用于級別為第一級的button，如果button需要區分曾記的話。將應用加粗字體

.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來。

上一篇：JavaScript 聯動的無限級封裝類,數據采用非Ajax方式,隨意添加聯動

下一篇：Javascript匿名函數的一種應用代碼封裝