JavaScript 移动和触摸框架

Posted 2020-09-28 gavanwanggw

 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 模拟器

Firebug 与 Firefox 集成，能够查看和调试你的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, …)创建单一页面。