自己动手开发jQuery插件教程(2)

<div>
选项卡区域ul
<ul>
<li><a href="#div1">选项1</a></li>
<li><a href="#div2">选项2</a></li>
</ul>
面板区域div
<div>面板1</div>
<div>面板2</div>
</div>

样式：此样式为默认无任何效果样式，可根据需要修改插件样式。

复制代码 代码如下:

*/
; (function ($) {
$.fn.tabs = function (options) {
var defualts = { switchingMode: "click" };
var opts = $.extend({}, defualts, options);
var obj = $(this);
var clickIndex = 0;
obj.addClass("tabsDiv");
$("ul li:first", obj).addClass("tabsSeletedLi");
$("ul li", obj).not(":first").addClass("tabsUnSeletedLi");
$("div", obj).not(":first").hide();
$("ul li", obj).bind(opts.switchingMode, function () {
if (clickIndex != $("ul li", obj).index($(this))) {
clickIndex = $("ul li", obj).index($(this));
$(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");
$(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");
var divid = $("a", $(this)).attr("href").substr(1);
$("div", obj).hide();
$("#" + divid, obj).show();
};
});
};
})(jQuery);

接下来上插件样式：

复制代码 代码如下:

body{background-color: black;}
.tabsDiv{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;}
.tabsDiv ul{width: 500px;height: 20px;list-style: none;background-color: black;margin-bottom: 0px;margin: 0px;padding: 0px;}
.tabsDiv div{width: 500px;height: 330px;background-color: white;}
.tabsSeletedLi{width: 100px;height: 20px;background-color: white;float: left;text-align: center;}
.tabsSeletedLi a{width: 100px;height: 20px;color: black;}
.tabsUnSeletedLi{width: 100px;height: 20px;background-color: black;float: left;text-align: center;}
.tabsUnSeletedLi a{width: 100px;height: 20px;color: white;}

最终效果图，你懂的：

原文：

您可能感兴趣的文章: