1. 程式人生 > >JavaScript 移動和觸摸框架

JavaScript 移動和觸摸框架

canvas 分享 rar adding 正常 web font script tester amp

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標準處理client的存儲信息,對一些老的瀏覽器支持可能有問題。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 用來構建他們的移動client。

它不可代替 Jquery。不可代替現有的Template 庫。

而是和這些結合起來構建復雜的 web 前端交互應用。

假設項目涉及大量的 javascript 代碼,實現非常多復雜的前端交互功能,首先你會想到把數據和展示分離。

使用 Jquery 的 selector 和 callback 能夠輕松做到這點。

可是對於富client的WEB應用大量代碼的結構化組織非常必要。Backbone 就提供了 javascript 代碼的組織的功能。Backbone 主要包含 models, collections, views 和 events, controller 。

client和模擬器

BrowserShot, 檢查瀏覽器的兼容性,跨瀏覽器平器的測試

Test everything… 輸入一個你想要測試的URL……

Android browser 模擬器

iPhone browser 模擬器

Opera browser 模擬器

FirebugFirefox 集成,能夠查看和調試你的Web頁面。

CSS3 和 字庫

CSS3 Maker CCS3的生成器easy地創建

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, …)創建單一頁面。

JavaScript 移動和觸摸框架