Patrik Help

<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>