编写jQuery插件--实现返回顶部插件

时间:2022-05-04 12:54:34

  国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了。最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合污了!就做个‘沉默’的程序猿吧!(总有一天会猿球崛起)嘿嘿。

牢骚到底为止,好的心情才是重要的,本来猝死的几率就那么大了,就不要再往上飙数字了。不快的心情留在公司,快乐的在家里写blog。

有一段时间没有写blog了(恍恍惚惚的过了这些天,买了几本书,看了,字全认识,意思全没看进去),也没有一个清晰的思路大纲,step by step的去写一系列博文,就吧日常工作中的一些东东做下记录,这几篇想写下有关前台的东东,好吧,就写前台,这次就拍脑袋定了。

废话怎么这么多了(还没到更年期),看标题,编写jQuery插件,在jQuery的官网上面插件已经有很多了,最常见表单验证-validation等;现在比较完善、流行的的jQuery UI。在使用这些不错的插件的时候不要忘记向编写它们的大牛们致敬。

前些天看了篇博文,就是说不会编写jQuery插件的人不要说自己会用jQuery;表示灰常赞同;插件就是对一系列方法或是函数的封装,以便以后更好的重用,也便于后期的维护、提高开发效率。那么就让我们做一个会编写jQuery插件会使用jQuery的程序猿吧。

在开始编写之前先介绍点基本的知识吧(一是以前总是不注重理论直接导致某次面试深受其害,二是增加点本博文的内容,不至于太没深度了(不要说我太自私、太沽名钓誉啊,嘿嘿)),那就摘抄+自我理解的理论吧。

jQuery的插件的3种类型:

1.封装对象方法的插件

这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,大概有95%以上的插件都是封装对象方法的插件。(文字描述总是那么让人骂娘(河蟹掉))就是通过 $.fn.extend()方法来实现。

例如:

$.fn.extend({

  "myExtend":function(){

    //在这里编写相应代码

  },//用,号隔开,可以定义一组插件

  "myExtend2":function(){

    //在这里编写相应代码

  }

})

调用:$("#id").myExtend();

2.封装全局函数的插件

可以将独立的函数加到jQuery命名空间之下。就是扩展jQuery类本身,为类添加新方法。

通过$.extend()方法实现。

例如:实现

$.extend({

  myExtend:function(value){

    //编写相应代码

  }

})

调用:$.myExtend('value');

3.选择器插件

jQuery的选择器已经很强大了,这个插件用的不是太多,如果变更强大,岂不是更强大呢。

对于上面所说的3中插件,我们这里只介绍前两种。说了这么多,到底要编写神马插件呢(已成熟的太多了,思考中...)那就来个简单的练练手--返回顶部的插件(这个插件好像不常见);

准备工作:在某个网站上找个图片(审美能力有限,制作美的能力更...哎,只有网上下了),用于显示返回顶部的背景(http://news.baidu.com/resource/img/gotop.png

ok就准备这个就行了,低成本;低风险,受没受益up to you;

先看如下一段代码:

;(function($){//开始前加分号是为了兼容性;此处$作为匿名函数的形参

  //相应代码

})(jQuery);//这里jQuery作为匿名函数的实参

请注意:所有的插件代码必须放置在上面的代码内;需要了解的更加详细,请看插件中的闭包相关内容,在这里不做赘述咯。

ok,那就来写第一种jQuery插件--封装jQuery对象方法的插件;这个插件的方法名:toTop();

;(function($){

  "toTop":function(options){//给词方法传递options参数

    //在这里写插件代码

  }

})(jQuery);

实现思路:比如是一个div标签,位置在右侧底部,开始时隐藏的,当滚动条滚动到距离顶部一定高度时(比如500px),div标签显示,点击此div标签滚动条距离顶部的位置为0,div标签就隐藏。

ok,开写:

"toTop":function(options){//给词方法传递options参数

  this.css('visibility', 'hidden');//开始时为隐藏状态

  this.addClass("'top topStyle'");
  $this=$(this);

$(window).scroll(function () {//给窗体添加滚动事件
  if ($(this).scrollTop() >= 500) {//当滚动条距离顶部为500时显示置顶按钮
    $this.css('visibility', 'visible');
  } else {
    $this.css('visibility', 'hidden');
  }
});

//添加置顶事件

$(this).click(function () {
  $(window).scrollTop(0);//滚动置0
});
return this;//此句代码是实现可链接性

}

相应的css代码如下:

.topStyle
{
background-color: transparent;
cursor: pointer;
position: fixed;

right:100px;

bottom:30%;
}

.top
{
background: url(../css/gotop.png);
height: 48px;
width: 48px;
background-position: 102px 48px;
}
.top:hover
{
background: url(../css/gotop.png);
height: 48px;
width: 48px;
background-position: 102px 0px;
}

ok,在html内添加<div id='divToTop'></div>

$(function(){

  $("#divToTop").toTop();

});

效果如下:

编写jQuery插件--实现返回顶部插件

写到这里,还想再优化下,在引用toTop方法的时候我就想设置置顶按钮距离右侧和底部的位置、以及距离顶多高才出现置顶的按钮;那好吧,那就别让options这个参数闲着发呆了。

修改代码如下:

toTop:function(options){
        //bottom:距离底部的距离;right:距离右侧的位置;showHeight:设置距离顶部的高度时,现实置顶按钮
             var options=$.extend({bottom:'30%',right:100,showHeight:500},options);

             this.css('right',options.right+"px");//右侧的距离
             this.css('bottom', options.bottom);//底部的距离
             this.css('visibility', 'hidden');
             $(this).addClass('top topStyle');
             $this=$(this);
             //返回顶部
            $(window).scroll(function () {
                if ($(this).scrollTop() >= options.showHeight) {//$("body").scrollTop()在IE和火狐下面兼容性不行
                    $this.css('visibility', 'visible');
                } else {
                    $this.css('visibility', 'hidden');
                }
            });

            $(this).click(function () {
               $(window).scrollTop(0);// $("body").scrollTop(0);在IE和火狐下面兼容性不行
}); return this; }

 相应css代码如下:

.topStyle
{
    background-color: transparent;
    cursor: pointer;
    position: fixed;
}
.top
{
    background: url(../css/gotop.png);
    height: 48px;
    width: 48px;
    background-position: 102px 48px;
}
.top:hover
{
    background: url(../css/gotop.png);
    height: 48px;
    width: 48px;
    background-position: 102px 0px;
}

调用:

$("#divToTop").toTop({right:100,bottom:'40%',showHeight:600});//$("#divToTop").toTop()直接使用默认值{bottom:'30%',right:100,showHeight:500}

哇,一看时间已经10点多了;我缓冲的电影已经ok了;

啰嗦在最后:这篇博文只给出了第一种对象方式实现的插件,下一篇准备完善第二种方法实现插件;

预告:下篇准备整理下我常用的验证的一些方法,并温习下正则表达式相关知识。欲知后篇内容,且看下回。

PS:上次的代码在IE和火狐下面存在兼容性问题,现已修改!!

顺便整理了一下,把上述代码做了一个demo,并新写了一滚动顶部固定的扩展插件;共同学习;

上面两个扩展方法中都用到了position:fixed;(IE6及更早浏览器不支持position属性的fixed参数值)此属性使元素不会随着滚动条移动。

源码下载:

http://pan.baidu.com/s/1yzPv4