jQuery插件Flot学习Canvas绘制图形的原理(2)_H5之家 - 中国HTML5教程资源分享第一站

<div id="wrapper">
    <div id="scroller">
        
    </div>
</div>

最后我们简单了解下 iScroll 参数：

hScroll: true, //是否水平滚动
vScroll: true, //是否垂直滚动
x: 0, //滚动水平初始位置
y: 0, //滚动垂直初始位置
bounce: true, //是否超过实际位置反弹
bounceLock: false, //当内容少于滚动是否可以反弹，这个实际用处不大
momentum: true, //动量效果，拖动惯性
lockDirection: true, //当水平滚动和垂直滚动同时生效时，当拖动开始是否锁定另一边的拖动
useTransform: true, //是否使用CSS形变
useTransition: false, //是否使用CSS变换
topOffset: 0, //已经滚动的基准值(一般情况用不到)
checkDOMChanges: false, //是否自动检测内容变化

网页提示如果我使用js默认的alert会感觉很难看，如果你有声音的话会突然咚的一声，用户体验非常不好，下面我给大家介绍一个jquery网页提示信息实例。

出于需要，写了一段 jQuery 代码，来实现以下功能：

1.错误提示信息显示在浏览器中央。
2.这条信息在3秒后自动消失。

jQuery将元素绝对居中的关键代码：

代码如下复制代码

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

之后就可以这样使用：

代码如下复制代码

$('.messages').center();

完整代码如下：

代码如下复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>显示在浏览器中央的错误信息</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
    jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
      return this;
    }
    function removeMessages(){
      $('.messages').delay(3000).fadeOut(1000);
    }
    $(document).ready(function(){
      $('.messages').center();
      setTimeout(removeMessages(),1000);
    });
</script>
<style type="text/css">
.messages {
    border:2px solid red;
    padding:10px;
    z-index:100;
}
</style>
</head>
<body>
<div class="messages">错误信息，<br />3秒后隐藏。</div>
<input type=button value="刷新" onclick="Javascript:self.location.reload()">
</body>
</html>

jQuery Mobile是一款手机段的js代码了可以支持触屏功能了，这也是jQuery Mobile插件最大的优点了，下面我整理了一些朋友学习使用jQuery Mobile插件的文章。

touch事件

jquery mobile提供了最基本的触摸事件：touch事件

tap：
快速触摸屏幕并离开，类似于一次完整的点击事件
taphold：
触摸屏幕并保持一段时间
swipe：
在1秒内水平移动30px屏幕像素以上时触发
swipeleft：
向左侧滑动
swiperight：
向右侧滑动方向改变事件
orientationchange事件函数当移动设备方向发生改变时触发。

在事件回调函数内的第二个参数返回一个用于识别当前方向的参数，该参数只会返回两种值：portrait（纵向）和landscape（横向）

但是该事件不是所有浏览器都支持，所以使用要慎重。

滚动事件

目前jquery mobile支持两种滚动事件

scrollstart
开始滚动时触发，需要注意是ios上该事件不稳定，原因是ios在滚动时会禁止dom操作
会将dom操作放入队列中，待滚动结束后才执行这些操作，但是估计现在解决了。
scrollend
在滚动结束时触发显示/隐藏事件
在基于jquery mobile的移动web应用中，我们知道一个web页面存在多个不同的视图或页面，但每次只会显示一个。

当显示其中一个视图时其余都会隐藏，每次视图切换都会触发显示/隐藏事件