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" });
});
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]