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中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
jquery实现动态画圆
Dec 04 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
js选择器全面解析
Jun 27 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
浅谈php扩展imagick
2014/06/02 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
python操作excel的方法
2018/08/16 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
Internal修饰符有什么含义
2013/07/10 面试题
大学教师年终总结的自我评价
2013/10/29 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
环保宣传语大全
2015/07/13 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
学校体育节班级口号
2015/12/25 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
详解JS数组方法
2021/11/20 Javascript