jQuery UI
  • [jQuery UI]jQuery UI 教程
  • [jQuery UI]jQuery UI 简介
  • [jQuery UI]jQuery UI 下载
  • [jQuery UI]jQuery UI 使用
  • [jQuery UI]jQuery UI 定制
  • [jQuery UI]jQuery UI 工作原理
  • [jQuery UI]jQuery UI 主题
  • [jQuery UI]jQuery UI ThemeRoller
  • [jQuery UI]jQuery UI CSS 框架 API
  • [jQuery UI]jQuery UI 设计主题
  • [jQuery UI]jQuery UI 部件库(Widget Factory)
  • [jQuery UI]jQuery UI 通过部件库(Widget Factory)扩展小部件
  • [jQuery UI]jQuery UI 小部件(Widget)方法调用
  • [jQuery UI]jQuery UI 为什么使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 如何使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 1.10 API 文档
  • [jQuery UI]jQuery UI API 类别 - 特效(Effects)
  • [jQuery UI]jQuery UI API类别 - 特效核心Effects Core
  • [jQuery UI]jQuery UI API 类别 - 交互Interactions
  • [jQuery UI]jQuery UI API 类别 - 方法重载Method Overrides
  • [jQuery UI]jQuery UI API 类别 - 方法Methods
  • [jQuery UI]jQuery UI API 类别 - 选择器Selectors
  • [jQuery UI]jQuery UI API 类别 - 主题Theming
  • [jQuery UI]jQuery UI API 类别 - UI 核心UI Core
  • [jQuery UI]jQuery UI API 类别 - 实用工具Utilities
  • [jQuery UI]jQuery UI API 类别 - 小部件Widgets
  • [jQuery UI]jQuery UI 实例
  • [jQuery UI]jQuery UI 实例 - 拖动Draggable
  • [jQuery UI]jQuery UI 实例 - 放置Droppable
  • [jQuery UI]jQuery UI 实例 - 缩放Resizable
  • [jQuery UI]jQuery UI 实例 - 选择Selectable
  • [jQuery UI]jQuery UI 实例 - 排序Sortable
  • [jQuery UI]jQuery UI 实例 - 折叠面板Accordion
  • [jQuery UI]jQuery UI 实例 - 自动完成Autocomplete
  • [jQuery UI]jQuery UI 实例 - 按钮Button
  • [jQuery UI]jQuery UI 实例 - 日期选择器Datepicker
  • [jQuery UI]jQuery UI 实例 - 对话框Dialog
  • [jQuery UI]jQuery UI 实例 - 菜单Menu
  • [jQuery UI]jQuery UI 实例 - 进度条Progressbar
  • [jQuery UI]jQuery UI 实例 - 滑块Slider
  • [jQuery UI]jQuery UI 实例 - 旋转器Spinner
  • [jQuery UI]jQuery UI 实例 - 标签页Tabs
  • [jQuery UI]jQuery UI 实例 - 工具提示框Tooltip
  • [jQuery UI]jQuery UI 实例 - 特效Effect
  • [jQuery UI]jQuery UI 实例 - 显示Show
  • [jQuery UI]jQuery UI 实例 - 隐藏Hide
  • [jQuery UI]jQuery UI 实例 - 切换Toggle
  • [jQuery UI]jQuery UI 实例 - 添加Class-Add Class
  • [jQuery UI]jQuery UI 实例 - 移除 Class-Remove Class
  • [jQuery UI]jQuery UI 实例 - 切换Class-Toggle Class
  • [jQuery UI]jQuery UI 实例 - 转换Class-Switch Class
  • [jQuery UI]jQuery UI 实例 - 颜色动画Color Animation
  • [jQuery UI]jQuery UI 实例 - 定位Position
  • [jQuery UI]jQuery UI 实例 - 部件库Widget Factory
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> javaScript >> jQuery UI >> jQuery UI CSS 框架 API
    jQuery UI CSS 框架 API
    更新日期: 2017年07月20日 来源: 本站原创 作者: 佚名 阅读:
    上一篇jQuery UI ThemeRoller 下一篇:jQuery UI 设计主题

    jQuery UI css 框架 API

    jquery ui CSS 框架

    jQuery UI 包含了一个强大的 CSS 框架,为了创建自定义 jQuery 小部件而设计的。框架包含了通用的用户界面所需的类,且可使用 jQuery UI ThemeRoller 进行维护。通过使用 jQuery UI CSS 框架创建您自己的 UI 组件。您需采用共享标记公约,以便在插件社区的代码集成。

    框架类

    下面的 CSS 类根据样式是否是固定的结构化的,或者是否是可主题化的(颜色、字体、背景等),分别定义在 ui.core.cssui.theme.css 两个文件中。这些类被设计来用于用户界面元素,以便获得整个应用程序的视觉一致性,可通过 jQuery UI ThemeRoller 对组件进行主题化。

    布局助手

    • .ui-helper-hidden:对元素应用 display: none
    • .ui-helper-hidden-accessible:对元素应用访问隐藏(通过页面绝对定位)。
    • .ui-helper-reset:UI 元素的基本样式重置。重置的元素比如:paddingmargintext-decoration、list-style,等等。
    • .ui-helper-clearfix:对父元素应用浮动包装属性。
    • .ui-helper-zfix:对 <iframe> 元素应用 iframe "fix" CSS。

    小部件容器

    • .ui-widget:对所有小部件的外部容器应用的 Class。对小部件应用字体和字体尺寸,同时也对自表单元素应用相同的字体和 1em 的字体尺寸,以应对 Windows 浏览器中的继承问题。
    • .ui-widget-header:对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式。
    • .ui-widget-content:对内容容器应用的 Class。对元素及其子元素的文本、链接、图标应用内容容器样式。(可应用到标题的父元素或者同级元素)

    交互状态

    • .ui-state-default:对可点击按钮元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable default" 容器样式。
    • .ui-state-hover:当鼠标悬浮在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。
    • .ui-state-focus:当键盘聚焦在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。
    • .ui-state-active:当鼠标点击可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable active" 容器样式。

    交互提示 Cues

    • .ui-state-highlight:对高亮或者选中元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "highlight" 容器样式。
    • .ui-state-error:对错误消息容器元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "error" 容器样式。
    • .ui-state-error-text:对只有无背景的错误文本颜色应用的 Class。可用于表单标签,也可以对子图标应用错误图标颜色。
    • .ui-state-disabled:对禁用的 UI 元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。
    • .ui-priority-primary:对第一优先权的按钮应用的 Class。应用粗体文本。
    • .ui-priority-secondary:对第二优先权的按钮应用的 Class。应用正常粗细的文本,对元素应用轻微的透明度。

    图标

    状态和图像

    • .ui-icon:对图标元素应用的基本 Class。设置尺寸为 16px 方块,隐藏内部文本,对 "content" 状态的精灵图像设置背景图像。注意: .ui-icon class 将根据它的父容器得到一个不同的精灵背景图像。例如,ui-state-default 容器内的 ui-icon 元素将根据 ui-state-default 的图标颜色进行着色。

    图标类型

    在声明 .ui-icon class 之后,接着您可以声明一个秒速图标类型的 class。通常情况下,图标 class 遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}

    例如,一个指向右侧的三角形图标,如下所示: .ui-icon-triangle-1-e

    jQuery UI 的 ThemeRoller 在它的预览一栏中提供了全套的 CSS 框架图标。将鼠标悬浮在图标上可查看 class 名称。

    其他视觉效果

    圆角半径助手

    • .ui-corner-tl:对元素的左上角应用圆角半径。
    • .ui-corner-tr:对元素的右上角应用圆角半径。
    • .ui-corner-bl:对元素的左下角应用圆角半径。
    • .ui-corner-br:对元素的右下角应用圆角半径。
    • .ui-corner-top:对元素上边的左右角应用圆角半径。
    • .ui-corner-bottom:对元素下边的左右角应用圆角半径。
    • .ui-corner-right:对元素右边的上下角应用圆角半径。
    • .ui-corner-left:对元素左边的上下角应用圆角半径。
    • .ui-corner-all:对元素的所有四个角应用圆角半径。

    覆盖 & 阴影

    • .ui-widget-overlay:对覆盖屏幕应用 100% 宽度和高度,同时设置背景颜色/纹理和屏幕不透明度。
    • .ui-widget-shadow:对覆盖应用的 Class,设置了不透明度、上偏移/左偏移,以及阴影的 "厚度"。厚度是通过对阴影所有边设置内边距(padding)进行应用的。偏移是通过设置上外边距(margin)和左外边距(margin)进行应用的(可以是正数,也可以是负数)。
     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇jQuery UI ThemeRoller 下一篇:jQuery UI 设计主题
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918