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. 当Android工程中提示你找不到头文件，但你已经设置头文件路径了

    虽然在Android.mk文件中,配置了LOCAL_C_INCLUDES路径,但是工程中的红色叉号一直提示找不到头文件 这时,你在工程树目录中展开Includes项,捣鼓捣鼓,重新build下,或许就 ...

  2. mac上安装gradle

    首先,先download最新版本的gradle,网址如下:http://www.gradle.org/get-started然后将下载下来的zip包放在你要安装的路径上,我安装在/usr/local/ ...

  3. Wcf for wp8 连接数据库，读写数据库，显示数据库数据（二）

    下载: Microsoft® SQL Server® 2012 Express http://www.microsoft.com/zh-cn/download/details.aspx?id=2906 ...

  4. 简单修改hosts文件加快打开网页速度

    这个电脑小技巧的帖子菲菲博客分享如何通过简单一招利用修改系统的hosts文件来实现有效加快浏览器打开网页的速度.尤其是网络繁忙时DNS服务器负担加重的时候效果特别明显,有兴趣就和菲菲一起来学习一下吧, ...

  5. AppleWatch开发教程之调试程序使用帮助文档

    AppleWatch开发教程之调试程序使用帮助文档 AppleWatch开发教程之调试程序 调试又被称为排错,是发现和减少程序错误的一个过程.在Xcode中进行调试的需要实现以下几个步骤: 1.添加断 ...

  6. http://jingyan.baidu.com/article/86112f13582848273797879b.html

    http://jingyan.baidu.com/article/86112f13582848273797879b.html

  7. spring实战四之Bean的自动装配(注解方式)

    使用注解装配: 从spring2.5开始,Spring启用了使用注解自动装配Bean的属性,使用注解方式自动装配与在XML中使用 autowire 属性自动装配并没有太大区别,但是使用注解方式允许更细 ...

  8. 模拟 CSU 1562 Fun House

    题目传送门 /* 题意:光线从 '*' 发射,遇到 '/' 或 '\' 进行反射,最后射到墙上,将 'x' 变成 '&' 模拟:仔细读题,搞清楚要做什么,就是i,j的移动,直到撞到墙,模拟一下 ...

  9. SPOJ962 Intergalactic Map（最大流）

    题目问一张无向图能否从1点走到2点再走到3点,且一个点只走一次. 思维定势思维定势..建图关键在于,源点向2点连边,1点和3点向汇点连边! 另外,题目数据听说有点问题,出现点大于n的数据.. #inc ...

  10. The Accomodation of Students

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...