Scrolling Tabs in a table_问答_开发者_运维开发者技术经验分享

I h开发者_StackOverflow社区ave a horizontal tab menu. These tabs are all li elements. I show always 5 of them at once. To the left and right I have buttons which scrolls these tabs to either side. I am just not sure how to achieve that. Can I put the next 5 tabs in a different div which will be shown on click? That wouldnt be the best solution, would it? Can I do this somehow with JavaScript or jQuery?

Thanks.

You can do this w/ jQuery. Easier if all of the tabs are the same width. You can position the UL inside a DIV that has overflow: hidden and position: relative. Then the UL can slide around inside the DIV using the animate() method (or the css() method). Check them out on http://api.jquery.com.

Here's an example:

<!DOCTYPE HTML>  
<html>
<head>
    <style>
        * { margin: 0; padding: 0; }
        body { padding: 30px; }
        div#tabs { width: 360px; height: 30px; overflow: hidden; position: relative; }
        ul { display: block; float: left; width: 1080px; position: absolute; left: -360px; }
        li { display: block; float: left; width: 70px; height: 30px; font-size: 12px; border: 1px solid #333; }
        button { float: left; width: 100px; margin: 20px; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script>
        $(document).ready(function()
        {
            $("button").click(function()
            {
                var tabs_list = $("div#tabs > ul");
                if($(this).is("#left"))
                {
                    tabs_list.animate({ left: "-=360" }, 500);
                }
                else if($(this).is("#right"))
                {
                    tabs_list.animate({ left: "+=360" }, 500);
                }
            });
        });    
    </script>
</head>

<body>

<div id="tabs">
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
        <li><a href="#">five</a></li>
        <li><a href="#">six</a></li>
        <li><a href="#">seven</a></li>
        <li><a href="#">eight</a></li>
        <li><a href="#">nine</a></li>
        <li><a href="#">ten</a></li>
        <li><a href="#">eleven</a></li>
        <li><a href="#">twelve</a></li>
        <li><a href="#">thirteen</a></li>
        <li><a href="#">fourteen</a></li>
        <li><a href="#">fifteen</a></li>
    </ul>
</div>

<button id="left">scroll left</button>
<button id="right">scroll right</button>

</body>
</html>

This would need some more work in order to de-activate or hide the scroll buttons when you've reached the beginning or end of the tabs list, but this should get you started.

I like Elliot's solution. I have another one, which will work if the tabs are of different lengths. It does it by hiding and showing the individual "li"s as you click the "right" and "left" buttons. The code also takes care of moving the tabs 5 at a time, both left and right, and handles the end cases.

<!DOCTYPE HTML>
<html>
<head>
<style>
    #left, #right {float: left; position: relative; margin: 0; padding: 0;}
    #tabs {float: left; position: relative; list-style: none; margin: 0; padding: 0;}
    #tabs li {float: left; display: none; border: 2px solid #000; width: 50px; text-align: center;};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    var tabs = $('#tabs li'), number_of_tabs = tabs.length;
    var tabs_visible = Math.min(5, number_of_tabs), low_tab = 0, high_tab = (tabs_visible - 1);

    $(tabs).filter(function(index){return (index < tabs_visible);}).show();
    $('#left, #right').each(function(){
        $(this).click(function(){
            if ($(this).is('#right')) {
                var high_tab_new = Math.min((high_tab + tabs_visible), (number_of_tabs - 1));
                var low_tab_new = high_tab_new - tabs_visible + 1;
                $(tabs).filter(function(index){
                    return (index >= low_tab) && (index < low_tab_new);
                }).hide();
                $(tabs).filter(function(index){
                    return (index > high_tab) && (index <= high_tab_new);
                }).show();
                low_tab = low_tab_new;
                high_tab = high_tab_new;
            } else {
                var low_tab_new = Math.max((low_tab - tabs_visible), 0);
                var high_tab_new = low_tab_new + tabs_visible - 1;
                $(tabs).filter(function(index){
                    return (index > high_tab_new) && (index <= high_tab);
                }).hide();
                $(tabs).filter(function(index){
                    return (index >= low_tab_new) && (index < low_tab);
                }).show();
                low_tab = low_tab_new;
                high_tab = high_tab_new;                
            }
        });
    });
</script>
</head>

<div id="nav3">
<button id="left">left</button>
<ul id="tabs">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
    <li><a href="#">F</a></li>
    <li><a href="#">G</a></li>
    <li><a href="#">H</a></li>
    <li><a href="#">I</a></li>
</ul>
<button id="right">right</button>   
</div>
</body>
</html>

Though I am not sure how would the tab look like, I am assuming that with the 5 tabs you are showing different set of page content.

I am suggesting a simple solution (Design) with Javascript. See if it works.

Have a variable to store the current View index. e.g. _currentView.
Place the content of 5 tabs in 5 views (When I say views there are many ways to establish it, ranging from using div object to using .net multiview control).
By default keep their visibility off.
Create a method, that'll accept the _currentView as the parameter. In this method, just make the current view visible.
On the click of left and right arrow, increment or decrement the _currentView value and call the method that activates the current view.

Please see if this helps you.