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. Fedora 21 install chrome

    Steps to install Google Chrome on Fedora 21 A. Create google-chrome.repo file Use this command to cr ...

  2. Http协议之Get和Post的区别

    get(默认值)是通过URL传递表单值,post传递的表单值是隐藏到http报文体中,url中看不到.区别(常考):get是通过url传递表单值,post通过url看不到表单域的值:get传递的数据量 ...

  3. 案例(用封装的ajax加载数据库的数据到页面)

    本程序主要功能是以表格方式在网页上显示数据库的内容 LoadUsers.htm代码: <head> <title></title> <script src=& ...

  4. Android配置----DDMS 连接真机（己ROOT)，用file explore看不到data/data文件夹的解决办法

    Android DDMS 连接真机(己ROOT),用file explore看不到data/data文件夹,问题在于data文件夹没有权限,用360手机助手或豌豆荚也是看不见的. 有以下两种解决方法: ...

  5. ShareSDK集成微信、QQ、微博分享

    1.前言 为什么要使用第三方的作为集成分享的工具呢?而不去用官方的呢?有什么区别么? 一个字"快",如果你使用官方的得一个个集成他们的SDK,相信这是一个痛苦的过程. 2.准备需要 ...

  6. adbWireless 简单教程

    adbWireless:无线使用ADB(siir.es.adbWireless) 下载: http://www.coolapk.com/apk/siir.es.adbWireless >> ...

  7. Emacs简易教程

    Emacs简易教程阅读: 命令: $emacs 进入之后,输入: C-h t 这里,C-h表示按住[Ctrl]键的同时按h ####### 20090620 *退出: 输入“C-x C-c” *撤销: ...

  8. LoadRunner11支持的浏览器小结

    LoadRunner11录制脚本时不能打开IE浏览器,解决方案有以下几个步骤: l  LoadRunner11支持的浏览器版本最高是ie9,把浏览器版本换成ie9; l  打开IE选项----高级—去 ...

  9. HealthKit开发快速入门教程之HealthKit开发概述简介

    HealthKit开发快速入门教程之HealthKit开发概述简介 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为“He ...

  10. http://my.oschina.net/chinacion/blog/647641

    http://my.oschina.net/chinacion/blog/647641