什么是JQuery UI,又有什么功能

Posted lszw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了什么是JQuery UI,又有什么功能相关的知识,希望对你有一定的参考价值。

 

jQuery UI (译:jQuery用户界面) 是:以 jQuery 为基础的开源 javascript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。

 

jQuery UI有四大功能:

1.实现交互:

               交互是一组插件,便于用户与DOM元素交互。

               常用的交互有:拖动、下拉、调整大小、可选择、可排序分类。

2、小部件(组件)

                组件是一组jQuery插件,它使我们能够快速创建日期选择器,进度条等用户界面元素。

               常用的组件有:日期选择器、菜单、按钮、提示、滑块、选项卡(Tabs)、模态框等。

3.效果

               效果包含一整套自定义动画和DOM元素的过渡。

               常用的效果有:隐藏、显示、切换类、动画等。

4.实用程序

              实用程序是一个模块化工具,由jQuery库在内部使用。

             用处:可以根据其他元素的对齐(位置)设置元素的位置。

 

 

 

CSS框架 API

布局助手
.ui-helper-hidden:对元素应用 display: none。
.ui-helper-hidden-accessible:对元素应用访问隐藏(通过页面绝对定位)。
.ui-helper-reset:UI 元素的基本样式重置。重置的元素比如:padding、margin、text-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

其他视觉效果
圆角半径助手
.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,又有什么功能的主要内容,如果未能解决你的问题,请参考以下文章

JQuery Easy Ui (Tree树)详解(转)

JQuery EasyUI

Jquery UI - 自动完成不是一个功能

JQuery EasyUI后台UI框架使用连载

JQuery EasyUI后台UI框架使用连载

jQuery UI常用插件使用