超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形

日期：2012-10-10来源：GBin1.com

如果你需要解决一些开发中遇到的技术问题的话，很可能会找到一些相关的javascript类库或者是jQuery插件来实现。这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的，特别是如果你不希望自己去处理不同浏览器的兼容性问题的话，使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率。

使用javascript类库可能并不一定是最好的选择，很多情况1下可能你会发现类库加载并不正确，或者有性能上的问题，例如，移动设备上使用js类库。很多情况下使用类似jQuery的类库可能有点杀鸡用宰牛刀的感觉，然而，一些超轻量级的类库可能更加的实用。这里我们也会介绍一些。

在这个两个部分的文章中，我们将介绍一些非常实用的javascript和jQuery类库，帮助你解决你经常遇到的问题。你可能知道一些，但是你肯定不会都知道。希望我们这片文章能够帮助你发现一些你能应用到项目中的实用类库。

因为文章篇幅的原因，这里我们分为几个部分：

web表单和输入验证
web印刷排版
实用类库
图片，地图和图形

快速了解：

下面你将看到一个简单的类库列表介绍，每个类库连接到了对应的网站，能够帮助你快速的找到需要的类库工具。

web表单：

forms framework–auto-saving drafts–file upload(andresuming large downloads) –<select> boxes–modal boxes–form accordion–dynamic labels–drop-down with images–tooltips–extended input–form validation–credit card validation(alternative) –email check–password complexity

web印刷排版：

repairing vertical baseline–align text to a grid–responsive measure–fixing widows–fluid line height–scalable headlines(orsmart headlines) –Lettering.js–Kerning.js

实用类库：

exchange rates and currency–date/time formatting–relative timestamps–number and currency formatting–cookies.js–zip.js–extra string methods–countdown.js–sticky content–Google Maps–interactive maps–progress bar–favicon notifications(orNotificon)

图片，地图和图形：

world maps–subway map–Google maps–open source maps–SVG fallback–gauges–graphs–timeline–Retina display–magnifying glass–interactive graphs–plots–time visualization

图片，地图和图形

jVectorMap

这个类库可以帮助你创建基于SVG和VML的矢量地图，支持IE6和现代浏览器，我们以前也曾经介绍过。使用javascript，CSS，HTML，SVG和VML。不适用任何第三方插件例如Flash。

相关文章：分享30个绝对让你动心的jQuery插件和CSS3小技巧

JQVAMP

JQVMAP 可以方便的帮助你生成漂亮的矢量地图。在现代浏览器中它使用了SVG（Scalable Vector Graphics）技术生成地图图片，如果你也需要支持老版本的浏览器，例如，IE6/7/8的话，它也可以通过VML来实现

Subway Map Visualization jQuery Plugin

如果你需要处理政府，学校或者其它复杂组织相关项目的话，你有可能需要去设计和开发一个很不错的视觉效果图。那么这个插件可能会成为你的项目效果雏形。

GMaps.js

这个插件可以帮助你更容易的使用Google地图。你不需要自己处理大量代码或者阅读API文档。另外一个不错的插件是：Gmap3 jQuery plugin

相关介绍：分享一款超棒的jQuery Google地图插件：Gmaps

Leaflet: Open-Source Interactive Maps With JavaScript

一个用来在桌面和移动设备上创建互动地图的类库。API非常易用，并且拥有非常好的灵活性，性能，体验。提供了地图层次，包括了标记，弹出层，GeoJSON等。支持移动设备双击缩放。并且针对iOS提供硬件加速，整个项目开源，大家可以自由使用。

SVGeezy: a JavaScript plugin for SVG fallbacks

一个用来侦测SVG图片的javascript类库，并且自动为老版本浏览器的寻找标准图片的替换方式。

Retina.js

一个用来检查网站图片的js脚本。当找到图片后，使用高分辨率的图片替换低分辨率的图片。

JustGage

我们介绍过的一款动态动画仪表盘js类库。基于Raphael类库来生成图形。

相关阅读：超棒的仪表盘javascript类库- justGage

arbor.js

一个视觉图形类库，用来创建互联的树形结构。拥有图形组织算法和屏幕刷新处理

Timeline: Generate Timelines To Visualize Data

一个帮助你生成时间轴的超酷类库。可以支持不同的内容源，例如，Twiiter，YouTube，Flickr，Vimeo，Google Maps和Soundcloud等等。

相关阅读：Timeline - 超酷的JavaScript叙事性时间轴(Timeline)类库

Unicon

一个Grunt.js的task，可以帮助你更简单的管理图标和背景图片，使用SVG图标，但是针对老版本浏览器拥有其它fallback处理机制。从CSS角度来看，使用简单，产生基于每个图标的class。不适用CSS sprites。

Foresight.js

这个设备识别类库，能够使得网站可以识别用户端设备的分辨率或者速度，从而自定义src属性来优化网站的展示和提高用户体验

A Magnifying Glass With CSS3 And jQuery

一个CSS3的放大器特效。使用box-shadow和border-radius来创建放大镜本身。用jquery来探测鼠标位置，移动并且展示图片。当鼠标移出图片，放大镜淡出。实现机制是使用一大一小两个图片，当需要查看的时候，展示分辨率更大的图片。

Rickshaw

免费开源的javascript工具帮助你创建互动的图形，例如，悬浮，说明，区域选择等等，基于D3，图形使用SVG和CSS来生成。

Flot: Plotting for jQuery

一个jQuery的图形绘制类库。支持IE6+，chrome，FF2+，Safari3+和opera 9.5+。你可以使用不同类型的图形，支持ajax，提供了缩放及其数据点互动。

Chronoline.js

一个帮助你创建编年体时间轴的类库，你提供时间和事件，它就可以生成一个日历，历史事件等等

相关阅读：分享一个基于事件时间线的Javascript类库-Chronoline

Cubism

一个D3插件帮助你实时视觉化时间序列，构建dashboard，从图形，Cube里抓取数据。帮助你减少服务器负载

Envision.js

一个快速创建动态互动HTML5视觉图形效果的类库

Data Visualization JavaScript Libraries

一套数据视觉展示的js类库，帮助你更简单的生成漂亮有意义的数据视觉图形。如果以上找不到你需要的图形，相信这里肯定能够找到一个。

jQuery Fundamentals

这个HTML文档将帮助你更加容易的处理jQuery编程中遇到的问题。你可以互动的阅读并且尝试在线演示。

JavaScript Patterns Collection

帮助你了解js中使用的设计模式，包括：方法模式，jQuery设计模式，jQuery插件设计模式等等。

JavaScript Garden

一个不断添加的javascript高级编程文档。帮助你了解编程中的错误和bug，并且帮助你如何高效编程，避免糟糕的编程实践。

viasmashingmagazine

来源：超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形