jQuery插件的创建方法

一周前看到小谢发布自己的第一个jQuery插件-Xslider，对谢同学的崇敬之情顿时油然而生。于是这几天看到相关内容都留意一下，琢磨着啥时候也整一个自己的插件。要下定决心潜心研究jQuery的内部工作机制并创建一个作品，本身就是个不小的困难，而面对貌似不可能完成的困难，总是容易让我产生不愿向前一步的惰性，为了克服自身问题，还是按照习惯的学习方法，逆向工程学习法——张鑫旭大哥介绍了一个不错的文字信息提示插件——Colortip，就从对这个插件的研究入手结合官方教程，来认识jQuery插件的创建方法。

当然，这样的学习方法虽然容易上手能在较短时间里产出，却以牺牲规范性为代价，有很多不严谨的地方也在所难免。而在此过程中我也会将更多的精力放在插件的结构而不是功能的实现细节和最终效果上。

第一步

我们首先要做的是按我们需要的扩展功能来创建jQuery对象。在这里，我希望为页面中class为“tip”的元素添加文字提示信息。先创建一个jquery.tooltip.js文件并保存以下代码：

(function($){

$.fn.tooltip = function() {

};

})(jQuery);

一些教程里认为应该避免使用$符号，因为这可能造成冲突。关于$()函数的冲突，jQuery中给出了解决方法：jQuery.noConflict()。

第二步

接下来要做的是构造功能函数，以便于用户调用相应功能。为了使我们的插件尽可能灵活我们还可以提供一些默认参数，这样用户使用插件时就不用手动更新参数列表。我们可以使用jQuery的extend方法做到这一点。

(function($){

$.fn.tooltip = function(options) {

var defaults = {

color: ‘#ffffff’,

tipColor: ‘#000000’

};

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

// 在这里添加我们插件要实现功能所需的具体代码

};

})(jQuery);

第三步

这就是我们自己的插件的最终长相啦。jquery.tooltip.js中的全部内容：

(function ($) {

$.fn.tooltip = function (options) {

var defaults = {

color: ‘#ffffff’,

tipColor: ‘#000000’

};

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

$(this).hover(

function () {

$(this).append($(‘<div class=”tooltip” style=”color:’ + options.color + ‘; background-color:’ + options.tipColor + ‘;”>’ + $(this).attr(‘title’) + ‘ <div class=”tip-bottom”></div></div>’));

}, function () {

$(this).find(‘.tooltip’).remove();

});

};

})(jQuery);

第四步

现在就差在网页中调用插件包啦。要看到插件效果，你需要为给每个link或href类的title属性加入提示文本。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>Kainy.CN | Build My jQuery Plugin</title>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js”></script>

<script type=”text/javascript” src=”build_my_jquery_plugin/jquery.tooltip.js”></script>

<script>

$(document).ready(function() {

$(‘.tip’).tooltip({

color: ‘#fff’,

tipColor: ‘#333’

});

});

</script>

<style>

.tip{

position:relative;

top:85px;

left:50px;

}

.tip{text-decoration:none!important;}

.tooltip{

display:inline;

font-size:12px;

position:absolute;

bottom:40px;

left:-10%;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

background-color:#000;

border:1px solid #333;

color:#FFF;

text-align:center;

text-shadow:0px 1px #000;

min-width:180px;

padding:5px;}

.tip-bottom{

position:absolute;

bottom:-11px;

left:20%;

width:23px;

height:11px;

background-image:url(‘build_my_jquery_plugin/tip.png’);

background-repeat:repeat;

}

.notice{

padding:10px;

background-color:#FF6;

color:#000;

border:2px solid #FC3;

text-shadow:0px 1px #FFC;

}

</style>

</head>

<body>

<div class=”notice”>将鼠标移到链接上查看插件效果!</div>

<a href=”http://kainy.cn/?p=1567″ title=”查看原文：jQuery插件的创建方法” class=”tip”>Continue Reading</a>

</body>

</html>