jQuery UI contoh - tab (Tab)
area konten tunggal multi-panel, masing-masing panel dalam judul daftar.
Untuk rincian lebih lanjut tentang komponen tab, lihat dokumentasi API anggota tab (Widget Tab) .
Fungsi standar
Klik tab untuk beralih dibagi menjadi bagian logis yang berbeda dari konten.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> tab jQuery UI (Tabs) - Fungsi standar </ 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>
$ (Fungsi () {
$ ( "#tabs") .tabs ();
});
</ Script>
</ Kepala>
<Body>
<Div id = "tab">
<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 = "tab-1">
<P> Proin elit Arcu, rutrum commodo, vehicula tempus, commodo sebuah, risus. Curabitur nec Arcu. Donec sollicitudin mi duduk 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 Phasellus ipsum interdum.. Nunc tristique tempus LECTUS . </ p>
</ Div>
<Div id = "tab-2">
<P> Morbi tincidunt, dui duduk 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 di ligula suscipit Aliquam. Hubungi Kami di jalan vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel Metus. Ut Enquiry viverra nulla. Aliquam ERat volutpat. Pellentesque convallis. Maecenas feugiat, Tellus pellentesque Pretium Enquiry, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<Div id = "tab-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 non ante. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra , per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Hubungi Kami eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus sebuah, lacus. </ p>
<P> duis cursus. Maecenas ligula eros, nec blandit, pharetra di, sempre di, magna. Nullam ac lacus. Nulla facilisi. Hubungi Kami viverra justo vitae neque. Hubungi Kami 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. Maecenas commodo. Pellentesque nec elit. Fusce di lacus. Vivamus libero vitae LECTUS hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
konten lipat
Klik pada tab yang dipilih untuk beralih konten tertutup / terbuka. Untuk mengaktifkan fitur ini, Anda perlu mengatur collapsible pilihan untuk benar.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> tab jQuery UI (Tabs) - Folding konten </ 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>
$ (Fungsi () {
$ ( "#tabs") .tabs ({
dilipat: true
});
});
</ Script>
</ Kepala>
<Body>
<Div id = "tab">
<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 = "tab-1">
<P> <strong> Klik tab lagi untuk menutup panel konten. </ Kuat> </ p>
<P> Proin elit Arcu, rutrum commodo, vehicula tempus, commodo sebuah, risus. Curabitur nec Arcu. Donec sollicitudin mi duduk 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 Phasellus ipsum interdum.. Nunc tristique tempus LECTUS . </ p>
</ Div>
<Div id = "tab-2">
<P> <strong> Klik tab lagi untuk menutup panel konten. </ Kuat> </ p>
<P> Morbi tincidunt, dui duduk 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 di ligula suscipit Aliquam. Hubungi Kami di jalan vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel Metus. Ut Enquiry viverra nulla. Aliquam ERat volutpat. pellentesque convallis. Maecenas feugiat, Tellus pellentesque Pretium Enquiry, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<Div id = "tab-3">
<P> <strong> Klik tab lagi untuk menutup panel konten. </ Kuat> </ p>
<P> duis cursus. Maecenas ligula eros, nec blandit, pharetra di, sempre di, magna. Nullam ac lacus. Nulla facilisi. Hubungi Kami viverra justo vitae neque. Hubungi Kami 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. Maecenas commodo. Pellentesque nec elit. Fusce di lacus. Vivamus libero vitae LECTUS hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Dapatkan konten melalui Ajax
Mengatur nilai link href dalam tab untuk tab untuk mengakses konten eksternal melalui Ajax. Ketika permintaan Ajax menunggu respon, tab menjadi "Loading ...", saat beban kembali lengkap ke tab General.
Tag 3 dan 4 menunjukkan lambat loading dan kerusakan tag AJAX, dan bagaimana menangani kesalahan server-side dalam keadaan ini. Harap dicatat bahwa keduanya membutuhkan web server dapat menjelaskan PHP. Mereka tidak bekerja di luar sistem file.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> tab jQuery UI (Tabs) - Dapatkan konten melalui 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>
$ (Fungsi () {
$ ( "#tabs") .tabs ({
beforeLoad: function (event, ui) {
ui.jqXHR.error (function () {
ui.panel.html (
"Tidak dapat memuat tab. Jika ini bukan demo." +
"Kami akan memperbaiki masalah secepat mungkin.");
});
}
});
});
</ Script>
</ Kepala>
<Body>
<Div id = "tab">
<Ul>
<Li> <a href="#tabs-1"> preloaded </a> </ li>
<Li> tag <a href="ajax/content1.html"> 1 </a> </ li>
<Li> tag <a href="ajax/content2.html"> 2 </a> </ li>
<Li> <a tag href="ajax/content3-slow.php"> 3 (lambat) </a> </ li>
<Li> <a href="ajax/content4-broken.php"> label 4 (rusak) </a> </ li>
</ Ul>
<Div id = "tab-1">
<P> Proin elit Arcu, rutrum commodo, vehicula tempus, commodo sebuah, risus. Curabitur nec Arcu. Donec sollicitudin mi duduk 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 Phasellus ipsum interdum.. Nunc tristique tempus LECTUS . </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Buka ketika melayang tikus
Dengan event opsi untuk mengganti bagian ketika mouse di on / off status. Nilai default adalah acara "klik".
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> tab jQuery UI (Tab) - Ketika mouse melayang di atas terbuka </ 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>
$ (Fungsi () {
$ ( "#tabs") .tabs ({
acara: "mouseover"
});
});
</ Script>
</ Kepala>
<Body>
<Div id = "tab">
<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 = "tab-1">
<P> Proin elit Arcu, rutrum commodo, vehicula tempus, commodo sebuah, risus. Curabitur nec Arcu. Donec sollicitudin mi duduk 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 Phasellus ipsum interdum.. Nunc tristique tempus LECTUS . </ p>
</ Div>
<Div id = "tab-2">
<P> Morbi tincidunt, dui duduk 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 di ligula suscipit Aliquam. Hubungi Kami di jalan vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel Metus. Ut Enquiry viverra nulla. Aliquam ERat volutpat. pellentesque convallis. Maecenas feugiat, Tellus pellentesque Pretium Enquiry, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<Div id = "tab-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 non ante. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra , per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Hubungi Kami eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus sebuah, lacus. </ p>
<P> duis cursus. Maecenas ligula eros, nec blandit, pharetra di, sempre di, magna. Nullam ac lacus. Nulla facilisi. Hubungi Kami viverra justo vitae neque. Hubungi Kami 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. Maecenas commodo. Pellentesque nec elit. Fusce di lacus. Vivamus libero vitae LECTUS hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
operasi sederhana
Cukup menambah dan menghapus tab.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> tab jQuery UI (Tabs) - operasi sederhana </ 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">
<Gaya>
label #dialog, #dialog masukan {display: block;}
label #dialog {margin-top: 0.5em;}
#dialog input, textarea #dialog {width: 95%;}
#tabs {margin-top: 1em;}
#tabs li Ui-icon-dekat {float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;}
#add_tab {cursor: pointer;}
</ Style>
<Script>
$ (Fungsi () {
var tabTitle = $ ( "#tab_title"),
tabContent = $ ( "#tab_content"),
tabTemplate = "<li> <a href='#{href}'> # {label} </a> <span class = 'ui-icon ui-icon-dekat' role = 'presentasi'> Hapus Tab </ span > </ li> ",
tabCounter = 2;
var tab = $ ( "#tabs") .tabs ();
// Inisialisasi kotak dialog modal: tombol dan bentuk reset internal "dekat" dialog callback var = $ ( "#dialog") .dialog Sesuaikan ({
AutoOpen: palsu,
modal: benar,
Tombol: {
Tambahkan: function () {
addTab ();
$ (Ini) .dialog ( "dekat");
},
Batal: function () {
$ (Ini) .dialog ( "dekat");
}
},
dekat: function () {
membentuk [0] .reset ();
}
});
// Bentuk AddTab: Disebut ketika mengirimkan fungsi addTab dan menutup dialog var form = dialog.find ( "bentuk") .submit (function (event) {
addTab ();
dialog.dialog ( "dekat");
event.preventDefault ();
});
// Fungsi addTab Aktual: Gunakan formulir di atas untuk menambahkan fungsi input tab addTab baru () {
label var = tabTitle.val () || "Tab" + tabCounter,
id = "tabs-" + tabCounter,
li = $ (tabTemplate.replace (/ # \ {href \} / g, "#" + id) Menggantikan (/ # \ {label \} / g, label)),
tabContentHtml = tabContent.val () || "Tab" + tabCounter + "konten.";
tabs.find ( "Ui-tab-nav") Append (li);
tabs.append ( "<div id = '" + id + "'> <p>" + tabContentHtml + "</ p> </ div>");
tabs.tabs ( "refresh");
tabCounter ++;
}
// Tombol AddTab: Nilai Terbuka kotak dialog $ ( "#add_tab")
.button ()
.Klik (function () {
dialog.dialog ( "membuka");
});
// Tutup Icon: Hapus tab tabs.delegate ( "span.ui-icon-dekat" ketika diklik, "klik", function () {
var panelId = $ (ini) .closest ( "li") .remove () attr ( "aria-kontrol") .;
$ ( "#" + PanelId) .remove ();
tabs.tabs ( "refresh");
});
tabs.bind ( "keyup", function (event) {
jika (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
. Var panelId = tabs.find ( "Ui-tab-aktif") .remove () attr ( "aria-kontrol");
$ ( "#" + PanelId) .remove ();
tabs.tabs ( "refresh");
}
});
});
</ Script>
</ Kepala>
<Body>
<Div id = "dialog" title = "Data Tab">
<Form>
<Class Fieldset = "ui-helper-ulang">
<Label untuk = "TAB_TITLE"> Judul </ label>
<Input type = "text" name = "TAB_TITLE" id = "TAB_TITLE" value = "" class = "ui-widget-konten ui-sudut-semua">
<Label untuk = "tab_content"> isi </ label>
<Nama Textarea = "tab_content" id = "tab_content" class = "ui-widget-konten ui-sudut-semua"> </ textarea>
</ Fieldset>
</ Form>
</ Div>
<Tombol id = "add_tab"> Tambahkan tab </ button>
<Div id = "tab">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> <span class = "ui-icon ui-icon-dekat" role = "presentasi"> Hapus tab </ span> </ li>
</ Ul>
<Div id = "tab-1">
<P> Proin elit Arcu, rutrum commodo, vehicula tempus, commodo sebuah, risus. Curabitur nec Arcu. Donec sollicitudin mi duduk 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 Phasellus ipsum interdum.. Nunc tristique tempus LECTUS . </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Urutkan (Sortable)
tab tarik di atas untuk menyusun ulang mereka.
Cukup hubungi .ui-tabs-nav elemen pada .sortable() , Anda dapat membiarkan tab diurutkan.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> tab jQuery UI (Tabs) - menyortir (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>
$ (Fungsi () {
var tab = $ ( "#tabs") .tabs ();
tabs.find ( "Ui-tab-nav") .sortable ({
axis: "x",
berhenti: function () {
tabs.tabs ( "refresh");
}
});
});
</ Script>
</ Kepala>
<Body>
<Div id = "tab">
<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 = "tab-1">
<P> Proin elit Arcu, rutrum commodo, vehicula tempus, commodo sebuah, risus. Curabitur nec Arcu. Donec sollicitudin mi duduk 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 Phasellus ipsum interdum.. Nunc tristique tempus LECTUS . </ p>
</ Div>
<Div id = "tab-2">
<P> Morbi tincidunt, dui duduk 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 di ligula suscipit Aliquam. Hubungi Kami di jalan vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel Metus. Ut Enquiry viverra nulla. Aliquam ERat volutpat. pellentesque convallis. Maecenas feugiat, Tellus pellentesque Pretium Enquiry, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<Div id = "tab-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 non ante. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra , per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Hubungi Kami eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus sebuah, lacus. </ p>
<P> duis cursus. Maecenas ligula eros, nec blandit, pharetra di, sempre di, magna. Nullam ac lacus. Nulla facilisi. Hubungi Kami viverra justo vitae neque. Hubungi Kami 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. Maecenas commodo. Pellentesque nec elit. Fusce di lacus. Vivamus libero vitae LECTUS hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Bagian bawah tab
Dengan beberapa CSS tambahan (untuk penentuan posisi) dan JS (ditempatkan dalam elemen kelas yang benar), tab Jieke di bagian bawah konten.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tab (Tab) - di bagian bawah halaman tab </ 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>
$ (Fungsi () {
$ ( "#tabs") .tabs ();
// Ubah kelas
$ ( ".tabs-Bawah Ui-tab-nav, .tabs-bottom Ui-tab-nav> *")
.removeClass ( "ui-sudut-semua ui-sudut-top")
.addClass ( "ui-sudut-bottom");
navigasi mobile di bagian ujung // $ ( ".tabs-bottom Ui-tab-nav") .appendTo ( ".tabs-bottom");
});
</ Script>
<Gaya>
/ * Paksa ketinggian, sehingga tab tidak berubah dengan ketinggian konten berubah * /
#tabs .tabs-spacer {float: left; height: 200px;}
.tabs-bottom Ui-tab-nav {jelas: kiri; padding: 0 .2em .2em .2em;}
.tabs-bottom Ui-tab-nav li {top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0;}
.tabs-bottom Ui-tab-nav li.ui-tab-aktif {margin-top: -1px; padding-top: 1px;}
</ Style>
</ Kepala>
<Body>
<Div id = "tab" class = "tab-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>
<Class Div = "tab-spacer"> </ div>
<Div id = "tab-1">
<P> Proin elit Arcu, rutrum commodo, vehicula tempus, commodo sebuah, risus. Curabitur nec Arcu. Donec sollicitudin mi duduk 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 Phasellus ipsum interdum.. Nunc tristique tempus LECTUS . </ p>
</ Div>
<Div id = "tab-2">
<P> Morbi tincidunt, dui duduk 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 di ligula suscipit Aliquam. Hubungi Kami di jalan vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel Metus. Ut Enquiry viverra nulla. Aliquam ERat volutpat. pellentesque convallis. Maecenas feugiat, Tellus pellentesque Pretium Enquiry, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<Div id = "tab-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 non ante. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra , per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Hubungi Kami eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus sebuah, lacus. </ p>
<P> duis cursus. Maecenas ligula eros, nec blandit, pharetra di, sempre di, magna. Nullam ac lacus. Nulla facilisi. Hubungi Kami viverra justo vitae neque. Hubungi Kami 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. Maecenas commodo. Pellentesque nec elit. Fusce di lacus. Vivamus libero vitae LECTUS hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Tab vertikal
Klik tab untuk beralih dibagi menjadi bagian logis yang berbeda dari konten.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tab (Tab) - tab vertikal </ 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>
$ (Fungsi () {
$ ( "#tabs") .tabs () AddClass ( "ui-tab-vertikal ui-helper-clearfix") .;
$ ( "#tabs Li") .removeClass ( "ui-sudut-top") .addClass ( "ui-sudut-kiri");
});
</ Script>
<Gaya>
Ui-tab-vertikal {width: 55em;}
Ui-tab-vertikal Ui-tab-nav {padding: .2em .1em .2em .2em; float: left; width: 12em;}
Ui-tab-vertikal Ui-tab-nav li {jelas: kiri; width: 100%; border-bottom-width: 1px penting; border-kanan-lebar :! 0 penting; marjin :! 0 -1px .2em 0;
Ui-tab-vertikal Ui-tab-nav li a {display: block;}
Ui-tab-vertikal Ui-tab-nav li.ui-tab-aktif {padding-bottom: 0; padding-right: .1em; border-kanan-width: 1px; border-kanan-width: 1px;}
Ui-tab-vertikal Ui-tab-panel {padding: 1em; float: right; width: 40em;}
</ Style>
</ Kepala>
<Body>
<Div id = "tab">
<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 = "tab-1">
<H2> Konten Judul 1 </ h2>
<P> Proin elit Arcu, rutrum commodo, vehicula tempus, commodo sebuah, risus. Curabitur nec Arcu. Donec sollicitudin mi duduk 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 Phasellus ipsum interdum.. Nunc tristique tempus LECTUS . </ p>
</ Div>
<Div id = "tab-2">
<H2> judul Content 2 </ h2>
<P> Morbi tincidunt, dui duduk 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 di ligula suscipit Aliquam. Hubungi Kami di jalan vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel Metus. Ut Enquiry viverra nulla. Aliquam ERat volutpat. Pellentesque convallis. Maecenas feugiat, Tellus pellentesque Pretium Enquiry, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et Purus. </ p>
</ Div>
<Div id = "tab-3">
<H2> Konten Judul 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 non ante. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra , per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Hubungi Kami eu risus hendrerit ligula tempus Pretium. Curabitur lorem enim, Pretium nec, feugiat nec, luctus sebuah, lacus. </ p>
<P> duis cursus. Maecenas ligula eros, nec blandit, pharetra di, sempre di, magna. Nullam ac lacus. Nulla facilisi. Hubungi Kami viverra justo vitae neque. Hubungi Kami 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. Maecenas commodo. Pellentesque nec elit. Fusce di lacus. Vivamus libero vitae LECTUS hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>