jQuery Mobile : 是 jQuery 在手機上和平板設備上的版本。jQuery Mobile 不僅會給主流移動平台帶來jQuery核心庫,而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平台。jQuery Mobile開發團隊說:能開發這個項目,我們非常興奮。移動Web太需要一個跨瀏覽器的框架,讓開發人員開發出真正的移動Web網站。我們將盡全力去滿足這樣的需求。 Sources.
Zepto.js Zepto.js 是支持移動WebKit瀏覽器的JavaScript框架,具有與jQuery兼容的語法。2-5k的庫,通過不錯的API處理絕大多數的基本工作。 Sources.
MicroJS : Microjs網站應用列出了很多輕量的Javascript類庫和框架,它們都很小,大部分小於5kb。這樣你不需要因為只需要一個功能就要加載一個JS的框架。
PhoneGap :是一款開源的手機應用開發平台,它僅僅只用HTML和JavaScript語言就可以制作出能在多個移動設備上運行的應用。 Sources.
Sencha Touch Sencha Touch 是一個支持多種智能手機平台(iPhone, Android, 和BlackBerry)的 HTML5 框架。Sencha Touch可以讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數據管理,全部基於最新的HTML5和CSS3的 WEB標准,全面兼容Android和Apple iOS設備。
JQtouch, 是一個jQuery 的插件,主要用於手機上的Webkit 瀏覽器上實現一些包括動畫、列表導航、默認應用樣式等各種常見UI效果的JavaScript 庫。 Sources.
DHTMLX Touch 針對移動和觸摸設備的JavaScript 框架。DHTMLX Touch基於HTML5,創建移動web應用。它不只是一組UI 小工具,而是一個完整的框架,可以針對移動和觸摸設備創建跨平台的web應用。它兼容主流的web瀏覽器,用DHTMLX Touch創建的應用,可以在iPad、iPhone、Android智能手機等上面運行流暢。
jQuery 插件
Waypoints 是一個jQuery 用來實現捕獲各種滾動事件的插件,例如實現無翻頁的內容瀏覽,或者固定某個元素不讓滾動等等。支持主流瀏覽器版本。
Lazy loader 插件可以實現圖片的延遲加載,當網頁比較長的時候,會先只加載用戶視窗內的圖片,視窗外的圖片會等到你拖動滾動條至后面才加載,這樣有效的避免了因圖片過多而加載慢的弊端。
TweenJS : 一個簡單和強大的 tweening / animation 的Javascript庫。
Easings 類Css3的jQuery 動畫插件
Spritely 這個插件可以創建出如flash一樣的動畫效果,比如:在頁面上有一只飛動的小鳥,一個動態滾動的背景等。
File Upload, jQuery 文件上傳插件4.4.1
Slideshow/Carousel 插件. Sources.
Supersized – 全屏式的背景/幻燈片插件
Masonry i一款非常酷的自動排版插件,這款jQuery工具可以根據網格來自動排列水平和垂直元素,超越原來的css. Sources.
jQuery 簡單 Layout 演示,管理各種邊欄式,可改變大小式的布局。
Flexigrid – jQuery 數據表插件
Isotope絕對是一個令人難以置信的jQuery插件,你可以用它來創建動態和智能布局。你可以隱藏和顯示與過濾項目,重新排序和整理甚至更多。
Super Gestures jQuery 插件可以實現鼠標手勢的功能。
MouseWheel 是由Brandon Aaron開發的jQuery插件,用於添加跨瀏覽器的鼠標滾輪支持。
AutoSuggest jQuery 插件可以讓你添加一些自動完成的功能。
qTip 一個漂亮的jQuery 的工具提示插件,這個插件功能相當強大。
jQuery Charts and graphic 用來制作圖表。
jQuery Tools– The missing UI library
HTML5 視頻播放器
Popcorn.js 是一個HTML5 Video框架,它提供了易於使用的API來同步交互式內容,讓操作HTML5 Video元素的屬性,方法和事件變得簡單易用。 (來自Mozilla)
LeanBack Player HTML5視頻播放器,沒有依賴任何JavaScript框架。支持全屏播放,音量控制,在同一個頁面中播放多個視頻。 (來自Google)
Vid.ly 為你上傳的視頻提供轉換功能,並且為轉換后的視頻創建一個短網址。通過Vid.ly,讓你的視頻可以在14種不同的瀏覽器和設備上播放,不需要再去考慮將要瀏覽視頻的人使用什么設備了,以避免各各軟件巨頭之間的利益之爭帶來了不兼容,給用戶帶來了巨大的困擾,短網址讓你可以通過Twitter、Facebook等方式方便分享視頻。Vid.ly還可以通過html代碼嵌入到其他網頁中。Vid.ly免費帳戶空間為1GB,免費帳戶也沒有播放或瀏覽限制。
JavaScript 音頻處理與可視化效果
使用HTML5 和 Flash, SoundManager V2 只用單一API的提供了可靠,簡單和強大的跨平台的音頻處理。
DSP, JavaScript的聲音Digital Signal Processing
The Radiolab Hyper Audio Player v1, 帶給你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat
jPlayer, 一個 jQuery HTML5 音頻/ 視頻庫,功能齊全的API
JavaScript 圖形 和 3D
Processing.js是一個開放的編程語言,在不使用Flash或Java小程序的前提下, 可以實現程序圖像、動畫和互動的應用。其使用Web標准,無需任何插件。
Javascript 3D 引擎: ThreeJS 由 Mr Doob 開發,一個輕量級的 3D 引擎,不需要了解細節,傻瓜都能使用。這個引擎可以使用<canvas>, <svg> 和 WebGL.
Shader Toy, 一款使用WebGL的在線着色器編輯器(2D/3D). 基於在線的應用架構使您無需下載任何軟件即可開始體驗. Shader Toy包含大量實用着色器, 諸如光線追蹤, 場景距離渲染, 球體, 隧道, 變形, 后期處理特效等.
PhiloGL, Sencha的PhiloGL是首個WebGL開發工具之一,提供了高水准的功能,來構建WebGL應用。Sencha創建了幾個演示,來描述框架交互式3D虛擬化的能力,比如3D view of global temperature changes。
WebGL Inspector 你就Firebug等Web調試工具一樣,這個是 WebGL的調試工具。
WebGL frameworks 由 Khronos Group 收集的一個WebGL框架列表。
EaselJS, 一個使用html5的canvas的 JavaScript 庫. Sources.
JavaScript Game Frameworks 免費的JS游戲框架列表。另,可參看 JS游戲框架列表。
Raphaël是一個小型的JavaScript 庫,用來簡化在頁面上顯示向量圖的工作。你可以用它在頁面上繪制各種圖表、並進行圖片的剪切、旋轉等操作。參看Javascript向量圖Lib–Raphaël
jQuery SVG 插件讓你可以了 SVG canvas 進行交互。
Google chart tools – 參看本站的使用Google API做統計圖
Arbor.js, 是一個利用webworkers和jQuery創建的數據圖形可視化JavaScript框架。它為圖形組織和屏幕刷新處理提供了一個高效、力導向布局算法。
JavaScript 瀏覽器接口 (HTML5)
Modernizr – 是一個專為HTML5 和CSS3 開發的功能檢測類庫,可以根據瀏覽器對HTML5 和CSS3 的支持程度提供更加便捷的前端優化方案.Sources. 一個有用的列表 cross-browser Polyfills
HTML5Shiv : 該項目的目的是為了讓IE 能識別HTML5 的元素。
Polyfills : 這個項目收集了一些代碼片段其用Javascript支持不同的瀏覽器的特別功能,有些代碼需要Flash。
YepNopeJS : 一個異步的條件式的加載器。Sources.
jQuery CSS3 Finalise : 是否厭倦了為每一個瀏覽器的CSS3屬性加前綴?
Amplify.js :一套用於web應用數據管理和應用程序通訊的 jQuery 組件庫。提供簡單易用的API接口。Amplify的目標是通過為各種數據源提供一個統一的程序接口簡化各種格式數據的數據處理。Amplify的存儲組件使用localStorage 和 sessionStorage標准處理客戶端的存儲信息,對一些老的瀏覽器支持可能有問題。Amplify’為jQuery的ajax方法request增加了一些額外的特性。 Sources.
History.js 優美地支持了HTML5 History/State APIs
Socket.IO Web的socket編程。
JavaScript 工具
{{mustaches}} 小型的 JavaScript 模板引擎。
json:select(), CSS式的JSON選擇器
HeadJS, 異步JavaScript裝載。其最大特點就是不僅可以按順序執行還可以並發裝載載js。
JsDoc Toolkit是一款輔助工具,你只需要根據約定在JavaScript 代碼中添加相應的注釋,它就可以根據這些注釋來自動生成API文檔。Responsive image, 一個試驗性的項目,用來處理responsive layouts 式的圖片。
UglifyJS是基於NodeJS的Javascript語法解析/壓縮/格式化工具,它支持任何CommonJS模塊系統的Javascript平台。
Dhteumeuleu, 交互式的 DOM 腳本和DHTML 的開源演示。
Backbone是一個前端 JS 代碼 MVC 框架,被著名的 37signals 用來構建他們的移動客戶端。它不可取代 Jquery,不可取代現有的Template 庫。而是和這些結合起來構建復雜的 web 前端交互應用。如果項目涉及大量的 javascript 代碼,實現很多復雜的前端交互功能,首先你會想到把數據和展示分離。使用 Jquery 的 selector 和 callback 可以輕松做到這點。但是對於富客戶端的WEB應用大量代碼的結構化組織非常必要。Backbone 就提供了 javascript 代碼的組織的功能。Backbone 主要包括 models, collections, views 和 events, controller 。
客戶端和模擬器
BrowserShot, 檢查瀏覽器的兼容性,跨瀏覽器平器的測試
Test everything… 輸入一個你想要測試的URL……
Android browser 模擬器
iPhone browser 模擬器
Opera browser 模擬器
Firebug 與 Firefox 集成,可以查看和調試你的Web頁面。
CSS3 和 字庫
CSS3 Maker CCS3的生成器容易地創建
CSS3 animations。 Sencha Animator 是一個桌面應用可以為WebKit瀏覽器和觸摸式移動設備創建 CSS3 animations 。
CSSwarp – CSS 文本扭曲生成器
Gradient Editor, 一個強大的Photoshop式的CSS 漸變編譯器。來自 ColorZilla
Google Web Fonts 通過Google Web Fonts API 可以瀏覽所有的字體@font-face Kit Generator, 為Web轉換字體
Typetester, 比較字體。
Media Queries. 一組 responsive web 設計。
Pattern TAP, UI組件。
Website (FULL) 模板
HTML5 Boilerplate 是一個HTML5 / CSS / js模板,是實現跨瀏覽器正常化、性能優化,穩定的可選功能如跨域Ajax和Flash的最佳實踐。 項目的開發商稱之為技巧集合,目的是滿足您開發一個跨瀏覽器,並且面向未來的網站的需求。 Sources.
HTML5 starter pack 是一個干凈的和有組織的目錄結構,其可適合很多項目,還有一些很常用的文件,以及簡單的Photoshop設計模板。
Initializr 是一個HTML5 模板生成器,其可以幫你在15秒內創建一個HTML5的項目。
Animated Portfolio Gallery (教程)Slick MobileApp Website 如果通過 jQuery 和 CSS 制作一個手機應用的網站。
RSS Reader 如果通過 jQuery Mobile 創建一個RSS Reader
Single Page Applications 使用jQuery的朋友們 (Backbone, Underscore, …)創建單一頁面。
Google TV Optimized Templates, 傳統電視已經開始和網路融合,但現階段產業仍然正在摸索之中,為此將來的網頁亦會有結構上的改變。Google TV Optimized Templates是一個用HTML/JavaScript制成的開源軟體,一如其名是一個對Google TV作出了最佳化的的網頁范本,其特色是以遙控器作為操作的前提,令使用者無需輸入任何文字就可以進行控制。未來除了會有專用遙控器外,還會采用智能手機透過W-iFi控制Google TV的方法。Optimized Templates的界面中左方會展示分類,右方會顯示該分類下的影片截圖,影片播放、切換、全畫面表示都可透過鍵盤上的方向鍵、Backspace或Enter等鍵完成,方便今后的網站開發人員借鏡。HTML5 版的模板使用了 Google TV UI library, jQuery 和 Closure 。