黑马程序员技术交流社区

标题: jQueryUI的使用 [打印本页]
作者: 二饼    时间: 2019-1-15 23:11
标题: jQueryUI的使用

jQuery UI 是建立在 jQueryJavaScript 库上的一组用户界面交互、特效、小部件及主题，是由jQuery官方维护的UI插件，在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。可以在做界面的时候随便‘拿来’就用，还有一点就是，它是免费开源的，用户可根据需要自定义甚至重新设计。
jQuery UI 包含了许多维持状态的小部件（Widget），是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。因此，它与典型的 jQuery 插件使用模式略有不同。
此外，所有的 jQuery UI 小部件（Widget）使用相同的模式，因此，只要学会使用其中一个，就知道如何使用其他的小部件（Widget）。
jQuery UI的优点：
1、jQueryUI可以创建高度交互的Web应用程序；
2、它是开源的，免费使用；
3、它提供了强大的主题机制；
4、它非常稳定且易于维护；
5、它提供了广泛的浏览器支持；
6、拥有良好的开发文档；
jQuery UI的功能：
1、实现交互
交互是一组插件，便于用户与DOM元素交互。
jQueryUI中最常用的交互有：拖动、下拉、调整大小、可选择、可排序分类
2、小工具（组件）
jQueryUI中的小工具是一组jQuery插件，它使我们能够快速创建日期选择器，进度条等用户界面元素。
最常用的jQueryUI工具有：手风琴、日期选择器、菜单、按钮、进度条、提示、滑块、选项卡（tabs）、模态框等。
3、效果
jQueryUI中的内部jQuery效果包含一整套自定义动画和DOM元素的过渡。
最常用的jQueryUI效果有：隐藏、显示、切换类、动画等
4、实用程序
实用程序是一个模块化工具，由jQuery库在内部使用。
比如：可以根据其他元素的对齐（位置）设置元素的位置
jQuery UI的使用：
比如要做一个这样的效果：

此时就可以到官网上挑选你需要的样式，并下载。
1、下载
下载后解压开来是一个范例的程序，将得到一个 zip 压缩包，包含下列文件：
2、在html中引入jQueryUI的样式文件
3、引入jQuery文件
4、引入jQueryUI的js文件
需要注意的是引入的顺序不能错。
5、使用jQueryUI功能：审查元素找内容，然后复制
         打开网页的源代码，通过ctrl+f调出搜索框，在搜索框里输入slider，搜索框前部会出第几个和在全篇中共有多少个，然后就可以在页面中找到所有关于slider的代码了。
将所有的关于slider的代码复制后放入html中，你想要的效果就可以实现啦~
写在最后的最后：
jQuery UI确实可以丰富我们的页面效果，可以让我们轻松的做出令人炫目的界面，不过应当记住，插件是我们没有办法的最后选择。因为使用插件有太多的坏处，比如不利于维护、增加页面大小、不利于成员间交流共享,具有学习成本和不够健壮, 不能保证插件版本一直更新并修复所有问题等所有问题。
因此，在使用jQuery UI时应当有选择的使用，而不是为了炫酷的界面不顾其他。





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2