-1

O que é que vocês recomendam para criar uma scrollable tabs com Javascript?

5
  • O que é para você um scrolable menu? pode explicar melhor?
    – Sergio
    Commented 20/02/2014 às 8:39
  • Eu quis dizer scrollable tabs, como a ideia é implementar um menu então fiquei com aquilo preso na cabeça... Commented 20/02/2014 às 8:48
  • Hmmm ainda não está claro... tipo isto: jsfiddle.net/veJf9/5 ?
    – Sergio
    Commented 20/02/2014 às 8:49
  • Do estilo do menu do google paly ---> i.sstatic.net/c0uIB.jpg Commented 20/02/2014 às 9:10
  • 1
    Dei uma sugestão na forma de resposta. A tua pergunta não esclarece bem o pretendido nem o objectivo do que estás a tentar criar. Se não ajudar, recomendo que elabores a pergunta dando conta do que estás a tentar fazer, para que dispositivo e que ferramentas ou bibliotecas estás já a utilizar.
    – Zuul
    Commented 20/02/2014 às 11:35

1 Resposta 1

3

Se jQuery for uma solução, existe um PlugIn para a jQuery-UI que te permite adicionar essa funcionalidade aos Separadores.

jQuery-ui Scrollable tabs plugin v1.0

Funciona em:

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

Instruções para implementação

  • Inclusão das bibliotecas necessárias

    Em primeiro Será necessário incluir a biblioteca jQuery que vai tornar a utilização deste PlugIn possível.

    Após isso, é necessário incluir a biblioteca da jQueryUI.

    Em último lugar o PlugIn que vai permitir atingir o que pretendes, o 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>
    
  • Inclusão do CSS necessário

    O único CSS necessário é o que vem com a jQuery UI que pode ser qualquer um dos temas que pretendas.

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

    Ao inicializar o PlugIn é necessário em primeiro inicializar o PlugIn das tags da jQuery UI e só depois o PlugIn para as tornar scrollable.

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

Resultado

O resultado como podes ver na página de exemplos são separadores com adição de setas de navegação para fazer scroll direita/esquerda nas mesmas.

Captura de tela

0

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .