Latest web development tutorials

jQuery UI przykład - wypustki (Tabs)

Pojedynczy obszar zawartości multi-panel, każdy panel w tytule listy.

Aby uzyskać więcej informacji na temat składników kartach można znaleźć w dokumentacji API członek kartę (Widget zakładek) .

Domyślną funkcją

Kliknij kartę, aby przełączyć jest podzielony na różne części logicznej treści. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <title> zakładki jQuery UI (Zakładki) - Domyślna funkcja </ 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 = "wypustki">
  <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 = "tabs-1">
    <P> Proin elit Arcu, rutrum Commodo, vehicula tempus, Commodo a, Risus. Curabitur gdzie indziej niesklasyfikowane 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 eleifend adipiscing. 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 = "tabs-2">
    <P> Morbi tincidunt, dui 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 w ligula suscipit aliquam. Praesent w eros Vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Zapytanie Viverra nulla. aliquam erat volutpat. Pellentesque Convallis. mecenasem feugiat, Tellus Pellentesque Pretium Zapytanie, felis felis lorem euismod, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "tabs-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. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim Commodo Pellentesque. Praesent UE Risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, nec feugiat, luctus a, lacus. </ p>
    <P> Duis cursus. Mecenasa eros ligula, blandit NEC, pharetra się, sempre się, magna. Nullam ac lacus. Nulla facilisi. Praesent Viverra Justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec Mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla Mattis Commodo. Ut sagittis. Donec nisi Lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu Tellus interdum rutrum. mecenasem Commodo. Pellentesque NEC elit. Fusce w lacus. Vivamus libero vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Zobacz demo

zawartość Folding

Kliknij na wybranej karcie, aby przełączyć treść zamknięty / otwarty. Aby włączyć tę funkcję, należy ustawić collapsible opcję true. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <title> zakładki jQuery UI (Zakładki) - Składany treść </ 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 ({
      składane: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "wypustki">
  <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 = "tabs-1">
    <P> <strong> Kliknij kartę ponownie, aby zamknąć panel zawartości. </ Strong> </ p>
    <P> Proin elit Arcu, rutrum Commodo, vehicula tempus, Commodo a, Risus. Curabitur gdzie indziej niesklasyfikowane 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 eleifend adipiscing. 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 = "tabs-2">
    <P> <strong> Kliknij kartę ponownie, aby zamknąć panel zawartości. </ Strong> </ p>
    <P> Morbi tincidunt, dui 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 w ligula suscipit aliquam. Praesent w eros Vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Zapytanie Viverra nulla. aliquam erat volutpat. Pellentesque Convallis. mecenasem feugiat, Tellus Pellentesque Pretium Zapytanie, felis felis lorem euismod, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "tabs-3">
    <P> <strong> Kliknij kartę ponownie, aby zamknąć panel zawartości. </ Strong> </ p>
    <P> Duis cursus. Mecenasa eros ligula, blandit NEC, pharetra się, sempre się, magna. Nullam ac lacus. Nulla facilisi. Praesent Viverra Justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec Mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla Mattis Commodo. Ut sagittis. Donec nisi Lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu Tellus interdum rutrum. mecenasem Commodo. Pellentesque NEC elit. Fusce w lacus. Vivamus libero vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Zobacz demo

Uzyskaj treści za pośrednictwem Ajax

Ustaw wartość href link w karcie na karcie dostępu do zawartości zewnętrznej poprzez Ajax. Gdy żądania Ajax czeka na odpowiedź, kartę do "Ładowanie ...", gdy obciążenie jest kompletny powrót na karcie Ogólne.

Tag 3 i 4 pokazują powolne ładowanie i uszkodzenie tagów AJAX oraz sposobu obsługi błędów po stronie serwera w tych okolicznościach. Należy pamiętać, że oba wymagają serwer WWW może wyjaśnić PHP. Nie działają poza systemem plików. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <title> zakładki jQuery UI (Zakładki) - Get treści za pośrednictwem 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 (event, ui) {
        ui.jqXHR.error (function () {
          ui.panel.html (
            "Nie można wczytać kartę. Jeśli nie jest to demo". +
            "Będziemy rozwiązać problem jak najszybciej.");
        });
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "wypustki">
  <Ul>
    <Li> <a href="#tabs-1"> fabrycznie </a> </ li>
    <Li> <a 1 tag href="ajax/content1.html"> </a> </ li>
    <Li> <a 2 tag href="ajax/content2.html"> </a> </ li>
    <Li> <a tag href="ajax/content3-slow.php"> 3 (powolny) </a> </ li>
    <Li> <a href="ajax/content4-broken.php"> Etykieta 4 (uszkodzony) </a> </ li>
  </ Ul>
  <div id = "tabs-1">
    <P> Proin elit Arcu, rutrum Commodo, vehicula tempus, Commodo a, Risus. Curabitur gdzie indziej niesklasyfikowane 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 eleifend adipiscing. 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>

Zobacz demo

Otwarte, gdy najechań kursorem myszy

Przez event możliwością przełączania części, gdy mysz unosi stan włączenia / wyłączenia. Wartość domyślna to zdarzenie "click". 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <title> zakładki jQuery UI (Zakładki) - Gdy myszy nad otwartym </ 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 ({
      event: "mouseover"
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "wypustki">
  <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 = "tabs-1">
    <P> Proin elit Arcu, rutrum Commodo, vehicula tempus, Commodo a, Risus. Curabitur gdzie indziej niesklasyfikowane 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 eleifend adipiscing. 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 = "tabs-2">
    <P> Morbi tincidunt, dui 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 w ligula suscipit aliquam. Praesent w eros Vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Zapytanie Viverra nulla. aliquam erat volutpat. Pellentesque Convallis. mecenasem feugiat, Tellus Pellentesque Pretium Zapytanie, felis felis lorem euismod, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "tabs-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. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim Commodo Pellentesque. Praesent UE Risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, nec feugiat, luctus a, lacus. </ p>
    <P> Duis cursus. Mecenasa eros ligula, blandit NEC, pharetra się, sempre się, magna. Nullam ac lacus. Nulla facilisi. Praesent Viverra Justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec Mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla Mattis Commodo. Ut sagittis. Donec nisi Lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu Tellus interdum rutrum. mecenasem Commodo. Pellentesque NEC elit. Fusce w lacus. Vivamus libero vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Zobacz demo

prosta obsługa

Wystarczy dodać lub usunąć zakładki. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <title> zakładki jQuery UI (Zakładki) - prosta operacja </ 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>
  #dialog etykieta, #dialog wejście {display: block;}
  #dialog label {margin-top: 0.5em;}
  Wejście #dialog, #dialog textarea {width: 95%;}
  #tabs {margin-top: 1 em;}
  #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}'> # {etykieta} </a> <span class = 'ui ui-icon-icon-zamknij" role = "prezentacja"> Usuń kartę </ span > </ li> ",
      tabCounter = 2;
 
    var tabs = $ ( "#tabs") .tabs ();
 
    // Inicjalizacja modalne okno dialogowe: przycisk i wewnętrzną formę resetowania "zamknij" okno oddzwaniania var = $ ( "#dialog") .dialog Dostosuj ({
      AutoOpen: false,
      modalne: prawda,
      przyciski: {
        Dodaj: function () {
          addTab ();
          $ (This) .dialog ( "Zamknij");
        }
        Cancel: function () {
          $ (This) .dialog ( "Zamknij");
        }
      }
      w pobliżu: function () {
        tworzą [0] .reset ();
      }
    });
 
    // Formą AddTab: Wywoływana przy składaniu funkcję addTab i zamknąć okno formularza var = dialog.find ( "Formularz") .submit (function (event) {
      addTab ();
      dialog.dialog ( "Zamknij");
      event.preventDefault ();
    });
 
    // Rzeczywista funkcja addTab: za pomocą formularza powyżej, aby dodać nową funkcję wejścia zakładka addTab () {
      label var = tabTitle.val () || "Tab" + tabCounter,
        id = "tabs-" + tabCounter,
        Li = $ (tabTemplate.replace (/ # \ {href \} / g, "#" + id) .replace (/ # \ label {\} / g, etykieta)),
        tabContentHtml = tabContent.val () || "Tab" + tabCounter + "zawartość".;
 
      tabs.find ( ".ui-tabs-nav") .append (Li);
      tabs.append ( "<div id = '" + id + ""> <p> "+ tabContentHtml +" </ p> </ div> ");
      tabs.tabs ( "odśwież");
      tabCounter ++;
    }
 
    // Przycisk AddTab: Wartość $ Otworzyć okno dialogowe ( "#add_tab")
      .button ()
      .Kliknij (function () {
        dialog.dialog ( "open");
      });
 
    // Close Ikona: Wyjąć kartę tabs.delegate ( "span.ui-icon-close" po kliknięciu "click", function () {
      var panelId = $ (this) .closest ( "li") .Wykręcić () attr ( "aria-controls") .;
      $ ( "#" + PanelId) .Wykręcić ();
      tabs.tabs ( "odśwież");
    });
 
    tabs.bind ( "keyup", function (event) {
      if (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
        . Var panelId = tabs.find ( ".ui-tabs-Active") .Wykręcić () attr ( "aria-controls");
        $ ( "#" + PanelId) .Wykręcić ();
        tabs.tabs ( "odśwież");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "dialog" title = "Dane Zakładka">
  <Form>
    <Class fieldset = "ui-pomocnika-reset">
      <Label for = "TAB_TITLE"> Tytuł </ label>
      <Input type = "text" name = "TAB_TITLE" id = wartość "TAB_TITLE" = "" class = "widget-ui ui-content-corner-all">
      <Label for = "tab_content"> Treść </ label>
      <Nazwa Textarea = "tab_content" id = "tab_content" class = "widget-ui ui-content-corner-all"> </ textarea>
    </ Fieldset>
  </ Form>
</ Div>
 
<Button id = "add_tab"> Dodaj zakładkę </ button>
 
<div id = "wypustki">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> <span class = "icon-ui ui-icon-zamknij" role = "prezentacja"> Usuń kartę </ span> </ li>
  </ Ul>
  <div id = "tabs-1">
    <P> Proin elit Arcu, rutrum Commodo, vehicula tempus, Commodo a, Risus. Curabitur gdzie indziej niesklasyfikowane 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 eleifend adipiscing. 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>

Zobacz demo

Sort (Sortable)

Przeciągnij Karty powyżej, aby je uporządkować.

Wystarczy zadzwonić .ui-tabs-nav elementu na .sortable() , można pozwolić sortowane przez użytkownika karty. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <title> zakładki jQuery UI (Zakładki) - Sortowanie (Sortable) </ 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 tabs = $ ( "#tabs") .tabs ();
    tabs.find ( ".ui-tabs-nav") .sortable ({
      osi "x",
      stop: function () {
        tabs.tabs ( "odśwież");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "wypustki">
  <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 = "tabs-1">
    <P> Proin elit Arcu, rutrum Commodo, vehicula tempus, Commodo a, Risus. Curabitur gdzie indziej niesklasyfikowane 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 eleifend adipiscing. 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 = "tabs-2">
    <P> Morbi tincidunt, dui 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 w ligula suscipit aliquam. Praesent w eros Vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Zapytanie Viverra nulla. aliquam erat volutpat. Pellentesque Convallis. mecenasem feugiat, Tellus Pellentesque Pretium Zapytanie, felis felis lorem euismod, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "tabs-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. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim Commodo Pellentesque. Praesent UE Risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, nec feugiat, luctus a, lacus. </ p>
    <P> Duis cursus. Mecenasa eros ligula, blandit NEC, pharetra się, sempre się, magna. Nullam ac lacus. Nulla facilisi. Praesent Viverra Justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec Mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla Mattis Commodo. Ut sagittis. Donec nisi Lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu Tellus interdum rutrum. mecenasem Commodo. Pellentesque NEC elit. Fusce w lacus. Vivamus libero vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Zobacz demo

W dolnej części zakładki

Z dodatkowymi CSS (pozycjonowanie) JS (umieszczony w odpowiednim elemencie klasy), zakładka Jieke w dolnej części zawartości. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <title> zakładki jQuery UI (Zakładki) - na dole strony zakładki </ 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 ();
 
    // Modyfikuj klasę
    $ ( ".tabs-Bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav> *")
      .removeClass ( "UI-corner-all ui-corner-top")
      .addClass ( "UI-corner-bottom");
 
    Komórka nawigacji w części końcowej // $ ( ".tabs-bottom .ui-tabs-nav") .appendTo ( ".tabs-bottom");
  });
  </ Script>
  <Style>
  / * Wymuszone wysokość, tak, że klapka nie zmienia się wraz z wysokością zawartość jest zmieniana * /
  #tabs .tabs-spacer {float: left; height: 200px;}
  .tabs-bottom .ui-tabs-nav {clear: left; padding: 0 .2em .2em .2em;}
  .tabs-bottom .ui-tabs-nav li {top: auto; dół: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0;}
  .tabs-bottom .ui-tabs-nav li.ui-tabs-Active {margin-top: -1px; padding-top: 1px;}
  </ Style>
</ Head>
<Body>
 
<Div id = "wypustki" 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-spacer"> </ div>
  <div id = "tabs-1">
    <P> Proin elit Arcu, rutrum Commodo, vehicula tempus, Commodo a, Risus. Curabitur gdzie indziej niesklasyfikowane 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 eleifend adipiscing. 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 = "tabs-2">
    <P> Morbi tincidunt, dui 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 w ligula suscipit aliquam. Praesent w eros Vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Zapytanie Viverra nulla. aliquam erat volutpat. Pellentesque Convallis. mecenasem feugiat, Tellus Pellentesque Pretium Zapytanie, felis felis lorem euismod, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "tabs-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. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim Commodo Pellentesque. Praesent UE Risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, nec feugiat, luctus a, lacus. </ p>
    <P> Duis cursus. Mecenasa eros ligula, blandit NEC, pharetra się, sempre się, magna. Nullam ac lacus. Nulla facilisi. Praesent Viverra Justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec Mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla Mattis Commodo. Ut sagittis. Donec nisi Lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu Tellus interdum rutrum. mecenasem Commodo. Pellentesque NEC elit. Fusce w lacus. Vivamus libero vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Zobacz demo

Pionowe Tabs

Kliknij kartę, aby przełączyć jest podzielony na różne części logicznej treści. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <title> zakładki jQuery UI (Zakładki) - zakładki pionowe </ 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-ui pionowe wspomagających clearfix") .;
    $ ( "#tabs Li") .removeClass ( "UI-corner-top") .addClass ( "UI-corner-left");
  });
  </ Script>
  <Style>
  .ui-tabs-Vertical {width: 55em;}
  .ui-tabs-pionowe .ui-tabs-nav {padding: .2em .1em .2em .2em; pływaka: left; width: 12em;}
  .ui-tabs-Vertical .ui-tabs-nav li {clear: left; width: 100%; border-bottom-width: 1px istotne; border-right-width :! 0 istotne; margines :! 0 -1px .2em 0;
  .ui-tabs-Vertical .ui-tabs-nav li a {display: block;}
  .ui-tabs-Vertical .ui-tabs-nav li.ui-tabs czynne {padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px;}
  .ui-tabs-Vertical .ui-tabs-panel {padding: 1 em; pływaka: prawo; width: 40em;}
  </ Style>
</ Head>
<Body>
 
<div id = "wypustki">
  <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 = "tabs-1">
    <H2> Tytuł Zawartość 1 </ h2>
    <P> Proin elit Arcu, rutrum Commodo, vehicula tempus, Commodo a, Risus. Curabitur gdzie indziej niesklasyfikowane 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 eleifend adipiscing. 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 = "tabs-2">
    <H2> Tytuł utworu 2 </ h2>
    <P> Morbi tincidunt, dui 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 w ligula suscipit aliquam. Praesent w eros Vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Zapytanie Viverra nulla. aliquam erat volutpat. Pellentesque Convallis. mecenasem feugiat, Tellus Pellentesque Pretium Zapytanie, felis felis lorem euismod, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "tabs-3">
    <H2> Tytuł utworu 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. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim Commodo Pellentesque. Praesent UE Risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, nec feugiat, luctus a, lacus. </ p>
    <P> Duis cursus. Mecenasa eros ligula, blandit NEC, pharetra się, sempre się, magna. Nullam ac lacus. Nulla facilisi. Praesent Viverra Justo vitae neque. Praesent blandit adipiscing velit. Potenti Suspendisse. Donec Mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla Mattis Commodo. Ut sagittis. Donec nisi Lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu Tellus interdum rutrum. mecenasem Commodo. Pellentesque NEC elit. Fusce w lacus. Vivamus libero vitae Lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Zobacz demo