jQuery UI 中文参考手册

收藏(18) 分享
阅读(18243) 更新时间(2022-04-13)

在《jQuery UI 中文参考手册》中,jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。 jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。


jQuery UI是一套JavaScript 库,提供抽象化、可自定义主题的GUI控件与动画效果。基于jQuery JavaScript库,可用来建构交互式的互联网应用程序。在2007年9月约翰·雷西格于jquery.com博客里的一篇文章里正式公诸于世。最新的版本需要jQuery 2.1.1或更新的版本。

提示:在开始学习 jQuery UI之前,您需要具备HTMLCSSJavaScript基础知识。

jQuery UI的优缺点:

优点:

1、简单易用,继承 jQuery 简易使用特性,提供高度抽象接口,短期改善网站易用性。

2、轻便快捷,组件间相对独立,可按需加载,避免浪费带宽拖慢网页打开速度。

3、标准先进,支持 WAI-ARIA,通过标准 XHTML 代码提供渐进增强,保证低端环境可访问性。

4、强力支持,Google 为发布代码提供 CDN 内容分发网络支持。

缺点:

1、代码不够健壮:缺乏全面的测试用例,部分组件 Bugs 较多,不能达到企业级产品开发要求。

2、构架规划不足:组件间 API 缺乏协调,缺乏配合使用帮助。

3、控件较少:相对于 Dojo、YUI、Ext JS 等成熟产品,可用控件较少,无法满足复杂界面功能要求。

提示:我们的jQuery UI教程将帮助您逐步学习如何掌握并使用jQuery UI,如果你有任何疑问,请前往PHP中文网jQuery UI社区提出你的问题,会有热心网友为你解答。

jQuery UI功能

以1.9.0版本为例。

交互

  • 拖曳(Draggable)–让元素可以用鼠标拖曳。

  • 拖放(Droppable)–让控件可以接受其他拖曳进来的元素。

  • 调整大小(Resizable)–让元素可以调整大小。

  • 选取(Selectable)–提供高级的大量元素选择功能。

  • 排序(Sortable)–让列表可以更容易排序。

控件

  • jQuery UI的所有控件都能自定义主题样式。

  • 手风琴式菜单(Accordion)–如手风琴般可伸缩的控件。

  • 自动完成(Autocomplete)–根据用户的输入来自动完成文字栏。

  • 按钮(Button)–增强按钮外观,将单选与复选控件转变成按钮型式。

  • 日期选择器(Datepicker)–高级的日期选择工具。

  • 对话框(Dialog) –在页面最上层显示对话框。

  • 菜单(Menu) - 显示多层次结构式的菜单。

  • 进度条(Progressbar) –动态与静态的进度指示条。

  • 滑动条(Slider)–完全可以自定义的滑动条与各种功能。

  • 微调选择器(Spinner) - 上下控制的数字微调输入栏。

  • 页签(Tabs)–页签切换控件,可以内嵌或动态加载内容。

  • 工具提示(Tooltip) - 弹出式提示框。

效果

  • 颜色动画(Color Animation)–产生颜色转变的动画效果。

  • 切换Class、新增Class、移除Class、开关Class –让页面上元素样式转变时有动画效果。

  • 效果(Effects)–各种效果(显示、下拉、爆炸、淡入等等)。

  • 切换(Toggle)–切换效果开关。

  • 隐藏、显示 - 使用上述的效果。

工具

位置(Position) –根据另一个元素来设置目标元素的位置(对齐)。

本jQuery UI教程手册涵盖的内容

本jQuery UI教程手册涵盖所有jQuery UI初级到高级知识,包含了jQuery UI入门、jQuery UI主、jQuery UI部件库等知识。

提示:本教程的每一章都包含了很多jQuery UI实例,您可以直接点击 "运行实例" 按钮在线查看结果或者直接使用在线编辑器进行测试。这些例子将帮助您更好地理解和使用jQuery UI。

其它jQuery UI相关学习参考资源

除了本页面右侧的知识拓展,还为大家精选了以下资源