一直打算尝试自定义插件，终于付诸实践了，现在把内容发表出来，与大家共勉。
我是根据自己正在用的插件，模仿其源码，实现的自定义插件，完成之后，在网上看相关资料，对自定义插件部分，有了更明确的认识。
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 {
500px;
height: 350px;
margin:auto;
border:1px solid #ccc;
}
/**
*tab 选项区
*/
.tabs-diy ul {
500px;
height: 20px;
list-style: none;
margin:0px;
padding:0px;
background-color: #aaa;
}
.tabs-diy ul li{
100px;
height: 20px;
float: left;
text-align: center;
}
.tabs-diy ul li a{
display:block;
100%;
height: 18px;
color: #333;
text-decoration:none;
}
/**
*tab 内容区
*/
.tabs-diy div {
box-sizing: border-box;
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)此结果为试验版，如果觉得样式不好看，可以自己更改。
（该文仅供学习交流。如有不同观点，欢迎留下宝贵意见~）