标签：
原文：https://github.com/maxzhang/touchbox
移动端单页视图库，适用于制作移动专题
http://jsbin.com/vatuma/latest
手机扫描下面二维码查看例子：
首先，页面必须是下面的结构
<html>
// ...
<body>
<div id="touchBoxCt">
<div>
// 子视图1
</div>
<div>
// 子视图2
</div>
<div>
// 子视图3
</div>
</div>
</body>
</html>
初始CSS，除以下两个样式之外，TouchBox不依赖任何其他样式
/* 如果不将body的margin设为0，会导致视图高宽计算不准确 */
body, div {
margin: 0;
padding: 0;
}
new TouchBox(‘#touchBoxCt‘, {
loop: true,
animation: ‘flow‘
});
子视图选择器，默认‘‘，如果设置，则使用选择器选中的子元素进行视图切换
首视图索引，默认0，默认为第一个子元素
子视图切换是否可以循环切换，默认false
视图切换的动画效果，默认‘flow‘，取值范围：‘slide‘、‘flow‘
视图切换动画时间，默认400，单位ms
锁屏状态，默认‘off‘，取值：
锁屏提示，当lockScreen不为‘off‘时有效。
当值为String时，HTML字符串会被插入到页面并显示。
当值为Function时，函数的返回值会被被插入到页面并显示。
子视图开始切换时回调函数，如果返回值为false，则终止当次切换操作。
回调函数参数：
子视图切换结束时回调函数
回调函数参数：
当TouchBox高宽被重置时调用。
回调函数参数：
回调函数的作用域
回调函数事件监听方法：
boxer.on(‘beforeslide‘, function(toIndex, activeIndex) {
console.log(‘beforeslide, ‘, ‘to index:‘, toIndex, ‘ current index:‘, activeIndex);
});
touchstart事件，返回false则中止本次touch动作。
回调函数参数：
touchmove事件，返回false则中止视图偏移。
回调函数参数：
touchend事件，返回false则中止视图切换，将视图重置为当前视图。
回调函数参数：
子视图开始切换时回调函数，如果返回值为false，则终止当次切换操作。
回调函数参数：
子视图切换结束时回调函数
回调函数参数：
当TouchBox高宽被重置时调用
回调函数参数：
标签：
原文地址：http://www.cnblogs.com/sybboy/p/5086724.html
