Jquery ui css framework

來源:互聯網
上載者:User
Jquery ui css framework是jquery ui中的一個樣式架構,可以利用jquery Theme roller 來產生自己想要的css樣式效果。我們可以利用jquery ui的一些架構來開發出基於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狀態的樣式

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

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.