jQuery UI有四大功能使用帮助_jquery使用指南

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

jQuery UI有四大功能使用帮助

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

jQuery UI有四大功能使用帮助_jquery使用指南

 

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)进行应用的(可以是正数,也可以是负数)。

海计划公众号
(0)
上一篇 2020/03/29 01:46
下一篇 2020/03/29 01:46

您可能感兴趣的内容

  • open-location-code基础入门_一种编码定位方式

    open-location-code基础入门 官方网址:http://www.openlocationcode.com GitHub:https://github.com/goog…

    2020/03/06
  • 关于Mock.js使用基础教程_数据教程视频

    关于Mock.js使用基础教程 目前在做一个个人网站,写了一半没有数据填充,也不知道写啥了,就顺带学习下mockjs这个东西,官网上主要介绍它是一个可以随机生成各种类型数据,拦截a…

    2020/03/20
  • jquery绑定点击事件动画BUG攻略教程_bug零基础入门

    jq中的animate()方法所实现的动画在绑定事件的同时会产生各种类型的BUG,在事件选择的时候我会尽可能的使用mouseenter和mouseleave来避免mouseover和mouseout所产生的事件冒泡。如果单独使用个animate的话,在快速移入移出的时候,会重复触发事件,而产生队列没有被清除,重复执行的bug,这个时候可以使用stop()来

    2020/03/24
  • 90行代码,15个元素实现无限滚动小白知识_滚动基础入门

    前言在本篇文章你将会学到:IntersectionObserver API 的用法,以及如何兼容。如何在 React Hook 中实现无限滚动。如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。当你使用滚动作为发现数据的主要方法时,它可能使你的用户在网页上停留更长时间并

    2020/03/24
  • Js中delete 0:到底是在删除什么?入门基础知识_语法入门教程

    本文出自周爱民 《JavaScript 核心原理解析》 专栏。你好,我是周爱民,今天想和大家从 JavaScript 中最不起眼的、使用率最低的一个运算——delete 聊起。你知道,JavaScript 是一门面向对象的语言。它很早就支持了 delete 运算,这是一个元老级的语言特性。但细追究起来,delete 其实是从 JavaScript 1.2 中

    2020/03/23
  • vue-cli 关闭热更新入门基础知识_更新小白基础

    vue 关闭热更新vue 手脚架在使用过程中,更改代码会自动更新页面,非常的方便,但是有些情况向关闭掉这热更新功能,我使用的是vue-admin-template模板来开发的,所以更改也是基于这个模板的。在build文件夹下有个webpack.dev.conf.js文件。然后添加一个配置项:inline: false 即可关闭热更新操作。

    2020/03/30
  • Tomcat是如何实现异步Servlet的菜鸟教程下载_Tomcat入门教程

    手撸一个异步的Servlet我们直接借助SpringBoot框架来实现一个Servlet,这里只展示Servlet代码:@WebServlet(urlPatterns = “/async”,asyncSupported = true)
    @Slf4j
    public class AsyncServlet extends HttpServlet {Executor

    2020/03/24
  • Laravel 如何优雅地实现输出结构统一的功能?小白帮助_Laravel入门基础知识

    背景一般的项目需求都会要求统一的输出结构,特别是对于api应用而言。因此,如果有beforeResponse的功能,则可以在数据输出之前对response进行统一格式化处理。假设这么一种场景,应用做api开发,使用抛异常的方式(自定义异常类ApiException)返回无效非法请求的情况。正常请求则返回合法数据(数组或可序列化的模型),希望返回的数据格式正常

    2020/03/26
  • Cookie防篡改机制入门攻略cookie怎么防止被篡改/伪造_存储菜鸟指南

    一、为什么Cookie需要防篡改为什么要做Cookie防篡改,一个重要原因是 Cookie中存储有判断当前登陆用户会话信息(Session)的会话票据-SessionID和一些用户信息。当发起一个HTTP请求,HTTP请求头会带上Cookie,Cookie里面就包含有SessionID。后端服务根据SessionID,去获取当前的会话信息。如果会话信息存在,

    2020/04/05
  • cocos 资源工作流程小白教程_cocos基础入门

    概述【同步性】  资源管理器中的资源和操作系统的文件管理器中看到的项目资源文件夹是同步的  在资源管理器中对资源的移动、重命名和删除,都会直接在用户的文件系统中对资源文件进行同步修改。同样的,在文件系统中(如 Windows 上的 Explorer 或 Mac 上的 Finder)对添加或删除资源,再次打开或激活 Cocos Creator 程序后,也会对资

    2020/04/05
  • 网站域名被墙是什么?指南教程_域名入门指南

    域名被墙如果域名ping的通却打不开网站(排除服务器宕机),用代理可以打开一般说明域名被封了。假如域名下的网站非法信息多,敏感,又不整改,会直接被GFW墙掉,结果就是访问域名是打不开的。但是解析是正常的。此时域名在国内是无法使用的,国外可以访问和使用。域名被间歇性屏蔽如果间歇性的可以打开,打不开的时候用国外代理可以打开,说明域名被间歇性的屏蔽(当然这个情况也

    2020/03/24
  • 软件架构师之路使用说明_架构小白教程

    什么是软件架构?软件架构师是一名软件开发专家,他可以进行高层设计选择并决定技术标准,包括软件编码标准,工具和平台。(出处: 维基百科:软件架构师)软件架构(architecture)是一个系统的基本组织,由其组件、它们之间的相互关系和环境以及决定系统设计和演化的原则来表示。(出处: 软件架构手册)软件架构的层次软件架构可以被抽象的分为几个层次,不同的层次对技

    2020/03/20
  • CSS Reset浏览器样式重置菜鸟知识_Reset小白攻略

    1. CSS Reset为什么存在?只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一

    2020/03/22
  • 否子戈入门基础_唐霜的个人博客

    否子戈入门基础 官方网址:https://www.tangshuang.net/ 简介描述:唐霜的个人博客 唐霜是我的真名,开发相关的内容以“否子戈”的这个名字发布到各个技术平台。…

    2020/03/11
  • angularjs怎么做页面切换?小白入门_页面小白入门

    angularjs做页面切换的方法:方法一、使用ui-router定义路由来实现页面切换。方法二、使用factory方法实现页面切换并传参。方法三、使用localStorage或sessionStorage实现页面切换并传参。angularjs做页面切换的方法实现如下:1、基于ui-router的页面跳转传参(1) 在AngularJS的app.js中用ui

    2020/03/24
  • phpstorm常用快捷键整理菜鸟教程_快捷键基础知识教程

    PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,PhpStorm可随时帮助用户对其编码进行调整,运行单元测试或者提供可视化debug功能。虽然快捷键是可以自定义的,但是还是推荐使用系统默认设置快捷键,因为不同编辑器默认的快捷键大同小异,比较符合用户习惯。 使用代码块包住代码:Command+alt+T注释/取消注释:

    Web前端 2020/04/03