使用JQuery UI选项卡为'n'选项卡分页

Question

我试图到处搜索，但找不到可能的解决方案。我想要实现的是一个真正的分页视图。我知道有很多可用的分页插件可以给我分页按钮视图，但我的要求只能通过jQueryUI Tabs（）来实现，因此我在SO上寻求帮助。

这就是我想要实现的目标：

在这里，作为一个例子，我使用了8个标签，但它可以有100个或更多标签。

这是我到目前为止所做的：

JSFiddle

JS：

$(function() {
    $( "#tabs" ).tabs();

    // fix the classes
    $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
    .removeClass( "ui-corner-all ui-corner-top" )
    .addClass( "ui-corner-bottom" );

    // move the nav to the bottom
    $( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );

    $(".btnNext").click(function () {
        $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
    });
    $(".btnPrev").click(function () {
        $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
    });
});

HTML：

<div id="tabs" class="tabs-bottom">
    <ul>
        <li><a class="tabButton btnPrev">&lt;</a></li>
        <li><a href="#tabs-1">1</a></li>
        <li><a href="#tabs-2">2</a></li>
        <li><a href="#tabs-3">3</a></li>
        <li><a href="#tabs-4">4</a></li>
        <li><a href="#tabs-5">5</a></li>
        <li><a href="#tabs-6">6</a></li>
        <li><a href="#tabs-7">7</a></li>
        <li><a href="#tabs-8">8</a></li>
        <li><a class="tabButton btnNext">&gt;</a></li>
    </ul>

    <div class="tabs-spacer"></div>

    <div id="tabs-1">
        <p>This is tab 1</p>
    </div>
    <div id="tabs-2">
        <p>This is tab 2</p>
    </div>
    <div id="tabs-3">
        <p>This is tab 3</p>
    </div>
    <div id="tabs-4">
        <p>This is tab 4</p>
    </div>
    <div id="tabs-5">
        <p>This is tab 5</p>
    </div>
    <div id="tabs-6">
        <p>This is tab 6</p>
    </div>
    <div id="tabs-7">
        <p>This is tab 7</p>
    </div>
    <div id="tabs-8">
        <p>This is tab 8</p>
    </div>
</div>

CSS：

#tabs1 .tabs-spacer,#tabs2 .tabs-spacer{ float: left; height: 0px; }
.tabs-bottom1 .ui-tabs-nav, .tabs-bottom2 .ui-tabs-nav { clear: left; padding: 0; }
.tabs-bottom1 .ui-tabs-nav li, .tabs-bottom2 .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 0 0; border-bottom: auto; border-top: 0; }
.tabs-bottom1 .ui-tabs-nav li.ui-tabs-active, .tabs-bottom2 .ui-tabs-nav li.ui-tabs-active { margin-top: 0; padding: 0; }

.ui-corner-all, .ui-corner-bottom,
.ui-corner-right, .ui-corner-br,
.ui-corner-left, .ui-corner-bl,
.ui-corner-top, .ui-corner-tr,
.ui-corner-tl{
    border-radius:0px;
    }

.ui-widget-content{
    background:none;
    border:none;
    color:#333;
    }

.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
    width:30px;
    height:30px;
    padding:0;
    text-align:center;
    font-size:13px;
    line-height:30px;
    font-family:'Open Sans';
    font-weight:bold;
    border:none;
    background-color:#494949;
    color:#fff;
    }

.ui-tabs-nav{
    float:right;
    }

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited{
    background-color:#dc1f22;
    }

.tabButton{
    font-size:13px;
    line-height:30px;
    font-family:'Open Sans';
    width:30px;
    height:30px;
    font-weight:bold;
    border:none;
    padding:0;
    text-decoration:none;
    background-color:#494949;
    color:#fff;
    position:relative;
    float:left;
    text-align:center;
    cursor:pointer;
    }

.tabButton:hover{
    background-color:#dc1f22;
    }