因为工作需要，所以这几天琢磨了一下关于jQuery插件开发的问题，经过一天鏖战，终于完成自己动手做的第一个jQuery插件，对于俺这种见了css就蛋疼菊紧的人来说，一天时间8小时，保守估计有5个小时在弄css(我css文盲级别，形容得还不够贴切，如果说文盲不会写字，只会说话，那我是连话都不会说的级别。)，好了，废话少说，切入正题。

首先要了解jQuery插件开发分两种，1.类级别的插件开发。2.对象级别插件开发。

什么？ 你居然问什么是类级别和什么是对象级别？

好吧，你完胜爆菊！

类级别你可以理解为拓展jquery类，最简单的$.post(...);

对象级别则可以理解为基于对象的拓展，如$("#Me").fuck(...); 这里这个fuck呢，就是基于对象的拓展了。点到即止，想深入的童鞋请花RMB买书Or网上查资料,书上比俺介绍得更清楚。so...Next...

至于您要写一个什么东东呢？就轮到前面提到的类级别和对象级别的造型登场了，因为这写法大千世界无奇不有，千奇百怪，各有千秋，写法规范各种菊花发芽，俺就按俺觉得最简便的方法写了，Hava a Look!

<script type="text/javascript">
        jQuery.msg =function () {
            alert("123");
    　　 };         
    </script>
<script type="text/javascript">
        $(function () {
            $.msg();
        });
    </script>

类级别写法：jQuery.插件名称=function(){.....}；

调用方法：$.插件名称();

暴露参数这些东西，先暂时不提到。一步步来..

上面这玩意儿呢，弹出对话框插件，这么说，是先理解要紧，什么是插件，什么是类级别的插件？来看一下页面启动的效果，上图上真相，你懂的..

来比较一下对象级别插件写法：Go on!

(function($) {
$.fn.pluginName =function() {
// 代码区域。
};
})(jQuery);

对象级别写法：$.fn.插件名称 = function(){};多了一个fn,没错，是fn! fn!!! fn!!!

调用方法：$("#Me").插件名称();

稍微说一下，$.插件名称();是通过$访问调用jquery中的全局函数，直接可以通过jquery或者美元$调用，从而实现一些效果。

$("#Me").插件名称();是通过一个jquery对象所调用的一个函数，什么？ 你居然发现这个写法外面一层多了个东东？ 阿？ 你问怎么回事？

The First,我们必须先了解一下闭包这个玩意儿的造型（框架），Look!，这就是传说中用来开发jQuery插件的东东

（function($){
    //这里是您写东东的地方，不收地税，工商税，个人所得税等..放心大胆使用。
}）(jQuery);

这里function 后面的$参数，形参，在函数体内部的使用呢，$就是当前您当前整在调用该函数的对象了，这样就能干很多事了....你懂的。

用一个tabs面板切换插件来详细演示一下jQuery对象级别插件的具体开发,直接上代码。

首先上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">
<head>
    <title></title>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="jquery.tabs.js" type="text/javascript"></script>
    <link href="tabs.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
        $(function () {
            $("#mytabs").tabs();
        });
    </script>
</head>
<body>
    <!--tabs示例-->
    <div id="mytabs">
        <!--选项卡区域-->
        <ul>
            <li><a href="#tabs1">选项1</a></li>
            <li><a href="#tabs2">选项2</a></li>
            <li><a href="#tabs3">选项3</a></li>
        </ul>
        <!--面板区域-->
        <div id="tabs1">11111</div>
        <div id="tabs2">22222</div>
        <div id="tabs3">33333</div>
    </div>
</body>
</html>

再上插件源码：

/*

tabs面板插件，版本1.0(2011.08.24)

用法：$("#myDiv").tabs({switchingMode:"click"});

参数解释：switchingMode是面板切换的模式，如switchingMode:"mouseover"则鼠标移动至选项卡切换面板,默认为click。

整体tabs骨架不变，依然是常用的结构如下：

<div id="tabs">
    选项卡区域ul
    <ul>
        <li><a href="#div1">选项1</a></li>
        <li><a href="#div2">选项2</a></li>
    </ul>
    面板区域div
    <div id="div1">面板1</div>
    <div id="div2">面板2</div>
</div>

样式：此样式为默认无任何效果样式，可根据需要修改插件样式。

*/
; (function ($) {
    $.fn.tabs =function (options) {

        var defualts = { switchingMode: "click" };

        var opts = $.extend({}, defualts, options);

        var obj = $(this);

        var clickIndex =0;
        obj.addClass("tabsDiv");

        $("ul li:first", obj).addClass("tabsSeletedLi");
        $("ul li", obj).not(":first").addClass("tabsUnSeletedLi");
        $("div", obj).not(":first").hide();

        $("ul li", obj).bind(opts.switchingMode, function () {
            if (clickIndex != $("ul li", obj).index($(this))) {
                clickIndex = $("ul li", obj).index($(this));
                $(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");
                $(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");
                var divid = $("a", $(this)).attr("href").substr(1);
                $("div", obj).hide();
                $("#"+ divid, obj).show();
            };
        });

    };
})(jQuery);

接下来上插件样式：

body{background-color: black;}        
.tabsDiv{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;}
.tabsDiv ul{width: 500px;height: 20px;list-style: none;background-color: black;margin-bottom: 0px;margin: 0px;padding: 0px;}
.tabsDiv div{width: 500px;height: 330px;background-color: white;}
.tabsSeletedLi{width: 100px;height: 20px;background-color: white;float: left;text-align: center;}
.tabsSeletedLi a{width: 100px;height: 20px;color: black;}
.tabsUnSeletedLi{width: 100px;height: 20px;background-color: black;float: left;text-align: center;}
.tabsUnSeletedLi a{width: 100px;height: 20px;color: white;}

最终效果图，你懂的：

自己动手开发jQuery插件的更多相关文章

  1. 自己动手开发jQuery插件全面解析 jquery插件开发方法

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  2. 教你开发jQuery插件（转）

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  3. 快速开发 jQuery 插件的 10 大技巧（转）

    转自:http://www.oschina.net/news/41776/jquery-10-tips 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模 ...

  4. 快速开发 jQuery 插件的 10 大技巧

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. ...

  5. 开发JQuery插件(转)

    教你开发jQuery插件(转)   阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...

  6. 如何开发jQuery插件

    一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为,为JQuery 类添加一个静态方法. $.fn.extend(obje ...

  7. 开发jQuery插件的基本步骤

    在进行开发jQuery插件前,首先要了解一些知识: 1.闭包 1.1.闭包的作用: · 避免全局依赖 · 避免第三方破坏 · 兼容jQuery操作符'$'和jQuery 1.2.闭包的形式 (func ...

  8. 快速开发jQuery插件的10大技巧

    原文链接:http://wiki.itivy.com/?p=36 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & ...

  9. 快速开发 jQuery 插件的 10 大技巧(转)

    1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面.而方法可能应 ...

随机推荐

  1. 说说css3布局

    使用float属性或position属性布局的缺点 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&qu ...

  2. Vector & ArrayList 的主要区别

    1) 同步性:Vector是线程安全的,也就是说是同步的 ,而ArrayList 是线程序不安全的,不是同步的 数2. 2)数据增长:当需要增长时,Vector默认增长为原来一倍 ,而ArrayLis ...

  3. web前端性能优化

    性能优化对于用户体验无疑是非常重要的,下面介绍一些性能优化的方法. 1.减少HTTP请求 http请求越多,那么消耗的时间越多,如果在加上网络很糟糕,那么问题就更多了.且如果网页中的图片.css文件. ...

  4. [NOIP2014] 解方程&加强版 (bzoj3751 & vijos1915)

    大概有$O(m)$,$O(n\sqrt{nm})$,$O(n\sqrt{m})$的3个算法,其中后2个可以过加强版.代码是算法3,注意bzoj的数据卡掉了小于20000的质数. #include< ...

  5. [转发]dsdt解决睡眠唤醒死机

    登录 注册 首页 热门话题 最新发布   简单模式 详细模式 dsdt解决睡眠唤醒死机 Leave a reply 首先,感谢x5115x提供了一个相对比较完整的THINKPAD T410在MAC下的 ...

  6. php 如何造一个简短原始的数据库类用来增加工作效率

    class DBDA{ public $host="localhost"; public $uid="root"; public $pwd="123& ...

  7. 利用jquery实现网站中对应栏目下面内容切换效果。

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

  8. UIButton 的属性与方法

    UIButton *btn=[UIButtonbuttonWithType:UIButtonTypeCustom];//一般都是设置为该类型 btn.frame=CGRectMake(100, 80, ...

  9. Tengine 常用模块使用介绍

    Tengine 和 Nginx Tengine简介 从2011年12月开始:Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能 和特性. ...

  10. 第4章 jQuery的事件和动画（二）

    二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...