经常使用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. 二分K-means算法

    二分K-means聚类(bisecting K-means) 算法优缺点: 由于这个是K-means的改进算法,所以优缺点与之相同. 算法思想: 1.要了解这个首先应该了解K-means算法,可以看这 ...

  2. JAVA基础中的注意点（二）

    1.数组 a.特点:同种数据类型:数组类型一旦确定就不能改变. 连续空间存放:数据空间是连续的. 空间长度:数组有自己的长度,初始化的时候需要定义. 数组的下标:从0开始,第一个数组元素下标为0,最后 ...

  3. Android取得图库图片的具体地址

    protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResu ...

  4. jvm中的年轻代 老年代 持久代 gc

    虚拟机中的共划分为三个代:年轻代(Young Generation).老年代(Old Generation)和持久代(Permanent Generation).其中持久代主要存放的是Java类的类信 ...

  5. 传智播客DotNet面试题

    技术类面试.笔试题汇总(整理者:杨中科,部分内容从互联网中整理而来) 注:标明*的问题属于选择性掌握的内容,能掌握更好,没掌握也没关系. 下面的参考解答只是帮助大家理解,不用背,面试题.笔试题千变万化 ...

  6. three.js自定义形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. bzoj 2753: [SCOI2012] 滑雪与时间胶囊 Label:MST

    题目描述 a180285非常喜欢滑雪.他来到一座雪山,这里分布着M条供滑行的轨道和N个轨道之间的交点(同时也是景点),而且每个景点都有一编号i(1<=i<=N)和一高度Hi.a180285 ...

  8. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  9. ZeroMQ接口函数之 ：zmq_errno – 返回errno的值给调用此函数的线程

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_errno zmq_errno(3)         ØMQ Manual - ØMQ/3.2.5 Name zm ...

  10. 五分钟理解一致性哈希算法(consistent hashing)

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/23397179 一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法 ...