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 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
JS实现音量控制拖动
Jan 15 Javascript
如何用threejs实现实时多边形折射
May 07 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
php session 预定义数组
2009/03/16 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
纯js+css实现在线时钟
2020/08/18 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python 常用string函数详解
2016/05/30 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
python热力图实现简单方法
2021/01/29 Python
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
信息技术培训感言
2014/03/06 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
大学生求职意向书
2015/05/11 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS