在jquery中，插件开发常见的有:

一种是为$函数本身扩展一个方法，这种是静态扩展(也叫类扩展)，这种插件一般是工具方法,

还有一种是扩展在原型对象$.fn上面的，开发出来的插件是用在dom元素上面的

一、类级别的扩展

         $.showMsg = function(){

             alert('hello,welcome to study jquery plugin dev');

         }

         // $.showMsg();

注意要提前引入jquery库， 上例在$函数上面添加了一个方法showMsg，那么就可以用$.showMsg()调用了

          $.showName = function(){

             console.log( 'ghostwu' );

         }

         $.showName();

这种插件比较少见，一般都是用来开发工具方法，如jquery中的$.trim, $.isArray()等等

二、把功能扩展在$.fn上,

这种插件就是用在元素上，比如，我扩展一个功能，点击按钮，显示当前按钮的值

$.fn.showValue = function(){

      return $(this).val();

}

        $(function(){

            $("input").click(function(){

                // alert($(this).showMsg());

                alert($(this).showMsg());

            });

        });

<input type="button" value="点我">

在$.fn上添加一个showValue方法， 返回当前元素的value值. 在获取到页面input元素，绑定事件之后，就可以调用这个方法，显示按钮的值 "点我"，在实际插件开发中，常用的就是这种.接下来，我们就用这种扩展机制开发一个简单的选项卡插件:

页面布局与样式：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>

     <style>

         #tab {

             width:400px;

             height:30px;

         }

         #tab li, #tab ul {

             list-style-type:none;

         }

         #tab ul {

             width:400px;

             height: 30px;

             border-bottom:1px solid #ccc;

             line-height: 30px;

         }

         #tab ul li {

             float:left;

             margin-left: 20px;

             padding:0px 10px;

         }

         #tab ul li.active {

             background: yellow;

         }

         #tab ul li a {

             text-decoration: none;

             color:#666;

         }

         #tab div {

             width:400px;

             height:350px;

             background-color:#ccc;

         }

         .clearfix:after{

             content: '';

             display: block;

             clear: both;

             height: 0;

             visibility: hidden;

         }

     </style>

     <script src="tab2.js"></script>

     <script>

         $(function(){

             $("#tab").tabs( { evType : 'mouseover' } );

         });

     </script>

 </head>

 <body>

     <div id="tab">

         <ul class="clearfix">

             <li><a href="#tab1">选项1</a></li>

             <li><a href="#tab2">选项2</a></li>

             <li><a href="#tab3">选项3</a></li>

         </ul>

         <div id="tab1">作者:ghostwu(1)

             <div>博客: http://www.cnblogs.com/ghostwu/</div>

         </div>

         <div id="tab2">作者:ghostwu(2)

             <div>博客: http://www.cnblogs.com/ghostwu/</div>

         </div>

         <div id="tab3">作者:ghostwu(3)

             <div>博客: http://www.cnblogs.com/ghostwu/</div>

         </div>

     </div>

 </body>

 </html>

tab2.js文件

 ;(function ($) {

     $.fn.tabs = function (opt) {

         var def = { evType: "click" }; //定义了一个默认配置

         var opts = $.extend({}, def, opt);

         var obj = $(this);

         $("ul li:first", obj).addClass("active");

         obj.children("div").hide();

         obj.children("div").eq(0).show();

         $("ul li", obj).bind(opts.evType, function () {

             $(this).attr("class", "active").siblings("li").attr("class","");

             var id = $(this).find("a").attr("href").substring(1);

             obj.children("div").hide();

             $("#" + id, obj).show();

         });

     };

 })(jQuery);

1，一个自执行函数，把插件封装成模块，把jQuery对象传给形参$

2，第3行，定义一个默认配置，选项卡的触发类型，默认为点击事件

3，第4行，如果opt传参，就用opt的配置，否者就用第3行的默认配置，这行的作用就是为了在不改变插件源码的情况下，可以配置插件的表现形式

4，第7-9行，让选项卡第一个div显示，其余的都隐藏，让第一个tab加上class='active' 黄色高亮选中

5，第11-16行，点击对应的选项卡，让对应的div显示与隐藏

[js高手之路]jquery插件开发实战-选项卡详解的更多相关文章

  1. [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战

    我们还是从一些现有的需求和问题出发,为什么会有set,他的存在是为了解决什么问题? 我们看一个这样的例子,为一个对象添加键值对 var obj = Object.create( null ); obj ...

  2. [js高手之路] es6系列教程 - Map详解以及常用api

    ECMAScript 6中的Map类型是一种存储着许多键值对的有序列表.键值对支持所有的数据类型. 键 0 和 ‘0’会被当做两个不同的键,不会发生强制类型转换. 如何使用Map? let map = ...

  3. [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

    所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...

  4. [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

    该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...

  5. [js高手之路] 设计模式系列课程 - jQuery的extend插件机制

    这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这 ...

  6. [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

    在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...

  7. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

  8. [js高手之路]打造通用的匀速运动框架

    本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...

  9. [js高手之路]面向对象版本匀速运动框架

    这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...

随机推荐

  1. 关于移动APP与Web APP的测试重点以及区别

    Web app测试重点: 1. 功能测试:功能的实现是否满足需求. 2. 性能测试: 2.1 链接速度测试:测试页面链接的速度 2.2 负载测试:web应用系统能允许多少个用户同时在线?超过这个数量会 ...

  2. docker~windows版本的安装与使用

    回到目录 在面向服务的框架里,docker扮演着十分重要的角色,他使你的部署更轻量,使运维更智能化,事实上微软自己的项目也已经用上了docker了,下面介绍一下在windows环境上使用docker的 ...

  3. CentOS的改变系统启动级别

    CentOS7改变系统启动级别   systemctl命令:   文本模式:systemctl set-default multi-user.target 图形模式:systemctl set-def ...

  4. Ambari 2.4.2 汉化

    1.ambari-web (1)apache-ambari-2.4.2-src/ambari-web/app/messages.js 该文件是KeyValue文件,3000多行.将Value部分翻译成 ...

  5. FreeRTOS——队列管理

    1. 队列主要用于任务与任务.中断与任务之间的消息传递. 2. 创建队列时,请注意队列中数据单元的长度. 3. 通常情况,队列被作为FIFO(先进先出)使用,即数据从队列尾写入,从队列首读.当然,数据 ...

  6. 如何在Shell中快速切换目录

    1.回到上一次进入的路经cd -2.回到Homecd ~3.自动补齐实例,cd /usr/src/redhat,可以用cd /u[TAB]s[TAB]r[TAB]4.!$ 表示上一个命令的最后一个参数 ...

  7. 构建 MariaDB Galera Cluster 分布式数据库集群（一）

    MariaDB Galera Cluster 介绍 简介 MariaDB集群是MariaDB同步多主机集群,仅支持XtraDB(详见本文结尾注释)/InnoDB存储引擎(虽然有对MyISAM实验支持 ...

  8. 奇葩app大盘点，你知道几个

    1.I'm Rich 这个App最奇葩.不仅奇葩,还无聊.炫富.浮夸,曾经荣耀一时的"劳资是土豪"应用,售价999.99美元,功能和它的简介一样粗暴,999美元买来的红钻石就是土豪 ...

  9. java利用接口和适配器进行完全解耦--参考《thinking in java》

    一.当使用父子类来实现以下东西时,其实是用了向上转型,这段代码的确简单了很多,复用性也很好,但是我们会发现Apply.process()和Processor类耦合过紧,其实apply.process( ...

  10. Ant 之bulid.xml详解

    ANT build.xml文件详解(一) Ant的概念 可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道 make这个命令.当编译Linux内核及一些软件的 ...