O que é que vocês recomendam para criar uma scrollable tabs com Javascript?
-
O que é para você um scrolable menu? pode explicar melhor?– SergioCommented 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...– Firmino ChanganiCommented 20/02/2014 às 8:48
-
Hmmm ainda não está claro... tipo isto: jsfiddle.net/veJf9/5 ?– SergioCommented 20/02/2014 às 8:49
-
Do estilo do menu do google paly ---> i.sstatic.net/c0uIB.jpg– Firmino ChanganiCommented 20/02/2014 às 9:10
-
1Dei 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.– ZuulCommented 20/02/2014 às 11:35
1 Resposta
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.