jQuery UI Beispiel - Registerkarten (Tabs)
Einzel Inhalt eines Multi-Panel, jede Platte in der Liste Titel.
Weitere Informationen zu den Registerkarten Komponenten finden Sie in der API - Dokumentation Registerkarte Mitglied (das Widget Tabs) .
Die Standardfunktion
Klicken Sie auf die Registerkarte zu wechseln ist in verschiedene logische Teil des Inhalts aufgeteilt.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Tabs (Registerkarten) - Die Standardfunktion </ 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 = "tabs-1">
<P> Proin elit arcu, rutrum commodo, vehicula tempus, COMMODO a, risus. Curabitur ang 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 ang 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 in ligula suscipit aliquam. Nullam in eros vestibulum 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 lorem euismod felis, eu ornare leo nisi vel felis. Mauris et consectetur tortor purus. </ p>
</ Div>
<Div id = "Tabs-3">
<P> Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci Lorem eget Lorem. Vestibulum nicht ante. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra pro inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Nullam eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus a, Lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra an, semper an, magna. Nullam ac Lacus. Nulla facilisi. Nullam viverra justo vitae neque. Nullam blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec nicht 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 ang elit. Fusce in Lacus. Vivamus ein libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Folding Inhalt
Klicken Sie auf die ausgewählte Registerkarte der Inhalt wechseln geschlossen / offen. Um diese Funktion zu aktivieren, müssen Sie die festlegen collapsible Option auf true.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Tabs (Registerkarten) - Folding Inhalt </ 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 ({
zusammenklappbar: 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 = "tabs-1">
<P> <strong> Klicken Sie auf die Registerkarte wieder das Inhaltsfeld zu schließen. </ Strong> </ p>
<P> Proin elit arcu, rutrum commodo, vehicula tempus, COMMODO a, risus. Curabitur ang 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 ang orci tincidunt interdum. Phasellus ipsum. Nunc Tristique tempus lectus . </ p>
</ Div>
<Div id = "Tabs-2">
<P> <strong> Klicken Sie auf die Registerkarte wieder das Inhaltsfeld zu schließen. </ 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 in ligula suscipit aliquam. Nullam in eros vestibulum 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 lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<Div id = "Tabs-3">
<P> <strong> Klicken Sie auf die Registerkarte wieder das Inhaltsfeld zu schließen. </ Strong> </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra an, semper an, magna. Nullam ac Lacus. Nulla facilisi. Nullam viverra justo vitae neque. Nullam blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec nicht 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 ang elit. Fusce in Lacus. Vivamus ein libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Erhalten Sie Inhalte über Ajax
Setzen Sie den Wert des href Link in einem Register zu Register, um den Zugriff auf externe Inhalte über Ajax. Beim Warten Ajax-Anfragen auf eine Antwort, ein Register in ein "Loading ...", wenn die Last auf der Registerkarte Allgemein vollständige Rückkehr ist.
Tag 3 und 4 zeigen die langsamen Laden und Schäden an AJAX-Tags und wie serverseitige Fehler unter diesen Umständen zu behandeln. Bitte beachten Sie, dass sowohl ein Web-Server benötigen, können PHP erklären. Sie arbeiten nicht außerhalb des Dateisystems.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Tabs (Registerkarten) - Holen Sie Inhalte über 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 (
"Kann nicht die Registerkarte geladen werden. Ist dies nicht eine Demo." +
"Wir werden das Problem so schnell wie möglich zu beheben.");
});
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "Tabs">
<Ul>
<Li> <a href="#tabs-1"> vorbelasteten </a> </ li>
<Li> <a href="ajax/content1.html"> tag 1 </a> </ li>
<Li> <a href="ajax/content2.html"> Tag 2 </a> </ li>
<Li> <a href="ajax/content3-slow.php"> Tag 3 (langsam) </a> </ li>
<Li> <a href="ajax/content4-broken.php"> Etikett 4 (beschädigt) </a> </ li>
</ Ul>
<Div id = "tabs-1">
<P> Proin elit arcu, rutrum commodo, vehicula tempus, COMMODO a, risus. Curabitur ang 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 ang orci tincidunt interdum. Phasellus ipsum. Nunc Tristique tempus lectus . </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Öffnen Sie, wenn Sie die Maus Hover
Mit dem event Option , um die Teile zu wechseln , wenn die Maus auf schwebt / Aus - Status. Der Standardwert ist das Ereignis "Klick".
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Tabs (Registerkarten) - Wenn die Maus über das offene </ 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 ({
Veranstaltung: "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 = "tabs-1">
<P> Proin elit arcu, rutrum commodo, vehicula tempus, COMMODO a, risus. Curabitur ang 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 ang 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 in ligula suscipit aliquam. Nullam in eros vestibulum 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 lorem euismod felis, 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. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci Lorem eget Lorem. Vestibulum nicht ante. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra pro inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Nullam eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus a, Lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra an, semper an, magna. Nullam ac Lacus. Nulla facilisi. Nullam viverra justo vitae neque. Nullam blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec nicht 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 ang elit. Fusce in Lacus. Vivamus ein libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Einfache Bedienung
Fügen Sie einfach und Tabs zu entfernen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Tabs (Registerkarten) - einfache Bedienung </ 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 Etikett, #dialog input {display: block;}
#dialog label {margin-top: 0.5em;}
#dialog Eingang, #dialog TextArea- {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-Symbol-Symbol-close' role =" Darstellung "> Entfernen Tab </ span > </ li> ",
tabCounter = 2;
var Tabs = $ ( "#tabs") .tabs ();
// Einem modalen Dialogfeld initialisieren: Anpassen-Taste und einen internen Reset Form "close" Rückruf var dialog = $ ( "#dialog") .dialog ({
AutoOpen-: false,
modal: true,
Tasten: {
Hinzufügen: function () {
addTab (),
$ (This) .dialog ( "close");
},
Abbrechen: function () {
$ (This) .dialog ( "close");
}
},
schließen: function () {
bilden [0] .reset ();
}
});
// AddTab Form: Wird aufgerufen, wenn addTab Funktion einreichen und das Dialog var form = dialog.find ( "Form") .submit (function (event) {schließen
addTab ();
dialog.dialog ( "close");
Event.preventDefault ();
});
// Die tatsächliche addTab Funktion: Verwenden Sie das Formular oben eine neue Registerkarte Eingabefunktion addTab () hinzuzufügen {
var label = tabTitle.val () || "Tab" + tabCounter,
id = "tabs-" + tabCounter,
li $ (tabTemplate.replace (/ # \ {href \} / g, "#" + id) .replace (/ # \ {label \} / g, Label)) =,
tabContentHtml = tabContent.val () || "Tab" + tabCounter + "Inhalt.";
tabs.find ( ".ui-tabs-nav") .append (li);
tabs.append ( "<div id =" "+ id +" '> <p> "+ tabContentHtml +" </ p> </ div> ");
tabs.tabs ( "Refresh");
tabCounter ++;
}
// AddTab Taste: Der Wert des Dialogfeld Öffnen $ ( "#add_tab")
.Taste ()
.click (function () {
dialog.dialog ( "open");
});
// Schließen-Symbol: Entfernen Registerkarte tabs.delegate ( "span.ui-icon-close", wenn darauf geklickt, "Klick", function () {
var panelId = $ (this) .closest ( "li") .remove () attr ( "aria-Kontrollen") .;
$ ( "#" + PanelId) .remove ();
tabs.tabs ( "Refresh");
});
tabs.bind ( "keyup", Funktion (event) {
if (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
. Var panelId = tabs.find ( ".ui-tabs-aktiv") .remove () attr ( "aria-Kontrollen");
$ ( "#" + PanelId) .remove ();
tabs.tabs ( "Refresh");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "Dialog" title = "Tab Daten">
<Form>
<Fieldset class = "ui-Helfer-Reset">
<Label for = "TAB_TITLE"> Titel </ label>
<Input type = "text" name = "TAB_TITLE" id = "TAB_TITLE" value = "" class = "ui-Widget-Inhalt ui-Ecke-all">
<Label for = "tab_content"> Inhalt </ label>
<Textarea name = "tab_content" id = "tab_content" class = "ui-Widget-Inhalt ui-Ecke-all"> </ textarea>
</ Fieldset>
</ Form>
</ Div>
<Button id = "add_tab"> Fügen Sie einen Tab </ button>
<Div id = "Tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> <span class = "ui-Symbol ui-icon-close" role = "Präsentation"> Entfernen Registerkarte </ span> </ li>
</ Ul>
<Div id = "tabs-1">
<P> Proin elit arcu, rutrum commodo, vehicula tempus, COMMODO a, risus. Curabitur ang 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 ang orci tincidunt interdum. Phasellus ipsum. Nunc Tristique tempus lectus . </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Sort (Sortable)
Ziehen Tabs über ihnen neu zu ordnen.
Rufen Sie einfach an .ui-tabs-nav - Element auf .sortable() , können Sie sortierbar Tabs lassen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Tabs (Registerkarten) - Sortierung (sortierbar) </ 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 ({
Achse "x",
Stopp: 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 = "tabs-1">
<P> Proin elit arcu, rutrum commodo, vehicula tempus, COMMODO a, risus. Curabitur ang 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 ang 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 in ligula suscipit aliquam. Nullam in eros vestibulum 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 lorem euismod felis, 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. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci Lorem eget Lorem. Vestibulum nicht ante. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra pro inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Nullam eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus a, Lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra an, semper an, magna. Nullam ac Lacus. Nulla facilisi. Nullam viverra justo vitae neque. Nullam blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec nicht 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 ang elit. Fusce in Lacus. Vivamus ein libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Der untere Teil der Registerkarte
Mit einigen zusätzlichen CSS (für Positionierung) und JS (in der richtigen Klasse Element platziert), Jieke Register am unteren Rand des Inhalts.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Tabs (Registerkarten) - am unteren Rand der Registerkarte </ 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 ();
// Klasse ändern
$ ( ".tabs-Bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav> *")
.removeClass ( "ui-Ecke alle ui-Ecke-top")
.addClass ( "ui-Ecke-bottom");
Mobil Navigation im Endbereich // $ ( ".tabs-bottom .ui-tabs-nav") .appendTo ( ".tabs-bottom");
});
</ Script>
<Style>
/ * Eine Höhe gezwungen, so dass die Lasche * geändert wird nicht mit der Höhe des Inhalts ändern /
#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; bottom: 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 = "Tabs" class = "Registerkarten-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 ang 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 ang 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 in ligula suscipit aliquam. Nullam in eros vestibulum 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 lorem euismod felis, 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. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci Lorem eget Lorem. Vestibulum nicht ante. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra pro inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Nullam eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus a, Lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra an, semper an, magna. Nullam ac Lacus. Nulla facilisi. Nullam viverra justo vitae neque. Nullam blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec nicht 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 ang elit. Fusce in Lacus. Vivamus ein libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Vertical Tabs
Klicken Sie auf die Registerkarte zu wechseln ist in verschiedene logische Teil des Inhalts aufgeteilt.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Tabs (Registerkarten) - vertikale Tabs </ 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-vertikale ui-Helfer-clearfix") .;
$ ( "#tabs Li") .removeClass ( "ui-Ecke-top") .addClass ( "ui-Ecke links");
});
</ Script>
<Style>
.ui-tabs-vertikale {width: 55em;}
.ui-tabs-vertikale .ui-tabs-nav {padding: .2em .1em .2em .2em; float: left; width: 12em;}
.ui-tabs-vertikale .ui-tabs-nav li {clear: left; Breite: 100%; border-bottom-width: 1px wichtig; border-right-width :! 0 wichtig; Marge :! 0 -1px .2em 0;
.ui-tabs-vertikale .ui-tabs-nav li a {display: block;}
.ui-tabs-vertikale .ui-tabs-nav li.ui-tabs-active {padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px;}
.ui-tabs-vertikale .ui-tabs-panel {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 = "tabs-1">
<H2> Inhalt Titel 1 </ h2>
<P> Proin elit arcu, rutrum commodo, vehicula tempus, COMMODO a, risus. Curabitur ang 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 ang orci tincidunt interdum. Phasellus ipsum. Nunc Tristique tempus lectus . </ p>
</ Div>
<Div id = "Tabs-2">
<H2> Inhalt Titel 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 in ligula suscipit aliquam. Nullam in eros vestibulum 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 lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<Div id = "Tabs-3">
<H2> Inhalt Titel 3 </ h2>
<P> Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci Lorem eget Lorem. Vestibulum nicht ante. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra pro inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Nullam eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus a, Lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra an, semper an, magna. Nullam ac Lacus. Nulla facilisi. Nullam viverra justo vitae neque. Nullam blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec nicht 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 ang elit. Fusce in Lacus. Vivamus ein libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>