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.extend 函数详解JQuery的extend扩展方法:Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。一、Jquery的扩展方法原型是:
jQuery自定义插件 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数。然而,有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。 jQuery库是为了加快JavaScript的开发速度...
些年,javascript火起来了,主要归功于AJAX的推广应用,Web2.0的发展。。。于是,出现了很多的javascript框架。
jQuery方法: 大部分jQuery插件都是这种类型的插件,由于这种插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势。 2. 全局函数: 也可以把自定义的功能函数...
本文实例讲述了jQuery validate插件功能与用法。分享给大家供大家参考,具体如下: 前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多...
7.9 自定义jQuery插件/224 7.9.1 插件的种类/225 7.9.2 插件开发要点/225 7.9.3 开发插件示例/226 7.10 综合案例分析—使用uploadify插件实现文件上传功能 /232 7.10.1 需求分析/232 7.10.2 效果界面/233 7.10...
7.2 验证插件validate 7.3 表单插件form 7.4 cookie插件cookie 7.5 搜索插件autocomplete 7.6 图片灯箱插件notesforlightbox 7.7 右键菜单插件contextmenu 7.8 图片放大镜插件jqzoom 7.9 自定义...
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现。此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件。此外,它的外观样式是可自定义的,扩展性很强。
在jQuery 1.2版本中,如果你指明了一个JSONP回调函数,你就可以从其它的域中载入JSON类型的数据,写法类似于 "myurl?callback=?" 。jQuery会自动调用正确的方法名称来代替查询字符串,执行你指定的回调函数。...
这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦。没办法由于需求下来了,只能按...最终结果如下图 先分析下jQuery这边的插件写法吧 AJAX加载有jQuery Ajax完成 代码如下: $.
HelpFill是一款chrome浏览器(360极速浏览器)插件,适用场景:需要多次对一个表单填写相同的数据或者每次填写的数据不同的情况。 ##说明: 选择器使用的是jquery的选择器,包含所有jquery支持的选择器 检验(非强...
自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上、下、左、右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置。JQ里面有些重复的地方,暂时没想到更好的方法去精简。不过效果还是可以的...
四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效果(锁屏效果)、TAB菜单.、CHECKBOX的全选或反选效果以及图片的惰性加载效果等,让其...
processData: function(data){ }//自定义处理返回的数据,该方法可以return一个html字符串或jquery对象,将被写入到提示的下拉层中。 右键查看源码,将看到本demo所编写的processData函数是怎样的,所以这个参数是把...
DTCMS V1.0 Beta2 ACCESS版源码 系统介绍: 动力启航(www.it134.cn)是一个以ASP.NET(C#)+jQuery技术为中心,面向软件...注:ACCESS版和MSSQL版的功能和界面是一样的,他们除了DAL之外,还有很多地方写法不一样的!
\contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...