zoukankan      html  css  js  c++  java
  • bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页

    jgestures.js插件可以解决,只需要引入一个JS文件
    <script src="js/jgestures.min.js"></script>
    下面是JS代码:
    $(document).ready(function(){
    //手势右滑
    $('#myCarousel').bind('swiperight swiperightup swiperightdown',function(){
    // 执行一些动作...
    })
    //手势左滑
    $('#myCarousel').bind('swipeleft swipeleftup swipeleftdown',function(){
    // 执行一些动作...
    })
    //单点滑动手势,滑动完成后触发(一个手指在屏幕上移动)
    $('#myCarousel').bind('swipeone',function(){
    // 执行一些动作...
    })
    });

    =====================================
    jGestures插件允许你如同原生的jQuery事件一样监听以下事件:'pinch'(缩放手势), 'rotate'(旋转手势), 'swipe'(滑动手势), 'tap'(轻触) 以及 'orientationchange'(改变设备方向)。当然,部分事件在PC浏览器上可以通过转换实现。比如 "tapone" 事件可以被 "clicking"事件触发,鼠标手势也可以产生"swipe"事件。

    ---------------------------------
    基本的用法是:
    jQuery('#swipe').bind('swipeone',eventHandler);

    其中前半部分是确定需要绑定到的元素,后半部分中,swipeone是它支持的一些手势,eventHandler是要发生的事件。

    支持的事件有:
    Orientationchange
    设备的方向变化
    (Pinch)两指的缩放
    pinch
    pinchopen
    两手指放大,然后触点离开设备
    pinchclose
    两手指缩小,然后触点离开设备
    (rotate)两指的旋转
    rotatecw
    两手指旋转顺时针,然后触点离开设备
    rotateccw
    两手指旋转逆时针,然后触点离开设备
    (swipe)滑动手势
    swipemove
    swipeone
    swipetwo
    swipethree
    swipefour
    1~4个触点的滑动
    swipeup
    swiperightup
    swiperight
    swiperightdown
    swipedownswipeleftdown
    swipeleft
    swipeleftup
    朝不同方向的滑动
    (tap)
    tapone
    taptwo
    tapthree
    1~3次点击
    (shake)摇动设备
    shake
    摇动设备
    shakefrontback
    前后摇动
    shakeleftright
    左右摇动
    shakeupdown
    上下摇动

    遇到的一些问题:

    尝试了左右滑动的swipeleft和swiperight,但是发现并没有效果,然后在swiperight的基础上还绑定了swiperightup和swipeleftdown两个事件

    jQuery('#swipe').bind('swiperight swiperightupswiperightdown',eventHandler

    然后就滑动事件就顺利触发了。猜想可能是left的触发条件区间比较小,垂直位置上移动距离过大就被指向了leftup或者leftdown的事件了。

    可以禁止本来的滑动,防止干扰

    event.preventDefault();


    配合响应式布局

    支持手势之后,再配合以响应式布局的页面,在移动端的展示就可以更加接近于App
    因为项目在移动端只是以内容展示为主的,主要的操作编辑不在移动端,没有复杂的操作。考虑到只是原型,这样可以免去了客户端的开发,学习成本低了好多。

    =================================
    事件列表

    orientationchange
    代表设备顺时针或者逆时针旋转.此事件可以被设备触发,可能使用的是重力传感器.

    pinch
    缩放手势(两个手指在屏幕上的相对运动)

    rotate
    旋转手势(两个手指顺时针或者逆时针旋转)

    swipemove
    在正在滑动时触发(在设备屏幕上移动手指,比如:拖动)

    swipeone
    单点滑动手势,滑动完成后触发(一个手指在屏幕上移动)

    swipetwo
    两点滑动(两个手指在屏幕上方向一致的滑动)

    swipethree
    三点滑动(三个手指在屏幕上方向一致的滑动)

    swipefour
    四点滑动(四个手指在屏幕上方向一致的滑动)

    swipeup
    向上滑动,在严格的向上滑动手势完成后触发

    swiperightup
    向右上角滑动,在向右且向上的滑动手势完成后触发

    swiperight
    向右滑动,在严格的向右滑动手势完成后触发

    swiperightdown
    向右下角滑动,在向右且向下的滑动手势完成后触发

    swipedown
    向下滑动,在严格的向下滑动手势完成后触发

    swipeleftdown
    向左下角滑动,在向左且向下的滑动手势完成后触发

    swipeleft
    向左滑动,在严格的向左滑动手势完成后触发

    swipeleftup
    向左上角滑动,在向左且向上的滑动手势完成后触发

    tapone
    在单个手指轻点的手势后触发

    taptwo
    在两个手指一起轻点的手势后触发

    tapthree
    在三个手指一起轻点的手势后触发

    pinchopen
    撑开手势,当两个手指撑大并离开设备时触发.

    pinchclose
    捏紧手势,当两个手指捏紧并离开设备时触发.

    rotatecw
    两个手指顺时针旋转并且离开屏幕时触发(two fingers rotating clockwise)

    rotateccw
    两个手指逆时针旋转并且离开屏幕时触发 (two fingers rotating counterclockwise)

    shake
    当检测到设备正在摇晃时触发

    shakefrontback
    当检测到摇晃动作,且可以被解读为前后移动之时触发.

    shakeleftright
    当检测到摇晃动作,且可以被解读为左右移动之时触发.

    shakeupdown
    当检测到摇晃动作,且可以被解读为上下移动之时触发.

  • 相关阅读:
    C&C++ recap
    将Rmarkdown文件转为pdf文件
    ChIP-seq Peak caller MACS index out of range问题解决
    R正则表达式的问题
    nodejs+cheerio爬虫测试
    jetty更换图标
    MyEclipse无法生成class文件
    JPA @OneToOne stackoverflow
    jquery-validate--使用由于疏忽导致的问题1(input失去焦点没有被验证,submit才验证)
    组合框
  • 原文地址:https://www.cnblogs.com/zdz8207/p/bootstrap-jgestures-swipe.html
Copyright © 2011-2022 走看看