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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP可变函数学习小结
2015/11/29 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
php实现微信支付之现金红包
2018/05/30 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python实现学生管理系统
2018/01/11 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python 6行代码制作月历生成器
2020/09/18 Python
Python的信号库Blinker用法详解
2020/12/31 Python
python实现银行账户系统
2021/02/22 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
应届毕业生求职信
2013/11/30 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
归元寺导游词
2015/02/06 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
java解析XML详解
2021/07/09 Java/Android
详解pytorch创建tensor函数
2022/03/22 Python
js前端图片加载异常兜底方案
2022/06/21 Javascript