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 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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中使用正则表达式进行查找替换
2013/06/13 PHP
php获取操作系统语言代码
2013/11/04 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python列表解析操作实例总结
2020/02/26 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Python类型转换的魔术方法详解
2020/12/23 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
采购员的工作职责
2013/12/26 职场文书
市场营销管理制度
2014/01/29 职场文书
商业融资计划书
2014/04/29 职场文书
英语专业自荐书
2014/06/13 职场文书
2014年药店工作总结
2014/11/20 职场文书
导游词开场白
2015/01/31 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
售房协议书范本
2015/08/11 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript