Latest web development tutorials

jQuery UI exemplo - guias (Tabs)

Única área de conteúdo de um multi-painel, cada painel no título da lista.

Para mais detalhes sobre os componentes separadores, consulte a documentação da API membro guia (o Widget Tabs) .

A função padrão

Clique na guia para mudar é dividido em parte lógica diferente do conteúdo. 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <title> guias jQuery UI (guias) - A função padrão </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ();
  });
  </ Script>
</ Head>
<Body>
 
<div id = "tabs">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "guias-1">
    <P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo um, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna Quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel Pede varius sollicitudin. sed ut dolor nec Orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "guias-2">
    <P> Morbi tincidunt, duos sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula em aliquam ligula suscipit. Praesent em eros vestíbulo mi adipiscing adipiscing. Morbi facilisis. Curabitur Ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque Convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ​​Ornare nisi vel felis. Mauris consectetur tortor et Purus. </ p>
  </ Div>
  <div id = "guias-3">
    <P> Mauris eleifend est et turpis. Duis id erat. Potenti Suspendisse. Aliquam vulputate, Pede vel vehicula accumsan, mi neque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum non ante. Classe aptent taciti sociosqu ad litora torquent per conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus um, lacus. </ p>
    <P> Duis cursus. Eros ligula Maecenas, nec blandit, pharetra em, sempre em, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec mattis, blandit Pede vel pharetra, magna ligula faucibus eros, euismod id lacus dolor eget odio. scelerisque Nam. Donec não libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, Pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce em lacus. Vivamus um libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Veja a demonstração

conteúdo Folding

Clique na guia selecionado para mudar o conteúdo fechado / aberto. Para ativar esse recurso, você precisa definir o collapsible opção de verdade. 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <title> guias jQuery UI (guias) - Dobrar o conteúdo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ({
      dobrável: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "tabs">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "guias-1">
    <P> <strong> Clique na guia novamente para fechar o painel de conteúdo. </ Strong> </ p>
    <P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo um, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna Quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel Pede varius sollicitudin. sed ut dolor nec Orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "guias-2">
    <P> <strong> Clique na guia novamente para fechar o painel de conteúdo. </ Strong> </ p>
    <P> Morbi tincidunt, duos sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula em aliquam ligula suscipit. Praesent em eros vestíbulo mi adipiscing adipiscing. Morbi facilisis. Curabitur Ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque Convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ​​Ornare nisi vel felis. Mauris consectetur tortor et Purus. </ p>
  </ Div>
  <div id = "guias-3">
    <P> <strong> Clique na guia novamente para fechar o painel de conteúdo. </ Strong> </ p>
    <P> Duis cursus. Eros ligula Maecenas, nec blandit, pharetra em, sempre em, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec mattis, blandit Pede vel pharetra, magna ligula faucibus eros, euismod id lacus dolor eget odio. scelerisque Nam. Donec não libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, Pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce em lacus. Vivamus um libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Veja a demonstração

Obter conteúdo via Ajax

Defina o valor do link href em um guia para guia para acesso a conteúdo externo via Ajax. Quando as solicitações Ajax espera de uma resposta, um separador para uma "Carregando ...", quando a carga é completo retorno à guia Geral.

Tag 3 e 4 demonstram o carregamento lento e danos às tags AJAX, e como lidar com erros do lado do servidor nestas circunstâncias. Por favor note que ambos requerem um servidor web pode explicar PHP. Eles não trabalham fora do sistema de arquivos. 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <title> guias jQuery UI (guias) - Obter conteúdo via Ajax </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ({
      beforeLoad: function (evento, ui) {
        ui.jqXHR.error (function () {
          ui.panel.html (
            "Não é possível carregar a guia. Se isto não é uma demonstração." +
            "Vamos resolver o problema o mais rápido possível.");
        });
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "tabs">
  <Ul>
    <Li> <a href="#tabs-1"> pré-carregado </a> </ li>
    <Li> <a tag href="ajax/content1.html"> 1 </a> </ li>
    <Li> <a tag href="ajax/content2.html"> 2 </a> </ li>
    <Li> <a tag href="ajax/content3-slow.php"> 3 (lento) </a> </ li>
    <Li> <a href="ajax/content4-broken.php"> etiqueta 4 (danificado) </a> </ li>
  </ Ul>
  <div id = "guias-1">
    <P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo um, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna Quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel Pede varius sollicitudin. sed ut dolor nec Orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Veja a demonstração

Aberta quando o rato paira

Ao event opção de mudar as peças quando o mouse passa sobre o estado / off. O valor padrão é o evento "click". 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <title> guias jQuery UI (guias) - Quando o mouse passa sobre a céu aberto </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ({
      Evento: "mouseover"
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "tabs">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "guias-1">
    <P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo um, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna Quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel Pede varius sollicitudin. sed ut dolor nec Orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "guias-2">
    <P> Morbi tincidunt, duos sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula em aliquam ligula suscipit. Praesent em eros vestíbulo mi adipiscing adipiscing. Morbi facilisis. Curabitur Ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque Convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ​​Ornare nisi vel felis. Mauris consectetur tortor et Purus. </ p>
  </ Div>
  <div id = "guias-3">
    <P> Mauris eleifend est et turpis. Duis id erat. Potenti Suspendisse. Aliquam vulputate, Pede vel vehicula accumsan, mi neque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum non ante. Classe aptent taciti sociosqu ad litora torquent per conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus um, lacus. </ p>
    <P> Duis cursus. Eros ligula Maecenas, nec blandit, pharetra em, sempre em, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec mattis, blandit Pede vel pharetra, magna ligula faucibus eros, euismod id lacus dolor eget odio. scelerisque Nam. Donec não libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, Pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce em lacus. Vivamus um libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Veja a demonstração

operação simples

Basta adicionar e remover guias. 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <title> guias jQuery UI (guias) - operação simples </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  etiqueta #dialog, entrada #dialog {display: block;}
  etiqueta #dialog {margin-top: 0.5em;}
  input #dialog, textarea #dialog {width: 95%;}
  #tabs {margin-top: 1em;}
  #tabs li .ui-icon-close {float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;}
  #add_tab {cursor: pointer;}
  </ Style>
  <Script>
  $ (Function () {
    var tabTitle = $ ( "#tab_title"),
      tabContent = $ ( "#tab_content"),
      tabTemplate = "<li> <a href='#{href}'> # {label} </a> <span class = 'ui-ui-icon-icon close' role =" apresentação "> Remover Tab </ span > </ li> ",
      tabCounter = 2;
 
    var guias = $ ( "#tabs") .tabs ();
 
    // Inicializar uma caixa de diálogo modal: botão e uma forma de redefinição interna "close" de diálogo callback var = $ ( "#dialog") .dialog Personalize ({
      AutoOpen: false,
      modal: true,
      botões: {
        Adicionar: function () {
          addTab ();
          $ (Este) .dialog ( "close");
        },
        Cancelar: function () {
          $ (Este) .dialog ( "close");
        }
      },
      close: function () {
        formar [0] .reset ();
      }
    });
 
    // Forma addTab: Chamado ao submeter função addTab e fechar o diálogo var form = dialog.find ( "forma") .submit (function (event) {
      addTab ();
      dialog.dialog ( "close");
      event.preventDefault ();
    });
 
    // Função addTab real: Utilize o formulário acima para adicionar uma nova função de entrada guia addTab () {
      etiqueta var = tabTitle.val () || "Tab" + tabCounter,
        id = "Guias-" + tabCounter,
        li = $ (tabTemplate.replace (/ # \ {href \} / g, "#" + id) .replace (/ # \ {label \} / g, etiqueta)),
        tabContentHtml = tabContent.val () || "Tab" + tabCounter + "conteúdo.";
 
      tabs.find ( ".ui-tabs-nav") .append (LI);
      tabs.append ( "<div id = '" + ID + ""> <p> "+ tabContentHtml +" </ p> </ div> ");
      tabs.tabs ( "refresh");
      tabCounter ++;
    }
 
    // Botão addTab: O valor da caixa de diálogo Abrir $ ( "#add_tab")
      .button ()
      .click (function () {
        dialog.dialog ( "abrir");
      });
 
    // Fim do ícone: Remover separador tabs.delegate ( "span.ui-icon-close" quando clicado, "click", function () {
      var panelId = $ (this) .closest ( "LI") .remove () attr ( "aria-controls") .;
      $ ( "#" + PanelId) .remove ();
      tabs.tabs ( "refresh");
    });
 
    tabs.bind ( "keyup", function (event) {
      if (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
        . Var panelId = tabs.find ( ".ui-tabs-activa") .remove () attr ( "aria-controls");
        $ ( "#" + PanelId) .remove ();
        tabs.tabs ( "refresh");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "diálogo" title = "dados Tab">
  <Form>
    <Class = Fieldset "ui-helper-reset">
      <Label for = "TAB_TITLE"> Título </ label>
      <Input type = "text" name = "TAB_TITLE" id = valor "TAB_TITLE" = "" class = "-ui-widget conteúdo ui-canto-all">
      <Label for = "tab_content"> conteúdo </ label>
      <Nome Textarea = "tab_content" id = "tab_content" class = "-ui-widget conteúdo ui-canto-all"> </ textarea>
    </ Fieldset>
  </ Form>
</ Div>
 
<Button id = "add_tab"> Adicione uma guia </ button>
 
<div id = "tabs">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> <span class = "ui-ui ícone-icon-close" role = "apresentação"> guia Remover </ span> </ li>
  </ Ul>
  <div id = "guias-1">
    <P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo um, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna Quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel Pede varius sollicitudin. sed ut dolor nec Orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Veja a demonstração

Sort (Ordenável)

guias de arrasto acima para reordená-los.

Basta ligar para .ui-tabs-nav elemento na .sortable() , você pode deixar guias classificáveis. 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <title> guias jQuery UI (guias) - classificação (Ordenável) </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    var guias = $ ( "#tabs") .tabs ();
    tabs.find ( ".ui-tabs-nav") .sortable ({
      eixo "x",
      parar: function () {
        tabs.tabs ( "refresh");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "tabs">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "guias-1">
    <P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo um, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna Quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel Pede varius sollicitudin. sed ut dolor nec Orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "guias-2">
    <P> Morbi tincidunt, duos sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula em aliquam ligula suscipit. Praesent em eros vestíbulo mi adipiscing adipiscing. Morbi facilisis. Curabitur Ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. pellentesque Convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ​​Ornare nisi vel felis. Mauris consectetur tortor et Purus. </ p>
  </ Div>
  <div id = "guias-3">
    <P> Mauris eleifend est et turpis. Duis id erat. Potenti Suspendisse. Aliquam vulputate, Pede vel vehicula accumsan, mi neque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum non ante. Classe aptent taciti sociosqu ad litora torquent per conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus um, lacus. </ p>
    <P> Duis cursus. Eros ligula Maecenas, nec blandit, pharetra em, sempre em, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec mattis, blandit Pede vel pharetra, magna ligula faucibus eros, euismod id lacus dolor eget odio. scelerisque Nam. Donec não libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, Pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce em lacus. Vivamus um libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Veja a demonstração

A parte inferior do separador

Com alguns CSS adicional (para posicionamento) e JS (colocado no elemento de classe correcta), Jieke guia na parte inferior do conteúdo. 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <title> jQuery UI abas (tabs) - na parte inferior da página da guia </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ();
 
    // Modificar classe
    $ ( ".tabs-Bottom .ui-tabs-nav, .tabs-parte inferior .ui-tabs-nav> *")
      .removeClass ( "ui-ui-canto toda esquina-top")
      .addClass ( "ui-canto inferior");
 
    navegação móvel na porção final // $ ( ".tabs-parte inferior .ui-tabs-nav") .appendTo ( ".tabs-bottom");
  });
  </ Script>
  <Style>
  / * Forçada uma altura, de modo a que o separador não se altera com a altura do conteúdo é alterada * /
  #tabs .tabs-espaçador {float: left; height: 200px;}
  .tabs-bottom .ui-tabs-nav {clear: left; padding: 0 .2em .2em .2em;}
  .tabs-bottom .ui-tabs-nav li {top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0;}
  .tabs-parte inferior .ui-tabs-nav li.ui-tabs-active {margin-top: -1px; padding-top: 1px;}
  </ Style>
</ Head>
<Body>
 
<Div id = "tabs" class = "tabs-bottom">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <Div class = "tabs-espaçador"> </ div>
  <div id = "guias-1">
    <P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo um, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna Quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel Pede varius sollicitudin. sed ut dolor nec Orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "guias-2">
    <P> Morbi tincidunt, duos sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula em aliquam ligula suscipit. Praesent em eros vestíbulo mi adipiscing adipiscing. Morbi facilisis. Curabitur Ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. pellentesque Convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ​​Ornare nisi vel felis. Mauris consectetur tortor et Purus. </ p>
  </ Div>
  <div id = "guias-3">
    <P> Mauris eleifend est et turpis. Duis id erat. Potenti Suspendisse. Aliquam vulputate, Pede vel vehicula accumsan, mi neque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum non ante. Classe aptent taciti sociosqu ad litora torquent per conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus um, lacus. </ p>
    <P> Duis cursus. Eros ligula Maecenas, nec blandit, pharetra em, sempre em, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec mattis, blandit Pede vel pharetra, magna ligula faucibus eros, euismod id lacus dolor eget odio. scelerisque Nam. Donec não libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, Pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce em lacus. Vivamus um libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Veja a demonstração

Tabs verticais

Clique na guia para mudar é dividido em parte lógica diferente do conteúdo. 

<! DOCTYPE html>
<Html lang = "PT">
<Head>
  <Charset Meta = "utf-8">
  <title> jQuery UI abas (tabs) - guias verticais </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs () AddClass ( "ui-tabs-Vertical ui-helper-clearfix") .;
    $ ( "#tabs Li") .removeClass ( "ui-corner-top") .addClass ( "ui-corner-esquerda");
  });
  </ Script>
  <Style>
  .ui-guias verticais {width: 55em;}
  .ui-guias verticais .ui-tabs-nav {padding: .2em .1em .2em .2em; float: left; width: 12em;}
  .ui-guias verticais .ui-tabs-nav li {clear: left; width: 100%; border-bottom-width: 1px importante; border-right-width :! 0 importante, margem :! 0 -1px .2em 0;
  .ui-guias verticais .ui-tabs-nav li a {display: block;}
  .ui-guias verticais .ui-tabs-nav li.ui-tabs-activa {padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px;}
  .ui-guias verticais .ui-abas do painel {padding: 1em; float: right; width: 40em;}
  </ Style>
</ Head>
<Body>
 
<div id = "tabs">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "guias-1">
    <H2> Conteúdo Título 1 </ h2>
    <P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo um, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna Quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel Pede varius sollicitudin. sed ut dolor nec Orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "guias-2">
    <H2> título Content 2 </ h2>
    <P> Morbi tincidunt, duos sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula em aliquam ligula suscipit. Praesent em eros vestíbulo mi adipiscing adipiscing. Morbi facilisis. Curabitur Ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque Convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ​​Ornare nisi vel felis. Mauris consectetur tortor et Purus. </ p>
  </ Div>
  <div id = "guias-3">
    <H2> Conteúdo Título 3 </ h2>
    <P> Mauris eleifend est et turpis. Duis id erat. Potenti Suspendisse. Aliquam vulputate, Pede vel vehicula accumsan, mi neque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum non ante. Classe aptent taciti sociosqu ad litora torquent per conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus um, lacus. </ p>
    <P> Duis cursus. Eros ligula Maecenas, nec blandit, pharetra em, sempre em, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec mattis, blandit Pede vel pharetra, magna ligula faucibus eros, euismod id lacus dolor eget odio. scelerisque Nam. Donec não libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, Pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce em lacus. Vivamus um libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Veja a demonstração