What do you guys recommend to create a scrollable tab with Javascript?
What do you guys recommend to create a scrollable tab with Javascript?
If jQuery is a solution, there is a PlugIn for jQuery-UI that allows you to add this functionality to the Separators.
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
The result as you can see on the examples page are tabs with the addition of navigation arrows to scroll right / left on them.