在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. 【微信小程序】wx.openLocation调取失败

    在调取地图的时候发现,wx.openLocation的方法在模拟器和安卓手机上都可以用,在苹果手机上报错. 报错为调取失败:fail invoke too frequently             ...

  2. rsync安装及其配置

    服务端配置安装 服务器 第一步: 下载rsync 安装包(在线安装或者线下安装)         wget https://download.samba.org/pub/rsync/rsync-3.1 ...

  3. MongoDB的Windows安装

    一.下载MongoDB安装文件 下载地址:http://pan.baidu.com/s/1nvEuDD3 二.双击下载的文件,根据向导一直到finish.比如安装目录为 d:\mongodb 1.创建 ...

  4. jquery html5 file 上传图片显示图片

    jquery js 的代码:不同浏览器下的路径 //建立一個可存取到該file的url function getObjectURL(file) {     var url = null ;     i ...

  5. (转)springMVC框架下JQuery传递并解析Json数据

    springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...

  6. 深入浅出数据结构C语言版（10）——树的简介

    到目前为止,我们一直在谈论的数据结构都是"线性结构",不论是普通链表.栈还是队列,其中的每个元素(除了第一个和最后一个)都只有一个前驱(排在前面的元素)和一个后继(排在后面的元素) ...

  7. 第一个asp.net实例——生日邀请以及回函

    22回校后,看了论文游了西湖,今天开始接触asp.net,从图书馆选了两本书:<精通ASP.NET 4.5 (第五版)>,<ASP.NET全能速查手册>.一本练手细看,一本翻查 ...

  8. Android学习笔记- ButterKnife 8.0注解使用介绍

    前言: App项目开发大部分时候还是以UI页面为主,这时我们需要调用大量的findViewById以及setOnClickListener等代码,控件的少的时候我们还能接受,控件多起来有时候就会有一种 ...

  9. factorOne cannot be&nb…

    factorOne cannot be resolved or is not a field 现象描述: Eclipse的使用时会在代码处出现警告factorOne cannot be resolve ...

  10. java_弹球小游戏

    弹球游戏实现原理: 隔一定时间(小于1秒)重新绘制图像,因为Graphics类是一个抽象类,创建子类的时候需要把所有涉及的方法都得重写,所以这里使用的是创建Canvas的子类,只需要重写它的paint ...