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

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

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. centos 安装mongodb

    原文引用:http://blog.chinaunix.net/uid-24250828-id-3770298.html 官方网站: http://www.mongodb.org/ MongoDB 安裝 ...

  2. .net网站发布后的没有权限及被上传asp漏洞等问题

    前一阶段网站移到阿里云上,发现在线支付出现了问题,也接收不到银行返回的支付信息. 检查了源代码,发现是和支付有关的加密文件位置不对了,以前是放在e盘,现在新的是放在d盘,位置的信息是写死在代码中的.找 ...

  3. js多行省略

    $(function (){ // var $introduce = $(".c-introduce").html(); // $new_introduce = $introduc ...

  4. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  5. 数组中的toString，toLocalString，valueOf方法有什么区别

    1. 2.简单来说,tostring就是用字符串来代替对象.tolocalstring就是根据不同的语言环境吧对象转成字符串,实际上totolocalstring是有缺省参数的,如tolocalstr ...

  6. Web自动化测试学习方向（Selenium）

    目前越来越多的人想学自动化测试,认为自动化测试好牛逼.经常在测试交流群里看见有HR发招聘广告说:招初级(功能测试),招中级(性能测试),招高级(自动化测试)...... 我不去讨论他们这个初中高级的说 ...

  7. 【基本技能篇】>>第3篇《暗时间_指导学习的方法论——心得》

    暗时间——指导学习的方法论 ——2016年2月11日 打造自己的核心竞争力:①专业领域技能:②跨领域的技能(解决问题的能力,创新思维,判断与决策能力,表达沟通能力等等):③学习能力,持续学习和思考新知 ...

  8. gdb注意事项

    假设我当前有文件test.cpp,要gdb调试,先shell上执行:g++ test.cpp -o test -g 1. gdb调试针对的文件是debug模式的可执行文件. 上面-g参数即加上debu ...

  9. .netcore跨平台 之 windows上编译，ubuntu上运行

    1 下载并安装netcore sdk    下载地址 https://github.com/dotnet/cli 选取合适的版本下载安装即可 打开 CMD ,输入dotnet,出现以下信息说明已安装好 ...

  10. centos7 jexus在vmware下能访问，主机访问不了解决方案

    能PING通,访问不了web,先在CMD测试telnet ip 80看看是否是防火墙的问题. 修改防火墙,打开指定端口 1 安装iptables [root@centos ~]# yum instal ...