超全超實用的Javascript類庫和jQuery插件大全之二：文字處理，表格和列表處理，實用的javascript開發工具

本文轉載自查看原文 2012-12-22 14:20 3493 Jquery

日期：2012-10-15 來源：GBin1.com

如果你需要解決一些開發中遇到的技術問題的話，很可能會找到一些相關的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表格

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。

Jurlp

一個jQuery的URL的插件用來解析，處理，過濾和監控URL中的href和src屬性，也可以從URL創建錨定元素。

URI.js

如果處理URL，你可以使用這個類庫。提供了jQuery樣式的API。提供簡單，強大的方式來處理查詢字符串，擁有很多URI相關的功能方法，可以轉化相對和絕對路徑。

Touchy.js

一個處理觸摸事件的類庫，沒有任何類庫依賴。可以很方便的幫助你處理觸摸事件。類似類庫： Hammer.js

gridster.js

這個超酷的類庫在 jQuery插件：超酷的多列網格式拖放插件gridster.js文章中我們曾經介紹過，另外一個款非常不錯的拖拽jQuery插件。

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

Has.js

幫助你查找所使用類庫參考及其關聯的javascript類庫，純javascript實現

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

因為文章篇幅的原因，這里我們分為幾個部分：

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表單和輸入驗證

一個用來替換和增強<select>的jQuery插件。這個插件支持搜索，遠程數據集合無限滾動。用戶可以通過輸入來查找他們需要查找的內容。非匹配的內容將會被移除，選擇項可以通過鼠標單擊和回車來選取。這個插件可以支持標准的selectbox和多選selectbox及其optgroup。同時也支持selected，disabled和缺省文字（HTML5的placeholder屬性）。這個插件基於Chosen，另外一個支持jQuery，Mootools和Prototype及其Drupal 7模塊的類庫解決方案。