超全超實用的Javascript類庫和jQuery外掛程式大全之二：文文書處理，表格和列表處理，實用的javascript開發工具

文章目錄

• 最後兩個好東西

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

Jurlp

一個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類庫。提供了可擴充的Regex。提供了跟多新的文法，標示和方法。類似類庫：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

 

轉：超全超實用的Javascript類庫和jQuery外掛程式大全之一：Web表單和輸入驗證