一直打算尝试自定义插件，终于付诸实践了，现在把内容发表出来，与大家共勉。

我是根据自己正在用的插件，模仿其源码，实现的自定义插件，完成之后，在网上看相关资料，对自定义插件部分，有了更明确的认识。

jquery自定义插件的两种方式：

一、jquery对象级插件——调用方法：$("#id").函数名(参数);

(function($){

　　$.fn.extend({

　　　　"函数名":function(自定义参数){

　　　　　　 //这里写插件代码

　　　　 }

});  })(jQuery);
或者

(function($){

　　$.fn.函数名=function(自定义参数){

　　　　//这里写插件代码

　　}

})(jQuery);

二、jquery类级别的插件——调用方法：$.函数名(参数);

(function($){

　　$.extend({

　　　　"函数名":function(自定义参数){

　　　　　　//这里写插件代码

　　　　}

　　});

})(jQuery);

或者

(function($){

　　$.函数名=function(自定义参数){

　　　　//这里写插件代码

　　}

})(jQuery);

自定义tab插件

css(jquery.tabs.css)

/**
 *tab 容器
 */
 .tabs-diy {
    width: 500px;
    height: 350px;
    margin:auto;
    border:1px solid #ccc;
}
/**
 *tab 选项区
 */
.tabs-diy ul {
    width: 500px;
    height: 20px;
    list-style: none;
    margin:0px;
    padding:0px;
    background-color: #aaa;
}
.tabs-diy ul li{
    width: 100px;
    height: 20px;
    float: left;
    text-align: center;
}
.tabs-diy ul li a{
    display:block;
    width: 100%;
    height: 18px;
    color: #333;
    text-decoration:none;
}
/**
 *tab 内容区
 */
.tabs-diy div {
    box-sizing: border-box;
    width: 500px;
    height: 330px;
    background-color: #eee;
    padding:10px;
}
/**
 *tab 选中 样式
 */
.seleted-li {
    background-color: #ddd;
}

.seleted-li a {
    color:#369;
    border-radius:3px;
    border:1px solid #999;
}

js(jquery.tabs.js)

(function($) {
    $.fn.tabs = function(options) {
        var defualts = { };
        var opts = $.extend(defualts, options);
        var obj = $(this);
        var clickIndex = 0;
        $("ul li:first", obj).addClass("seleted-li");
        $("ul li", obj).not(":first").addClass("unSeleted-li");
        $("div", obj).not(":first").hide();
        $("ul li", obj).bind("click",function() {
            if (clickIndex != $("ul li", obj).index($(this))) {
                clickIndex = $("ul li", obj).index($(this));
                $(".seleted-li", obj).removeClass("seleted-li");
                $(this).addClass("seleted-li");
                var divId = $("a", $(this)).attr("content-id");
                $("div", obj).hide();
                $("#" + divId, obj).show();
            };
        });
    };  
    $(document).ready(function () {
        $('.tabs-diy').each(function () {
          var $tabs = $(this);
          $tabs.tabs();
        });
    });  
})(jQuery);

html(tabs.html)

<!DOCTYPE html>
<html>
  <head>
    <title>自定义tab插件</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="jquery.tabs.css">
  </head>
 
  <body>
     <div id="mytabs" class="tabs-diy">
        <!--选项卡区域-->
        <ul>
            <li><a content-id="tabs1">选项1</a></li>
            <li><a content-id="tabs2">选项2</a></li>
            <li><a content-id="tabs3">选项3</a></li>
        </ul>
        <!--面板区域-->
        <div id="tabs1">选项11111111中的内容</div>
        <div id="tabs2">选项22222222中的内容</div>
        <div id="tabs3">选项33333333中的内容</div>
    </div>
    <script src="jquery.js"></script>
      <script src="jquery.tabs.js"></script>
  </body>
</html>
效果图

注意事项：

　　(1)js,css,html放在同一文件夹下，并要引入jquery.js

　　(2)如果js,css,html不在同一文件夹下，请更改html中的引用路径。

　　(3)此结果为试验版，如果觉得样式不好看，可以自己更改。

　　（该文仅供学习交流。如有不同观点，欢迎留下宝贵意见~）

jquery自定义插件——以 选项卡插件为例的更多相关文章

  1. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  2. [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件

    jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...

  3. Jquery自定义图片上传插件

    1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...

  4. jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...

  5. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  6. [js插件开发教程]实现一个比较完整的开源级选项卡插件

    在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>>   [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...

  7. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  8. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  9. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

随机推荐

  1. Ubuntu16.04安装Samba

    在新装的ubuntu16.04下安装samba. 安装好samba后备份下配置文件: zhuben@zb:~$ sudo apt-get install samba zhuben@zb:~$ cd / ...

  2. 发生tcp丢包（拥堵、超时）重传

    可以根据wireshark的Seq序列号和Ack序列号来进行详细分析. 可见,网络丢包(可能是网络拥堵.也有可能是骨干网上有"防火墙"故意随机丢包,因为这个服务器的IP放在国外)对 ...

  3. java对国际化的支持

    国际化的英文为Internationalization,这个也太长了,所以它又称为I18n(英文单词 internationalization的首末字符i和n,18为中间的字符数). 除了i18n还有 ...

  4. AxureRP8实战手册（基础31-40）

    AxureRP8实战手册(基础31-40) 本文目录 基础31.     切换元件库 第2章          页面设置 基础32.     设置页面居中 基础33.     设置页面背景(图片/颜色 ...

  5. [Java] 特殊正则－替换字符串

    public class Test { public static void main(String[] args) { String str = "2412rhttp://192.168. ...

  6. 去除 Google 重定向

    1. 安装插件 redirector : https://code.google.com/p/chrome-redirector/ 2. 配置规则,如下: 匹配:https?://www\.googl ...

  7. 为 iTween 指定特定的回调 : onupdate, oncomplete

    问题地址:Specifying a delegate for the value of onupdate in iTween 1.找到 void CallBack 2.修改以下代码: void Cal ...

  8. document.all.wb.ExecWB

      <%@ page language="java" pageEncoding="UTF-8"%>   <%@ taglib uri=&quo ...

  9. 深入浅出Mybatis系列（二）---配置简介（mybatis源码篇）

    上篇文章<深入浅出Mybatis系列(一)---Mybatis入门>, 写了一个Demo简单体现了一下Mybatis的流程.本次,将简单介绍一下Mybatis的配置文件: 上次例子中,我们 ...

  10. dp 动态规划 hdu 1003 1087

    动态规划就是寻找最优解的过程 最重要的是找到关系式 hdu 1003 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 题目大意:求最大字序列和, ...