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 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
Python装饰器的函数式编程详解
2015/02/27 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python处理“
2019/06/10 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
详解python polyscope库的安装和例程
2020/11/13 Python
儿子婚宴答谢词
2014/01/09 职场文书
党员公开承诺书
2014/03/25 职场文书
镇创先争优活动总结
2014/08/28 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
房产分割协议书范文
2014/11/21 职场文书
python之基数排序的实现
2021/07/26 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫