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

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

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. python3 装饰器

    #Author by Andy#_*_ coding:utf-8 _*_#装饰器的原则及构成:# 原则:# 1.不能修改被装饰函数的源代码.# 2.不能修改被装饰函数的调用方式.# 3.不能改变被装饰 ...

  2. css学习记录

    1 !important 表示此属性需要优先考虑: <head>    <title>Page Title</title>    <style type=&q ...

  3. （转）assert 断言式编程

    编写代码时,我们总是会做出一些假设,断言就是用于在代码中捕捉这些假设,可以将断言看作是异常处理的一种高级形式.断言表示为一些布尔表达式,程序员相信在程序中的某个特定点该表达式值为真.可以在任何时候启用 ...

  4. underscore源码解析 (转载)

    转载出自http://www.cnblogs.com/human/p/3273616.html (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.j ...

  5. angular-ui-router中的$stateProvider设置

    $stateProvider .state('contacts.list', { url: '', templateUrl: 'contacts.list.html' }) .state('conta ...

  6. XObject.java 对象还没写完，希望电脑不会丢失。坏笑，早点见。

    /*面向对象强调的是对象, 面向过程强调的是功能行为,打开行为,关闭行为,执行行为,把多个行为封装成对象执行更强大的功能就是面向对象,是把多个函数, 多 个行为封装在一起,单一的函数执行对象的功能太困 ...

  7. MyBatis Generator 详解

    MyBatis Generator中文文档 MyBatis Generator中文文档地址:http://mbg.cndocs.tk/ 该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看中 ...

  8. kaggle数据挖掘竞赛初步--Titanic<随机森林&特征重要性>

    完整代码: https://github.com/cindycindyhi/kaggle-Titanic 特征工程系列: Titanic系列之原始数据分析和数据处理 Titanic系列之数据变换 Ti ...

  9. 断言(assert)的用法

    我一直以为assert仅仅是个报错函数,事实上,它居然是个宏,并且作用并非“报错”. 在经过对其进行一定了解之后,对其作用及用法有了一定的了解,assert()的用法像是一种“契约式编程”,在我的理解 ...

  10. Leetcode 详解（Valid Number）

    Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...