15款响应式布局必备的jQuery Grid网格插件
Freewall
Freewall是一款跨平台的、响应式jQuery插件,可帮助你创建多种类型的网格布局:灵活布局、图像布局、嵌套网格、流体网格、Metro风格布局以用CSS3实现的动画效果和回调事件的瀑布流布局。Freewall是一套功能全面的解决方案,可创建动态的桌面网格布局、移动和平板电脑布局。
S Gallery
S Gallery是一个jQuery图片库插件,用于显示响应式网格中的图片。S Gallery的设计灵感来自于Sony的产品画廊,并模仿了其功能。
Mason.js
有许多javascript方案都可用于创建动态网格布局。尽管大多数都很好,但是有些网格有缝隙或者锯齿边缘。Mason.js是一款jQuery插件,巧妙地填补了缝隙,Grid网格显得非常完美。
jQuery.Shapeshift
用于创建类似于Pinterest动态网格布局的jQuery插件非常多。jQuery.Shapeshift就是其中一个强有力的代表。通过一个触摸动作,这些图片可以拖曳(需要使用jQuery UI)。拖曳可以影响网格布局,就像网格在需要的时候,会自动去填充空隙一样。这同样在触摸设备和响应式布局上有效。
jQuery Nested
Nested是一个用于创建多列网格布局的jQuery插件。该插件为所有元素创建一个矩阵,建立一个多列网格,并试图通过重新排序元素,以填补任何空白。虽然也有很多其他的方法可以达到类似的效果,但是Nested应用了一个小的动作:调整网格底部的任意元素以保证布局无缝隙。
Wookmark jQuery Plugin
动态列网格布局如此受欢迎,不仅是因为Pinterest使用它进行图片分享,而是因为它是显示不同大小的内容的最好方式。
Grid-A-Licious
Grid-A-Licious是一款能轻松创建类似Pinterest的浮动网格布局的jQuery插件。虽然,也有其他插件可以实现类似功能,但是Grid-A-Licious提供了一个更完美的响应式解决方案。无论在何种屏幕大小或设备上,Grid-A-Licious的表格表现皆完美。
jPhotoGrid
jPhotoGrid可将图像或字幕列表转换为可以浏览和放大照片的网格。这个插件几乎所有的样式都是靠CSS完成的。诀窍就是通过浮动列表项来对表格进行布局。jPhotoGrid所需要做的第一件事就是将列表转换成绝对定位。这就是为何该插件可以放大单个图像,然后将其返回到原来的地方。
Gridster
Gridster是一款令人印象深刻的jQuery插件,可用于开发类似于iGoogle的多列网格,可以拖动n行删除并重新排序。该插件仅需 jQuery (无需 jQuery UI)并且可以将任何给定的HTML结果转换成网格部件。
Photoset Grid
Photoset Grid 是一款简单的 jQuery 插件,可以用于把图片排布成一个灵活的网格。最初,这款插件是为 Tumblr 主题创建的,用于实现响应式的图片网格布局。
Flex
Flex是一款流式非对称的网格动画jQuery插件。你可以将鼠标悬停在瓦片上,就能看到它们渐渐扩大。
Freetile
Freetile是一个jQuery插件,用于组织网页内容成一个高效的、动态的响应的布局。它可以应用到一个容器元素,它会尝试安排它的子元素,最佳利用屏幕的空间,通过“包装”他们形成紧凑的布局。
Griddy
Griddy是一款小巧、灵活的JQuery插件,能够在任何元素之上创建简单的,自定义的网格布局。Griddy还可以根据行/列间隔空间的数量自动计算行高、列宽。设置的选项包括:行,行高,列高,列宽,颜色和透明度等。
jSquares
jSquares是一个用来弹出悬停图像和说明的jQuery插件。它基本上和在www.ted.com上找到的图像表格相同。调用jSquares时,可以加入一些参数,如字幕大小,图像的透明度,切换速度等。它就在IE6+,FF3+,Safari 3以及Opera10上工作起来很有魅力。
jqGrid
jqGrid是一款AjaxedJQuery网格插件,由于网格是一个使用Ajax回调函数加载数据的客户端解决方案,它可以用于任何服务器端语言,如ASP,PHP,ASP.NET,JSP等。它有一个聪明的特性——子网格,可以在调用主列的时候显示一个子网格。
开发者不应错过的10个有用jQuery插件
jQuery是简化了HTML文档遍历、事件处理、动画和Ajax交互最快、最简洁的JavaScript库。随着越来越多的jQuery插件出现,开发者们可以很轻易地将所需要的组件整合进他们的导航菜单、logo、表格化布局、简短的文本,使其拥有指定的大小或是为其创建一系列的滑动效果,以迎合网站的主题。jQuery的出现丰富了网页的应用和开发,促使了多功能、视觉效果绚丽的网站的出现。在本文中,我们将为开发人员列出10个非常有用的jQuery插件,欢迎品鉴!
Responsive Swipe可以让您为不同设备的不同内容服务,您可以使用Responsive Swipe插件创建一个RESS站点发送不同的内容到不同的设备上。
jQuery Location Picker允许您很容易地找到并选择一个Google地图上的位置,同时提供中心位置和半径,它还可以选择一片区域。其所有的数据都可以被自动保存到任何HTML元素中,也可以使用Javascript处理。
FilmRoll是一个轻量级的传送插件,其专注于一个项目,同时还支持外部按钮、全屏等。
CLNDR.js是一个日历插件,用来创建日历,允许用户随意的按照自己的想法自定义日历。它提供一些很有帮助的选项,确定星期的推移、初始加载时显示日历、点击事件等功能。
jQuery Mapael是基于Raphael.js的一个jQuery插件,可以显示动态矢量地图。
Sticky是一个简单的页面消息提醒的jQuery插件。可以设置让消息在页面的四个角落出现,也可以设置在页面中央出现。可以手动关闭消息,也可以设置成自动关闭。
jQuery.Fileapi是一个专用于FileAPI的jQuery插件,能多个上传、图片上传、裁剪、调整大小等。
Excolo Slider是一款简单的jQuery滑动插件,支持响应式设计和触摸启动(仅限几个浏览器),附带幻灯片自动播放功能、鼠标滑动导航功能、分页功能和包含其他容易滑动的图像。
CollagePlus是一个jQuery表格插件,您可以定义图片之间的距离,通过CSS给它们加边框。
jQuery Fullscreen Editor能将文本域转换成定制的编辑器,拥有全屏编辑的功能,适用于移动端和桌面浏览器。
本站文章除注明转载外,均为本站原创或翻译
12款超级有用的网页交互jQuery插件
在web前端人员,利用jQuery插件可以大大加快工作效率。不是自己写不好jQuery程序,而是我写一个jQuery可能纠结几天,即使写出来,也不是最简洁,这时候就浪费了代码的质量。一般来说前端工作人员都有自己雕刻jQuery库,是靠自己长时间的积累下,我在这里分享12款jQuery插件如下。
1. μslider网址:http://muslider.musings.it/
2.PageSlide网址:http://srobbin.com/jquery-plugins/pageslide/
3. Rcarousel网址:http://ryrych.github.io/rcarousel/
4. Evo Slider网址:http://evoslider.com/
5.jQuery HiddenPosition网址:http://www.garralab.com/hiddenposition.php
6. Stellar.js网址:http://www.garralab.com/hiddenposition.php
7. jQuery Scroll Path网址:http://joelb.me/scrollpath/
8. jQuery File Upload网址:http://blueimp.github.io/jQuery-File-Upload/
9. Mailcheck网址:https://github.com/mailcheck/mailcheck
10. Sequence.jsry网址:http://www.sequencejs.com/
11. ResponsiveSlides.js v1.32网址:http://responsive-slides.viljamis.com/
12. justgage网址:http://justgage.com/
文/丁向明
做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833
http://dingxiangming.com
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。