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. Stanford大学机器学习公开课（五）：生成学习算法、高斯判别、朴素贝叶斯

    (一)生成学习算法 在线性回归和Logistic回归这种类型的学习算法中我们探讨的模型都是p(y|x;θ),即给定x的情况探讨y的条件概率分布.如二分类问题,不管是感知器算法还是逻辑回归算法,都是在解 ...

  2. Hadoop 2.x HDFS新特性

    Hadoop 2.x HDFS新特性 1.HDFS联邦    2. HDFS HA(要用到zookeeper等,留在后面再讲)    3.HDFS快照 回顾: HDFS两层模型     Namespa ...

  3. eclipse 向HDFS中创建文件夹报错 permission denied

    环境:win7  eclipse    hadoop 1.1.2 当执行创建文件的的时候, 即: String Path = "hdfs://host2:9000"; FileSy ...

  4. 集群管理 secondaryNameNode和NameNode(转)

    为了达到以下负责均衡,需要调整以下 改变负载 三台机器,改变负载 host2(NameNode.DataNode.TaskTracker) host6(SecondaryNameNode.DataNo ...

  5. 蓝桥杯 入门训练 Fibonacci数列（水题，斐波那契数列）

    入门训练 Fibonacci数列 时间限制:1.0s   内存限制:256.0MB 问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. 当n比较大时,Fn也非 ...

  6. oracle 共享池( shared pool )

    Oracle共享池 Oracle共享池(Share Pool)属于SGA,由库高速缓存(library cache)和数据字典高速缓存(data dictionary cache)组成. 库高速缓存 ...

  7. hdu 4091 线性规划

    分析转自:http://blog.csdn.net/dongdongzhang_/article/details/7955136 题意 :  背包能装体积为N,  有两种宝石, 数量无限, 不能切割. ...

  8. 电脑上安装的android虚拟机，能进行基站定位和GPS定位吗？要怎么做才能定位？（转）

    基站定位是通过电信运营商的服务来实现的,至少你得有SIM卡吧,一般电脑是不会有电话功能的吧,所以,通过基站定位不可能. GPS是需要有相应的硬件来支持的,类似于手机需要有GPS模块才可以,电脑一般没有 ...

  9. cocos2dx游戏开发——捕鱼达人mini版学习笔记（二）——MainMenu的搭建

    一.创建文件~ MainMenuScene.h   MainMenuScene.cpp   MainMenuLayer.h   MainMenuLayer.cpp 那个场景的搭建就不多说了,那个我的打 ...

  10. cordova的android notify消息通知插件

    最近在学习用CORDOVA(PHONEGAP)结合SENCHA TOUCH开发应用,想实现一个安卓下的消息通知功能,这个可以通过CORDOVA的插件来实现. 插件目录结构如下: notifyplugi ...