jQuery UI组件介绍

一、jQuery UI简介

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。

jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。

二、jQuery UI组件构成

jQuery UI 主要分为3个部分:交互、微件和效果库。

1、交互(Interactions)

交互部件是一些与鼠标交互相关的内容,包括缩放(Resizable) , 拖动(Draggable) , 放置(Droppable) , 选择(Selectable) , 排序(Sortable)等。

2、小部件(Widgets)

主要是一些界面的扩展,包括折叠面板(Accordion) , 自动完成(Autocomplete) , 按钮(Button) , 日期选择器(Datepicker) , 对话框(Dialog) , 菜单(Menu) , 进度条(Progressbar) , 滑块(Slider) , 旋转器(Spinner) , 标签页(Tabs) , 工具提示框(Tooltip)等,新版本的UI将包含更多的微件。

3、效果库(Effects)

用于提供丰富的动画效果,让动画不再局限于jQuery的animate()方法。包括特效(Effect) , 显示(Show) , 隐藏(Hide) , 切换(Toggle) , 添加 Class(Add Class) , 移除 Class(Remove Class) , 切换 Class(Toggle Class) , 转换 Class(Switch Class) , 颜色动画(Color Animation)等。

三、jQuery UI下载

jqueryui官网 :https://jqueryui.com/

中文API文档:

  • https://www.html.cn/jquery-ui-api/
  • https://www.runoob.com/jqueryui/jqueryui-tutorial.html

一旦您对 jQuery UI 有了基本了解,您就可以亲自尝试一下。请从 jQuery UI 网站上的 Download Builder(下载生成器) 页面下载 jQuery UI 的副本。

四、jQuery UI 使用

一旦您下载了 jQuery UI,您将得到一个 zip 压缩包,包含下列文件:

  • /css/
  • /development-bundle/
  • /js/
  • index.html

在文本编辑器中打开 index.html,您将看到引用了一些外部文件:主题、jQuery 和 jQuery UI。通常情况下,您需要在页面中引用这三个文件,以便使用 jQuery UI 的窗体小部件和交互部件:



一旦您引用了这些必要的文件,您就能向您的页面添加一些 jQuery 小部件。比如,要制作一个日期选择器(datepicker)小部件,您需要向页面添加一个文本输入框,然后再调用 .datepicker(),如下所示:

HTML:

JavaScript:

$( "#date" ).datepicker();

到此这篇关于jQuery UI组件的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(jQuery UI组件介绍)