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. HDU 2841 Visible Trees 数论+容斥原理

    H - Visible Trees Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  2. hp unix

    HP-UNIX 命令大全 #vgdisplay -v vgname #lvdisplay -v lvfullpath #pvdisplay -v pvfullpath # ioscan –fnkC d ...

  3. Oracle 操作 - 配置

    http://blog.csdn.net/flyingbox/article/details/1823231 http://blog.csdn.net/libingquan008/article/de ...

  4. Java中比较不同的MD5计算方式

    在项目中经常需要使用计算文件的md5,用作一些用途,md5计算算法,通常在网络上查询时,一般给的算法是读取整个文件的字节流,然后计算文件的md5,这种方式当文件较大,且有很大并发量时,则可能导致内存打 ...

  5. wp8 安装.Net3.5

    Microsoft .NET Framework 3.5 Service Pack 1 http://www.microsoft.com/zh-cn/download/details.aspx?id= ...

  6. String.split使用竖线做为分隔符

    String.split使用竖线做为分隔符时会发现得到的数组不对,每个字符都被拆分成数组里的一个值: 解决办法:竖线需要转义才可以作为split的参数,String.split("\\|&q ...

  7. Visual Studio从此走入非Windows程序猿家

    (此文章同时发表在本人微信公众号"dotNET每日精华文章") 在Build 2015大会上,微软放了很多大招,其中一个让普通(不管是微软生态还是非微软生态的)程序猿都密切关注的就 ...

  8. java线程安全总结

    转自:http://blog.csdn.net/haolongabc/article/details/7249098 最近想将java基础的一些东西都整理整理,写下来,这是对知识的总结,也是一种乐趣. ...

  9. Android Inflate

    inflate就相当于将一个xml中定义的布局找出来. 三种方式可以生成LayoutInflater: LayoutInflaterinflater=LayoutInflater.from(this) ...

  10. Codeforces Round #Pi (Div. 2) D. One-Dimensional Battle Ships set乱搞

    D. One-Dimensional Battle ShipsTime Limit: 2 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/con ...