每个人都见过互联网上那些超级酷炫的 jQuery 插件,对吧?也许你只是因为找到一个 jQuery 插件并尝试在自己的网站上使用它,才开始对学习更多关于 jQuery 和 JavaScript 的知识感兴趣。当然,这没什么好羞愧的。我相信这大概就是我当初的情况。它们使用起来非常简单,你无需花费太多精力就能完成一些非常棒的事情。
我自己也制作了一些插件。例如,FitVids。但我之前已经录制过关于这个插件的视频了。这次,我打算选择几个看起来很不错的 jQuery 插件,但我以前从未使用过它们。我故意这样做,以便大家可以看到第一次弄清楚一个随机 jQuery 插件是如何工作的过程中所经历的思考过程。
我们选择的第一个插件是一个名为 Boxer 的灯箱插件。你知道,这是一种设计模式,你点击图像的缩略图,它会在页面上打开一个更大的版本,并使背景稍微变暗。我们按照文档非常快速地实现了它。
这是我们在那个插件上取得的成果
查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 尝试 Boxer 插件。
我们选择的下一个插件叫做 OWL Carousel。它看起来是一个非常棒的滑块,它拥有两个在旧版滑块中通常看不到的重要特性:触控支持和灵活性。我们也通过使用文档并查看提供的演示来实现了这个插件。
这是我们在短短几分钟内在这个插件上取得的成果
查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 73452e0922f60633ef3e142f46f78f31。
在这两个示例中,促使我将它们加入书签的原因是
- 良好的文档。
- 选项和膨胀之间的良好平衡。意思是:有相当多的命名清晰且用途明确的参数(包括回调函数),但数量不多,不会让人觉得不知所措。
- 漂亮的设计。毕竟,这些都是视觉元素。
接下来,我们应该深入研究一下如何编写自己的插件。