Jquery ui css framework


Posted in Javascript onJune 28, 2010

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来。

Javascript 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
插件:检测javascript的内存泄漏
Mar 04 Javascript
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
vue调用语音播放的方法
Sep 27 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 #Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 #Javascript
js getElementsByTagName的简写方式
Jun 27 #Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 #Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 #Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 #Javascript
jQuery选择头像并实时显示的代码
Jun 27 #Javascript
You might like
Terran热键控制
2020/03/14 星际争霸
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
Python实现的归并排序算法示例
2017/11/21 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python占用的内存优化教程
2019/07/28 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python实现数值积分方式
2019/11/20 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
客服部班长工作责任制
2014/02/25 职场文书
普通党员对照检查材料
2014/09/24 职场文书
教师个人师德总结
2015/02/06 职场文书
北大自主招生自荐信
2015/03/04 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs