Create a scrollable tabs with javascript

Asked

Viewed 231 times

-1

What do you recommend to create a scrollable tabs with Javascript?

javascript css

  • What is a scrolable menu for you? can explain better?

  • I meant scrollable tabs, like the idea is to implement a menu so I got that stuck in my head...

  • Hmmm is not yet clear... like this: http://jsfiddle.net/veJf9/5/ ?

  • From the menu style of google Paly --> http://i.stack.Imgur.com/c0uIB.jpg

  • 1

    I made a suggestion in the form of an answer. Your question does not clarify well the intended or the purpose of what you are trying to create. If it doesn’t help, I recommend that you elaborate on the question of what you’re trying to do, what device and what tools or libraries you’re already using.

1 answer

3


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

jQuery-ui Scrollable tabs plugin v1.0

Works in:

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

Instructions for implementation

  • Inclusion of necessary libraries

    First It will be necessary to include the jQuery library that will make the use of this Plugin possible.

    After that, it is necessary 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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollabletab.js"></script>

  • Inclusion of the necessary CSS

    The only CSS needed is the one that comes with jQuery UI that can be any of the themes 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 first necessary to initialize the tags jQuery UI and only then the Plugin to make them scrollable.

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

Upshot

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

Captura de tela

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.