15個實用的HTML5、JS工具和jQuery外掛

jobbole發表於2013-09-02

【感謝@Hacker_YHJ 的熱心翻譯。如果其他朋友也有不錯的原創或譯文,可以嘗試推薦給伯樂線上。】

如今,我們擁有許多新鮮有用的HTML5,JavaScript以及jQuery相關的工具和資源,這對設計者和開發者來說都有著極大的幫助。

HTML5是一種為了提高使用者體驗和可用性而設計的標記語言。它非常有用,並且變得越來越熱門。作為一個網路開發者或者設計者,你需要跟上最新的資訊,學習最新的技術。

html5-javascript-jquery-plugins-tools

jQuery plugins能幫你從任何網路或者移動應用專案上節約不少時間。我非常感謝那些jQuery的開發者們,他們日夜操勞開發出新穎的外掛使得網路應用更加有效,並且更加友好。

JavaScript是一種極其實用的指令碼語言,目的也是為了提高使用者體驗和可用性。它正在變得越來越火,作為JavaScript的開發者,你需要了解最新的資訊,當然,也要學習最新的技術。

在這裡收集了一些關於框架、庫、工具、技術和外掛的介紹。好好享受它們吧。

 

HTML5,JavaScript和jQuery外掛和工具

以下是一系列用於前端開發和設計的實用的HTML5,JavaScript工具和jQuery外掛,這些工具能使你開發專案時更加簡單快速。

1.jChartFX: Professional Charts and Graphs with Visualization

jChartFX是一系列JavaScript庫,為專業的或商用的資料視覺化以及分析提供最完善的圖表庫。

jChartFX-Professional-Charts-Graphs-Visualization

2.AdminJS: Backend Administration Framework

AdminJS是一款為建立管理頁面所開發的框架,有了它,我們就能管理某網站或者某應用的資料庫。這個框架是後端不可知的,它自身包括了Ember.js,並能夠執行在任何支援EPF的後端上。

AdminJS-Backend-Administration-Framework

3.Tridiv: CSS 3D Shapes Editor

Tridiv是一款基於網路,允許自由使用的CSS三位形狀編輯器,用於輕易創造漂亮的形狀。使用這款應用,我們能插入四種不同的形狀(立方體,四面體,圓柱,稜柱)並能夠旋轉它們,改變它們的大小。

Tridiv-CSS-3D-Shapes-Editor

4.FlowType.JS: Responsive Web Typography (Size/Height) Based on Element Width

FlowType.JS是一款jQuery外掛,它能根據容器的寬度自動調整字型大小以及行間距,這樣內容就能像我們想的一樣顯示出來了。

FlowTypeJS-Responsive-Web-Typography

5.Pan and Zoom Touch Enable jQuery Plugin

這個外掛在一個給定的DOM元素上提供平穩的移動以及縮放功能。外掛在移動端和PC上都工作,在支援的瀏覽器上使用CSS3 transitions,在其他瀏覽器上使用javascript。

Pan-and-Zoom-Touch-Enable-jQuery-Plugin

6.CLANK: Free HTML/CSS Framework for Prototyping Native Phone/Tablet Apps

Clank是一款免費開源的HTML-CSS框架,用來做簡單的移動或平板本地應用的原型開發。他的要點在於提供一致性的使用者介面,而不去考慮模仿一個特定的OS。

CLANK-Free-HTMLCSS-Framework-for-Prototyping-Phone-Tablet-Apps

7.Balanced Gallery: jQuery Plugin for Set Photos In Rows or Columns

Balanced Gallery是一款jQuery外掛,它能夠均勻的將照片分配到每行每列,充分利用空間。照片預設根據其“容器”縮放大小,這使得Balanced Gallery成為展示性網站的一個不錯的選擇。

BalancedGallery-jQueryPlugin-for-Set-Photos-In-Rows-Columns

8.NProgress.js: Slim Nanoscopic Progress Bar

NProgress and Skylo是兩款不同的jQuery外掛,它們用來製作YouTube一樣位於瀏覽器工具欄下的細窄的進度條。

NProgressjs-Slim-Nanoscopic-Progress-Bar

9.jQuery EasyDropDown: jQuery Plugin for Stylable Select Elements

EasyDropDown是一款jQuery外掛,它能夠輕鬆改變平凡的<select>元素。它提供一個整潔的,有語意標記格式的和認證相容性的替代品。更有全鍵盤支援,文字搜尋以及內建的長列表滾動條。在使用移動裝置時自動退化為普通UI,並且全面支援IE8以上的瀏覽器。

jQueryEasyDropDown-jQuery-Plugin-for-Stylable-Select-Elements

10.HTML(.js): Powerful Way to Work with DOM

HTML(.js)是一個迷你的(壓縮後僅有2kb)JavaScript庫,它能簡化與DOM的互動。想jQuery一樣的很多JavaScript庫已經有了這些特性,但HTML(.js)沒有將本地DOM封裝或隱藏起來,反而改進了它,並將其暴露出來。

HTMLjs-Powerful-Way-to-Work-with-DOM

11.Create.js: HTML5 Web Editing Interface for Content Management Systems

Create.js是一款綜合性的用於內容管理系統的網路編輯器介面。它的目的是為提供一個現代的,完全基於瀏覽器的HTML5環境來管理內容。Create基本上能夠在任何內容管理後端上工作。

Createjs-HTML5-Web-Editing-Interface-for-CMS

12.Montage: HTML5 Framework For Create Modern Web Apps

MontageJS能讓你建立可伸縮和可維護的HTML5應用程式,這種優化是為了現階段,或將來的移動裝置而做的。通過MontageJS,開發人員可以建立可重用的使用者介面元件和模組,元件和控制器之間的繫結屬性和同步DOM查詢和更新。這樣能夠確保平穩的使用者體驗。尤其是在資源受限的裝置上,效果更好。

Montage-HTML5-Framework-For-Modern-Web-Apps

13.iosOverlay.js: Beautiful Overlays/Notifications For Web

iosOverlayjs-Beautiful-Overlays-Notifications-ForWeb-apps

14.Moment.js: A JavasSript Date Library for Parsing, Validating, Manipulating and Formatting Dates

Moments-JavasSript-Date-Library-for-Validating-Manipulating-Formatting-Dates

15.jqBar: jQuery Animated Bar Plugin

這是一款名為jqBar的簡單的jQuery外掛,用於建立動態的垂直或水平的柱狀圖。jqBar能在各種利用視覺效果展示資料的環境下使用。它能讓你製作出漂亮的柱狀圖用於展示技能集合,或用作進度條。這款外掛非常輕量,並且能夠很徹底的根據需求而定製。

jqBar-jQuery-Animated-Bar-Plugin

相關文章