<style>
.tableContainer {
position: relative;
z-index: inherit;
width: 100%;
margin: 0 auto;
display: block;
//float: left;
overflow: visible;
//height: 350px;
}
.tableContainer > ul {
width: 100%;
z-index: 0;
display: inline-block;
position: relative;
overflow: visible;
}
.tableContainer > ul > li {
width: 100%;
display: block;
position: absolute;
}
</style>
<script>
//
// Mindent tegyél a helyére, a megfelelo fájlba! Ne legyen inline cumó.
//
/// switcher jQuery plugin
$.fn.tabs = function(o) {
return this.each(function() {
var th = $(this), _ = th.data('tabs')
|| {
enable : true,
show : 0,
blockSame : true,
changeEv : 'change',
empty : '#!/',
preFu : function() {
_.li.hide()
},
actFu : function() {
_.prev && _.prev.hide()
_.curr && _.curr.show()
},
searchSubCatFu: function(s) {
var subtest = -1;
var subcat = false;
if(s.slice(0, 3) == '#!/') {
subtest = s.slice(3).indexOf('/');
if(subtest >= 0) {
subcat = s.slice(subtest + 4);
if(subcat.indexOf('/') >= 0) {
return _.searchSubCatFu(subcat);
}
return subcat;
}
return s.slice(3);
}
else {
subtest = s.indexOf('/');
if(subtest >= 0) {
subcat = s.slice(subtest + 1);
if(subcat.indexOf('/') >= 0) {
return _.searchSubCatFu(subcat);
}
return subcat;
}
}
return false;
},
navFu : function(s) {
if (_.pres == s || s.slice(0, 3) != '#!/')
return false
_.pres = s
s == _.empty && $.when(_.li).then(_.closeFu)
var found = false;
var needle = _.searchSubCatFu(s);
_.li.each(function(n) {
if($(this).attr('id') == needle){
_.chngFu(n);
$(document).trigger("pageChange", $(this));
}
})
},
chngFu : function(a) {
if (!_.enable || (a == _.n && _.blockSame)
|| a >= _.li.length)
return false
$.when(_.li).then(function() {
_.pren = _.n
_.prev = _.curr
_.curr = _.li.eq(_.n = a)
_.actFu(_)
_.me.trigger(_.changeEv)
})
},
nextFu : function() {
var n = _.n
_.way = 1
_.chngFu(++n < _.li.length - _.show ? n : 0)
},
prevFu : function() {
var n = _.n
_.way = -1
_.chngFu(--n >= 0 ? n : _.li.length - 1 - _.show)
},
closeFu : function() {
if (_.pres == 'close')
return false
_.pren = _.n
_.prev = _.curr
_.n = -1
_.curr = false
_.pres = 'close'
_.actFu(_)
},
backFu : function() {
_.chngFu(_.pren)
},
init : function() {
_.ul = $('>ul', _.me)
_.li = $('>li', _.ul)
_.preFu(_)
_.navs && _.navs.navs(function(n) {
th.tabs(n)
})
}
}
if (typeof o == 'object')
_ = $.extend(true, _, o)
_.me || _.init(_.me = th.data({
tabs : _
}))
typeof o == 'function' && _.me.bind(_.changeEv, function() {
o(_.n, _);
return false
})
typeof o == 'boolean' && (_.enable = o)
typeof o == 'number' && _.chngFu(o)
typeof o == 'string'
&& (o == 'prev' || o == 'next' || o == 'close'
|| o == 'back' ? _[o + 'Fu']() : _.navFu(o))
})
}
// main
if(window.jQuery) {
var j = jQuery.noConflict();
j(document).ready(function() {
j(".tblNavs a").click(function() {
j.tblControl.tabs(j(this).data("command"));
});
});
j(window).load(function() {
j.tblControl = j(".tableContainer");
j.tblControl.tabs({
preFu: function(_) {
_.li.css({
left: "-1700px",
'display': 'none'
});
},
actFu: function(_) {
if(_.curr) {
_.curr.css({
'display': 'block',
left: "1700px"
}).stop().delay(200).animate({
left: "0px"
}, 700, "easeOutCubic");
}
if (_.prev) {
_.prev.stop().animate({
left : '-1700px'
},
700,
'easeInOutCubic',
function() {
_.prev
.css({
'display' : 'none'
});
});
}
}
});
});
}
</script>
<div class="tableContainer">
<ul>
<li class="page"><table id="squad1></table></li>
<li class="page"><table id="squad2></table></li>
</ul>
<div class="tblNavs">
<a href="#" data-command="next">Következő oldal</a>
<a href="#" data-command="prev"></a>
</div>
</div>
Comments