JavaScript 移动和触摸框架

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,
…)创建单一页面。

时间: 2024-10-12 11:48:17

JavaScript 移动和触摸框架的相关文章

JavaScript模块加载框架sea.js 学习一

简单总结sea.js 学习 文件目录结构 /sea/sea.js      下载地址  http://seajs.org/docs/#downloads /sea/jquery-sea.js   下载地址 http://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js 1.html页面代码文件 <style> .ch{height:200px;width:200px;background:#ccc;

javascript实现的运动框架详解

javascript实现的运动框架详解: 所谓的运动框架简单的说就是让元素的某一个属性值能够有渐进性的变化.运动框架的使用在实际功能中有大量的应用,最常见的比如客服系统,当拖动滚动条的时候,一般客服系统能够以弹性方式跟随,下面就简单介绍一下如何实现此效果: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author"

JavaScript宝座:七大框架论剑

JavaScript宝座:七大框架论剑 一周前,Throne of JS大会在多伦多召开,这应该是我参加过的最有料也最不一样的一次大会.大会官网如是说: 加载整个页面,然后再“渐进增强”以添加动态行为,这种构建Web应用的方式已经不够好了.要想让应用加载快,反应灵敏,而且又引领潮流,必须彻底检讨你的开发手段. 这次大会邀请了七大JavaScript框架/库的创建人,他们济济一堂,面对面交流各自的技术理念.所谓七大框架/库分别是:AngularJS.Backbone.Batman.CanJS.Em

Javascript库,前端框架(UI框架),模板引擎

JavaScript库:JQuery,undoscore,Zepto 纯Javascript语言封装, 前端框架(UI框架):Bootstrap,Foundation,Semantic UI,Pure.css 前端框架.UI框架,或者叫UI模板 HTML + CSS + (JavaScript)? 模板引擎: 叫HTML模板引擎?  模板文件(HTML)+(CSS)?+数据(JSON) =输入=> 模板引擎  =输出=>HTML (客户端)前端模板引擎(渲染),(服务器)后端模板引擎(渲染)

10个优秀的JavaScript Web UI库/框架推荐

在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率. 本文为你带来10款非常优秀的基于JavaScript的Web UI设计资源. 1.  XUI:JavaScript微型框架 这是一个“轻量级.非常简单.微型.超级模块化”的JavaScript框架,用于创建移动Web应用.该框架如此轻量级的原因是一些与浏览器兼容相关的代码被剥离. 2.  iUI:iPhone UI 框架 该框架由JavaScript库.CSS和

Javascript 链式运动框架——逐行分析代码,让你轻松了运动的原理

所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动.这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascript 代码 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } funct

Javascript之链式运动框架1

第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=function(){ var oDiv=document.getElementById('div'); var timer=null; oDiv.onclick=function(){ move(oDiv,600,3000,'width',function(){ move(oDiv,600,3000,'left');

JavaScript 设计模式入门和框架中的实践 http://www.codeceo.com/article/javascript-design-pattern.html

在编写JS代码的过程中,运用一定的设计模式可以让我们的代码更加优雅.灵活. 下面笔者就结合诸如redux的subscribe.ES6的class.vue里面的$dispatch.jquery里面的on/off来给大家简单介绍下设计模式在这些库.语法和框架中的使用. 设计模式解决的问题 设计模式并不是很玄乎的知识,很多同学在编写JS代码的时候已经在不经意间用了不少设计模式了. 笔者认为把设计模式单独抽象出来探讨,就和算法中抽象出来冒泡.排序一样,是为了描述一种常用的JS pattern. 通过研习

javascript 多物体任意运动框架

每个复杂的运动效果都是由简单的效果组成的,我们可以为简单的效果制定一个框架,也就是写一个通用函数,这样可以对元素的任何属性进行变换,复杂的效果就可以很容易实现. 注意事项: 当变换元素的透明度时,需要做特殊处理 如果变换元素宽度时,对于有border的元素,如果我们使用obj.offsetWidth来取得元素宽度时,会出现错误,因为offsetWidth包括边框.如果边框是1px,定时函数中调用,obj.style.width=obj.offsetWidth-1+'px';,我们会发现元素的宽度