经常使用Jquery的各种插件,却对如何开发插件一无所知,以为是一件很麻烦的事儿?其实不然,下面通过一个简单的实例,来看一下Jquery Plugin的开发。

先看DEMO:动画菜单

不用插件如何实现以上效果:

$(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
}) });

JQuery插件结构

(function($){
//定义JQuery插件
$.fn.extend({ //插件名称
pluginname: function() {
//对选择出的每个Jquery对象执行操作
return this.each(function() { //插件代码 });
}
}); })(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);

动画菜单插件代码

(function($){
$.fn.extend({
//插件名 - 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);

全部测试代码

<!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({
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>

JQuery插件开发简单实例的更多相关文章

  1. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  2. jQuery简单实例

    jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...

  3. jQuery插件开发 - 其实很简单

    [前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...

  4. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  5. 【转】简单的jQuery插件开发方法

    在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用 ...

  6. jquery翻页turnjs简单实例

    jquery翻页turnjs简单实例<pre><div id="flipbook"> <div class="hard" styl ...

  7. PHP+jQuery开发简单的翻牌抽奖实例

    PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...

  8. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  9. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

随机推荐

  1. Android 笔记 day4

    单元测试

  2. C++ 定义全局数组

    数组怎么用,全局数组就怎么用,只是他的作用域不一样才叫全局数组... 在A.h 或 A.cpp中定义char buf[10]; 如果在B.cpp要用,就在其开头中写成 extern char buf[ ...

  3. SPSS回归分析结果解读【来自百度知道】

    R平方就是拟合优度指标,代表了回归平方和(方差分析表中的0.244)占总平方和(方差分析表中的0.256)的比例,也称为决定系数.你的R平方值为0.951,表示X可以解释95.1%的Y值,拟合优度很高 ...

  4. PHP 检查并创建多级目录

    <?php //检查并创建多级目录    function checkDir($path){        $pathArray = explode('/',$path);        $no ...

  5. HDU 3306 Another kind of Fibonacci(快速幂矩阵)

    题目链接 构造矩阵 看的题解,剩下的就是模板了,好久没写过了,注意取余. #include <cstring> #include <cstdio> #include <s ...

  6. ZeroMQ接口函数之 :zmq_inproc – ØMQ 本地进程内(线程间)传输方式

    ZeroMQ API 目录 :http://www.cnblogs.com/fengbohello/p/4230135.html ——————————————————————————————————— ...

  7. 最小生成树のprim算法

    Problem A Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Sub ...

  8. iOS UIView 动画浅谈

    UIView 等会效果简单实现,哪一个登录页面的demo来举例子吧. + (void)animateWithDuration:(NSTimeInterval)duration animations:( ...

  9. UUID

    首先我们要知道UUID是什么?有什么用?为什么要使用它? UUID是什么? UUID 的目的,是让分布式系统中的所有元素,都能有唯一的辨识资讯,而不需要透过中央控制端来做辨识资讯的指定.如此一来,每个 ...

  10. Siteserver-stl:searchOutput(搜索结果)自定义显示样式

    stl:searchOutput 自定义显示样式 自定义搜索提交表单需要在<stl:searchOutput>中嵌入显示搜索结果的标签,必须包含的标签 有<stl:pageConte ...