Create a scrollable tab with javascript [closed]

-1

What do you guys recommend to create a scrollable tab with Javascript?

    
asked by anonymous 20.02.2014 / 09:23

1 answer

3

If jQuery is a solution, there is a PlugIn for jQuery-UI that allows you to add this functionality to the Separators.

jQuery-ui Scrollable tabs plugin v1.0

Works under:

  • Firefox 3.6 +
  • Internet Explorer 7 +
  • Opera 10.10 +
  • Chrome 5.0 +
  • Safari 4.0+

Implementation instructions

  • Adding the required libraries

    At first You will need to include the jQuery library that will make using this PlugIn possible.

    After this, you need to include the jQueryUI library.

    Lastly the PlugIn that will allow you to achieve what you want, the jQuery-ui Scrollable Tabs.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script><scripttype="text/javascript" src="js/jquery.scrollabletab.js"></script>
    
  • Including required CSS

    The only CSS needed is what comes with the jQuery UI which can be any of the themes Whatever you want.

    <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    
  • Initialize the PlugIn

    When initializing the PlugIn it is necessary to first initialize the plugin of the tags of jQuery UI and then the PlugIn to make them scrollable .

    var $tabs = $('#tabs')
                    .tabs()             //jQuery ui tabs
                    .scrollabletab()    //jQuery scrollable tabs
    

Result

The result as you can see on the examples page are tabs with the addition of navigation arrows to scroll right / left on them.

    
20.02.2014 / 12:32