ouchBox

原文：https://github.com/maxzhang/touchbox

移动端单页视图库，适用于制作移动专题

DEMO

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'

});

配置参数 Configs

itemSelector : String

子视图选择器，默认''，如果设置，则使用选择器选中的子元素进行视图切换

active : Number

首视图索引，默认0，默认为第一个子元素

loop : Boolean

子视图切换是否可以循环切换，默认false

animation : String

视图切换的动画效果，默认'flow'，取值范围：'slide'、'flow'

duration : Number

视图切换动画时间，默认400，单位ms

lockScreen : String

锁屏状态，默认'off'，取值：

  • 'off' 不锁屏
  • 'landscape' 锁定为横屏
  • 'portrait' 锁定为竖屏

rotateBody : String/Function

锁屏提示，当lockScreen不为'off'时有效。

当值为String时，HTML字符串会被插入到页面并显示。

当值为Function时，函数的返回值会被被插入到页面并显示。

beforeSlide : Function 已弃用，使用事件接口替代

子视图开始切换时回调函数，如果返回值为false，则终止当次切换操作。

回调函数参数：

  • toIndex 切换到视图索引
  • active 当前视图索引

onSlide : Function 已弃用，使用事件接口替代

子视图切换结束时回调函数

回调函数参数：

  • active 当前视图索引

onResize : Function 已弃用，使用事件接口替代

当TouchBox高宽被重置时调用。

回调函数参数：

  • width 高度
  • height 宽度

scope: Object

回调函数的作用域

事件 Event

回调函数事件监听方法：

boxer.on('beforeslide', function(toIndex, activeIndex) {

    console.log('beforeslide, ', 'to index:', toIndex, ' current index:', activeIndex);

});

touchstart

touchstart事件，返回false则中止本次touch动作。

回调函数参数：

  • active 当前视图索引

touchmove

touchmove事件，返回false则中止视图偏移。

回调函数参数：

  • active 当前视图索引
  • offsetY Y轴位置偏移量，大于0表示手指向上移动，小于0表示手指向下移动

touchend

touchend事件，返回false则中止视图切换，将视图重置为当前视图。

回调函数参数：

  • active 当前视图索引
  • offsetY Y轴位置偏移量，大于0表示手指向上移动，小于0表示手指向下移动

beforeslide

子视图开始切换时回调函数，如果返回值为false，则终止当次切换操作。

回调函数参数：

  • toIndex 切换到视图索引
  • active 当前视图索引

slide

子视图切换结束时回调函数

回调函数参数：

  • active 当前视图索引

resize

当TouchBox高宽被重置时调用

回调函数参数：

  • width 高度
  • height 宽度

移动端单页视图库，适用于制作移动Web touchbox的更多相关文章

  1. HTML5单页框架View.js介绍

    什么是单页应用单页应用,是指将用户视觉上的多个页面在技术上使用一个载体来实现的应用. 换句话来讲,用户视觉效果,与技术实现的载体,并不是一定要一一对应的.采取哪种技术方案,取决于产品设计.技术组成以及 ...

  2. 单页web应用是什么？它又会给传统网站带来哪些好处?

    文章来源:<单页Web应用:JavaScript从前端到后端> 什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面.像所有的应用一样,它旨在帮助用户完成任务 ...

  3. require.js实现单页web应用（SPA）

    本文转载自:https://blog.csdn.net/qq_33401924/article/details/53815922 移动端单页应用基本上是做移动端最流行的的方式了,但是对于很多前端来说, ...

  4. web单页应用是什么？它的好处与坏处有哪些（如何解决这些缺点）

    web单页应用是什么? Web单页应用就是指只有一个Web页面作为入口的应用,在浏览器中运行期间不会重新加载页面.也就是说浏览器一开始会加载它必需的thml.css和Js,之后所有的交互操作都在一个页 ...

  5. 一套Vue的单页模板：N3-admin

    趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...

  6. simple-spa 一个简单的单页应用实例

    上两篇文章说过要写一个简单的单页应用例子的, 迟迟没有兑诺, 实在有愧 哈哈.这篇写给小白用户哈. 正好趁今天风和日丽,事情不多, 把从项目里的代码扣取了一下, 整理了一个简单的例子.因为我们生产项目 ...

  7. vue + element-ui 制作tab切换（适用于单页切换不同标记显示不同内容）

    本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...

  8. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  9. pageadmin CMS网站制作教程：栏目单页内容如何修改

    pageadmin CMS网站制作教程:栏目单页内容如何修改 一般情况下,如公司介绍,联系方式等介绍内页面都属于单页,单页内容可以直接在栏目设置界面进行修改,如下 1.对栏目单页内容进行设置,登录后台 ...

随机推荐

  1. opencv学习笔记（三）基本数据类型

    opencv学习笔记(三)基本数据类型 类:DataType 将C++数据类型转换为对应的opencv数据类型 OpenCV原始数据类型的特征模版.OpenCV的原始数据类型包括unsigned ch ...

  2. BST树

    http://www.cnblogs.com/bizhu/archive/2012/08/19/2646328.html 4. 二叉查找树(BST) Technorati 标记: 二叉查找树,BST, ...

  3. php 增删改查练习

    添加界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  4. Rational Rose2007（v7.0）下载地址、安装及激活详解教程（图）

    http://blog.csdn.net/skl_tz/article/details/8925152 最近需要画uml图,之前用的是Rose 2003版的,由于好久没进去了,结果发现原来的激活又失效 ...

  5. linux dd命令刻录启动U盘详解

    dd if=xxx.iso of=/dev/sdb bs=1M 用以上命令前必须卸载u盘,sdb是你的u盘,bs=1M是块的大小,后面的数值大,写的速度相对块一点,但也不是无限的,我一般选2M,注意, ...

  6. TCP的长连接和短连接

    TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在传输层中有TCP协议与UDP协议. 在应用层有FTP. ...

  7. ASP.NET Web.Config 读写辅助类

    using System; using System.Configuration; using System.Web; using System.Web.Configuration; namespac ...

  8. Sql server之路 （四）添加本地数据库MDF文件

    安装环境 VS2008  Vs2008 Sp1 安装系统 Win8 1.创建窗体 右键添加新项 上一步 上一步 点击确定 双击Database1.mdf文件 在列名出填写字段名 保存 Ctrl+S 点 ...

  9. loj 1251(2-sat + 输出一组可行解）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=26961 思路:u表示留下,~u表示离开,同理v,对于+u,-v,我 ...

  10. jmeter也有loadrunner一样的图像

    一.准备工具 1.JMeterPlugins-Standard-1.4.0.zip下载地址: http://yunpan.cn/c6Dk9tDdj8Lvq  访问密码 4538 2.ServerAge ...