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 相关文章推荐
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
python中global与nonlocal比较
2014/11/21 Python
Python线程的两种编程方式
2015/04/14 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python解惑之整数比较详解
2017/04/24 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
夫妻忠诚协议书范本
2014/11/17 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
社团招新宣传语
2015/07/13 职场文书
Golang bufio详细讲解
2022/04/21 Golang
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL