Skip to content

Latest commit

 

History

History
136 lines (73 loc) · 9.95 KB

File metadata and controls

136 lines (73 loc) · 9.95 KB

零、序言

感谢您阅读jQuery for Designers。本书面向那些对 HTML 和 CSS 有基本了解,但希望通过学习一些基本 JavaScript 来提高技能的设计师。即使您以前从未尝试过编写 JavaScript,本书也将帮助您完成设置一些基本 JavaScript 的过程,并完成常见任务,如折叠内容、下拉菜单、幻灯片等等,这一切都要归功于 jQuery 库!

这本书涵盖的内容

第一章设计师,与 jQuery见面,介绍 jQuery 库和 JavaScript。您将了解 jQuery 的成名、为什么它对设计师如此重要,以及它如何帮助您在不必学习大量代码的情况下创建一些奇特的特效。本章还包括对 JavaScript 的温和的小介绍,以及编写第一个 JavaScript 代码的步骤。

第 2 章增强链接将引导您完成一些基本的链接增强。您将学习如何使用 jQuery 在新窗口中打开链接,如何向链接添加图标,以及如何将链接列表转换为选项卡式界面。

第 3 章制作一个更好的 FAQ 页面,将向您介绍折叠和显示内容,以及遍历 HTML 文档从一个元素移动到另一个元素。在本章中,我们将建立一个基本的 FAQ 列表,然后逐步增强它,使我们的网站访问者更容易使用。

第 4 章构建自定义滚动条,是我们第一次看到 jQuery 插件。我们将使用 jScrollPane 插件创建自定义滚动条,这些滚动条在几种不同的浏览器中都能正常工作。我们将介绍如何设置滚动条、自定义滚动条的外观以及如何实现动画滚动行为。

第 5 章创建自定义工具提示介绍如何使用 qTip 插件将浏览器的默认工具提示替换为自定义工具提示。然后我们更进一步,创建自定义工具提示以增强导航栏,并使用工具提示显示额外的内容。

第 6 章构建互动导航菜单,逐步设置功能齐全、视觉效果极佳的下拉菜单和弹出菜单。我们逐步了解使这些类型的菜单工作所需的复杂 CSS,使用 Superfish 插件来填充纯 CSS 解决方案中缺少的功能,然后看看如何定制菜单的外观。

第 7 章异步导航介绍了 Ajax,并展示了如何通过一点 jQuery 将一个简单的网站变成一个单页 web 应用程序。首先,我们建立一个简单的示例,然后逐步介绍一个功能更全面的示例,其中包括对传入链接和后退按钮的支持。

第 8 章显示灯箱中的内容,将引导您使用 Colorbox jQuery 插件在灯箱中显示照片和幻灯片。一旦我们了解了基本知识,我们还将看看如何使用 Colorbox 插件创建一个奇特的登录,播放一组视频,甚至建立一个单页的网站库。

第 9 章创建幻灯片将引导您通过几种不同的方法创建图像幻灯片。首先,我们将逐步介绍一个从头构建的基本 crossfade 幻灯片演示示例。然后,我们将使用 CrossSlide 插件、Nivo 滑块插件和 Galleriffic 插件创建不同类型的幻灯片。

第 10 章以转盘和滑块中的内容为特色,介绍了转盘、新闻标签和滑块,所有这些都是在 jCarousel jQuery 插件的帮助下构建的。我们将创建一个水平旋转木马、一个垂直的新闻标签和一个特色内容滑块。然后,我们将看一看,当我们将幻灯片与旋转木马结合使用时,插件是如何进一步扩展的。

第 11 章创建一个交互式数据网格,让您逐步将一个简单的 HTML 表格变成一个完全交互式的数据网格,允许您的网站访问者浏览表格、搜索条目和按不同列排序。

第 12 章改进形式介绍了如何改进形式。本章将指导您使用一些最新的 HTML5 表单元素正确设置 HTML 表单。然后,我们通过将光标放在第一个字段中、使用占位符文本并验证站点访问者的表单条目来增强表单。最后,我们看一看统一 jQuery 插件,它允许我们设计最顽固和最具挑战性的表单元素,以实现跨浏览器表单的一致外观。

这本书你需要什么

您需要一个文本编辑器来创建 HTML、CSS 和 JavaScript。一些伟大的免费选项是 TextWrangler for Mac 或 Notepad++for Windows。还有许多其他可用选项,您可以随意使用您最喜欢的文本编辑器来编辑本书中的任何示例。

您还需要一个浏览器。我个人最喜欢的是 GoogleChrome,它包括一些非常有用的 CSS 和 JavaScript 调试工具。同样,您可以随意使用您最喜爱的浏览器查看本书中的示例。

如果您想为自己的设计创建图像,那么 Adobe Photoshop 和 Adobe Illustrator 将非常有用,尽管它们不是严格必需的。示例代码中包含了设置本书中使用的示例所需的任何图像。

这本书是给谁的

这本书是为那些对 HTML 和 CSS 有基本了解,但希望通过学习使用 JavaScript 和 jQuery 来扩展知识的设计师准备的。

公约

在这本书中,你会发现几个标题经常出现。

为了明确说明如何完成程序或任务,我们使用:

行动时间-航向

  1. 行动 1
  2. 行动 2
  3. 行动 3

说明通常需要一些额外的解释,以使其有意义,因此遵循:

刚才发生了什么事?

本标题说明了您刚刚完成的任务或说明的工作原理。

您还可以在本书中找到其他一些学习辅助工具,包括:

突击测验-标题

这些是简短的多项选择题,旨在帮助你测试自己的理解能力。

有一个英雄式的前进方向

这些设置了实际的挑战,并为你提供了用所学知识进行实验的想法。

您还将发现许多文本样式,可以区分不同类型的信息。下面是这些风格的一些例子,并解释了它们的含义。

文本中的代码如下所示:“jQuery 对象的 filter()方法将允许我们过滤先前选择的一组元素。”

代码块设置如下:

$('#tabs a').bind('click', function(e){
$('#tabs a.current').removeClass('current');
$('.tab-section:visible').hide();

当我们希望提请您注意代码块的特定部分时,相关行或项目以粗体显示:

$(this.hash).show();
$(this).addClass('current');
e.preventDefault;
}).filter(':first').click();

新术语重要词语以粗体显示。例如,您在屏幕上、菜单或对话框中看到的文字出现在文本中,如下所示:“一些人认为,在新窗口中打开链接会破坏后退按钮的预期行为,应该避免。”

警告或重要注释显示在这样的框中。

提示

提示和技巧如下所示。

读者反馈

我们欢迎读者的反馈。让我们知道你对这本书的看法-你喜欢或可能不喜欢什么。读者反馈对于我们开发您真正从中获益最多的标题非常重要。

要向我们发送一般反馈,只需向<[feedback@packtpub.com](mailto:feedback@packtpub.com)>发送电子邮件,并通过邮件主题提及书名即可。

如果您需要并希望看到我们出版一本书,请在www.packtpub.com或电子邮件<[suggest@packtpub.com](mailto:suggest@packtpub.com)>上的建议书名表格中向我们发送注释。

如果您对某个主题有专业知识,并且您有兴趣撰写或贡献一本书,请参阅我们的作者指南,网址为www.packtpub.com/authors

客户支持

既然您是一本 Packt 图书的骄傲拥有者,我们有很多东西可以帮助您从购买中获得最大收益。

下载示例代码

您可以下载您在账户购买的所有 Packt 书籍的示例代码文件 http://www.PacktPub.com 。如果您在其他地方购买了本书,您可以访问http://www.PacktPub.com/support 并注册,将文件直接通过电子邮件发送给您。

勘误表

虽然我们已尽一切努力确保内容的准确性,但错误确实会发生。如果您在我们的一本书中发现错误——可能是文本或代码中的错误——如果您能向我们报告,我们将不胜感激。通过这样做,您可以使其他读者免于沮丧,并帮助我们改进本书的后续版本。如果您发现任何错误,请访问进行报告 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)>与我们联系,我们将尽力解决。