jquery ui的css设计

jquery ui 是当前最强大的UI库之一，其两大卖点是对IE6的良好支持与换肤功能。为了构建avalon ui，今天起我将投入一部分精力来研究时下最流行的几个ＣＳＳ框架。它是首当其冲。

jquery ui的ＣＳＳ并没有打包一个文件，用户只要引入 jquery.ui.all.css，它就会将所有CSS文件通过@import语句引进来。单从@import来，它比JS高明多了，时至今天，JS的加载都需要我们来实现。

jquery.ui.all.css 的内容很简单：

/*!

 * jQuery UI CSS Framework @VERSION

 * http://jqueryui.com

 *

 * Copyright 2013 jQuery Foundation and other contributors

 * Released under the MIT license.

 * 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语句


/*!

 * jQuery UI CSS Framework @VERSION

 * http://jqueryui.com

 *

 * Copyright 2013 jQuery Foundation and other contributors

 * Released under the MIT license.

 * http://jquery.org/license

 *

 * http://api.jqueryui.com/category/theming/

 */

@import url("jquery.ui.core.css");

@import url("jquery.ui.accordion.css");

@import url("jquery.ui.autocomplete.css");

@import url("jquery.ui.button.css");

@import url("jquery.ui.datepicker.css");

@import url("jquery.ui.dialog.css");

@import url("jquery.ui.menu.css");

@import url("jquery.ui.progressbar.css");

@import url("jquery.ui.resizable.css");

@import url("jquery.ui.selectable.css");

@import url("jquery.ui.slider.css");

@import url("jquery.ui.spinner.css");

@import url("jquery.ui.tabs.css");

@import url("jquery.ui.tooltip.css");

jquery.ui.core.css与我预想的不一样，不做任何reset操作，也不提供什么分栏布局。可能考虑到用户已经引入自己的reset 吧。这里只有极少数的工具类，比如隐藏，清除浮动，将文本从容器中移出视野外……


/* Layout helpers

----------------------------------*/

.ui-helper-hidden {/* 隐藏*/

	display: none;

}

.ui-helper-hidden-accessible {

	border: 0;

	clip: rect(0 0 0 0);

	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;

}

/* Interaction Cues

----------------------------------*/

.ui-state-disabled {/*不可用*/

	cursor: default !important;

}

/* Icons

----------------------------------*/

/* states and images */

.ui-icon { /* 让ICON所在的标签的文本移出视野外 */

	display: block;

	text-indent: -99999px;

	overflow: hidden;

	background-repeat: no-repeat;

}

/* Misc visuals

----------------------------------*/

/* 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: 0 0;

}

/* For IE8 - 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命名。主要处理文本颜色，文本缩进，背景颜色，背景图片，透明度与圆角。


/* Component containers

----------------------------------*/

.ui-widget {

	font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;

	font-size: 1.1em/*{fsDefault}*/;

}

.ui-widget .ui-widget {

	font-size: 1em;

}

.ui-widget input,

.ui-widget select,

.ui-widget textarea,

.ui-widget button {

	font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;

	font-size: 1em;

}

.ui-widget-content {

	border: 1px solid #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-content a {

	color: #222222/*{fcContent}*/;

}

.ui-widget-header {

	border: 1px solid #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-header a {

	color: #222222/*{fcHeader}*/;

}

/* Interaction states

----------------------------------*/

.ui-state-default,

.ui-widget-content .ui-state-default,

.ui-widget-header .ui-state-default {

	border: 1px solid #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-default a,

.ui-state-default a:link,

.ui-state-default a: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: 1px solid #999999/*{borderColorHover}*/;

	background: #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-hover a,

.ui-state-hover a:hover,

.ui-state-hover a:link,

.ui-state-hover a:visited {

	color: #212121/*{fcHover}*/;

	text-decoration: none;

}

.ui-state-active,

.ui-widget-content .ui-state-active,

.ui-widget-header .ui-state-active {

	border: 1px solid #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-active a,

.ui-state-active a:link,

.ui-state-active a:visited {

	color: #212121/*{fcActive}*/;

	text-decoration: none;

}

/* Interaction Cues

----------------------------------*/

.ui-state-highlight,

.ui-widget-content .ui-state-highlight,

.ui-widget-header .ui-state-highlight {

	border: 1px solid #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-highlight a,

.ui-widget-content .ui-state-highlight a,

.ui-widget-header .ui-state-highlight a {

	color: #363636/*{fcHighlight}*/;

}

.ui-state-error,

.ui-widget-content .ui-state-error,

.ui-widget-header .ui-state-error {

	border: 1px solid #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-error a,

.ui-widget-content .ui-state-error a,

.ui-widget-header .ui-state-error a {

	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); /* For IE8 - See #6059 */

}

/* Icons

----------------------------------*/

/* states and images */

.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: 16px 16px; }

.ui-icon-carat-1-n { background-position: 0 0; }

.ui-icon-carat-1-ne { background-position: -16px 0; }

/* 略，这里都是ICON，通过background-position来处理背景图片*/

.ui-icon-grip-diagonal-se { background-position: -80px -224px; }

/* Misc visuals

----------------------------------*/

/* Corner radius */

.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}*/ 0 0 -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!

jquery ui的css设计的更多相关文章

jquery ui的css设计二
上一篇见这里本篇重点说一下其换肤功能换肤一般是指改变控件的字体颜色,背景颜色,边框颜色,hover上去的颜色,背景图片,很少再会涉及修改其长宽,字体类型什么的. 以这个版本的CSS为观察对象,可以 ...
OpenLayers学习笔记3——使用jQuery UI美化界面设计
PC端软件在开发是有较多的界面库能够选择,比方DevExpress.BCG.DotNetBar等,能够非常方便快捷的开发出一些炫酷的界面,近期在学习OpenLayers.涉及到web前端开发,在设计界 ...
【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能
jquery.ui.all.css 1.所有主题必须的文件都包含在这个文件中.它由ui.base.css和ui.them.css两个文件中拉入的@import执行构成. jquery.ui.base. ...
jQuery UI简单的讲解
我们先进入一下问答时间,你都知道多少呢? (1)什么是jQuery UI 呢? 解答:jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互. ...
jQuery UI加入效果
1.设计源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
Jquery UI
jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...
Struts2 JQuery UI常用插件
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
Jquery UI 和Easy UI常用插件
一.Jquery的插件简介 (一)什么是插件插件(Plug-in)是一种遵循一定的应用程序接口规范编写出来的程序,是原有系统平台或应用软件平台功能的一种扩展和补充. 注意!!其只能在程序规定的系统平 ...
jQuery UI常用插件使用
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

随机推荐

监听器(Listener)学习（一）
一.监听器介绍 1.1.监听器的概念监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生情况时,立即采取相应的行动.监听器其实就是一个实现特定接口的普通 ...
【模板】NTT
NTT模板 #include<bits/stdc++.h> using namespace std; #define LL long long const int MAXL=22; con ...
【angularJS】Service服务
AngularJS 中的服务是一个函数或对象.可以创建自己的服务,或使用内建服务. 内置服务 AngularJS 内建了30 多个服务. 1. $location 服务,它可以返回当前页面的 URL ...
fabio 安装试用&&实际使用的几个问题
备注: 因为fabio 依赖consul vault (不是强需),启动之前需要先安装consul, 本次为了简单consul 使用的是单机,使用的是dev 模式 1. conusl ...
odoo10 修改产品单价的小数点位数
odoo10 修改产品单价的小数点位数由于产品价格原因,单价需要保留小数点后 5 位,所以需要修改单价的小数点位数. 开启开发模式找到数据库编辑找到小数点精度修改产品的小数点位数
python time模块 sys模块 random模块
1,time模块 python中的内置模块 #1,显示当前时间戳 print(time.time()) #2,字符串格式化 print(time.strftime('%Y-%m-%d-%H-%M-%S ...
Web 漏洞分析与防御之点击劫持（三）
原文地址:Web 漏洞分析与防御之点击劫持(三) 博客地址:http://www.extlight.com 一.全称点击劫持,顾名思义,用户点击某个按钮,却触发了不是用户真正意愿的事件. 二.原理 ...
Mac环境下PHPstorm配置xdebug开发调试web程序
一.安装PHP的xdebug扩展安装xdebug(技巧,为了找到适配的版本,让xdebug网站根据phpinfo()函数输出分析找到对应的方法及安装步骤:如果安装了多个PHP版本的话,尽量用phpi ...
openresty+lua做接口调用权限限制
说明:openresty可以理解为一个服务器它将nginx的核心包含了过来,并结合lua脚本语言实现一些对性能要求高的功能,该篇文章介绍了使用openresty 1.purview.lua --调用j ...
C/S模式与B/S模式的详细介绍
网络程序开发的两种计算模式--C/S模式与B/S模式.两种各有千秋,用于不同场合. C/S适用于专人使用,安全性要求较高的系统: B/S适用于交互性比较频繁的场合,容易被人们所接受,倍受用户和软件开发 ...

jquery ui的css设计

jquery ui的css设计的更多相关文章

随机推荐

热门专题