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 相关文章推荐
浅析jQuery1.8的几个小变化
Dec 10 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
Vue header组件开发详解
Jan 26 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
js+canvas绘制图形验证码
Sep 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
根德YB400的电路分析
2021/03/02 无线电
PHP 工厂模式使用方法
2010/05/18 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
调整PHP的性能
2013/10/30 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
使用原生js写的一个简单slider
2014/04/29 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
用python制作游戏外挂
2018/01/04 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python循环实现n的全排列功能
2019/09/16 Python
django中related_name的用法说明
2020/05/20 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
金融管理专业求职信
2014/07/10 职场文书
导游词之无锡梅园
2019/11/28 职场文书