国庆过去一周多了,作为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();

});

效果如下:

写到这里,还想再优化下,在引用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

编写jQuery插件--实现返回顶部插件的更多相关文章

  1. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  2. vue点击返回顶部插件vue-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...

  3. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  4. 使用jQuery简单实现返回顶部的一个小案例

    1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...

  5. javascript返回顶部插件+源码

    javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...

  6. jQuery中页面返回顶部的方法总结

    当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一 锚点定位 ? 1 <a href="#" class ...

  7. 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

    这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...

  8. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  9. Jquery回到顶部插件【query.scrollUp.js】使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

随机推荐

  1. WCF的ABC

    首先: WCF的全称是Windows Communication Foundation,Windows通信基础的意思,是Microsoft为构建面向服务的应用程序而提供的统一编程模型,它整合.NET平 ...

  2. div 显示滚动条的CSS代码

    div 显示滚动条的CSS代码   div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border ...

  3. Android市场官方的统计信息

    做Android应用和游戏,避免不了的要了解市面上的各种android设备的信息,以最大程度的兼容更多的设备. Android市场会定期发布统计信息,包括SDK版本,屏幕大小和分辨率,OpenGL E ...

  4. Memcached source code analysis -- Analysis of change of state--reference

    This article mainly introduces the process of Memcached, libevent structure of the main thread and w ...

  5. Google(谷歌)中国工程研究院 工程师 方坤 对学生朋友的一些建议

    对学生朋友的一点建议 发表者:Google(谷歌)中国工程研究院工程师 方坤 自去年春天加入谷歌,我曾多次随公司校园招聘团队一起走访各地院校,帮助公司发掘人才 .利用这样的出差机会到处走走看看,饱览祖 ...

  6. centos 7 下modelsim10.2c安装教程

    step1: chmod +x ./install.linux(但是没有任何反应,原因是install.linux是32位程序,系统是64位的,所以要安装相应的库){ yum install glib ...

  7. C#控制台输入

    学习C语言后,在学习C#会有一个很不适应的小毛病.那就是在C语言里面你可以在一行输入好几个数字或是字母然后分别赋给相应的变量.可是在C#里面就不一样了,它只能读取一行.要实现一个一个变量赋值那就只有一 ...

  8. 在重命名SqlServer数据库是,报5030错误的解决办法

    数据库不能重名名5030的错误,其实很简单原因就是有应用程序正在占用这个连接,使用这样一行命令就可以查询出正在占用的连接 use master select spid from master.dbo. ...

  9. Fragment的数据传递

    开发之中用到的Fragment的次数越来越多,很多小的项目都已经直接在使用Fragment作为Activity的载体来切换页面.而在开发之中页面的切换我们最关心的问题就是数据的传递了.今天我们主要来研 ...

  10. ios registerNib: and registerClass:

    先看看apple官网简述: registerNib:forCellWithReuseIdentifier: Register a nib file for use in creating new co ...