jQuery插件的写法分享_Javascript教程-查字典教程网
jQuery插件的写法分享
jQuery插件的写法分享
发布时间:2016-12-30 来源:查字典编辑
摘要:1、概述先看看html代码复制代码代码如下:jQueryAsp.netSqlServerCSS比如我们要实现当光标移动到a标签上时,a标签向...

1、概述

先看看html代码

复制代码 代码如下:

<ul id="catagory">

<li><a href="#">jQuery</a></li>

<li><a href="#">Asp.net</a></li>

<li><a href="#">Sql Server</a></li>

<li><a href="#">CSS</a></li>

</ul>

比如我们要实现当光标移动到a标签上时,a标签向右移动一段距离,离开时a位置恢复。实现方法如下:

复制代码 代码如下:

$(document).ready(function() {

$("#catagory a").hover(function() {

$(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });

}, function() {

$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });

});

});

现在我们将这个方法进行扩展,写成jQuery插件的形式,以后也能在别的项目中使用,并且可以方便的更改一些属性值,现在我们来看看jQuery插件的写法。

2、jQuery插件的结构

下边这个结构应该是编写jQuery插件的一个比较好的结构,我将原作者的一些注释进行了相应的翻译。

复制代码 代码如下:

//为避免冲突,将我们的方法用一个匿名方法包裹起来

(function($) {

//扩展这个方法到jquery

$.fn.extend({

//插件名字

pluginname: function() {

//遍历匹配元素的集合

return this.each(function() {

//在这里编写相应代码进行处理

});

}

});

//传递jQuery到方法中,这样我们可以使用任何javascript中的变量来代替"$"

})(jQuery);

接下来,我们给插件中加入一些可以改变的属性,这样用户可以根据自己的需要来做一些更改。同时,我们应提供相应的默认值。

复制代码 代码如下:

(function($){

$.fn.extend({

//将可选择的变量传递给方法

pluginname: function(options) {

//设置默认值并用逗号隔开

var defaults = {

padding: 20,

mouseOverColor : '#000000',

mouseOutColor : '#ffffff'

}

var options = $.extend(defaults, options);

return this.each(function() {

var o = options;

//这里编写相应代码

//可以像下边这样获取变量值

alert(o.padding);

});

}

});

})(jQuery);

3、实现jQuery插件

复制代码 代码如下:

(function ($) {

$.fn.extend({

//插件名称 - paddingList

paddingList: function (options) {

//参数和默认值

var defaults = {

animatePadding: 10,

hoverColor: "Black"

};

var options = $.extend(defaults, options);

return this.each(function () {

var o = options;

//将元素集合赋给变量 本例中是 ul对象

var obj = $(this);

//得到ul中的a对象

var items = $("li a", obj);

//添加hover()事件到a

items.hover(function () {

$(this).css("color", o.hoverColor);

//queue false表示不添加到动画队列中

$(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });

}, function () {

$(this).css("color", "");

$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });

});

});

}

});

})(jQuery);

最后,使用插件的方法如下:

复制代码 代码如下:

//使用插件

$(document).ready(function() {

$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });

});

作者:朋友的你 来源:jQuery学习

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类