Como criar uma aba na caixa de diálogo com o JQuery

Escrito por max power | Traduzido por caio amorim
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar uma aba na caixa de diálogo com o JQuery
Aprenda a criar uma aba na caixa de diálogos com o jQuery (Stockbyte/Stockbyte/Getty Images)

Os frameworks do jQuery JavaScript permitem mostrar aos visitantes de seu site conteúdos organizados em uma janela excelente de menus com abas. Quando o usuário clica na aba, o conteúdo correspondente aparece imediatamente na tela. Você pode colocá-lo dentro de uma caixa de diálogo, ela enquadra as abas e seus conteúdos dentro de uma janela pop-up. A funcionalidade da caixa de diálogo e do conteúdo em abas é uma parte do plugin da interface do usuário jQuery.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Incorpore jQuery e o plugin jQuery UI no seu site. Ambas bibliotecas estão disponíveis na API do desenvolvedor Google. A amostra de código a seguir mostra o método para as duas bibliotecas:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  2. 2

    Linke o Cascading Style Sheet (Folha de Estilos em Cascata, ou CSS) ao tema do jQuery UI de seu escolha. O exemplo mostra como incorporar o tema cupertino do jQuery.

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css"/>

  3. 3

    Crie uma lista HTML e inicialize um item dela para cada aba que deseja exibir no menu com abas. Vincule um link interno encadeado a cada item da lista. Nesse exemplo, uma lista hospeda três abas e está junta a uma div que possui as identificações das abas.

    <div id="tabs"> <ul> <li><a href="#tabs-1">Aba um</a></li> <li><a href="#tabs-2">Aba dois</a></li> <li><a href="#tabs-3">Aba três</a></li> </ul> </div>

  4. 4

    Crie uma div para cada aba. Nomeie o div para combinar com o link de texto encadeado da lista de itens. Coloque cada div dentro das abas de mesmo nome.

    <div id="tabs-1">Este é o texto dentro da primeira aba</div> <div id="tabs-2">Este é o texto dentro da segunda aba</div> <div id="tabs-3">Este é o texto dentro da terceira aba</div>

  5. 5

    Coloque a aba div dentro da caixa de diálogo div. É necessário colocar o menu em uma caixa de diálogo div para que as abas do menu apareçam dentro da janela pop-up. Abaixo há um exemplo de uma caixa de diálogo de um div nomeado.

    <div id="dialog" title="Escolha uma aba">

  6. 6

    Escreva um código jQuery. Ele abre automaticamente a caixa de diálogo e habilita a funcionalidade do menu com abas. Considere o exemplo a seguir. A primeira função jQuery junta as abas do jQuery UI às de id. A segunda função jQuery vincula a função () à caixa de diálogos div e estabelece a largura da caixa de diálogos em 840 pixels.

    $(function() { $( "#tabs" ).tabs(); }); $(function() { $( "#dialog" ).dialog({width:840}); });

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível