文档章节

jQuery UI的CSS框架

I
 Imy
发布于 2011/02/01 13:58
字数 1092
阅读 5516
收藏 5

jQuery UI的CSS框架设计得非常鲁棒方便用于定制用户界面控件。框架包括很多适合多数用户界面需要的CSS类,这些类能用jQuery UI ThemeRoller来所见即所得地修改。如果你的控件也采用本框架,你的控件就可以和社区的其它大量控件或者代码更容易地集成。

框架类

The following CSS classes are split between ui.core.css and ui.theme.css, depending on whether styles are fixed and structural, or themeable (colors, fonts, backgrounds, etc) respectively. These classes are designed to be applied to User Interface elements to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller.

Layout Helpers布局辅助类

  • .ui-helper-hidden: 让元素不显示(display: none).
  • .ui-helper-hidden-accessible: 将位置设置到屏幕之外让元素看不见(但不是display:none)
  • .ui-helper-reset:  清除一些基本的样式属性比如padding, margins, text-decoration, list-style等.
  • .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: 所有那些控件的最外层容器元素必须包括此类. 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: 所有clickable的元素的缺省状态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: 所有clickable的元素在鼠标移动其上的状态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: 所有clickable的元素的获取到键盘焦点的状态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: 所有clickable的元素当鼠标在其上按下但未弹起时的状态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.

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).

本文转载自:http://blog.csdn.net/alvinjj/archive/2010/08/19/5823079.aspx

I

Imy

粉丝 2
博文 7
码字总数 379
作品 0
朝阳
私信 提问
10个顶级的CSS UI开源框架

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地...

k_k_anna
2015/03/12
0
0
Sencha Touch 和 jQuery Mobile 的比较

很多人问我Sencha Touch (百度百科Sencha Touch译者加) 和jQuery Mobile哪个更好。事实上,它两的区别就像是Web后台编程,PHP和Java。它们都能完成同样的功能,但其实它们是为不同的目的而创...

oschina
2013/07/28
26.6K
24
推荐 10 款基于 Bootstrap 框架的扩展

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 本文推荐 10 款基...

oschina
2013/06/21
54.5K
32
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
使用 ThemeRoller 轻松定制 jQuery Mobile 样式

jQuery Mobile 给主流移动平台带来jQuery核心库,是一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。 jQuery Mobile 本身提供了 6 种不同的样式,但这 6 种不同的样式并无法满足所...

红薯
2012/01/22
8.8K
5

没有更多内容

加载失败,请刷新页面

加载更多

《精进》的读后感作文2600字

《精进》的读后感作文2600字: 首先,我想先分享我读这本书的过程,我是一名大一的学生,在我高考完的暑假,有一次一位知乎用户的朋友推荐了这本书。当时我看了这本书的封面,有一句话非常的...

原创小博客
21分钟前
0
0
亿万pv的混合云规划实施

基础服务: keepalive,lvs,nginx,dns,ntp,redis集群,yum仓库,web资源 网络高可用 防火墙冗余,交换机堆叠 专线互联 物理机虚拟化 VMware vcenter/ Proxmox...

以谁为师
43分钟前
0
0
聊聊dubbo的LRUCache

序 本文主要研究一下dubbo的LRUCache LRUCache dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/utils/LRUCache.java public class LRUCache<K, V> extends LinkedHashMap<......

go4it
45分钟前
0
0
前端知识点总结——H5

前端知识点总结——H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖动API (8)Web Worker (9)Web Storage (10)Web Socket 2.增强...

智云编程
48分钟前
0
0
微服务之架构技术选型与设计

本文主要介绍了架构技术选型与设计-微服务选型,Spring cloud 实现采用的技术,希望对您的学习有所帮助。 架构技术选型与设计-DUBBODubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿...

别打我会飞
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部