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

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

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. .net 导出Excel功能

    将DataSet对象导出成Excel文档 一.不带格式控制 void btnExport_Click(object sender, EventArgs e) { IList<string> ...

  2. mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性

    timestamp有两个属性,分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种,使用情况分别如下: 1.CURRENT_TIMESTAMP 当要向 ...

  3. VMware中linux配置1-安装VMware tool 共享文件夹

    linux:ubuntu 14 安装Linux,使用的ubuntu-14.04.1-desktop-amd64.iso 安装的,这个就不写了. 为了在linux中访问windows的目录,需要安装VM ...

  4. 关于正则表达式中参数/g /m的详细分析和例子详解

    总结1:参数/g的用法 表达式加上参数g之后,表明可以进行全局匹配,注意这里"可以"的含义.我们详细叙述: 1)对于表达式对象的exec方法,不加入g,则只返回第一个匹配,无论执行 ...

  5. First commit

    今天是2016年11月14日.天气晴. 第一篇博客,准备在这里记录下我学到的技术,希望能够坚持下来.^.^

  6. vbscript input select 添加个option根据value值到指定位置--相当于排序

    '添加option到指定位置(按value排序) dim valindex valindex=-1 for i=0 to selcom.length-1 if selcom.Options(i).va ...

  7. window.location.href无法跳转的解决办法

    -------------------接收别人做的SSO单点登录项目,无源码,只是点击登出按钮一直不跳转. 原因是: <a href="javascript:;" oncli ...

  8. CentOS6.4下基于Nginx搭建mp4/flv流媒体服务器

    我的步骤如下:1. 安装依赖包: yum install glibc.i686#yum –y update#yum -y install gcc glibc glibc-devel make nasm ...

  9. PHP注册审核做法

    1.注册页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  10. 苹果公布WWDC2016时间 并做了个程序员情怀网页

    新浪手机讯 4月19日上午消息,苹果公司今日正式确定2016年全球开发者大会(WWDC)开幕时间:6月13-17日,并做了个非常有意思的代码风格页面. 网友戏称这个页面只有程序员们才能看懂,它的首页是 ...