jquery tabs with tab navigations

jquery tabs with tab navigations

I want to make a content box with jquery tabs with a tab navigation for
many tab contents, such as for more than 10 tab contents. The problem is
that jquery UI does not provide built in tab navigation for large tab
number and the "scrollable tabs for jquery plugin" at google code,
https://code.google.com/p/jquery-ui-scrollable-tabs/, looks very slow and
inefficient for large volumes about more than 50 pages. If the user tries
to read the 1st and the 40th page, it will take more than 30 sec. to
navigate for clicking the arrows.
So, I made a tab content box with only 5 tabs including selected shown and
with a tab navigation of input text box selecting specific pages and next
and previous with the first and the last page tab navigation buttons. (If
you put regular jquery UI tab with more than 20-30 tabs it will mess up
appearance and css.)
<div id="tabs" class="tabs-bottom">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a>
</li>
<li><a href="#tabs-2">Proin dolor</a>
</li>
<li><a href="#tabs-3">Aenean lacinia</a>
</li>
</ul>
<ul class="TabbedPageNavi">
<li>Page
<input id="pageNumber" type="text" value="01" style="width:30px;" />
</li>
<li><a class="previous" href="#">&laquo;&nbsp;Prev</a>
</li>
<li><a class="nexttab" href="#">Next&nbsp;&raquo;</a>
</li>
<li class="copyTab">2013&nbsp;&copy;John3825&nbsp;blog</li>
</ul>
<div class="tabs-spacer"></div>
<div id="tab-contents">
<div id="tabs-1">
Sample: http://jsfiddle.net/john3825/anh7c/embedded/result/
What is the best possible way to manage the large numbers of content tabs
with navigation? Please tell me a example or correct problems.
I also want to make the tab content box fit within 350px width x 1000px
height.