现代 web 应用用户界面设计需要快速开发和经验证的结果。jQueryUI 是 jQueryJavaScript 库的一套受信任的官方插件,它为您提供了一个坚实的平台,在这个平台上,您可以以最大的兼容性、稳定性和最少的时间和精力构建丰富且引人入胜的界面。
jQueryUI 有一系列现成的、外观很棒的用户界面小部件和一组全面的核心交互助手,旨在以一致且对开发人员友好的方式实现。有了所有这些,从构思到完成一个项目,您需要亲自编写的代码量就大大减少了。
本书专门针对 jQueryUI 的 1.10 版进行了修订,通过分解每个组件和逐步构建您的知识的示例,将您从初学者带到高级使用,通过一系列易于遵循的步骤,最大限度地提高您对库的体验。
在本书中,您将了解如何在基本默认实现中初始化每个组件,然后了解定制其外观和配置其行为以使其适应应用的需求是多么容易。您将查看每个组件的 API 公开的配置选项和方法,以了解如何使用这些选项和方法来发挥库中的最佳功能。
如果要满足交互性和响应性的最低要求,事件在任何现代 web 应用中都扮演着关键角色。每章都将向您展示所涵盖的组件触发的自定义事件,以及如何拦截和处理这些事件。
第一章介绍了 jQuery UI,让您准确了解库的内容、下载位置以及其中的文件结构。我们还将介绍 ThemeRoller,哪些浏览器支持该库,它是如何获得许可的,以及 API 是如何简化的,以便为组件提供一致且易于使用的编程模型。
第 2 章CSS 框架和其他工具详细介绍了扩展的 CSS 框架,它通过 Themeroller 为集成主题提供了丰富的环境,还允许开发人员轻松提供自己的自定义主题或外观。我们还介绍了新的 position 工具,并查看了它提供的所有独特功能和一系列配置选项。
第 3 章使用 Tabs 小部件查看第一个小部件,即 Tabs 小部件,它是一种简单但有效的方式,用于在互动小部件中呈现结构化内容。
第 4 章手风琴小部件介绍了手风琴小部件,这是另一个致力于有效显示内容的组件。手风琴具有高度的吸引力和交互性,为任何网页添加了有价值的内容,它的 API 完全公开,以准确显示如何使用它。
第 5 章对话框主要关注对话框小部件。该对话框的行为方式与标准浏览器警报的行为方式相同,但它以一种更不具侵入性且对访问者更友好的方式进行。我们将研究如何对其进行配置和控制,以提供最大的效益和吸引力。
第 6 章滑动条和进度条小部件提供了一个不太常用但同样有价值的用户界面工具,用于收集访问者的输入,并向他们显示操作结果。在本章中,我们将仔细研究这两个组件的 API,以了解它的各种实现方式,并在我们的 web 应用中得到很好的使用。
第 7 章日期选择器小部件查看日期选择器。这个组件将大量的功能打包到一个吸引人且高度可用的工具中,允许访问者轻松地选择日期。我们查看了它的 API 所提供的各种配置,以及蒙皮和本地化等常见任务的实现。
第 8 章按钮和自动补全小部件介绍了全新的按钮,以及最近恢复的自动补全。该库的长期用户将记住该库以前版本的自动补全功能。小部件现在回来了,完全更新以适应库的最新版本,在本章中,我们将看到如何使用它来产生巨大的效果。
第 9 章创建菜单向我们介绍了如何创建菜单并将其添加到我们的网站或应用中。我们将看到如何用最少的代码,将一堆普通的超链接变成一个交互式系统,用于在您的网站上导航,这将有助于吸引您网站的访问者,并使查找内容变得容易。
第 10 章使用工具提示,将向我们展示如何通过向最终用户显示重要信息或反馈,轻松提供基于上下文的支持系统。这在网站访问者可能无意中输入错误信息的情况下尤为重要;我们可以帮助他们回到正确的轨道上!
第 11 章拖放开始关注底层交互助手,首先解决相关的拖放组件。我们将研究如何单独实现它们,以及如何将它们结合使用以增强用户界面。
第 12 章可调整大小的组件介绍了调整大小的组件以及如何将其与本书前面提到的对话框小部件一起使用。我们看到了如何将其应用于页面上的任何元素,以便以平滑和吸引人的方式调整其大小。
第 13 章使用 jQuery UI进行选择和排序,查看本章最后两个交互助手;可选择和可排序的组件。我们可以使用组件来选择和排序网站或应用中的元素,尽管在处理列表时,可排序组件实际上是自己的,因为您可以通过将项目拖动到列表中的新位置来重新排序它们。这两个组件都可以帮助您为站点添加高水平的专业性和交互性,同时模糊桌面应用和基于浏览器的应用之间的界限。
第 14 章UI 特效专门针对图书馆附带的特效。我们将研究一系列不同的效果,这些效果允许您在各种吸引人的动画中显示、隐藏、移动和抖动元素。
第 15 章**小部件工厂,本书的可下载章节全面介绍了小部件工厂,以及它如何让我们快速轻松地创建自己的 jQuery UI 插件。widget factory 为您解决了许多常见问题,可以大大提高生产效率;它还广泛地提高了代码重用,使其非常适合 jQueryUI 以及许多其他有状态插件。您可以在找到本章 http://www.packtpub.com/sites/default/files/downloads/2209OS_Chapter_15.pdf 。
附录帮助和支持介绍了下载库的基础知识。它提供了“获取帮助”部分,帮助读者回答书中的所有问题。
您只需使用一个简单的文本或代码编辑器和一个浏览器就可以完成本书中的大多数示例。有一两个更高级的示例依赖于 PHP,但为了方便起见,我在本书附带的代码下载中包含了这些示例。
本书面向需要快速学习如何使用 jQueryUI 的前端开发人员,或希望了解 jQueryUI 功能、行为和外观的设计师。为了充分利用这本书,您应该对 HTML、CSS 和 JavaScript 有很好的工作知识,并且最好能够熟练地使用 jQuery。
在这本书中,你会发现许多不同类型的文本可以区分不同类型的信息。下面是这些风格的一些例子,并解释了它们的含义。
文本中的代码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄如下所示:“当提示您输入要将存档解压缩到的位置时,请选择我们刚刚创建的jqueryui
文件夹。”
代码块设置如下:
<link rel="stylesheet"
href="development-bundle/themes/base/jquery.ui.tabs.css">
<link rel="stylesheet"
href="development-bundle/themes/base/jquery.ui.theme.css">
当我们希望提请您注意代码块的特定部分时,相关行或项目以粗体显示:
$(".ui-positioned-element").position({
of: ".ui-positioning-element",
my: "right bottom",
at: "right bottom"
});
新术语和重要词语以粗体显示。例如,您在屏幕上、菜单或对话框中看到的文字出现在文本中,如下所示:“当我们查看页面并选择图像选项卡时,经过短暂延迟后,我们将看到六个新图像。”
警告或重要注释显示在这样的框中。
提示和技巧如下所示。
我们欢迎读者的反馈。让我们知道你对这本书的看法——你喜欢什么或可能不喜欢什么。读者反馈对于我们开发您真正从中获益最多的标题非常重要。
要向我们发送一般反馈,只需向<[feedback@packtpub.com](mailto:feedback@packtpub.com)>
发送电子邮件,并通过邮件主题提及书名即可。
如果您对某个主题有专业知识,并且您有兴趣撰写或贡献一本书,请参阅我们的作者指南,网址为www.packtpub.com/authors。
既然您是一本 Packt 图书的骄傲拥有者,我们有很多东西可以帮助您从购买中获得最大收益。
您可以下载您在账户购买的所有 Packt 书籍的示例代码文件 http://www.packtpub.com 。如果您在其他地方购买了本书,您可以访问http://www.packtpub.com/support 并注册,将文件直接通过电子邮件发送给您。
我们还为您提供了一个 PDF 文件,其中包含本书中使用的屏幕截图/图表的彩色图像。彩色图像将帮助您更好地了解输出中的更改。您可以从下载此文件 http://www.packtpub.com/sites/default/files/downloads/2209OS_ColorImages.pdf 。
虽然我们已尽一切努力确保内容的准确性,但错误确实会发生。如果您在我们的一本书中发现错误——可能是文本或代码中的错误——如果您能向我们报告,我们将不胜感激。通过这样做,您可以使其他读者免于沮丧,并帮助我们改进本书的后续版本。如果您发现任何错误,请访问进行报告 http://www.packtpub.com/support ,选择您的书籍,点击勘误表提交表链接,输入您勘误表的详细信息。一旦您的勘误表得到验证,您的提交将被接受,勘误表将上传到我们的网站上,或添加到该标题勘误表部分的任何现有勘误表列表中。通过从中选择您的标题,可以查看任何现有勘误表 http://www.packtpub.com/support 。
在互联网上盗版版权材料是所有媒体的一个持续问题。在 Packt,我们非常重视版权和许可证的保护。如果您在互联网上发现我们作品的任何形式的非法复制品,请立即向我们提供地址或网站名称,以便我们采取补救措施。
请致电<[copyright@packtpub.com](mailto:copyright@packtpub.com)>
与我们联系,并提供可疑盗版材料的链接。
我们感谢您在保护我们的作者方面的帮助,以及我们为您带来有价值内容的能力。
如果您对本书的任何方面有疑问,请致电<[questions@packtpub.com](mailto:questions@packtpub.com)>
与我们联系,我们将尽力解决。