jQuery UI esempio - le schede (Tabs)
Singolo area del contenuto di un multi-panel, ogni pannello nel titolo lista.
Per ulteriori dettagli sulle componenti schede, consultare la documentazione API membro scheda (il Widget Tabs) .
La funzione di default
Fare clic sulla scheda per passare è suddiviso in una porzione diversa logica del contenuto.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<title> schede jQuery UI (Spartiti) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 = "schede">
<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 una, 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 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 = "schede-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. Praesent in eros vestibolo mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Inchiesta viverra nulla. aliquam erat Volutpat. Pellentesque Convallis. Mecenate feugiat, Tellus Pellentesque Pretium Inchiesta, felis lorem euismod felis, eu ornare Leo Nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<div id = "schede-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 annuncio litora torquent per conubia Nostra , per 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 una, lacus. </ p>
<P> Duis cursus. Mecenate eros ligula, nec blandit, pharetra a, sempre a, 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. Mecenate Commodo. Pellentesque nec elit. Fusce in Lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Corpo>
</ Html>
contenuti pieghevole
Fare clic sulla scheda selezionata per il passaggio del contenuto chiuso / aperto. Per attivare questa funzione, è necessario impostare il collapsible opzione a true.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<title> schede jQuery UI (Spartiti) - tenore pieghevole </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 ({
pieghevole: true
});
});
</ Script>
</ Head>
<Body>
<div id = "schede">
<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> Fare clic sulla scheda di nuovo per chiudere il pannello di contenuti. </ Strong> </ p>
<P> Proin elit arcu, rutrum Commodo, vehicula tempus, Commodo una, 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 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 = "schede-2">
<P> <strong> Fare clic sulla scheda di nuovo per chiudere il pannello di contenuti. </ 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. Praesent in eros vestibolo mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Inchiesta viverra nulla. aliquam erat Volutpat. Pellentesque Convallis. Mecenate feugiat, Tellus Pellentesque Pretium Inchiesta, felis lorem euismod felis, eu ornare Leo Nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<div id = "schede-3">
<P> <strong> Fare clic sulla scheda di nuovo per chiudere il pannello di contenuti. </ Strong> </ p>
<P> Duis cursus. Mecenate eros ligula, nec blandit, pharetra a, sempre a, 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. Mecenate Commodo. Pellentesque nec elit. Fusce in Lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Corpo>
</ Html>
Ottenere contenuti tramite Ajax
Impostare il valore del link href in una scheda per scheda per l'accesso a contenuti esterni tramite Ajax. Quando richieste Ajax in attesa di una risposta, di una scheda in un "Loading ...", quando il carico è completo ritorno alla scheda Generale.
Tag 3 e 4 dimostrano il caricamento lento e danni ai tag AJAX, e come gestire gli errori server-side in queste circostanze. Si prega di notare che entrambi richiedono un server web può spiegare PHP. Non lavorano al di fuori del file system.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<title> schede jQuery UI (Spartiti) - Get contenuti tramite Ajax </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 (
"Impossibile caricare la scheda. Se questo non è un demo." +
"Noi risolvere il problema il prima possibile.");
});
}
});
});
</ Script>
</ Head>
<Body>
<div id = "schede">
<Ul>
<Li> <a href="#tabs-1"> precaricato </a> </ li>
Tag <li> <a href="ajax/content1.html"> 1 </a> </ li>
Tag <li> <a href="ajax/content2.html"> 2 </a> </ li>
<Li> <a tag href="ajax/content3-slow.php"> 3 (lenta) </a> </ li>
<Li> <a href="ajax/content4-broken.php"> etichetta 4 (danneggiato) </a> </ li>
</ Ul>
<Div Id = "tabs-1">
<P> Proin elit arcu, rutrum Commodo, vehicula tempus, Commodo una, 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 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>
</ Corpo>
</ Html>
Aperto quando la si libra del mouse
Con l' event possibilità di passare le parti quando il mouse passa stato on / off. Il valore di default è l'evento "click".
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<title> schede jQuery UI (Spartiti) - Quando il mouse passa sopra l'apertura </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 = "schede">
<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 una, 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 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 = "schede-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. Praesent in eros vestibolo mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Inchiesta viverra nulla. aliquam erat Volutpat. Pellentesque Convallis. Mecenate feugiat, Tellus Pellentesque Pretium Inchiesta, felis lorem euismod felis, eu ornare Leo Nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<div id = "schede-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 annuncio litora torquent per conubia Nostra , per 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 una, lacus. </ p>
<P> Duis cursus. Mecenate eros ligula, nec blandit, pharetra a, sempre a, 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. Mecenate Commodo. Pellentesque nec elit. Fusce in Lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Corpo>
</ Html>
funzionamento semplice
Basta aggiungere e rimuovere le schede.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<title> schede jQuery UI (Spartiti) - semplice funzionamento </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
Etichetta #dialog, ingresso #dialog {display: block;}
label #dialog {margin-top: 0.5em;}
Ingresso #dialog, textarea #dialog {width: 95%;}
#tabs {margin-top: 1em;}
#tabs li .ui-icon-chiusura {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-vicino' role = 'presentazione'> Rimuovi Tab </ span > </ li> ",
tabCounter = 2;
var schede = $ ( "#tabs") .tabs ();
// Inizializza una finestra di dialogo modale: tasto e un modulo di ripristino interno "vicino" dialogo callback var = $ ( "#dialog") .dialog Personalizzazione ({
AutoOpen: false,
modal: true,
pulsanti: {
Aggiungere: function () {
addTab ();
$ (This) .dialog ( "close");
},
Annulla: function () {
$ (This) .dialog ( "close");
}
},
In prossimità: function () {
formare [0] .Reset ();
}
});
// Modulo AddTab: Chiamato al momento della presentazione funzione addTab e chiudere la finestra di var = modulo dialog.find ( "modulo") .submit (function (evento) {
addTab ();
dialog.dialog ( "close");
event.preventDefault ();
});
// Funzione addTab Attuale: utilizzare il modulo qui sopra per aggiungere una nuova funzione di ingresso scheda addTab () {
label var = tabTitle.val () || "Tab" + tabCounter,
id = "Schede-" + tabCounter,
Li = $ (tabTemplate.replace (/ # \ {href \} / g, "#" + id) .Rimontare (/ # \ {label \} / g, etichetta)),
tabContentHtml = tabContent.val () || "Tab" + tabCounter + "contenuto".;
tabs.find ( ".ui-tabs-nav") .Append (Li);
tabs.append ( "<div id = '" + id + "'> <p>" + tabContentHtml + "</ p> </ div>");
tabs.tabs ( "Refresh");
tabCounter ++;
}
// Tasto AddTab: Il valore della finestra di dialogo Apri $ ( "#add_tab")
apri un ()
.Click (function () {
dialog.dialog ( "Open");
});
// Chiudi Icon: Rimuovere scheda tabs.delegate ( "span.ui-icon-vicino" quando si fa clic, "click", function () {
var panelId = $ (this) .closest ( "li") .Remove () attr ( "aria-controlli") .;
$ ( "#" + PanelId) .Remove ();
tabs.tabs ( "Refresh");
});
tabs.bind ( "KeyUp", la funzione (evento) {
if (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
Var. PanelId = tabs.find ( ".ui-schede-attivi") .Remove () attr ( "aria-controlli");
$ ( "#" + PanelId) .Remove ();
tabs.tabs ( "Refresh");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "finestra" title = "dati Tab">
<Form>
<Class Fieldset = "ui-helper-reset">
<Label for = "TAB_TITLE"> Titolo </ label>
<Input type = "text" name = "TAB_TITLE" id = valore "TAB_TITLE" = "" class = "ui-widget di contenuto ui-angolo-all">
<Label for = "tab_content"> contenuto </ label>
<Nome Textarea = "tab_content" id = "tab_content" class = "ui-widget di contenuto ui-angolo-all"> </ textarea>
</ Fieldset>
</ Form>
</ Div>
<Button id = "add_tab"> Aggiungere una scheda </ button>
<div id = "schede">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> <span class = "ui ui-icon-icon-vicino" role = "presentazione"> scheda Rimuovi </ span> </ li>
</ Ul>
<Div Id = "tabs-1">
<P> Proin elit arcu, rutrum Commodo, vehicula tempus, Commodo una, 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 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>
</ Corpo>
</ Html>
Sort (ordinabile)
schede Trascinare sopra per riordinarli.
Basta chiamare .ui-tabs-nav elemento su .sortable() , si può lasciare che le schede ordinabili.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<title> schede jQuery UI (Spartiti) - ordinamento (ordinabili) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 schede = $ ( "#tabs") .tabs ();
tabs.find ( ".ui-tabs-nav") .sortable ({
Asse: "x",
fermare: function () {
tabs.tabs ( "Refresh");
}
});
});
</ Script>
</ Head>
<Body>
<div id = "schede">
<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 una, 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 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 = "schede-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. Praesent in eros vestibolo mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Inchiesta viverra nulla. aliquam erat Volutpat. Pellentesque Convallis. Mecenate feugiat, Tellus Pellentesque Pretium Inchiesta, felis lorem euismod felis, eu ornare Leo Nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<div id = "schede-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 annuncio litora torquent per conubia Nostra , per 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 una, lacus. </ p>
<P> Duis cursus. Mecenate eros ligula, nec blandit, pharetra a, sempre a, 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. Mecenate Commodo. Pellentesque nec elit. Fusce in Lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Corpo>
</ Html>
La parte inferiore della scheda
Con alcune ulteriori CSS (per posizionamento) e JS (posizionato nell'elemento classe corretta), scheda Jieke nella parte inferiore del contenuto.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<title> jQuery UI schede (Spartiti) - nella parte inferiore della scheda </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 ();
// Modificare classe
$ ( ".tabs-Bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav> *")
.removeClass ( "ui-angolo-tutto ui-angolo-top")
.addClass ( "ui-angolo-bottom");
navigazione mobile nella parte terminale // $ ( ".tabs-bottom .ui-tabs-nav") .appendTo ( ".tabs-bottom");
});
</ Script>
<Style>
/ * Forzata altezza, in modo che la linguetta non cambia con l'altezza del contenuto è cambiato * /
#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; in basso: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0;}
.tabs-bottom .ui-tabs-nav li.ui-schede-active {margin-top: -1px; padding-top: 1px;}
</ Style>
</ Head>
<Body>
<Div id = "linguette" class = "schede-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 = "schede-distanziatore"> </ div>
<Div Id = "tabs-1">
<P> Proin elit arcu, rutrum Commodo, vehicula tempus, Commodo una, 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 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 = "schede-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. Praesent in eros vestibolo mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Inchiesta viverra nulla. aliquam erat Volutpat. Pellentesque Convallis. Mecenate feugiat, Tellus Pellentesque Pretium Inchiesta, felis lorem euismod felis, eu ornare Leo Nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<div id = "schede-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 annuncio litora torquent per conubia Nostra , per 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 una, lacus. </ p>
<P> Duis cursus. Mecenate eros ligula, nec blandit, pharetra a, sempre a, 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. Mecenate Commodo. Pellentesque nec elit. Fusce in Lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Corpo>
</ Html>
schede verticali
Fare clic sulla scheda per passare è suddiviso in una porzione diversa logica del contenuto.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<title> jQuery UI schede (Spartiti) - schede verticali </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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-schede-verticali ui-helper-clearfix") .;
$ ( "#tabs Li") .removeClass ( "ui-angolo-top") .addClass ( "ui-angolo-sinistra");
});
</ Script>
<Style>
.ui-tabs-verticale {width: 55em;}
.ui-tabs-verticali .ui-tabs-nav {padding: .2em .1em .2em .2em; float: left; width: 12em;}
.ui-tabs-verticali .ui-tabs-nav li {clear: left; width: 100%; border-bottom-width: 1px importante; border-right-width :! 0 importante; margine :! 0 -1px .2em 0;
.ui-tabs-verticale .ui-tabs-nav li a {display: block;}
.ui-tabs-verticali .ui-tabs-nav li.ui-tabs-active {padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px;}
.ui-tabs-verticali .ui-tabs-panel {padding: 1em; float: right; larghezza: 40em;}
</ Style>
</ Head>
<Body>
<div id = "schede">
<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> Content Titolo 1 </ h2>
<P> Proin elit arcu, rutrum Commodo, vehicula tempus, Commodo una, 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 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 = "schede-2">
<H2> titolo del contenuto 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. Praesent in eros vestibolo mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut Inchiesta viverra nulla. aliquam erat Volutpat. Pellentesque Convallis. Mecenate feugiat, Tellus Pellentesque Pretium Inchiesta, felis lorem euismod felis, eu ornare Leo Nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<div id = "schede-3">
<H2> Content Titolo 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 annuncio litora torquent per conubia Nostra , per 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 una, lacus. </ p>
<P> Duis cursus. Mecenate eros ligula, nec blandit, pharetra a, sempre a, 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. Mecenate Commodo. Pellentesque nec elit. Fusce in Lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Corpo>
</ Html>