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拖拽组件
Jul 28 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 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/25 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
js控制input输入字符解析
2013/12/27 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
微信小程序表单验证功能完整实例
2017/12/01 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python多进程重复加载的解决方式
2019/12/13 Python
Python如何使用input函数获取输入
2020/08/06 Python
python把一个字符串切开的实例方法
2020/09/27 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
英语专业个人求职自荐信
2013/09/21 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
2014年端午节活动方案
2014/03/11 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
校园安全演讲稿
2014/05/09 职场文书
养成教育经验材料
2014/05/26 职场文书
使用pytorch实现线性回归
2021/04/11 Python
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
nginx日志格式分析和修改
2022/04/28 Servers
nginx访问报403错误的几种情况详解
2022/07/23 Servers