一个插件的基本功能是执行一个含有元素集合的函数数组。每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass()。一个jQuery插件是一个基本的可以扩充jQuery 原型对象的方法。当原型对象被扩充后,jQuery所有的对象都可以继承每一个扩充的方法。
jQuery有强大的社区支持,社区里有很多技能娴熟的开发者夜以继日的创造出令人惊叹的脚本和网络应用。然而,这将增大了为你任务筛选插件的难度。这就是你为什么会看到此推荐,你将在这里找40个必须的jQuery插件集合,当你应用这些插件时,将会让你得网站变得更加友好。
好好享受吧!
1.FlowType.js
FlowType.JS是一个可以自动调整字体大小和行高(根据父类的宽)的jQuery插件,这样我们的内容将呈现出我们喜欢的样子。当调整大小时,它可以设置最小/大字体,最小/大宽度。同时它对webfonts有很好的支持,下面是个展示它如何工作的例子(试着改变改变浏览器的大小).
2.jQuery Flat Shadow
jQuery Flat Shadow是一个能够添加阴影效果到任何目标上的jQuery插件。它可以自定义阴影的颜色,角度,同时还可以控制阴影的开启和关闭状态。
3.任意锚点JS
Arbitrary.Anchor.js是一个可以扩充标准锚点(通过#链接)功能的jQuery插件。它可以让我把目标投向任何jQuery选择器(如类和元素类型)而不仅仅局限于id。同时它对复杂的选择器支持的也不错。(如http://example.com#.sup.brah-这要匹配两个类)。点击链接将会产生平滑的自动滚动效果。而且,这个滚动的速度也可以在链接里设置(如 http://example.com#.sup.brah|100 )
4.tidyTime.js
tidyTime.js是一个友好展示时间的jQuery插件。时间数值将被转化为如:“9点过一刻”,“5点整”,“7点57”字串等等。而且,这个插件允许我们可以在时间的前边或是后面添加自定义字串,如:“嗨,现在是3点50分,要快哦!”。也可以根据不同的时间戳指定字串,这样当触发tidyTime时就会产生一个存在的回调。
5.Sticky-kit
Sticky-kit是一个很方便的jQuery插件,它能简单的创建/管理粘性元素,而且一些组合特性也能用于复杂应用中。这些特性包括“处理多个粘性元素”,“根据元素在视图中的位置开启和关闭行为”以及回调。同时它也有根据浏览器大小改变重新计算元素尺寸的函数。
6.Owl Carousel
Owl Carousel是一个可以让我们快速创建响应式旋转木马滑块的插件。它支持触摸和能够展示包含任何标签的HTML内容。它可以设置换页/滑动速度、开启/关闭自动演示,展示豆子导航等。同时,也可以定义桌面显示项目的数目,Owl Carousel可以自动的区分平板和手机。
7.SlimMenu
SlimMenu 可以将带有深度的非顺序列表转化为一个带有子菜单的菜单,在小屏幕上,菜单变成下拉式导航。它支持触摸和自定义选项如动画和速度。
8.Tabulous.js
Tabulous.js是一个轻量级的jQuery插件,它能用普通的HTML结构来简单的创建。选项卡可以用CSS创建,同时存在开关效果(滑动,缩放,翻转)。它没有复杂的特性,就只有选项卡,它的特效有时就是我们想要的。
9. EasyAB
这是一个快速创建A/B或者多元测试的jQuery(和Zepto)插件。一旦事件被触发,他们就会被Google Analytics中的自定义变量记录下来。easyAB可以添加任何数量的命令,同时它们可以自定义到JavaScript函数中。
10. S Gallery
S Gallery是另外一款jQuery图片画廊插件,它能够在可以有响应事件的网格中显示图片。它的灵感是来自于sony产品首页的画廊效果(sony产品首页是用flash制作的),然后S Gallery完全模仿了它。当某个单元格被点击并且获取到焦点的时候,你就可以通过向前-向后按钮或方向键来浏览其他的图片。
11. Twenty Twenty
TwentyTwenty 是一个视觉扩散工具,非常容易的就能够辨认出它们。它的原理是两张图片互相堆叠在对方的上面。当滑块移动通过整个图像的时候,它利用css的属性来调整左侧的图像。这允许右边的图像显示通过容器。
12. SMint
Smint 是一款简便的jQuery插件,她可以帮助你实现一页风格网站的导航。她由两个元素组成,一个是粘性的导航条,他可以在你滚动你的页面时停留在整个页面的顶部;另一个是菜单按钮,它可以自动地让页面滚动到你锁点击的区域。SMINT是一个简单的插件,她又一个选项可以控制页面的滚动速度。她的默认速度是半秒钟,当然你也可以把她设置到任意你想要的时间。下载的组件中还包含有例子,她们都可以免费的作为您单页网站的惹眼的模板。
13.Loda Button:加载时的动态按钮
Loda Button 是一款简易的jq插件动态按钮图标,在等待从服务器获取数据时使用。loda-btn和loda-icon的样式被用在了这款插件的按钮组件中。他的样式十分简单,并且放置在loda-button.css文件中。此组件的动态效果是使用支持Chrome,Firefox,Opera和IE10的css3的animation,transitions和transforms实现的。
14. Pop Easy
PopEasy是一个轻量jQuery插件,它是任何一个像轻易创建模态窗口的开发者所必备的。通过在你的页面上应用一个遮罩效果并弹出一个定制的模态窗口,来让你的焦点放在重要的信息上。
要在页面上使用多个模态窗口,你必须在你希望打开的div层中同步id触发器的href属性。这种工作原理和从一个弹出的模态过渡到另一个模态的原理是一样的。只需要在你希望离开的模态窗口中放置一个href连接,它和另一个模态的id相匹配。
源码
15. Reveal
Reveal很了不起,实现起来也简单,是一个跨浏览器并兼容现代浏览器(还带有优雅降级功能)。同时它很轻量,只有1.75KB。设置Reval模态只需要三步。附加所需文件,放入模态的标记处然后给你的按钮添加属性。Reval遵守MIT许可。
16. Hide/Show Password Plugin
Hide/show Password插件让你轻易隐藏和显示密码输入栏中的内容。这个插件最酷的部分就是”innerToggle“选项。当设置为开的时候,它可以很容易创建漂亮隐藏/显示 控件,你可以定制自己喜欢的样式。在触屏浏览器中,你滑动的时候它甚至能保持输入焦点。
17. Readmore.js
Readmore.js是一个平滑的,轻量的jQuery插件,用于折叠和展开大段的文本。并带有“阅读更多”和“关闭”链接。 Readmore.js所需的标记语言极其轻量而简单。不需要div层的复杂设置或者硬编码的类名,只需要在包含大段文本的元素里调用.readmore(),Readmore.js就会帮你处理剩余的工作。
18.向上滚动
ScrollUp是一个轻量级jQuery插件,它可以简单的创建适用于任何网站的用户自定义“向上滚动”特性。给activeOverlay设置一个可用的CSS颜色,这样你可以创建一个可见的线条帮助你决定一个适合的高度(出现向上滑动的标识,译注)。
19.FlipClock.js
FlipClock.js是一个可呈现任何和时间相关的可重复性特效的jQuery插件。FlipClock.js可支持作为一个时钟,倒计器和计时器,同时用户也自定义完整的CSS来改变它的外观。它有可以自动开始的选项,还有很多回调方法来控制(start,stop,getTime,setTime...)。同时,它也有可以增加功能的全功能API。