jQuery UI par exemple - onglets (onglets)
zone de contenu unique d'un multi-panneaux, chaque panneau dans le titre de la liste.
Pour plus de détails sur les composants onglets, consultez la documentation de l' API membre de l' onglet (le Widget Tabs) .
La fonction par défaut
Cliquez sur l'onglet pour basculer est divisé en différentes partie logique du contenu.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> onglets jQuery UI (Tabs) - La fonction par défaut </ 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 nca 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 dolor ut 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 ligula dans ligula suscipit aliquam sed. Praesent dans eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mécène feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<div id = "tabs-3">
<P> Mauris eleifend est et turpis. Duis id erat. De 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 par conubia nostra , par inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. hendrerit ligula tempus pretium risus Praesent eu. Curabitur lorem enim, pretium nca, feugiat nca, luctus a, lacus. </ p>
<P> Cursus Duis. Mécène eros de Ligula, nca blandit, pharetra à, semper à, 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. Mécène commodo. Pellentesque nca elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Folding contenu
Cliquez sur l'onglet sélectionné pour changer le contenu fermé / ouvert. Pour activer cette fonction, vous devez définir le collapsible option pour vrai.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> onglets jQuery UI (Tabs) - Pliage contenu </ 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 ({
pliable: 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> Cliquez à nouveau sur l'onglet pour fermer le panneau de contenu. </ Strong> </ p>
<P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nca 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 dolor ut nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
<Div id = "tabs-2">
<P> <strong> Cliquez à nouveau sur l'onglet pour fermer le panneau de contenu. </ 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 ligula dans ligula suscipit aliquam sed. Praesent dans eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mécène feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<div id = "tabs-3">
<P> <strong> Cliquez à nouveau sur l'onglet pour fermer le panneau de contenu. </ Strong> </ p>
<P> Cursus Duis. Mécène eros de Ligula, nca blandit, pharetra à, semper à, 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. Mécène commodo. Pellentesque nca elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Obtenez le contenu via Ajax
Réglez la valeur du lien href dans un onglet à l'accès à un contenu externe via Ajax. Lorsque les requêtes Ajax en attente d'une réponse, un onglet dans une "Chargement ...", lorsque la charge est retour complet à l'onglet Général.
Tag 3 et 4 montrent la lenteur de chargement et les dommages aux balises AJAX, et comment gérer les erreurs côté serveur dans ces circonstances. S'il vous plaît noter que les deux nécessitent un serveur web peut expliquer PHP. Ils ne fonctionnent pas en dehors du système de fichiers.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> onglets jQuery UI (Tabs) - Obtenez le contenu 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 (event, ui) {
ui.jqXHR.error (function () {
ui.panel.html (
"Impossible de charger l'onglet. Si cela est une démo." +
"Nous allons résoudre le problème le plus tôt possible.");
});
}
});
});
</ Script>
</ Head>
<Body>
<div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> préchargé </a> </ li>
<Li> <a href="ajax/content1.html"> tag 1 </a> </ li>
<Li> <a href="ajax/content2.html"> tag 2 </a> </ li>
<Li> <a tag href="ajax/content3-slow.php"> 3 (lent) </a> </ li>
<Li> étiquette <a href="ajax/content4-broken.php"> 4 (endommagé) </a> </ li>
</ Ul>
<div id="tabs-1">
<P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nca 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 dolor ut nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Ouvrez lorsque les survols de souris
En event option pour activer les pièces lorsque la souris survole le statut on / off. La valeur par défaut est l'événement "clic".
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> onglets jQuery UI (Tabs) - Lorsque la souris survole l'ouverture </ 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 ({
événement: "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 nca 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 dolor ut 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 ligula dans ligula suscipit aliquam sed. Praesent dans eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mécène feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<div id = "tabs-3">
<P> Mauris eleifend est et turpis. Duis id erat. De 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 par conubia nostra , par inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. hendrerit ligula tempus pretium risus Praesent eu. Curabitur lorem enim, pretium nca, feugiat nca, luctus a, lacus. </ p>
<P> Cursus Duis. Mécène eros de Ligula, nca blandit, pharetra à, semper à, 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. Mécène commodo. Pellentesque nca elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
fonctionnement simple
Il suffit d'ajouter et de supprimer des onglets.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> onglets jQuery UI (Tabs) - opération simple, </ 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>
étiquette #dialog, entrée #dialog {display: block;}
étiquette #dialog {margin-top: 0.5em;}
entrée #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-icon ui-icon-close' role =« présentation »> Supprimer Tab </ span > </ li> ",
tabCounter = 2;
var onglets = $ ( "#tabs") .tabs ();
// Initialisation d'une boîte de dialogue modale: bouton et un formulaire de réinitialisation interne "close" dialogue callback var = $ ( "#dialog") .dialog Personnaliser ({
AutoOpen: false,
modal: true,
boutons: {
Ajouter: function () {
AddTab ();
$ (Ce) .dialog ( "close");
},
Annuler: function () {
$ (Ce) .dialog ( "close");
}
},
à proximité: function () {
former [0] .Reset ();
}
});
// Forme AddTab: Appelé lors de la soumission fonction AddTab et fermer la boîte de dialogue var form = dialog.find ( "form") .submit (function (event) {
AddTab ();
dialog.dialog ( "close");
event.preventDefault ();
});
// Fonction AddTab réelle: Utilisez le formulaire ci-dessus pour ajouter une nouvelle AddTab de fonction d'entrée de l'onglet () {
étiquette var = tabTitle.val () || "Tab" + tabCounter,
id = "Onglets-" + tabCounter,
li = $ (tabTemplate.replace (/ # \ {href \} / g, "#" + id) .replace (/ # \ {label \} / g, étiquette)),
tabContentHtml = tabContent.val () || "Tab" + tabCounter + "contenu.";
tabs.find ( ".ui-tabs-nav») .append (li);
tabs.append ( "<div id =" + id + " '> <p>" + tabContentHtml + "</ p> </ div>");
tabs.tabs ( "Refresh");
tabCounter ++;
}
// Bouton AddTab: La valeur de la boîte de dialogue Ouvrir $ ( "#add_tab")
.button ()
.cliquez (function () {
dialog.dialog ( «ouvert»);
});
// Fermer Icône: Supprimer onglet tabs.delegate ( "span.ui-icon-close" lorsque vous cliquez dessus, "click", function () {
var panelId = $ (this) .closest ( "li") .remove () attr ( "aria-contrôles») .;
$ ( "#" + PanelId) .remove ();
tabs.tabs ( "Refresh");
});
tabs.bind ( "keyup", function (event) {
if (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
. Var panelId = tabs.find ( ".ui-onglets-actifs») .remove () attr ( "aria-contrôles»);
$ ( "#" + PanelId) .remove ();
tabs.tabs ( "Refresh");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "dialogue" title = "données Tab">
<Form>
<Class Fieldset = "ui-helper-reset">
<Label for = "TAB_TITLE"> Titre </ label>
<Input type = "text" name = id = valeur "TAB_TITLE" "de TAB_TITLE" = "" class = "ui-widget-content ui-coin-all">
<Label for = "tab_content"> contenu </ label>
<Textarea name = "tab_content" id = "tab_content" class = "ui-widget-content ui-coin-all"> </ textarea>
</ Fieldset>
</ Form>
</ Div>
<Bouton id = "add_tab"> Ajouter un onglet </ button>
<div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> <span class = rôle "ui-icon ui-icon-close" = "présentation"> Supprimer onglet </ span> </ li>
</ Ul>
<div id="tabs-1">
<P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nca 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 dolor ut nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Trier (Sortable)
onglets Faites glisser ci-dessus pour les réorganiser.
Il suffit d' appeler .ui-tabs-nav élément sur .sortable() , vous pouvez laisser les onglets triables.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> onglets jQuery UI (Tabs) - tri (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 onglets = $ ( "#tabs") .tabs ();
tabs.find ( ".ui-tabs-nav») .sortable ({
axe: "x",
stop: 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 nca 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 dolor ut 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 ligula dans ligula suscipit aliquam sed. Praesent dans eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mécène feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<div id = "tabs-3">
<P> Mauris eleifend est et turpis. Duis id erat. De 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 par conubia nostra , par inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. hendrerit ligula tempus pretium risus Praesent eu. Curabitur lorem enim, pretium nca, feugiat nca, luctus a, lacus. </ p>
<P> Cursus Duis. Mécène eros de Ligula, nca blandit, pharetra à, semper à, 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. Mécène commodo. Pellentesque nca elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
La partie inférieure de l'onglet
Avec un peu de CSS supplémentaires (pour le positionnement) et JS (placé dans l'élément de classe correct), onglet Jieke au bas du contenu.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> onglets jQuery UI (Tabs) - au bas de la page de l'onglet </ 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 ();
// Modifier la classe
$ ( ".tabs-Bas .ui-tabs-nav, .tabs-bas .ui-tabs-nav> *")
.removeClass ( "ui-coin-all ui coin-top")
.addClass ( "ui-coin-bas»);
La navigation mobile dans la partie terminale // $ ( ".tabs-bas .ui-tabs-nav») .appendTo ( ".tabs-bas»);
});
</ Script>
<Style>
/ * Forcé une hauteur, de sorte que l'onglet ne change pas avec la hauteur du contenu est modifié * /
#tabs .tabs-entretoise {float: left; hauteur: 200px;}
.tabs fond .ui-tabs-nav {clear: left; padding: 0 .2em .2em .2em;}
.tabs fond .ui-tabs-nav li {top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0;}
.tabs-bas .ui-tabs-nav li.ui-tabs-actif {margin-top: -1px; padding-top: 1px;}
</ Style>
</ Head>
<Body>
<Div id = classe "onglets" = "tabs-bas»>
<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>
<Class Div = "tabs-entretoise"> </ div>
<div id="tabs-1">
<P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nca 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 dolor ut 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 ligula dans ligula suscipit aliquam sed. Praesent dans eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mécène feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<div id = "tabs-3">
<P> Mauris eleifend est et turpis. Duis id erat. De 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 par conubia nostra , par inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. hendrerit ligula tempus pretium risus Praesent eu. Curabitur lorem enim, pretium nca, feugiat nca, luctus a, lacus. </ p>
<P> Cursus Duis. Mécène eros de Ligula, nca blandit, pharetra à, semper à, 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. Mécène commodo. Pellentesque nca elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Vertical Tabs
Cliquez sur l'onglet pour basculer est divisé en différentes partie logique du contenu.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> onglets jQuery UI (Tabs) - onglets verticaux </ 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-verticales ui-helper-clearfix») .;
$ ( "#tabs Li") .removeClass ( "ui-coin-top") .addClass ( "ui-coin-gauche»);
});
</ Script>
<Style>
.ui-tabs-vertical {width: 55em;}
.ui-onglets verticaux .ui-tabs-nav {padding: .2em .1em .2em .2em; float: left; largeur: 12em;}
.ui-tabs-verticales .ui-tabs-nav li {clear: left; width: 100%; border-bottom-width: 1px importante; border-right-width :! 0 importante; marge :! 0 -1px .2em 0;
.ui-tabs-vertical .ui-tabs-nav li a {display: block;}
.ui-tabs-verticales .ui-tabs-nav li.ui-onglets actif {padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px;}
.ui-tabs-verticales .ui-tabs-panel {padding: 1em; float: right; largeur: 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> Contenu Titre 1 </ h2>
<P> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nca 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 dolor ut nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
<Div id = "tabs-2">
<H2> Titre du contenu 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 ligula dans ligula suscipit aliquam sed. Praesent dans eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mécène feugiat, tellus pellentesque pretium posuere, felis felis lorem euismod, eu leo ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<div id = "tabs-3">
<H2> Contenu Titre 3 </ h2>
<P> Mauris eleifend est et turpis. Duis id erat. De 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 par conubia nostra , par inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. hendrerit ligula tempus pretium risus Praesent eu. Curabitur lorem enim, pretium nca, feugiat nca, luctus a, lacus. </ p>
<P> Cursus Duis. Mécène eros de Ligula, nca blandit, pharetra à, semper à, 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. Mécène commodo. Pellentesque nca elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>