您的位置：首页 > Web前端 > JQuery

实用简单的jquery插件教程（转）

2011-05-01 01:14 639 查看


实用简单的jquery插件教程（翻译/转）
收藏

实用简单的jquery插件教程（翻译）
2009-06-04 10:37
概述：这篇教程将介绍如何创建一个简单的jquery插件，并且允许用户改变一些设置。我用的是我自己的jQuery教程－（Menu with jQuery Animate effect）并把菜单转换成插件。

1、引言


开发jQuery插件是一个高级的话题对于jQuery初学者。这个月，我一直在加强学习jQuery。尽管我学习如何把javascript代码和
html文档分开。当我看到我自己的javascipt文件时，我并不满意。它太脏乱，所以我决定更近一步－学习如何开发jQuery插件来整理
javascript文件。

这个插件是基于我以前的教程－ Navigation List menu + jQuery Animate Effect Tutorial
。上次，我写编写的脚本都把代码放到 document.ready段落中，就像下面的代码。

$(document).ready(function() {

$('ul#menu li:even').addClass('even');

$('ul#menu li a').mouseover(function() {

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

}).mouseout(function() {

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

}).click(function() {

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

});

});

但是现在，我想展现一些东西像这样：

$(document).ready(function() {

$(#menu).animateMenu({

padding:20

})

});

它开起来更好，而且容易复用这些脚本在另一个工程中。

2、插件结构


jQuery 官方网站提供了非常详细的说明在 Plugins/Authoring
页面。 然而，我发现它非常难以理解。

没关系，为了使生活更容易，我在线做了一些调研，下面的小段用来开发插件将是一个非常好的结构。

//为了避免冲突，你需要一个匿名函数来包装你的函数

(function($){

//给jQuery附加一个新的方法

$.fn.extend({

//这儿就是你要开发插件的名子

pluginname: function() {

//迭代当前匹配元素集合

return this.each(function() {

//插入自己的代码

});

}

});

//传递jQuery参数到函数中，

//因此我们能使用任何有效的javascipt变量名来替换“$“符号。但是我们将坚持使用 $ (我喜欢美元符号：)

)(jQuery);

2、带有可选项的插件

如果你看了第一步的介绍,"padding
"值对于这个插件是用户配置的。他有利于一些设置，所以用户能改变设置根据他们自己的需要。请确定你为每一个变量指定了默认值。现在，你血药如下的代码：

(function($){

$.fn.extend({

//pass the options variable to the function

pluginname: function(options) {

//Set the default values, use comma to separate the settings, example:

var defaults = {

padding: 20,

mouseOverColor : '#000000',

mouseOutColor : '#ffffff'

}

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

return this.each(function() {

var o = options;

//code to be inserted here

//you can access the value like this

alert(o.padding);

});

}

});

})(jQuery);

3、动态菜单插件

现在你学习了插件的结构。紧接着是我基于以前教程的开发的插件。我成功的专程标准的jQuery脚本到插件它允许4个配置：

1）、 animatePadding : 给animate 效果设置”padding“值

2）、 defaultPadding : 给padding设置默认的值

3）、evenColor :设置偶数行事件的颜色

4）、oddColor : 设置奇数行事件的颜色

(function($){

$.fn.extend({

//plugin name - animatemenu

animateMenu: function(options) {

//Settings list and the default values

var defaults = {

animatePadding: 60,

defaultPadding: 10,

evenColor: '#ccc',

oddColor: '#eee'

};

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

return this.each(function() {

var o =options;

//Assign current element to variable, in this case is UL element

var obj = $(this);

//Get all LI in the UL

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

//Change the color according to odd and even rows

$("li:even", obj).css('background-color', o.evenColor);

$("li:odd", obj).css('background-color', o.oddColor);

//Attach mouseover and mouseout event to the LI

items.mouseover(function() {

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

}).mouseout(function() {

$(this).animate({paddingLeft: o.defaultPadding}, 300);

});

});

}

});

})(jQuery);

4、完整的源代码

你可以保存这个插件再一个单独的文件。（例如：jquery.animatemenu.js）.在这个教程中，我把脚本放到html文档中

<!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
" lang="en" xml:lang="en">

<head>

<title></title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script
>

<script>

(function($){

$.fn.extend({

//plugin name - animatemenu

animateMenu: function(options) {

var defaults = {

animatePadding: 60,

defaultPadding: 10,

evenColor: '#ccc',

oddColor: '#eee',

};

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

return this.each(function() {

var o =options;

var obj = $(this);

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

$("li:even", obj).css('background-color', o.evenColor);

$("li:odd", obj).css('background-color', o.oddColor);

items.mouseover(function() {

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

}).mouseout(function() {

$(this).animate({paddingLeft: o.defaultPadding}, 300);

});

});

}

});

})(jQuery);

</script>

<script type="text/javascript">

$(document).ready(function() {

$('#menu').animateMenu({animatePadding: 30, defaultPadding:10});

});

</script>

<style>

body {font-family:arial;font-style:bold}

a {color:#666; text-decoration:none}

#menu {list-style:none;width:160px;padding-left:10px;}

#menu li {margin:0;padding:5px;cursor:hand;cursor:pointer}

</style>

</head>

<body>

<ul id="menu">

<li>Home</li>

<li>Posts</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

我希望这个教程能让你日哦给你容易的理解。它一点都不难对于创建插件。我是不情愿地了解在第一，但现在，我意识到这是多么简单。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航