JQuery Mobile iscroll插件使用教程及注意事项

中文文档:http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml

问题:使用了iscroll之后,你会发现点击输入框时不灵敏,经常无法聚焦;页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为 ,包含在wrapper中的input、Seclect控件无法选择或点击

解决办法:
在创建Scorll时,定义以下方法

onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
e.preventDefault();
}, 

完整代码:

/**
 * 初始化iScroll控件
 */
function loaded() {
    pullUpEl = document.getElementById(‘pullUp‘);
    pullUpOffset = pullUpEl.offsetHeight;
    myScroll = new iScroll(‘wrapper‘, {
        useTransition: false, /* 防止更新时闪动 */
        topOffset: pullDownOffset,
        onRefresh: function () {
            if (pullUpEl.className.match(‘loading‘)) {
                pullUpEl.className = ‘tips‘;
                pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘上拉加载更多...‘;
            }
        },
        onScrollMove: function () {
            if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match(‘flip‘)) {
                pullUpEl.className = ‘flip tips‘;
                pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘松手开始更新...‘;
                this.maxScrollY = this.maxScrollY;
            } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match(‘flip‘)) {
                pullUpEl.className = ‘tips‘;
                pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘上拉加载更多...‘;
                this.maxScrollY = pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullUpEl.className.match(‘flip‘)) {
                pullUpEl.className = ‘loading tips‘;
                pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘加载中...‘;
                pullUpAction();    // Execute custom function (ajax call?)
            }
        },
        onBeforeScrollStart: function (e) {
            var target = e.target;
            while (target.nodeType != 1) target = target.parentNode;
            if (target.tagName != ‘SELECT‘ && target.tagName != ‘INPUT‘ && target.tagName != ‘TEXTAREA‘)
            e.preventDefault();
        }
    });

    setTimeout(function () { document.getElementById(‘wrapper‘).style.left = ‘0‘; }, 500);
}

document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false);
document.addEventListener(‘DOMContentLoaded‘, loaded, false); //初始化绑定iScroll控件 
时间: 2024-10-28 20:55:25

JQuery Mobile iscroll插件使用教程及注意事项的相关文章

19个非常有用的 jQuery 图片滑动插件和教程

jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天这篇文章向大家分享19个非常有用的 jQuery 图片滑动插件和教程. Slides Smooth Div Scroll Create an Image Rotator with Description Animate Panning Slideshow with jQuery Create a S

10个非常有用的jQuery图片滑动插件和教程

1.jQuery Bootstrap响应式下拉菜单 今天我们要来分享一个基于jQuery和Bootstrap的响应式下拉菜单,这款菜单的特点就是菜单项可以有二级下拉菜单,而且当页面宽度比较窄时菜单项将集中在一个下拉菜单下,非常适合移动网站.由于是基于jQuery的,兼容性也还可以. 在线演示 源码下载 2.5个可爱的CSS3 Loading加载动画 之前我们分享过很多漂亮的CSS3 Loading加载动画,印象最深的要算这款CSS3 Loading进度条加载动画特效 3款绚丽风格.这次要给大家介

一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容.这里最大的部分是开发一个菜单,即要直观易用,又要符合你网站的设计风格.本文列举了20个必看的jQuery的导航插件和教程,演示通过jQuery实现一些导航效果,教您如何做一个有创造性和易于使用的导航. 美丽滑出导航 在本教程中,展示了如何创建一个惊人的滑出式菜单或导航.这给出了一个漂亮的效果,使用这种技术可以节省您在网站上一些空间. Search Box with Filte

jquery mobile mobiscroll 日期插件使 用mobiscroll

官网网站: http://www.mobiscroll.com/ http://code.google.com/p/mobiscroll/ 1.精简版Demo: 查看Demo » 下载Demo » 2.年月日时分整合版Demo: 预览图: 查看Demo » 下载Demo » 以及的Demo: 1.精简出一个中文版本的Demo: 包括日期和时间共同选择等效果. 查看Demo » 2.修改官方Demo,并加入中文版本的可选项 此demo暂无在线预览,请下载完整包: 下载Demo » 昨天碰到使用日期

经典收藏 50个jQuery Mobile开发技巧集萃

1.Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序.想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式.先不妨在你的浏览器中查看该应用程序. 相关链接:http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2.使用媒体查询来锁定设备 你可能会问如何使用CSS来锁定设备(根据屏幕尺寸).比如说,你想要为iPad设计两列布局.为智能手机设计单列布局.要做到这一点,最佳办法就是使用媒体查询.

50个jQuery Mobile开发技巧收集(转)

1.Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序.想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式.先不妨在你的浏览器中查看该应用程序. 相关链接:http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2.使用媒体查询来锁定设备 你可能会问如何使用CSS来锁定设备(根据屏幕尺寸).比如说,你想要为iPad设计两列布局.为智能手机设计单列布局.要做到这一点,最佳办法就是使用媒体查询.

Flexslider - 响应式的 jQuery 内容滚动插件

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发中试试. 温馨提示:响应式效果需要再 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中才支持. 效果演示     插件下载 使用示例: <div class="flexslider"> <ul class="slides"&g

20款美化网站的 jQuery Lightbox 灯箱插件

jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会要求他们的网站看起来更有吸引力和视觉冲击力. 因此在这个集合中,我们编译了20款最好的 jQuery 灯箱插件清单,这将有助于开发人员创建和设计精美的网站.您可以将这些插件很容易地集成到您的网站,可以下载他们瞬间充实你的插件库. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载]

jQuery 人脸识别插件,支持图片和视频

jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带来各种可能性,创造出互动的,有趣的功能. 注:人脸识别,是基于人的脸部特征信息进行身份识别的一种生物识别技术.用摄像机或摄像头采集含有人脸的图像或视频流,并自动在图像中检测和跟踪人脸,进而对检测到的人脸进行脸部的一系列相关技术,通常也叫做人像识别.面部识别. 效果演示     插件下载 如何使用: