JavaScript 移动和触摸框架

心已赠人 2022-07-28 09:45 140阅读 0赞

[jQuery Mobile][] : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。 [Sources][].[  
][Link 1]

[Zepto.js][Link 1] Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 [Sources][Sources 1].[  
][Link 2]

[MicroJS][Link 2] : Microjs网站应用列出了很多轻量的Javascript类库和框架，它们都很小，大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。

[PhoneGap][] :是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 [Sources][Sources 2].

[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][Sources 3].

[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 动画插件[  
][Link 3]

[Spritely][Link 3] 这个插件可以创建出如flash一样的动画效果，比如：在页面上有一只飞动的小鸟，一个动态滚动的背景等。

[File Upload][], jQuery 文件上传插件4.4.1[  
][Link 4]

[Slideshow/Carousel][Link 4] 插件. [Sources][Sources 4].[  
][Link 5]

[Supersized][Link 5] – 全屏式的背景/幻灯片插件[  
][Link 6]

[Masonry][Link 6] i一款非常酷的自动排版插件，这款jQuery工具可以根据网格来自动排列水平和垂直元素，超越原来的css. [Sources][Sources 5].

jQuery 简单 [Layout][] 演示，管理各种边栏式，可改变大小式的布局。

[Flexigrid][] – jQuery 数据表插件

[Isotope][]绝对是一个令人难以置信的jQuery插件，你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。[  
][Link 7]

[Super Gestures][Link 7] 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)[  
][Link 8]

[LeanBack Player][Link 8] 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[  
][Link 9]

[jPlayer][Link 9], 一个 jQuery HTML5 音频/ 视频库，功能齐全的API

JavaScript 图形 和 3D

[Processing.js][]是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准，无需任何插件。

Javascript 3D 引擎: [ThreeJS][] 由 Mr Doob 开发，一个轻量级的 3D 引擎，不需要了解细节，傻瓜都能使用。这个引擎可以使用<canvas>, <svg> 和 WebGL.[  
][Link 10]

[Shader Toy][Link 10], 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.[  
][Link 11]

[PhiloGL][Link 11], 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][Sources 6].[  
][Link 12]

[JavaScript Game Frameworks][Link 12] 免费的JS游戏框架列表。另，可参看 [JS游戏框架列表][JS]。

[Raphaël][Rapha_l]是一个小型的JavaScript 库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看[Javascript向量图Lib–Raphaël][Javascript_Lib_Rapha_l]

[jQuery SVG][] 插件让你可以了 SVG canvas 进行交互。

[Google chart tools][] –  参看本站的[使用Google API做统计图][Google API][  
][Link 13]

[Arbor.js][Link 13], 是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

JavaScript 浏览器接口 (HTML5)

[Modernizr][] – 是一个专为HTML5 和CSS3 开发的功能检测类库，可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.[Sources][Sources 7]. 一个有用的列表 [cross-browser Polyfills][][  
][Link 14]

[HTML5Shiv][Link 14] : 该项目的目的是为了让IE 能识别HTML5 的元素。

[Polyfills][] : 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能，有些代码需要Flash。

[YepNopeJS][] : 一个异步的条件式的加载器。[Sources][Sources 8].

jQuery [CSS3 Finalise][] : 是否厌倦了为每一个浏览器的CSS3属性加前缀？

[Amplify.js][] :一套用于web应用数据管理和应用程序通讯的 jQuery 组件库。提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用localStorage 和 sessionStorage标准处理客户端的存储信息，对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request增加了一些额外的特性。 [Sources][Sources 9].[  
][Link 15]

[History.js][Link 15] 优美地支持了HTML5 History/State APIs[  
][Link 16]

[Socket.IO][Link 16] Web的socket编程。

JavaScript 工具

\{ \{ [mustaches][]\}\} 小型的 JavaScript 模板引擎。

[json:select()][json_select], CSS式的JSON选择器

[HeadJS][], 异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。

[JsDoc Toolkit][]是一款辅助工具，你只需要根据约定在JavaScript 代码中添加相应的注释，它就可以根据这些注释来自动生成API文档。[Responsive image][], 一个试验性的项目，用来处理[responsive layouts][] 式的图片。

[UglifyJS][]是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。[  
][Link 17]

[Dhteumeuleu][Link 17], 交互式的 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][font-face Kit Generator], 为Web转换字体

[Typetester][], 比较字体。

[Media Queries][]. 一组 responsive web 设计。

[Pattern TAP][], UI组件。

Website (FULL) 模板

[HTML5 Boilerplate][] 是一个[HTML5 ][HTML5]/ CSS / js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合，目的是满足您开发一个跨浏览器，并且面向未来的网站的需求。 [Sources][Sources 10].[  
][Link 18]

[HTML5 starter pack][Link 18] 是一个干净的和有组织的目录结构，其可适合很多项目，还有一些很常用的文件，以及简单的Photoshop设计模板。

[Initializr][] 是一个HTML5 模板生成器，其可以帮你在15秒内创建一个HTML5的项目。

[Animated Portfolio Gallery][] （[教程][Link 19]）[Slick MobileApp Website][] 如果通过 jQuery 和 CSS 制作一个手机应用的网站。

[RSS Reader][] 如果通过 jQuery Mobile 创建一个RSS Reader

[Single Page Applications][] 使用jQuery的朋友们 (Backbone, Underscore, …)创建单一页面。

[jQuery Mobile]: http://jquerymobile.com/
[Sources]: https://github.com/jquery/jquery-mobile
[Link 1]: http://zeptojs.com/
[Sources 1]: https://github.com/madrobby/zepto
[Link 2]: http://microjs.com/
[PhoneGap]: http://phonegap.com/
[Sources 2]: https://github.com/phonegap/phonegap
[Sencha Touch]: http://www.sencha.com/products/touch/
[JQtouch]: http://jqtouch.com/
[Sources 3]: http://github.com/senchalabs/jQTouch
[DHTMLX Touch]: http://www.dhtmlx.com/touch/
[Waypoints]: http://imakewebthings.github.com/jquery-waypoints/
[Lazy loader]: http://plugins.jquery.com/project/lazy
[TweenJS]: https://github.com/gskinner/TweenJS
[Easings]: http://janne.aukia.com/easie/
[Link 3]: http://www.spritely.net/
[File Upload]: https://github.com/blueimp/jQuery-File-Upload/
[Link 4]: http://www.agilecarousel.com/
[Sources 4]: https://github.com/edtalmadge/Agile-Carousel
[Link 5]: http://www.buildinternet.com/project/supersized/
[Link 6]: http://desandro.com/resources/jquery-masonry
[Sources 5]: https://github.com/desandro/masonry
[Layout]: http://layout.jquery-dev.net/demos.cfm
[Flexigrid]: http://www.flexigrid.info/
[Isotope]: http://isotope.metafizzy.co/
[Link 7]: http://www.evanbyrne.com/article/super-gestures-jquery-plugin
[MouseWheel]: https://github.com/brandonaaron/jquery-mousewheel
[AutoSuggest]: http://code.drewwilson.com/entry/autosuggest-jquery-plugin
[qTip]: http://craigsworks.com/projects/qtip/
[Charts and graphic]: http://www.highcharts.com/demo/
[missing UI library]: http://flowplayer.org/tools/demos/
[Popcorn.js]: https://github.com/webmademovies/popcorn-js
[Link 8]: http://dev.mennerich.name/showroom/html5_video/
[Vid.ly]: http://m.vid.ly/user/
[SoundManager V2]: http://www.schillmania.com/projects/soundmanager2/
[DSP]: https://github.com/corbanbrook/dsp.js/
[Hyper Audio Player]: http://yoyodyne.cc/radiolab/
[Link 9]: http://jplayer.org/
[Processing.js]: http://processingjs.org/
[ThreeJS]: https://github.com/mrdoob/three.js
[Link 10]: http://www.iquilezles.org/apps/shadertoy/
[Link 11]: http://senchalabs.github.com/philogl/
[3D view of global temperature changes]: http://senchalabs.github.com/philogl/PhiloGL/examples/temperatureAnomalies/
[WebGL Inspector]: http://benvanik.github.com/WebGL-Inspector/
[WebGL frameworks]: http://www.khronos.org/webgl/wiki_1_15/
[EaselJS]: http://easeljs.com/
[Sources 6]: https://github.com/gskinner/EaselJS
[Link 12]: http://www.webresourcesdepot.com/free-%20-game-frameworks-to-create-a-web-based-fun/
[JS]: http://coolshell.cn/articles/3516.html
[Rapha_l]: http://raphaeljs.com/
[Javascript_Lib_Rapha_l]: http://coolshell.cn/articles/3107.html
[jQuery SVG]: http://keith-wood.name/svgRef.html
[Google chart tools]: http://code.google.com/intl/fr/apis/chart/
[Google API]: http://coolshell.cn/articles/582.html
[Link 13]: http://arborjs.org/
[Modernizr]: http://www.modernizr.com/
[Sources 7]: https://github.com/Modernizr/Modernizr
[cross-browser Polyfills]: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
[Link 14]: http://code.google.com/p/html5shiv/
[Polyfills]: https://github.com/remy/polyfills
[YepNopeJS]: http://yepnopejs.com/
[Sources 8]: https://github.com/SlexAxton/yepnope.js
[CSS3 Finalise]: https://github.com/codler/jQuery-Css3-Finalize/
[Amplify.js]: http://amplifyjs.com/
[Sources 9]: https://github.com/appendto/amplify
[Link 15]: https://github.com/balupton/history.js
[Link 16]: http://socket.io/
[mustaches]: http://mustache.github.com/
[json_select]: http://jsonselect.org/
[HeadJS]: http://headjs.com/
[JsDoc Toolkit]: http://code.google.com/p/jsdoc-toolkit/
[Responsive image]: https://github.com/filamentgroup/Responsive-Images
[responsive layouts]: http://www.alistapart.com/articles/responsive-web-design/
[UglifyJS]: http://marijnhaverbeke.nl/uglifyjs
[Link 17]: http://www.dhteumeuleu.com/
[Backbone]: https://github.com/documentcloud/backbone/
[BrowserShot]: http://browsershots.org/
[Test everything]: http://tester.jonasjohn.de/
[Android browser]: http://tmobile.modeaondemand.com/htc/g1/
[iPhone browser]: http://iphonetester.com/
[Opera browser]: http://www.opera.com/mobile/demo/
[Firebug]: http://getfirebug.com/whatisfirebug
[Firefox]: http://www.mozilla.com/fr/firefox/
[CSS3 Maker]: http://www.css3maker.com/
[CSS3 animations]: http://www.sencha.com/products/animator/
[CSSwarp]: http://csswarp.eleqtriq.com/
[Gradient Editor]: http://www.colorzilla.com/gradient-editor/
[Google Web Fonts]: http://www.google.com/webfonts
[font-face Kit Generator]: http://www.fontsquirrel.com/fontface/generator
[Typetester]: http://www.typetester.org/
[Media Queries]: http://mediaqueri.es/
[Pattern TAP]: http://patterntap.com/
[HTML5 Boilerplate]: http://html5boilerplate.com/
[HTML5]: http://www.mhtml5.com/
[Sources 10]: https://github.com/paulirish/html5-boilerplate
[Link 18]: http://sickdesigner.com/resources/HTML5-starter-pack/
[Initializr]: http://initializr.com/
[Animated Portfolio Gallery]: http://tympanus.net/Tutorials/AnimatedPortfolioGallery/
[Link 19]: http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/
[Slick MobileApp Website]: http://tutorialzine.com/2010/07/making-slick-mobileapp-website-jquery-css/
[RSS Reader]: http://net.tutsplus.com/tutorials/%20-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/
[Single Page Applications]: http://addyosmani.com/blog/building-spas-jquerys-best-friends/