【JS插件】项目中用过的框架插件集合&使用心得
---------------------------------------------------------------------------------------------------
废点话先：
来这里时间不长，项目没几个，不过用过的插件略一统计竟然有十多个。因为公司对外业务比较多，而我负责的主要是在ipad上跑的web app项目，而AE对各种动画效果的要求特别的苛刻，时间给的也不多。再然后，基于不制作相同轮子的伟大真理，我开始寻找合适的插件。其中有一些封装的非常漂亮，譬如Tween，有一些动画效果非常精细性能也不错的，譬如Swipe.js和isroll.js，还有创意十足的酷炫旋转菜单menu.js。
但是，问题是，插件都是定义的动画效果，业务逻辑是一点都不会涉及到的。再加上插件进行组装之后，难免有些问题。再者，有的插件本身功能不够完善（也许是我理解不够深或者别的啥吧），需要自行扩展和添加需要的方法。然后，插件数量太多，即便拿之前用过的来用也会遇到问题。因为可能对插件功能的需求不一样，会造成时间上的浪费，反复去学习同一个插件。于是，有了下面这些非常简单和菜白的废话。（最后一句，对于缺乏创造力和反应迟钝我来说，这些动画效果我真是想破脑袋都不可能想上去的更别提自己写了。这就是大牛跟菜鸟的区别吧）
PS：
把这个帖子挖出来之后才发现自己原来有那么多”未完待续，持续更新中“的帖子，真是懒啊。希望新年到来之前可以都补全。
看到我在补充这个，师傅问了句，你懂这些么？我说，懂啊，不懂怎么用。他说，你知道我说的什么意思不？我说，知道。他翻了个白眼就不甩我了。我郁闷了，虽然我年纪不轻了，可是还需要时间来琢磨啊，不要拿你一奔四的人跟我这奔三的人来PK啊。怨念中。。。
---------------------------------------------------------------------------------------------------
框架类插件：不解释
【ExtJS】
我最喜欢的一款插件，很推崇，公司云平台就是通过这个东东来实现前端所有工作的，对内对外全部一次性搞定，我愿意把所有的赞美之词全部送给它。狂赞！！！
【jQuery、jQuery UI、jQuery Mobile】
不解释
【prototype】
有学习，可惜没在项目中实践过。打算拿个小项目来练手，希望不要被那些人发现（(*^__^*) ）
【Backbone】
下个地产巨头的项目，打算用这个，目前还在学习中。
【PhoneGap/Cordova】
跨移动平台的利器啊，貌似已经更新到3.0了。v5！~虽然第一次用的时候恨不得自裁了事！
当然，如果media的api中如果有video相关的接口就好了，上次用户需要在android的某销售工具中加入视频播放，最后从网上找了个，可惜很多问题，最最后，还是找写android的筒子帮忙才搞定。很好很强大，在移动端就跟EXT在pc端一样强大，我喜欢，推荐！最后希望adobe不要把它变成巨坑！~
【Nodejs】
玩了一段时间，然后，我想。当初某个项目，头让我用nodejs练手，我拒绝了，改用php。嗯，好吧，nodejs真的很强大，不过我还是喜欢用js做它最最擅长的事。当然，如果哪天顺利转行写ios了。我会好好研究nodejs的。
【Foundation】
The most advanced responsive front-end framework in the worl
【官网地址】http://foundation.zurb.com
【网格】http://foundation.zurb.com/grid.php
【布局结构】http://foundation.zurb.com/templates.php
【拿来做案例的结构】http://foundation.zurb.com/page-templates4/workspace.html
【帮助文档】http://foundation.zurb.com/docs/
【Icon Fonts】http://www.zurb.com/playground/foundation-icons
【Off Canvas Layouts】http://www.zurb.com/playground/off-canvas-layouts
【Responsive Tables】http://foundation.zurb.com/docs/components/tables.html
---------------------------------------------------------------------------------------------------
工具类插件：如操作cookie、视频播放兼容插件、ie6PNG背景透明插件等等类似工具
【jquery.cookie.js】：看名字就知道，操作cookie的插件。使用起来很简单。
【swfobject】：视频插件，有特定的视频的swf文件，如播放按钮等。只能在线上测试。
【iepng.js】：ie6背景透明插件。
【jquery.form.js】：Submitting a form with AJAX doesn't get any easier than this!
---------------------------------------------------------------------------------------------------
效果类插件：如上下滑动、各种幻灯等等类似效果
【 jquery.mousewheel 】：
控制鼠标滚动的插件。额，是上面那个 jcarousellite_1.0.1的依赖插件。
【jcarousellite_1.0.1】：
滑动插件，兼容低版本浏览器。用绝对定位来做的。
---------------------------------------------------------------------------------------------------
组件类插件：如弹出框、日期控件等等类似组件
【jquery.lightbox_me】：
弹出框。大小自适应，位置可以调整，被注册到resize中。
【Menu Templates*各类菜单项】http://xpwebbuttons.com/menu-js.html
说明：怨念啊，高级版要收费。不过免费的也够用了。
【JS日期控件】
这几个都不是iframe弹出形式，所以我才罗列出来的：
|kimsoft-jscalendar|：https://code.google.com/p/kimsoft-jscalendar/
注：国人出品，哈哈，还是很赞的！~唯一的遗憾是，ie6里面会报错，提示Object中木有某个方法，具体大家自己看吧。点击选择日期之后会触发这个问题，我很想去改下，但是。。。
|pickadate|：http://amsul.ca/pickadate.js/
注：触发之后会弹出一个日历选择框，你没看错，是弹出，而不是在旁边静悄悄出现一个日历选择框。。。
|Datepicker-jqueryUI|：http://jqueryui.com/datepicker/
注：整个脚本太大，建议将这个组件挖出来。哈哈，还木有试过，就是不知道会不会有其他的依赖。应该木有吧。。。
|jquery.timepicker|：http://jonthornton.github.io/jquery-timepicker/
注：整这个没有细看，demo中没有看到日期的选择器，只看到当月的展示。具体看上面地址呗。
|DatePicker from FoxRunSoftware|：http://foxrunsoftware.github.io/DatePicker/
注：最后决定用这个，小巧轻盈，兼容ie6。PS：上面的都兼容ie6。哈哈
|97Date|：http://www.my97.net/
注：iframe形式。
【JS文件上传控件】
搜集中...
---------------------------------------------------------------------------------------------------
移动&HTML5类：如手势监控、CSS3滑动效果等等类似移动插件
【menu.js * 旋转菜单特效】
效果图：（没有在网上找到地址，是一个同事随手另存然后发给我的）
说明：上面的效果中，那个透明背景层是我自己加的哦，插件只有菜单项的旋转。效果还是很流畅的，不过需要自己加工。这个效果我用在了一个ipad离线销售工具上，最近开始第四波更新，打算把这个工具重构，不知道会不会被允许挂到github上面去。。。
【Swipe.js * 移动Web内容滑块(支持手机触摸滑动)】http://swipejs.com/
版本：1.0
介绍：Swipe JS 是一个轻量级(3.7 kb) mobile slider，支持 1:1 触摸移动(基于精确的触摸位置的内容滑动)。 它能够展示任意HTML内容，并能够提供类似于原生应用程序的操作体验。
心得：这款插件用来做左右滑动效果非常方便。其中提供的几个内置方法，如prev、next、slide，使用起来也很不错。
使用：（详细介绍参考http://swipejs.com/）
<div id="bigPage_slide" style="overflow: hidden; visibility: visible; "> <ul style="list-style: none; margin: 0px; width: 1440px; -webkit-transition: 0ms; -webkit-transform: translate3d(0px, 0px, 0px); "> <li style="display: table-cell; width: 480px; vertical-align: top; "><div>1</div></li> <li style="display: table-cell; width: 480px; vertical-align: top; "><div>2</div></li> <li style="display: table-cell; width: 480px; vertical-align: top; "><div>3</div></li> </ul> </div>
slideObj = new Swipe(document.getElementById("bigPage_slide"),{callback:function(e,pos){
slideCallback(pos); // 滑动之后，执行回调函数
}});
slideObj.prev(); //滑到上一张幻灯
slideObj.next(); //滑到下一张幻灯
slideObj.slide(pos); //滑到指定位置幻灯，此处需要注意
问题：slideObj.slide(pos); // slide() 方法，在第一次调用时，会执行回调函数，但是，在第二次及之后的调用时，不会执行回调函数。
【iscroll.js * 移动Web内容上下滑动（鼠标上下拖动 + 移动触屏）】
iscroll官网
iscroll例子
版本：4.0
介绍：之所以iscroll会诞生，主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header 或是footer再加上一个可以内容的滚动的中间区域组成。
心得：如果只需要简单的上下滑动，使用起来就非常简单。不过，这个插件定义的html结构，对css样式要求非常严格，一旦样式设置有误，将无法正常使用，自然也不会有错误提示。譬如，最外层的盒子最好直接使用推荐的样式，如下。盒子内部第一个子元素是滑动的区块，最好将所有需要上下滑动的内容都放置在盒子的第一个子元素中。（然后就是，盒子内部的所有节点都可以从子节点获取高度和宽度。这话说的真绕口，不明的就当没看见好了。）
position:relative; z-index:1; width:/* your desired width, auto and 100% are fine */; height:/* element height */; overflow:/* hidden|auto|scroll */;
<div id="wrapper"> <ul id="scroll"> <li></li> ... ... </ul> </div> <div id="wrapper"> <div id="scroll"> <ul> <li></li> ... ... </ul> </div> </div>
使用：关于使用不详细说了，这里有详细中文教程 http://www.cnblogs.com/kxdhm/archive/2012/02/21/2361751.html
【hammer.js – 多点触摸手势库】
hammer.js 是一个多点触摸手势库，能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。
hammer.js 不但支持触摸屏设备的浏览器，在桌面浏览器上，也能将鼠标的点击当做触摸，方便开发人员在桌面浏览器上调试。（JS仔在自己的随手背项目里面也用了hammer.js，真心好用）
使用方法：
<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>
// 先要对监听的DOM进行一些初始化
var hammer = new Hammer(document.getElementById("container"));
// 然后加入相应的回调函数即可
hammer.ondragstart = function(ev) { }; // 开始拖动
hammer.ondrag = function(ev) { }; // 拖动中
hammer.ondragend = function(ev) { }; // 拖动结束
hammer.onswipe = function(ev) { }; // 滑动
hammer.ontap = function(ev) { }; // 单击
hammer.ondoubletap = function(ev) { }; //双击
hammer.onhold = function(ev) { }; // 长按
hammer.ontransformstart = function(ev) { }; // 双指收张开始
hammer.ontransform = function(ev) { }; // 双指收张中
hammer.ontransformend = function(ev) { }; // 双指收张结束
hammer.onrelease = function(ev) { }; // 手指离开屏幕
jQuery形式调用：
<script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>
$("#element")
.hammer({
// 对DOM进行一些初始化，这里可以加入一些参数
})
.bind("tap", function(ev) {
console.log(ev);
});
官网地址：http://eightmedia.github.com/hammer.js/ （带演示）
源码地址：https://github.com/EightMedia/hammer.js