css file
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
html, body {
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #52697E;
}
body {
text-align: center;
overflow: auto;
}
h1 {
font-size: 21px;
height: 47px;
line-height: 47px;
text-transform: uppercase;
}
.TabControl {
width: 700px;
margin: 0 auto;
text-align: left;
}
.TabNavigationControl {
height: 23px;
line-height: 23px;
border-bottom: 1px solid #ccc;
}
.TabNavigationControl li {
float: left;
height: 23px;
line-height: 23px;
padding-right: 3px;
}
.TabNavigationControl li a{
float: left;
dispaly: block;
height: 23px;
line-height: 23px;
padding: 0 10px;
overflow: hidden;
color: #52697E;
background-color: #eee;
position: relative;
text-decoration: none;
}
.TabNavigationControl li a:hover {
background-color: #f0f0f0;
}
.TabNavigationControl li a.active {
background-color: #fff;
border: 1px solid #ccc;
border-bottom: 0px solid;
}
.TabContentControl {
border: 1px solid #ccc;
border-top: 0px solid;
width: 698px;
overflow: hidden;
}
.TabPageControl {
padding: 16px;
display: none;
}
.TabPageControl h2 {
font-weight: bold;
font-size: 16px;
}
html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<h1>TabControl - boroo plugin</h1>
<div class="TabControl1">
<ul class="TabNavigationControl">
<li><a href="#about" rel="about">About</a></li>
<li><a href="#download" rel="download">Download</a></li>
<li><a href="#implement" rel="implement">Implement</a></li>
</ul>
<div class="TabContentControl">
<div class="TabPageControl">
<h2>About</h2>
</div>
<div class="TabPageControl">
<h2>Download</h2>
</div>
<div class="TabPageControl">
<h2>Implement</h2>
</div>
</div>
</div>
<div class="TabControl2">
<ul class="TabNavigationControl">
<li><a href="#about1" rel="about">About</a></li>
<li><a href="#download" rel="download">Download</a></li>
<li><a href="#implement" rel="implement">Implement</a></li>
</ul>
<div class="TabContentControl">
<div class="TabPageControl">
<h2>About #</h2>
</div>
<div class="TabPageControl">
<h2>Download</h2>
</div>
<div class="TabPageControl">
<h2>Implement</h2>
</div>
</div>
</div>
<script type="text/javascript">
//jQuery.fn._init = jQuery.fn.init;
//jQuery.fn.init = function( selector, context ) {
// if(typeof selector === 'string') {
// return jQuery.fn._init(selector, context).data('selector', selector);
// }
// return jQuery.fn._init( selector, context );
//};
//jQuery.fn.getSelector = function() {
// return jQuery(this).data('selector');
//};
(function($){
$.fn.tabControls = new Array();
$.fn.initTab = function(ts, cs) {
var selStr = $(this).selector;
$.fn.tabControls[selStr] = {tabs:ts, contents:cs};
ts.each(function(i){ $(this).data("___tabs___", $.fn.tabControls[selStr]); $(this).bind('click',_changeTab); });
_changeHash();
};
$.fn.showTab = function(i){
var selStr = $(this).selector;
window.location.hash = "#" + $.fn.tabControls[selStr].tabs.eq(i).attr("rel");
$.fn.tabControls[selStr].tabs.removeClass('active');
$.fn.tabControls[selStr].tabs.eq(i).addClass('active').blur();
$.fn.tabControls[selStr].contents.hide().eq(i).show();
};
var _changeHash = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('a[rel='+hash+']');
if (currentTab.size() > 0) {
currentTab.click();
}
};
var _changeTab = function() {
var hash = window.location.hash.replace('#', '');
var t = $(this).data("___tabs___");
var currentTab = $(this);//t.tabs.filter('[rel=' + hash + ']');
if (currentTab.size() > 0) {
t.tabs.removeClass('active');
var tabIndex = t.tabs.index(currentTab);
$(this).addClass('active').blur();
t.contents.hide().eq(tabIndex).show();
}
};
})(jQuery);
$(document).ready(function(){
$(".TabControl1").initTab($(".TabControl1").find(".TabNavigationControl li a")
, $(".TabControl1").find(".TabContentControl .TabPageControl"));
//$(".TabControl1").showTab(0);
$(".TabControl2").initTab($(".TabControl2").find(".TabNavigationControl li a")
, $(".TabControl2").find(".TabContentControl .TabPageControl"));
//$(".TabControl2").showTab(1);
});
</script>
</body>
</html>
No comments:
Post a Comment