文档章节

The jQuery UI CSS Framework(中文说明)

xiahuawuyu
 xiahuawuyu
发布于 2012/05/07 22:10
字数 1162
阅读 220
收藏 2
在项目中经常会用到一些样式什么的,如果使用了jQuery UI那么很多的图标,样式什么的,就可以尽量使用jQuery UI里面已经定义好了的,在此就对jQuery UI中的css做写了下注释,提供自己准备利用jQuery UI的样式来写控件的朋友们,自己也顺带做下记录。 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css   
Layout Helpers(布局帮助)
  • .ui-helper-hidden: Applies display: none to elements. (隐藏元素,适用于display:none可以隐藏的元素)
  • .ui-helper-hidden-accessible: Applies accessible hiding to elements (via abs positioning off the page) (隐藏元素,适用于绝对定位的元素,直接裁剪为1×1px的大小)
  • .ui-helper-reset: A basic style reset for UI elements. Resets things such as padding, margins, text-decoration, list-style, etc. (进行复位)
  • .ui-helper-clearfix: Applies float wrapping properties to parent elements
  • .ui-helper-zfix: Applies iframe "fix" css to iframe elements when needed in overlays.
Widget Containers(控件容器)
  • .ui-widget: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements specifically, to combat inheritance issues in Win browsers. (容器,主要设置字体和字体大小)
  • .ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons. (容器标题区)
  • .ui-widget-content: Class to be applied to content containers. Applies content container styles to an element and its child text, links, and icons. (can be applied to parent or sibling of header)(容器内容区)
Interaction States(交互状态)
  • .ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons. (默认状态)
  • .ui-state-hover: Class to be applied on mouseover to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons. (鼠标移到元素上时的状态)
  • .ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons. (元素获得焦点时的状态)
  • .ui-state-active: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.(激活(在鼠标点击与释放之间发生的事件)的元素的状态)
Interaction Cues(交互提示)
  • .ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons. (高亮状态)
  • .ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons. (错误状态)
  • .ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons. (错误状态,不包括图标)
  • .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element. (禁用的状态)
  • .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text. (首要终点)
  • .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.(次要重点)
Icons(图标)
States and images(状态和图片)
  • .ui-icon: Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. Note: .ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color.(不同的状态是不同的图片)

有如下几种:

1.ui-icon (默认图标)
2.ui-widget-content .ui-icon (容器中内容图标)
3.ui-widget-header .ui-icon (容器中标题图标)
4.ui-state-default .ui-icon (默认状态图标)
5.ui-state-hover .ui-icon, .ui-state-focus .ui-icon (鼠标移动到上方时或获得焦点时图标)
6.ui-state-active .ui-icon (激活时图标)
7.ui-state-highlight .ui-icon (高亮时图标)
8.ui-state-error .ui-icon, .ui-state-error-text .ui-icon (错误时图标)

Icon types

After declaring a ".ui-icon" class, you can follow up with a second class describing the type of icon you'd like. Icon classes generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}.

For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e

jQuery UI's ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.

 
Misc Visuals(杂项)
Corner Radius helpers(圆角帮助)
  • .ui-corner-tl: Applies corner-radius to top left corner of element. (左上角圆角)
  • .ui-corner-tr: Applies corner-radius to top right corner of element. (右上角圆角)
  • .ui-corner-bl: Applies corner-radius to bottom left corner of element. (左下角圆角)
  • .ui-corner-br: Applies corner-radius to bottom right corner of element. (右下角圆角)
  • .ui-corner-top: Applies corner-radius to both top corners of element. (左上和右上角圆角)
  • .ui-corner-bottom: Applies corner-radius to both bottom corners of element. (左下和右下角圆角)
  • .ui-corner-right: Applies corner-radius to both right corners of element. (右上和右下角圆角)
  • .ui-corner-left: Applies corner-radius to both left corners of element. (左上和左下角圆角)
  • .ui-corner-all: Applies corner-radius to all 4 corners of element.(四个角全部圆角)
Overlay & Shadow(遮罩层和阴影)
  • .ui-widget-overlay: Applies 100% wxh dimensions to an overlay screen, along with background color/texture, and screen opacity. (遮罩层)
  • .ui-widget-shadow: Class to be applied to overlay widget shadow elements. Applies background color/texture, custom corner radius, opacity, top/left offsets and shadow "thickness". Thickness is applied via padding to all sides of a shadow that is set to match the dimensions of the overlay element. Offsets are applied via top and left margins (can be positive or negative)(阴影)

© 著作权归作者所有

xiahuawuyu
粉丝 103
博文 647
码字总数 713018
作品 0
浦东
技术主管
私信 提问
jquery、CSS、icon、字体、模板、CDN资源库汇总(庞大的前端干货)

jQuery(js)库: jQueryfuns:43,849 个HTML, CSS & 响应式模板 http://www.jqueryfuns.com/ datouwang 一个js特效库 http://www.datouwang.com/ js代码网 大量js和css效果代码分享 http:/......

找前辈网
2017/10/24
0
0
分享7个最新的使用jQuery实现的悬浮特效

日期:2011/12/12 来源:GBin1.com 鼠标悬浮特效是网页制作的常用特效之一,最早使用flash可以创新的制作非常炫的效果,现在我们同样也可以使用CSS和Javascript来实现。 今天的这个文章中,我...

gbin1
2011/12/13
6.6K
4
XOOPS 2.5.7 Final 发布,兼容 PHP 5.5

XOOPS 2.5.7 Final 发布,此版本完全兼容 PHP 5.5,其他包括安全更新,bug 修复和外部库的更新: - jQuery to 1.11.0 - jQuery UI 1.10.4 - jQuery Lightbox to 1.2.3 - jQuery Form to 3.50...

oschina
2014/06/17
2.4K
12
【已更新】从Bootstrap到Amaze UI

7月17日更新 大家有什么疑问都可以说吧,我觉得这事儿做的还算磊落,文中没刻意打击Bootstrap的意思,也没抬高 Amaze UI,初衷是做个更适用国内前端框架的东西,月底也会开源,没必要讨骂声。...

hongtaok
2014/07/16
17.4K
25
使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

在线演示 本地下载 今 天是情人节,这里我们将创建一个超酷的动态留言板来帮助大家度过这个情人节,可能大家使用过很多的评论或者留言系统,基本都是静态输入的形式,今天我们创 建的这个留言...

gbin1
2012/02/15
844
2

没有更多内容

加载失败,请刷新页面

加载更多

[JavaScript]js模块化

没有模块化:<scrpit> CommonJS(服务端):NodeJS AMD(浏览器端):RequireJS等 CMD(浏览器端):Sea.js UMD ES6

Danni3
14分钟前
0
0
拯救你丢失的精度——BigInteger和BigDecimal类(入门)

第三阶段 JAVA常见对象的学习 BigInteger和BigDecimal类 BigInteger类 (一) 构造方法: //针对超过整数范围的运算(整数最大值:2147483647)BigInteger(String val) ####(二) 常用方法: ...

BWH_Steven
15分钟前
0
0
开源 java CMS - FreeCMS2.8 自定义标签 infoSearch

项目地址:http://www.freeteam.cn/ infoSearch 根据参数和搜索关键词提取信息分页对象。 参数 说明 siteid 信息所属站点id num 每页显示数量 order 排序类型 1 固顶有效并降序,发布时间降序...

freeteam
26分钟前
0
0
java思维导图整理

jmm https://www.edrawsoft.cn/viewer/public/s/b0178374373697; redis https://www.edrawsoft.cn/viewer/public/s/5691c269955848 map https://www.edrawsoft.cn/viewer/public/s/b67533638......

流光韶逝
41分钟前
5
0
Gnu/Linux 防止暴力扫描及其它

RedHat7 手工脚本: # iptables iptables -A INPUT -i eno16777728 -p tcp -m multiport --destination-port 135,136,137,138,139,445,4899,1900 -j LOG iptables -A INPUT -p tcp -m multip......

晒太阳的小猪
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部