如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现。这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率。
使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,例如,移动设备上使用js类库。很多情况下使用类似jQuery的类库可能有点杀鸡用宰牛刀的感觉,然而,一些超轻量级的类库可能更加的实用。这里我们也会介绍一些。
在这个两个部分的文章中,我们将介绍一些非常实用的javascript和jQuery类库,帮助你解决你经常遇到的问题。你可能知道一些,但是你肯定不会都知道。希望我们这片文章能够帮助你发现一些你能应用到项目中的实用类库。
这里我们继续超全超实用的Javascript类库和jQuery插件大全之一系列。这是第二部分,包含如下内容:
文字处理:
syntax highlighter – URI.js – jQuery URL parser – cutting paragraphs – text truncation – TOC generator –FAQ generator – sorting text by relevancy.
表格和列表处理:
table styling – searchable/sortable lists – visual search – nested sortable lists – large data sets – CSV to table conversion (or Csonv.js) – Excel-like tables – advanced tables
实用的javascript开发工具:
Yeoman – command line for JS – image placeholder – percentage loader – URL parser – URI normalization –touch events – multi-touch gestures – Markdown Embedding – accessibility enhancement – templating engine– filepicker – extensible regex – client-side caching
文字处理
Prism
一个轻量级并且可扩展的语法高亮类库。不需要指定的class或者标签,你可以使用标准的标签。Prism支持web workers。所有的样式都是由CSS来处理生成,比较敏感的class名称包括,.comment,.string,.property等等。压缩版 1.5kb
TOC jQuery Plugin: Generate Tables Of Contents
这个类库可以帮助你针对页面生成一个内容表格,支持自定义并且当前内容可以高亮显示。轻量级,可以在页面上使用多次,包含了一个页面内容平滑滚动功能。类似的插件有:Tocify jQuery plugin
MagicNav: Generates Links for The FAQ
如果你希望创建一个快速FAQ导航,你可以使用这个jQuery插件,能够动态的生成内容的导航链接
Cutter.js
这个类库解决了内容剪裁问题,可能你有内容长度的限制,而且你不希望修改标签。它帮助你简单的剪裁内容到需要的长度,而且允许你查看完整的内容。
Trunk8
这是个文字剪裁jQuery类库,帮助你剪裁合适的文字来适应页面内容。和传统的剪裁不一样,它不指定文字长度来剪裁而是自动剪裁合适的文字长度来适应给定的空间。
Relevancy.js
这个类库允许你基于数组项目的相关性来排序。这个脚本尝试基于部分内容来匹配,当然目前来说这个方式还没有非常成功的实现。它需要你提供一个字符串来匹配内容进行排序。
表格和列表处理
Handsontables: Excel-Like Tables For The Web
这个超棒的jQuery类库帮助你自动的扩展和自动补齐来添加行和列内容。同时包含了图例,滚动,上下文菜单,条件格式化和其它特性。你可以设置监控表格变化。所有的数据都可以被拷贝到excel,google spreadsheet和libreoffice。
List.js
一个跨浏览器的本地js类库将HTML列表转变成灵活的可编辑内容。是的你的列表更加容易搜索和排序。一个模板驱动的概念使得你更加简单的编辑和添加内容
Create Nested Sortable Lists With jQuery
这个插件帮助你创建一个可排序的列表,你的用户可以拖拽列表中的项目到任何选择的配置。你可以设置各种属性,例如最大的镶套数量层次,设置自定义的方法(包括层次,数组和序列化)。类似插件还有 HTML5 Sortable ,一个HTML5实现的类似功能
Pivot.js
使用pivot你可以轻松的处理大量数据。这个类库帮助你创建自定义的表格视图。pivot表格工具结果(例如,排序,计算,总计,平均数)可以来自输入数据(JSON或者CSV)并被显示为HTML表格
Crossfilter
一个js类库支持在浏览器中查询大量的多变量数据集。
jQuery CSV to Table
这个类库从CSV文件中或者tab分隔文件TSV中读取数据并且生成HTML table
Csonv.js
一个小巧的类库用来获取CSV数据。使用中,每一个文件代表一个实体,类库可以镶套数据,就好像在数据库中使用SQL join一样。
DataTables jQuery Plug-in
这个类库可以显示不同来源的数据,例如,DOM,数组,或者服务器端JSON格式文件。提供了分页,过滤和多列排序功能。很多免费的功能都通过插件来实现,例如,行分组,列过滤,列改变大小。这个类库最小68kb,gzip后20kb。开源并且基于GPL和BSD。
实用的javascript开发工具
Yeoman
一套类库和工具帮助你处理新的项目,自动编译coffeescript和Compass,基于jshint来运行你的脚本以便测试正确的语言覆盖并且优化你的图片。有效的利用了NodeJS,Compass和PhantomJS等插件,要求安装Node 0.8.x
Grunt.js: Task-Based Command Line Tool
Grunt是一个基于任务的javascript命令行编译工具。拥有大量的预定义的任务:文件关联,项目管理,JSHint语法验证,UglifyJS压缩,qUnit单元测试,服务器启动,运行单元测试等
Holder.js
一个客户端的图片占位类库,帮助你处理生成浏览器中的占位内容。支持在线和离线,提供了一个链状的API。你可以使用在不同区域不同的主题。因为它使用你的设置扩展了 缺省的设置,你只需要包含哪些你需要修改的配置即可
PxLoader
一个javascript类库帮助你在执行一定操作前更简单的下载图片,声音文件或者其它文件。这个脚本允许你设置一个HTML5游戏或者网站的preloader。你可以监控下载状态甚至设定优先级。
Percentage Loader
这个超棒的进度条我们在分享一个超炫HTML5开发的jQuery进度条插件 - percentageloader 中介绍过这个超棒的类库,允许你生成漂亮的进度条样式。
Resumable.js
这个类库设计用来处理大文件的HTTP上传容错机制。提供了多个,同时,可续传的HTML文件API,这意味着丢失连接后不需要一个完整的重新上 传。用户可以不担心丢失来管理上传。当然,需要浏览器支持HTML5 File API,所有只有Firefox4+和Chrome11+可以使用。
History.js
这个类库优雅的在浏览器中支持HTML5 history/State API(pushState,replaceState,onPopState)。包括了而支持数据,标题,replaceState。支持 jQuery,Mootools和Prototype。你可以修改URL,不需要使用hashes。
一个jQuery的URL的插件用来解析,处理,过滤和监控URL中的href和src属性,也可以从URL创建锚定元素 。
URI.js
如果处理URL,你可以使用这个类库。提供了jQuery样式的API。提供简单,强大的方式来处理查询字符串,拥有很多URI相关的功能方法,可以转化相对和绝对路径。
Touchy.js
一个处理触摸事件的类库,没有任何类库依赖。可以很方便的帮助你处理触摸事件。类似类库: Hammer.js
gridster.js
这个超酷的类库在 jQuery插件:超酷的多列网格式拖放插件gridster.js文章中我们曾经介绍过,另外一个款非常不错的拖拽jQuery插件。
Freetile
Freetile也是一款非常酷的帮助你生成响应式动态布局的插件
Strapdown.js
这个工具帮助你嵌入一个编辑器到你的页面。不需要任何服务器端支持。跨浏览器并且拥有Github风格的语法高亮。
accessifyhtml5.js
一个HTML5的 polyfill 。很多现代浏览器都支持HTML的新的元素。但是缺乏ARIA访问属性。这个脚本帮助添加这些属性到你的网站。
jQuery++
一个jQuery的扩展类库,添加了很多事件和特性。 参考:jQuery的实用特性扩展类库:jQuery++
Hogan.js
Twitter的模板引擎,允许针对vanilla javascript来你预编译你的模板。这个引擎使用Mustache测试套件来开发
Zepto.js
超棒的轻量级的javascript类库,拥有类似jQuery的语法。更多信息请查看: 了解轻量级的移动开发Javascript类库- Zepto.js
CSSrefresh
自动刷新CSS文件的工具,参考: 分享2个帮助你自动刷新CSS文件的工具
Has.js
帮助你查找所使用类库参考及其关联的javascript类库,纯javascript实现
Filepicker.io
一个高级的文件上传解决方案,并且可以和facebook,dropbox等整合
XRegExp
一个开源的MIT license的js类库。提供了可扩展的正则表达式。提供了跟多新的语法,标示和方法。类似类库:Matches.js
FrameWarp
这个类库帮助你使用CSS过渡效果来展示页面。拥有一个辅助方法来比较iframe中的URL和地址栏中的URL。如果匹配则访问iframe中的DOM,并且添加APU方法,一个隐藏,另一个发送消息到父窗口。
Filer.js
基于HTML5的File system API的封转类库。重用了类似UNIX的命令,是的HTML5更加容易使用。可能你对另外一个类库DownloadBuilder.js也有兴趣。提供了本地文件合并及其用户session存储来缓存JSONP/AJAX请求
Client Side Caching For JavaScript
服务器端缓存对于响应速度非常有益处。但是有时候可能希望在客户端执行缓存。 这个类库使用HTML5的本地存储来缓存内容。拥有类似memcache的API。不依赖其它类库。如果浏览器不支持本地存储的话,这个类库可以自动适应。IE6/7用户不会遇到任何js错误。
最后两个好东西
ReView.js
我们曾经介绍过的review.js,超棒的javascript响应式视图(viewport)切换工具类库,帮助你更好的控制和管理响应式视图。
A Hotline For All Your JavaScript Problems
在线帮助你处理javascript问题的网站,当然,使用英文!
via smashingmagazine
来源:超全超实用的Javascript类库和jQuery插件大全之二:文字处理,表格和列表处理,实用的javascript开发工具
日期:2012-10-8 来源:GBin1.com
如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现。这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率。
使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,例如,移动设备上使用js类库。很多情况下使用类似jQuery的类库可能有点杀鸡用宰牛刀的感觉,然而,一些超轻量级的类库可能更加的实用。这里我们也会介绍一些。
在这个两个部分的文章中,我们将介绍一些非常实用的javascript和jQuery类库,帮助你解决你经常遇到的问题。你可能知道一些,但是你肯定不会都知道。希望我们这片文章能够帮助你发现一些你能应用到项目中的实用类库。
因为文章篇幅的原因,这里我们分为几个部分:
- web表单
- web印刷排版
- 实用类库
- 地图和图片
快速了解:
下面你将看到一个简单的类库列表介绍,每个类库连接到了对应的网站,能够帮助你快速的找到需要的类库工具。
web表单:
forms framework – auto-saving drafts – file upload (and resuming 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 (or smart 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 (or Notificon)
图片,地图和图形:
world maps – subway map – Google maps – open source maps – SVG fallback – gauges – graphs – timeline– Retina display – magnifying glass – interactive graphs – plots – time visualization
Web表单和输入验证
Select2 jQuery插件
一个用来替换和增强<select>的jQuery插件。这个插件支持搜索,远程数据集合无限滚动。用户可以通过输入来查找他们需要查 找的内容。非匹配的内容将会被移除,选择项可以通过鼠标单击和回车来选取。这个插件可以支持标准的selectbox和多选selectbox及其 optgroup。同时也支持selected,disabled和缺省文字(HTML5的placeholder属性)。这个插件基于Chosen,另外一个支持jQuery,Mootools和Prototype及其Drupal 7模块的类库解决方案。
jQueryCoreUISelect
另外一个通过jQuery和CSS来跨浏览器增强<select>元素的类库。要求jQuery1.6+。提供了完整的自定义,支持optiongroup,自动计算,键盘支持,callback方法兼容移动设备。
Sisyphus.js
这个类库在GBin1以前的文章中我们曾经详细介绍过。一个类库Gmail的自动保存脚本。将表单数据保存到HTML5本地存储,并且在页面重加载后将内容恢复。当用户递交内容后,清除本地存储内容。
jQuery Credit Card Validator
这个类库监听输入事件(使用keyup事件作为fallback),当每次一个数值输入,调用验证方法。当信用卡可以识别,类型将自动高亮。如果信 用卡数字正确,显示一个绿色的正确标记。支持美国快递,Diners club,Discover Card,JCB,Laser,MasterCard,Visa和visa Electron。 你也可以考虑credit cards JavaScript validator和Smart Validate Credit Card Validation plugin。
TextExt
这个类库在GBin1文章也专题介绍过。允许你将HTML文字转化为输入字段,能够帮助你生成标签,支持AJAX和Focus。
Avgrund: Better Modal Boxes
一个jQuery的插件帮助你显示页面和弹出内容框。最早脚本由Hakim El Hattab开发,使用CSS变化和过渡,插件可以针对老版本浏览器兼容。MIT licensed。
VisualSearch.js
这个插件帮助你提高搜索体验,提供了自动补齐功能。你可以指定补齐长度,及其完整的数值。你得到的搜索查询是一个结构化的对象,所以不需要你自己解析。
Ideal Forms Framework
一个非常好用的用来创建和验证响应式HTML5表单的jQuery插件。提供了键盘支持,自定义输入类型。验证,本地化和HTML5的placeholder。支持IE8+,Chrome,FF,Opera,iOS5+,Android4.0+。
Mailcheck
一个javascript的拼写验证,一旦遇到错误能够提示其他的域名。帮助你有效的减少输入错误。你可以自己自定义需要的域名。
Validate.js
一个轻量级的javascript验证类库。你可以使用一套规则或者自定义信息来验证表单信息,整个类库没有任何的依赖,你可以定义自己的callback方法。支持所有主流浏览器(支持IE6)
jQuery File Upload
支持多文件选择,拖拽,及其进度条和图片预览。支持跨域,分块和续传,及其客户端图片修改大小。支持所有的服务端平台(PHP,Python,Ruby,java,Node.js等等)
Grumble.js
这个jQuery插件提供了多方向的工具条提示。可以针对指定的元素使用CSS旋转一定角度,或者360度。支持IE6+和现代浏览器。
同时你可以看看Tipped,另外一个稍大一点的工具提示类库,拥有可扩展的API
Dialogs for Twitter Bootstrap
一个非常小的javascript类库,允许你使用twitter的bootstrap来创建对话框,不用担心创建,管理和删除需要的DOM元素和JS事件处理。
或者你可以看看Date Range Picket for Bootstrap还有一个发展中的类库:HTML Snippets for Twitter Bootstrap.
ddSlick
一个免费的轻量级的jQuery插件帮助你创建一个自定义的下拉菜单,可以包含一般文本及其图片,描述。支持选择的callback方法。当然你也可以使用CSS3 Drop-Downs
noty
这个jQuery插件式帮助你更简便的创建alert,success,error,warning,信息及其确认提示。
可以设置到页面的任何位置,你可以快速的自定义文本,动画,速度和按钮
jQuery.complexify.js
这个插件在以前的文章超棒的jQuery密码强度检验插件- Complexify中有详细介绍。帮助你生成具有强度验证的密码。
Numberfy
使用这个类库你可以整合本地行号支持到你的textarea中。当在文本框中按任何一个按键,当前的数值将会分行。这个插件因为textwrap的bug所以不支持IE。
FormAccordion
jQuery插件帮助你简单的有条件隐藏和限制表单字段
jQuery.superLabels
你可以使用这个类库来生成一个滑动淡出式标签。这个实现能够帮助你在变化焦点的时候滑动显示,并且输入内容的时候淡出。而且提供了一个fallback方法。
cryptico
一个使用RSA和AES加密的javascript系统
via smashingmagazine