通过上一个基础篇我们知道插件的格式，这次我来写一个tab插件

$(function() {

   $.fn.插件名称 = function(options) {

      var defaults = {

         Event : "click",        //触发响应事件

         msg : "Holle word!"        //显示内容

      };

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

      var $this = $(this);        //当然响应事件对象

      //功能代码部分

      //绑定事件

      $this.live(options.Event,function(e){

         alert(options.msg);

      });

   }

});

直接贴代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css" media="screen">

        *{margin:0;padding: 0;}

        li{list-style: none}

        .lee_ul{overflow: hidden;zoom:1;}

        .lee_ul1{overflow: hidden;zoom:1;}

        li{width: 100px;height: 30px;float: left;}

        li.active{background: red;}

        li.current{background: red;}

        .lee_main div{display: none;background: #ccc;width: 300px;}

        .lee_main .active{display: block;}

        .lee_main1 div{display: none;background: #ccc;width: 300px;}

        .lee_main1 .current{display: block;}

    </style>

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

        ;(function($){

            $.fn.lee_tab=function(options){

                var defaults={

                    //各种参数，各种熟悉

                    activeClass:'active',

                    tabNav:'.lee_ul>li',

                    tabCon:'.lee_main>div',

                    eventType:'click'

                }

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

                this.each(function(){

                    //实现功能的代码

                    var _this=$(this);

                    _this.find(options.tabNav).on(options.eventType,function(){

                        $(this).addClass(options.activeClass).siblings().removeClass(options.activeClass);

                        var index=$(this).index();

                        _this.find(options.tabCon).eq(index).show().siblings().hide();

                    });

                });

                return this;

                alert(this);

            }

        })(jQuery);

        $(function(){

            $('.lee_tab').lee_tab();

            $('.lee_tab2').lee_tab({

                activeClass:'current',

                tabNav:'.lee_ul1>li',

                tabCon:'.lee_main1>div',

                eventType:'mouseover'

            });

        })

    </script>

</head>

<body>

    <div class="lee_tab">

        <ul class="lee_ul">

            <li class="active">1</li>

            <li>2</li>

            <li>3</li>

        </ul>

        <div class="lee_main">

            <div class="active">11</div>

            <div>22</div>

            <div>33</div>

        </div>

    </div>

    <div style="clear:both;"></div>

    <div class="lee_tab2">

        <ul class="lee_ul1">

            <li class="current">1</li>

            <li>2</li>

            <li>3</li>

        </ul>

        <div class="lee_main1">

            <div class="current">11</div>

            <div>22</div>

            <div>33</div>

        </div>

    </div>

</body>

</html>

学会自己写jQuery插件（二）---自己写的tab插件的更多相关文章

  1. jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮

    干货jquery插件分享之tab. tab 选项卡切换,在日常开发中也是一种比较常见的呈现控件,今天这个tab控件效果还是蛮喜欢的,推荐给大家有用到的场景可以试试: tabulous.js A jQu ...

  2. 10分钟学会写Jquery插件

    最近很多网友说jquery插件是什么啊?怎么写的啊?我不会写啊?   一大堆的问题一时都不知道怎么回答他们,个人认为是网友们把问题复杂化了. 其实就是把一些常用.实用.通用的功能封装起来而以,简单的来 ...

  3. 学会自己写jQuery插件（一）---基础

    第一步:定义插件 $(function() { $.fn.插件名称 = function(options) { var defaults = { Event : "click", ...

  4. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  5. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  6. 什么？你还不会写JQuery 插件

    前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...

  7. 写JQuery 插件 什么？你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

  8. 写jQuery插件

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  9. 用实例一步步教你写Jquery插件

    最近Web应用程序中越来越多地用到 了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时 ...

随机推荐

  1. STL容器 -- Vector

    核心:Vector 是 STL 里的一个向量容器,可以像数组那样进行随机访问,能在尾部插入元素,对于元素的删除和插入可以动态管理内存. 头文件: #include <vector> 构造函 ...

  2. 洛谷P3459 [POI2007]MEG-Megalopolis [树链剖分]

    题目传送门 MEG 题目描述 Byteotia has been eventually touched by globalisation, and so has Byteasar the Postma ...

  3. Python的环境搭建——万丈高楼平地起

    Python的环境搭建,远程连接,端口映射,虚拟机 写在正文之前 python语言的开发环境还是相对比较简单的,但是也是有很多需要注意的地方,对于初次接触python或者以前很少用到虚拟环境的朋友来说 ...

  4. supervisor控制台运行出错，BACKOFF Exited too quickly

    需要把虚拟环境中的flask路径导入,我这里是 export PYTHONPATH=$PYTHONPATH:/root/FlaskWebDevelopment/venv/lib/python2.7/s ...

  5. Opencv学习笔记2：图像模糊作用和方法

    一.意义和作用: 图像的模糊处理就是将图片处理的更加模糊,如下图,左侧是原图,右侧是经过处理之后的图片. 从主观意愿上说,我们希望看到清晰的图像,而不是模糊的图像.所以很多时候我们听说还有一种专门进行 ...

  6. 【hihoCoder 1513】小Hi的烦恼

    http://hihocoder.com/problemset/problem/1513 h[j][i]记录第j个学科排名小于等于i的状态,bitset压位就可以了. #include<bits ...

  7. [CodeForces-178F]Representative Sampling

    题目大意: 给你n个字符串,要求从中选出k个字符串,使得字符串两两lcp之和最大. 思路: 动态规划. 首先将所有的字符串排序,求出相邻两个字符串的lcp长度(很显然,对于某一个字符串,和它lcp最长 ...

  8. poj 1456 贪心+STL

    题意:有n个商品,每个商品如果能在截止日期之前售出就会获得相应利益,求能获得的最大利益 一开始对每个时间进行贪心,后来发现后面的商品可以放到之前来卖,然后就wa了 这里就直接对价格排序,把物品尽量放到 ...

  9. c# -- Form1_Load()不被执行的三个解决方法

    我的第一个c#练习程序,果然又出现问题了...在Form1_Load() not work.估计我的人品又出现问题了. 下面实现的功能很简单,就是声明一个label1然后,把它初始化赋值为hello, ...

  10. iOS开发系列——内购、GameCenter、iCloud、Passbook系统服务开发汇总

    社交 Social 现在很多应用都内置“社交分享”功能,可以将看到的新闻.博客.广告等内容分享到微博.微信.QQ.空间等,其实从iOS6.0开始苹果官方就内置了Social.framework专门来实 ...