Jquery ui css framework

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来。

赞 (0)

相关推荐

  • 基于jQuery UI CSS Framework开发Widget的经验

    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:适用于修复if

  • Jquery ui css framework

    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:适用于修复if

  • 详解jQuery UI库中文本输入自动补全功能的用法

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在 输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], }); 二．修改autocomplete()样式    由于autocomplete()方法是弹窗,然后鼠标悬停的样式.通过Firebug

  • jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表.代码示例如下: 复制代码 代码如下: <script src="js/jquery-1.7.1.js"></script>   <script src="js/jquery-ui-1.8.18.custom.min.js"></script><link rel="stylesheet&qu

  • jQuery UI结合Ajax创建可定制的Web界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

  • jQuery UI菜单部件Menu Widget

    jQuery UI菜单部件Menu Widget

    目录 实例 二.图标 三.分隔符 四.键盘交互 五.主题化 六.快速导航 1.Options 2.Methods 3.Events 带有鼠标和键盘交互的用于导航的可主题化菜单. 实例 一个简单的 jQuery UI 菜单(Menu). 代码 <ul id="menu"> <li><a href="#" rel="external nofollow" rel="external nofollow"

  • jQuery UI旋转器部件Spinner Widget

    jQuery UI旋转器部件Spinner Widget

    通过向上/向下按钮和箭头键处理,为输入数值增强文本输入功能. 一.实例 普通的数字选择器. 代码 <input id="spinner"> <script> $( "#spinner" ).spinner(); </script> 旋转器(Spinner),或数步进控件(number stepper widget),是用于处理各种数字输入的完美控件.它允许用户直接输入一个值,或通过键盘.鼠标.滚轮旋转改变一个已有的值.当与全球化(

  • jQuery UI工具提示框部件Tooltip Widget

    jQuery UI工具提示框部件Tooltip Widget

    可自定义的.可主题化的工具提示框,替代原生的工具提示框. 一.实例 使用带有 title 属性的所有元素的事件代理,在文档上创建一个工具提示框(Tooltip). 代码: <p> <a href="#" rel="external nofollow" title="锚描述">锚文本</a> <input title="输入帮助"> </p> <script>

  • 推荐10款最热门jQuery UI框架 原创

    推荐10款最热门jQuery UI框架 原创

    1.国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本. 欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能．共同推进国内整体ajax开发水平. 在线演示地址:http://j-ui.com http://runjs.cn/detail/x9c7d6qb 2.jQuery的界面插件 Ninja UI jQuer

  • jQuery UI Grid 模态框中的表格实例代码

    jQuery UI Grid 模态框中的表格实例代码

    在弹出的模态框中使用表格. 在某些情况下,特别是 bootstrap modal,可能会出现表格渲染宽度过小或有时显示不完全.会误认为是由于 bootstrap modal 的动画渲染导致表格渲染时的可用空间不如预期.可以通过调用handleWindowResize来纠正.动画渲染的时间不好确定,所以一般推荐使用$interval,在模态框打开后的5秒内每隔500ms循环调用. 从某种意义上说,这类似于自动调整大小的功能,但它只在模态框开启后的短时间内完成. 代码: index.html <!d

随机推荐