jqueryui的css设计
jqueryui是当前最强大的UI库之一，其两大卖点是对IE6的良好支持与换肤功能。为了构建avalonui，今天起我将投入一部分精力来研究时下最流行的几个ＣＳＳ框架。它是首当其冲。
jqueryui的ＣＳＳ并没有打包一个文件，用户只要引入jquery.ui.all.css，它就会将所有CSS文件通过@import语句引进来。单从@import来，它比JS高明多了，时至今天，JS的加载都需要我们来实现。
jquery.ui.all.css的内容很简单：
/!
jQueryUICSSFramework@VERSION
http://jqueryui.com
Copyright2013jQueryFoundationandothercontributors
ReleasedundertheMITlicense.
http://jquery.org/license
http://api.jqueryui.com/category/theming/
/
@import"jquery.ui.base.css";
@import"jquery.ui.theme.css";
jquery.ui.base.css的内容也很简单，与上面一样，尽是@import语句
/!
jQueryUICSSFramework@VERSION
http://jqueryui.com
Copyright2013jQueryFoundationandothercontributors
ReleasedundertheMITlicense.
http://jquery.org/license
http://api.jqueryui.com/category/theming/
/
@importurl("jquery.ui.core.css");
@importurl("jquery.ui.accordion.css");
@importurl("jquery.ui.autocomplete.css");
@importurl("jquery.ui.button.css");
@importurl("jquery.ui.datepicker.css");
@importurl("jquery.ui.dialog.css");
@importurl("jquery.ui.menu.css");
@importurl("jquery.ui.progressbar.css");
@importurl("jquery.ui.resizable.css");
@importurl("jquery.ui.selectable.css");
@importurl("jquery.ui.slider.css");
@importurl("jquery.ui.spinner.css");
@importurl("jquery.ui.tabs.css");
@importurl("jquery.ui.tooltip.css");
jquery.ui.core.css与我预想的不一样，不做任何reset操作，也不提供什么分栏布局。可能考虑到用户已经引入自己的reset吧。这里只有极少数的工具类，比如隐藏，清除浮动，将文本从容器中移出视野外……
/Layouthelpers
----------------------------------/
.ui-helper-hidden{/隐藏/
display:none;
}
.ui-helper-hidden-accessible{
border:0;
clip:rect(0000);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
}
.ui-helper-reset{
margin:0;
padding:0;
border:0;
outline:0;
line-height:1.3;
text-decoration:none;
font-size:100%;
list-style:none;
}
.ui-helper-clearfix:before,/不添加多余标签实现清除浮动/
.ui-helper-clearfix:after{
content:"";
display:table;
border-collapse:collapse;
}
.ui-helper-clearfix:after{
clear:both;
}
.ui-helper-clearfix{
min-height:0;/support:IE7/
}
.ui-helper-zfix{
width:100%;
height:100%;
top:0;
left:0;
position:absolute;
opacity:0;
filter:Alpha(Opacity=0);
}
.ui-front{
z-index:100;
}
/InteractionCues
----------------------------------/
.ui-state-disabled{/不可用/
cursor:default!important;
}
/Icons
----------------------------------/
/statesandimages/
.ui-icon{/让ICON所在的标签的文本移出视野外/
display:block;
text-indent:-99999px;
overflow:hidden;
background-repeat:no-repeat;
}
/Miscvisuals
----------------------------------/
/Overlays/
.ui-widget-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
接着我们拿一个控件的CSS分析下吧
/每一个UI都有一个容器，此容器必有这样的类名，“ui-”加UI名/
.ui-slider{
position:relative;
text-align:left;
}
.ui-slider.ui-slider-handle{
position:absolute;
z-index:2;
width:1.2em;
height:1.2em;
cursor:default;
}
.ui-slider.ui-slider-range{
position:absolute;
z-index:1;
font-size:.7em;
display:block;
border:0;
background-position:00;
}
/ForIE8-See#6727/
.ui-slider.ui-state-disabled.ui-slider-handle,
.ui-slider.ui-state-disabled.ui-slider-range{
filter:inherit;
}
.ui-slider-horizontal{
height:.8em;
}
.ui-slider-horizontal.ui-slider-handle{
top:-.3em;
margin-left:-.6em;
}
.ui-slider-horizontal.ui-slider-range{
top:0;
height:100%;
}
.ui-slider-horizontal.ui-slider-range-min{
left:0;
}
.ui-slider-horizontal.ui-slider-range-max{
right:0;
}
.ui-slider-vertical{
width:.8em;
height:100px;
}
.ui-slider-vertical.ui-slider-handle{
left:-.3em;
margin-left:0;
margin-bottom:-.6em;
}
.ui-slider-vertical.ui-slider-range{
left:0;
width:100%;
}
.ui-slider-vertical.ui-slider-range-min{
bottom:0;
}
.ui-slider-vertical.ui-slider-range-max{
top:0;
}
为了适应用户的字体设置，它基本上不使用px。在这个文件中，它不涉及任何颜色长宽的设置。
换肤功能的实现在jquery.ui.theme.css,想换肤，将此文件替换就行。这里的类名都是以ui-widget-xxx,ui-state-xxx,ui-icon-xxx,ui-corner-xxx命名。主要处理文本颜色，文本缩进，背景颜色，背景图片，透明度与圆角。
/Componentcontainers
----------------------------------/
.ui-widget{
font-family:Verdana,Arial,sans-serif/{ffDefault}/;
font-size:1.1em/{fsDefault}/;
}
.ui-widget.ui-widget{
font-size:1em;
}
.ui-widgetinput,
.ui-widgetselect,
.ui-widgettextarea,
.ui-widgetbutton{
font-family:Verdana,Arial,sans-serif/{ffDefault}/;
font-size:1em;
}
.ui-widget-content{
border:1pxsolid#aaaaaa/{borderColorContent}/;
background:#ffffff/{bgColorContent}/url(images/ui-bg_flat_75_ffffff_40x100.png)/{bgImgUrlContent}/50%/{bgContentXPos}/50%/{bgContentYPos}/repeat-x/{bgContentRepeat}/;
color:#222222/{fcContent}/;
}
.ui-widget-contenta{
color:#222222/{fcContent}/;
}
.ui-widget-header{
border:1pxsolid#aaaaaa/{borderColorHeader}/;
background:#cccccc/{bgColorHeader}/url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/{bgImgUrlHeader}/50%/{bgHeaderXPos}/50%/{bgHeaderYPos}/repeat-x/{bgHeaderRepeat}/;
color:#222222/{fcHeader}/;
font-weight:bold;
}
.ui-widget-headera{
color:#222222/{fcHeader}/;
}
/Interactionstates
----------------------------------/
.ui-state-default,
.ui-widget-content.ui-state-default,
.ui-widget-header.ui-state-default{
border:1pxsolid#d3d3d3/{borderColorDefault}/;
background:#e6e6e6/{bgColorDefault}/url(images/ui-bg_glass_75_e6e6e6_1x400.png)/{bgImgUrlDefault}/50%/{bgDefaultXPos}/50%/{bgDefaultYPos}/repeat-x/{bgDefaultRepeat}/;
font-weight:normal/{fwDefault}/;
color:#555555/{fcDefault}/;
}
.ui-state-defaulta,
.ui-state-defaulta:link,
.ui-state-defaulta:visited{
color:#555555/{fcDefault}/;
text-decoration:none;
}
.ui-state-hover,
.ui-widget-content.ui-state-hover,
.ui-widget-header.ui-state-hover,
.ui-state-focus,
.ui-widget-content.ui-state-focus,
.ui-widget-header.ui-state-focus{
border:1pxsolid#999999/{borderColorHover}/;
background:www.wang027.com#dadada/{bgColorHover}/url(images/ui-bg_glass_75_dadada_1x400.png)/{bgImgUrlHover}/50%/{bgHoverXPos}/50%/{bgHoverYPos}/repeat-x/{bgHoverRepeat}/;
font-weight:normal/{fwDefault}/;
color:#212121/{fcHover}/;
}
.ui-state-hovera,
.ui-state-hovera:hover,
.ui-state-hovera:link,
.ui-state-hovera:visited{
color:#212121/{fcHover}/;
text-decoration:none;
}
.ui-state-active,
.ui-widget-content.ui-state-active,
.ui-widget-header.ui-state-active{
border:1pxsolid#aaaaaa/{borderColorActive}/;
background:#ffffff/{bgColorActive}/url(images/ui-bg_glass_65_ffffff_1x400.png)/{bgImgUrlActive}/50%/{bgActiveXPos}/50%/{bgActiveYPos}/repeat-x/{bgActiveRepeat}/;
font-weight:normal/{fwDefault}/;
color:#212121/{fcActive}/;
}
.ui-state-activea,
.ui-state-activea:link,
.ui-state-activea:visited{
color:#212121/{fcActive}/;
text-decoration:none;
}
/InteractionCues
----------------------------------/
.ui-state-highlight,
.ui-widget-content.ui-state-highlight,
.ui-widget-header.ui-state-highlight{
border:1pxsolid#fcefa1/{borderColorHighlight}/;
background:#fbf9ee/{bgColorHighlight}/url(images/ui-bg_glass_55_fbf9ee_1x400.png)/{bgImgUrlHighlight}/50%/{bgHighlightXPos}/50%/{bgHighlightYPos}/repeat-x/{bgHighlightRepeat}/;
color:#363636/{fcHighlight}/;
}
.ui-state-highlighta,
.ui-widget-content.ui-state-highlighta,
.ui-widget-header.ui-state-highlighta{
color:#363636/{fcHighlight}/;
}
.ui-state-error,
.ui-widget-content.ui-state-error,
.ui-widget-header.ui-state-error{
border:1pxsolid#cd0a0a/{borderColorError}/;
background:#fef1ec/{bgColorError}/url(images/ui-bg_glass_95_fef1ec_1x400.png)/{bgImgUrlError}/50%/{bgErrorXPos}/50%/{bgErrorYPos}/repeat-x/{bgErrorRepeat}/;
color:#cd0a0a/{fcError}/;
}
.ui-state-errora,
.ui-widget-content.ui-state-errora,
.ui-widget-header.ui-state-errora{
color:#cd0a0a/{fcError}/;
}
.ui-state-error-text,
.ui-widget-content.ui-state-error-text,
.ui-widget-header.ui-state-error-text{
color:#cd0a0a/{fcError}/;
}
.ui-priority-primary,
.ui-widget-content.ui-priority-primary,
.ui-widget-header.ui-priority-primary{
font-weight:bold;
}
.ui-priority-secondary,
.ui-widget-content.ui-priority-secondary,
.ui-widget-header.ui-priority-secondary{
opacity:.7;
filter:Alpha(Opacity=70);
font-weight:normal;
}
.ui-state-disabled,
.ui-widget-content.ui-state-disabled,
.ui-widget-header.ui-state-disabled{
opacity:.35;
filter:Alpha(Opacity=35);
background-image:none;
}
.ui-state-disabled.ui-icon{
filter:Alpha(Opacity=35);/ForIE8-See#6059/
}
/Icons
----------------------------------/
/statesandimages/
.ui-icon{
width:16px;
height:16px;
}
.ui-icon,
.ui-widget-content.ui-icon{
background-image:url(images/ui-icons_222222_256x240.png)/{iconsContent}/;
}
.ui-widget-header.ui-icon{
background-image:url(images/ui-icons_222222_256x240.png)/{iconsHeader}/;
}
.ui-state-default.ui-icon{
background-image:url(images/ui-icons_888888_256x240.png)/{iconsDefault}/;
}
.ui-state-hover.ui-icon,
.ui-state-focus.ui-icon{
background-image:url(images/ui-icons_454545_256x240.png)/{iconsHover}/;
}
.ui-state-active.ui-icon{
background-image:url(images/ui-icons_454545_256x240.png)/{iconsActive}/;
}
.ui-state-highlight.ui-icon{
background-image:url(images/ui-icons_2e83ff_256x240.png)/{iconsHighlight}/;
}
.ui-state-error.ui-icon,
.ui-state-error-text.ui-icon{
background-image:url(images/ui-icons_cd0a0a_256x240.png)/{iconsError}/;
}
/positioning/
.ui-icon-blank{background-position:16px16px;}
.ui-icon-carat-1-n{background-position:00;}
.ui-icon-carat-1-ne{background-position:-16px0;}
/略，这里都是ICON，通过background-position来处理背景图片/
.ui-icon-grip-diagonal-se{background-position:-80px-224px;}
/Miscvisuals
----------------------------------/
/Cornerradius/
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl{
border-top-left-radius:4px/{cornerRadius}/;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr{
border-top-right-radius:4px/{cornerRadius}/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl{
border-bottom-left-radius:4px/{cornerRadius}/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br{
border-bottom-right-radius:4px/{cornerRadius}/;
}
/Overlays/
.ui-widget-overlay{
background:#aaaaaa/{bgColorOverlay}/url(images/ui-bg_flat_0_aaaaaa_40x100.png)/{bgImgUrlOverlay}/50%/{bgOverlayXPos}/50%/{bgOverlayYPos}/repeat-x/{bgOverlayRepeat}/;
opacity:.3/{opacityOverlay}/;
filter:Alpha(Opacity=30)/{opacityFilterOverlay}/;
}
.ui-widget-shadow{
margin:-8px/{offsetTopShadow}/00-8px/{offsetLeftShadow}/;
padding:8px/{thicknessShadow}/;
background:#aaaaaa/{bgColorShadow}/url(images/ui-bg_flat_0_aaaaaa_40x100.png)/{bgImgUrlShadow}/50%/{bgShadowXPos}/50%/{bgShadowYPos}/repeat-x/{bgShadowRepeat}/;
opacity:.3/{opacityShadow}/;
filter:Alpha(Opacity=30)/{opacityFilterShadow}/;
border-radius:8px/{cornerRadiusShadow}/;
}
over! |
|
