<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab 插件封装</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style>
.tab{ width:98%;}
.tab_menu ul{ width:98%; list-style:none;}
.tab_menu li{ list-style:none; float:left; margin-right:4px; display:block; border-right:#4488BB solid 1px;border-left:#4488BB solid 1px; border-top:#4488BB solid 1px; cursor:pointer; color:#000; height:20px; width:auto; padding:5px;}
.tab_box{ border:solid #4488BB 1px; padding:4px; height:auto; width:98%; float:left;}
.tab_selected{ background:#4488BB;}
.tab_displayNone{ display:none;}
li{ background:#EEEEEE; list-style:none;}
</style>
<script type="text/javascript" src="js/jquery.tab.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$(".tab").XQHTab({tabWidth:‘500px‘,autoHeight:‘400px‘});
});
</script>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="tab_selected">JQuery</li>
<li>ExtJs</li>
<li>Sliverlight</li>
</ul>
</div>
<div class="tab_box">
<div>Hello JQuery!</div>
<div class="tab_displayNone">Hello ExtJs!</div>
<div class="tab_displayNone">Hello Sliverlight!</div>
</div>
</div>
</body>
</html>
jquery.tab.js：
(function($) {
$.fn.extend({
//Tab插件名称
XQHTab: function(options) {
//默认值
var defaults = {
tabSelected: "tab_selected",
tabWidth: "100%",
autoHeight: "true"
};
var options = $.extend(defaults, options);
$(this).css("width", options.tabWidth);
//选项卡 this指通过当前选择器获取的JQuery对象
var tab = $(".tab_menu ul li", this);
//选项内容
var tabContent = $(".tab_box > div", this);
if (options.autoHeight != "true") {
tabContent.css("height", options.autoHeight);
}
//单击选项卡
tab.click(function() {
$(this).addClass(options.tabSelected).siblings().removeClass(options.tabSelected);
var curIndex = tab.index(this);
tabContent.eq(curIndex).show().siblings().hide();
});
//return this使JQuery方法可链
return this;
}
});
})(jQuery);
时间： 2024-10-21 14:03:52