第11章 jQuery UI组件-【千锋教育】Jquery从入门到实战

第11章 jQuery UI组件 UI组件基础 UI组件进阶 UI 组件基础 UI 组件进阶 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 11.2 11.1 学习目标 了解 掌握 掌握 了解UI组件和插件的区别 1 2 掌握UI组件的基础使用方法 3 掌握UI组件的核心组成及Widget工厂的用法 销售额 掌握知识 理解知识 熟悉知识 3.333333 3.333333 3.333333 jQuery UI组件是以jQuery为基础的JavaScript用户界面代码库。包含用户交互、动画、特效和带主题的可视控件等功能。 jQuery UI组件跟jQuery插件很类似，但也有很多区别，主要体现在三个方面，即功能性、统一性、中心性。 从功能性上来讲，jQuery插件更多是从交互上来实现的，而jQuery UI组件不仅具备交互功能，还具备样式以及布局。从统一性上来讲，jQuery插件更多是独立的，由不同的团队去维护，而jQuery UI组件是统一操作的，组件之间有很多类似的方法，是由jQuery官方团队进行维护的。从中心性上来讲，jQuery插件是辅助jQuery库的，而jQuery UI组件占据主导地位，jQuery库是辅助组件使用的。 11.1 UI 组件基础 11.1.1 引入文件 返回目录 11.1.2 UI 动画 11.1.3 UI 特效 11.1 UI 组件基础 在UI组件基础部分，将学习如何下载对应的文件以及如何将其引入到页面中。并能进行一些基础和简单的操作，如添加动画、特效等。 要使用jQuery UI组件，必须先下载对应的文件。jQuery UI官方网站界面如图所示。 11.1.1 引入文件 11.1 UI 组件基础 单击网页中Quick Downloads下的“Stable”按钮，下载其稳定版本，并对其进行解压，解压后的文件目录如图所示。 11.1.1 引入文件 11.1 UI 组件基础 其中的jquery-ui.css为组件的样式文件，jquery-ui.js为组件的逻辑文件。jquery-ui.min.css和jquery-ui.min.js为压缩版文件，一般用于生产环境下。 jquery-ui.structure.css 加上 jquery-ui.theme.css 等价于jquery-ui.css，这里的jquery-ui.theme.css为皮肤样式，可以更改不同的皮肤样式来显示不同的界面效果。也可以直接采用默认的样式，即jquery-ui.css文件。 想要使用jQuery UI，首先需要引入jQuery库，因为UI是基于jQuery的，然后再引入UI的样式和逻辑文件即可，引入文件代码如下所示。 引入UI文件成功后，就可以使用UI组件进行项目的开发了。 11.1.2 UI 动画 11.1 UI 组件基础 在第7章中，学习了jQuery动画，知道animate()方法下的动画形式只有swing、linear这两种。而jQuery UI组件提供了更多的可选运动形式，统称为Easing，如图所示。 11.1.2 UI 动画 11.1 UI 组件基础 接下来以easeOutBounce特效做演示，代码如下所示。 运行以上代码，可以看到，连背景色都可以进行动画操作，如图所示。 11.1.2 UI 动画 11.1 UI 组件基础 除了animate()方法外，addClass()、removeClass()方法也可以添加动画效果，代码如下所示。 运行以上代码，可以看到，添加了end样式后，元素实现了对应的动画效果。 11.1.3 UI 特效 11.1 UI 组件基础 UI特效可以给当前元素添加一些特殊效果，特效属性如表所示。 11.1.3 UI 特效 11.1 UI 组件基础 能够触发这些特殊效果的方法有show()、hide()、toggle()、effect()。其中前三个方法读者应该不陌生，表示显示、隐藏、切换显示隐藏。即特效执行完毕后，会继续执行显示或隐藏操作。语法为： 演示代码如下所示。 11.1.3 UI 特效 11.1 UI 组件基础 运行以上代码，可以看到，如果当前元素是显示的，那么执行完特效就会隐藏元素，反之亦然，如图所示。 如果只是想单纯地添加特效，可以利用effect()方法。 11.1.3 UI 特效 11.1 UI 组件基础 运行以上代码，可以看到，只要单击按钮，当前元素就会左右振动。一些特效，还可以进行方向的设置，如shake默认是左右振动，下面将其改成上下振动。 运行以上代码，可以发现单击按钮后，红色方块会上下振动。 11.2 UI 组件进阶 11.2.1 UI 交互 返回目录 11.2.2 UI 控件 11.2.3 Widget