บทช่วยสอน jQuery UI เช่น - แท็บ (แท็บ) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ฟังก์ชั่นเริ่มต้น,เนื้อหาพับ,ได้รับข้อมูลผ่านทางอาแจ็กซ์,เปิดเมื่อวางเมาส์แช่,ใช้งานได้ง่าย,เรียง (จัดเรียง),ด้านล่างของแท็บ,แท็บแนวตั้ง,
พื้นที่เนื้อหาเดียวของหลายแผงแต่ละแผงในชื่อรายการ
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับส่วนประกอบแท็บให้ดูที่เอกสาร API สมาชิกแท็บ (Widget ที่แท็บ)
คลิกที่แท็บเพื่อสลับแบ่งออกเป็นส่วนตรรกะที่แตกต่างกันของเนื้อหา
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> แท็บ jQuery UI (แท็บ) - ฟังก์ชั่นเริ่มต้น </ title>
<link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#tabs") .tabs ();
});
</ script>
</ head>
<body>
<div id = "แท็บ">
<ul>
<li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<li> <a href="#tabs-2"> ไมโครเวฟได้บังคับ </a> </ li>
<li> <a href="#tabs-3"> Aenean Lacinia </a> </ li>
</ ul>
<div id = "แท็บ-1">
<p> ไมโครเวฟ Elit Arcu, rutrum commodo, vehicula Tempus, commodo ที่ Risus. Arcu Curabitur NEC. แบบพกพา sollicitudin ไมล์ Amet นั่งมาร์ท. น้ำ ELEMENTUM Quam ullamcorper ante. Etiam aliquet Massa et Lorem. มาร์ท dapibus Lacus auctor Risus. Aenean tempor ullamcorper ราศีสิงห์. Vivamus SED Magna โฟน ligula eleifend adipiscing. Duis Orci. แบ่งปัน sodales tortor Vitae Ipsum. แบ่งปัน nulla. Duis แบ่งปัน molestie Erat. Ut et มาร์ทหรือกะเทย varius sollicitudin. sed UT บังคับ NEC Orci tincidunt interdum. Phasellus Ipsum. Nunc เทนนิส Tempus Lectus . </ p>
</ div>
<div id = "แท็บ 2">
<p> ผ้า tincidunt, DUI Amet นั่ง facilisis feugiat, Odio Metus Gravida ante, UT pharetra Massa Metus ID ในขณะนี้. Duis scelerisque molestie turpis. Sed fringilla สซ่า Eget luctus malesuada, Metus อยู่ molestie Lectus, UT Tempus อยู่ Massa UT บังคับ. Aenean aliquet fringilla SEM. Suspendisse ligula ใน ligula suscipit แบ่งปัน sed. ติดต่อเราในที่อยู่พนันไมล์ adipiscing adipiscing. ผ้า facilisis. Curabitur ornare consequat ในขณะนี้. Aenean หรือ Metus. Ut สอบถามข้อมูล viverra nulla. แบ่งปัน Erat volutpat. pellentesque convallis. Maecenas feugiat, เทลลัส pellentesque ราคาที่ สอบถามข้อมูล, แมว Lorem euismod Felis สหภาพยุโรป ornare สิงห์ค้างคาหรือแมว. มาร์ท consectetur tortor et Purus. </ p>
</ div>
<div id = "แท็บ-3">
<p> มาร์ท eleifend EST et turpis. Duis ID Erat. potenti Suspendisse. แบ่งปัน vulputate, กะเทยหรือ vehicula accumsan ไมล์วัด rutrum Erat สหภาพยุโรป congue Orci Lorem Eget Lorem. การพนันไม่ใช่ ante. ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ inceptos himenaeos. ผู้ดูแลระบบ sodales. Quisque สหภาพยุโรปหรือ urna enim commodo pellentesque. ติดต่อเราสหภาพยุโรป Risus สำนัก ligula Tempus ราคาที่. Curabitur Lorem enim, ราคาที่ NEC, NEC feugiat, luctus ที่ Lacus. </ p>
<p> Duis ซัส. Maecenas อยู่ ligula, NEC blandit, pharetra AT, Semper AT, Magna. Nullam AC คัส. Nulla facilisi. ติดต่อเรา viverra Justo ประวัติวัด. ติดต่อเรา blandit adipiscing velit. potenti Suspendisse. แบบพกพา Mattis, กะเทยหรือ pharetra blandit, Magna ligula faucibus ที่อยู่รหัส euismod คัสได้บังคับ Eget Odio. น้ำ scelerisque. แบบพกพาที่ไม่ใช่ Libero SED nulla Mattis commodo. Ut sagittis. แบบพกพาค้างคา Lectus, feugiat porttitor, tempor AC, tempor ประวัติ, กะเทย. Aenean vehicula velit สหภาพยุโรปเทลลัส interdum rutrum. Maecenas commodo. Pellentesque NEC Elit. ผู้ดูแลระบบใน Lacus. Vivamus Libero Vitae Lectus สำนักสำนัก. </ p>
</ div>
</ div>
</ body>
</ html>
คลิกที่แท็บที่เลือกที่จะเปลี่ยนเนื้อหาปิด / เปิด ต้องการเปิดใช้งานคุณลักษณะนี้คุณจำเป็นต้องตั้งค่า collapsible ตัวเลือกที่จะเป็นจริง
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> แท็บ jQuery UI (แท็บ) - เนื้อหาพับ </ title>
<link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#tabs") .tabs ({
พับ: จริง
});
});
</ script>
</ head>
<body>
<div id = "แท็บ">
<ul>
<li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<li> <a href="#tabs-2"> ไมโครเวฟได้บังคับ </a> </ li>
<li> <a href="#tabs-3"> Aenean Lacinia </a> </ li>
</ ul>
<div id = "แท็บ-1">
<p> <strong> คลิกแท็บอีกครั้งเพื่อปิดแผงเนื้อหา </ strong> </ p>
<p> ไมโครเวฟ Elit Arcu, rutrum commodo, vehicula Tempus, commodo ที่ Risus. Arcu Curabitur NEC. แบบพกพา sollicitudin ไมล์ Amet นั่งมาร์ท. น้ำ ELEMENTUM Quam ullamcorper ante. Etiam aliquet Massa et Lorem. มาร์ท dapibus Lacus auctor Risus. Aenean tempor ullamcorper ราศีสิงห์. Vivamus SED Magna โฟน ligula eleifend adipiscing. Duis Orci. แบ่งปัน sodales tortor Vitae Ipsum. แบ่งปัน nulla. Duis แบ่งปัน molestie Erat. Ut et มาร์ทหรือกะเทย varius sollicitudin. sed UT บังคับ NEC Orci tincidunt interdum. Phasellus Ipsum. Nunc เทนนิส Tempus Lectus . </ p>
</ div>
<div id = "แท็บ 2">
<p> <strong> คลิกแท็บอีกครั้งเพื่อปิดแผงเนื้อหา </ strong> </ p>
<p> ผ้า tincidunt, DUI Amet นั่ง facilisis feugiat, Odio Metus Gravida ante, UT pharetra Massa Metus ID ในขณะนี้. Duis scelerisque molestie turpis. Sed fringilla สซ่า Eget luctus malesuada, Metus อยู่ molestie Lectus, UT Tempus อยู่ Massa UT บังคับ. Aenean aliquet fringilla SEM. Suspendisse ligula ใน ligula suscipit แบ่งปัน sed. ติดต่อเราในที่อยู่พนันไมล์ adipiscing adipiscing. ผ้า facilisis. Curabitur ornare consequat ในขณะนี้. Aenean หรือ Metus. Ut สอบถามข้อมูล viverra nulla. แบ่งปัน Erat volutpat. pellentesque convallis. Maecenas feugiat, เทลลัส pellentesque ราคาที่ สอบถามข้อมูล, แมว Lorem euismod Felis สหภาพยุโรป ornare สิงห์ค้างคาหรือแมว. มาร์ท consectetur tortor et Purus. </ p>
</ div>
<div id = "แท็บ-3">
<p> <strong> คลิกแท็บอีกครั้งเพื่อปิดแผงเนื้อหา </ strong> </ p>
<p> Duis ซัส. Maecenas อยู่ ligula, NEC blandit, pharetra AT, Semper AT, Magna. Nullam AC คัส. Nulla facilisi. ติดต่อเรา viverra Justo ประวัติวัด. ติดต่อเรา blandit adipiscing velit. potenti Suspendisse. แบบพกพา Mattis, กะเทยหรือ pharetra blandit, Magna ligula faucibus ที่อยู่รหัส euismod คัสได้บังคับ Eget Odio. น้ำ scelerisque. แบบพกพาที่ไม่ใช่ Libero SED nulla Mattis commodo. Ut sagittis. แบบพกพาค้างคา Lectus, feugiat porttitor, tempor AC, tempor ประวัติ, กะเทย. Aenean vehicula velit สหภาพยุโรปเทลลัส interdum rutrum. Maecenas commodo. Pellentesque NEC Elit. ผู้ดูแลระบบใน Lacus. Vivamus Libero Vitae Lectus สำนักสำนัก. </ p>
</ div>
</ div>
</ body>
</ html>
กำหนดค่าของการเชื่อมโยง href ในแท็บไปที่แท็บเพื่อการเข้าถึงเนื้อหาภายนอกผ่านทางอาแจ็กซ์ เมื่อมีการร้องขออาแจ็กซ์รอการตอบสนองเป็นแท็บเป็น "กำลังโหลด th. " เมื่อโหลดคือการกลับไปที่สมบูรณ์ให้กับแท็บทั่วไป
แท็ก 3 และ 4 แสดงให้เห็นถึงการโหลดช้าและความเสียหายให้กับแท็ก AJAX และวิธีการจัดการข้อผิดพลาดด้านเซิร์ฟเวอร์ในสถานการณ์เหล่านี้ โปรดทราบว่าทั้งสองต้องการเว็บเซิร์ฟเวอร์สามารถอธิบาย PHP พวกเขาไม่ได้ทำงานนอกของระบบแฟ้ม
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> แท็บ jQuery UI (แท็บ) - รับข้อมูลผ่านทางอาแจ็กซ์ </ title>
<link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#tabs") .tabs ({
beforeLoad: ฟังก์ชั่น (เหตุการณ์ UI) {
ui.jqXHR.error (ฟังก์ชั่น () {
ui.panel (
"ไม่สามารถโหลดแท็บ. ถ้าไม่ได้เป็นสาธิต." +
"เราจะแก้ไขปัญหาโดยเร็วที่สุดเท่าที่เป็นไปได้.");
});
}
});
});
</ script>
</ head>
<body>
<div id = "แท็บ">
<ul>
<li> <a href="#tabs-1"> โหลดไว้ </a> </ li>
<li> <a แท็ก href="ajax/content1"> 1 </a> </ li>
<li> <a แท็ก href="ajax/content2"> 2 </a> </ li>
<li> <a แท็ก href="ajax/content3-slow.php"> 3 (ช้า) </a> </ li>
<li> <a href="ajax/content4-broken.php"> ป้ายกำกับ 4 (ความเสียหาย) </a> </ li>
</ ul>
<div id = "แท็บ-1">
<p> ไมโครเวฟ Elit Arcu, rutrum commodo, vehicula Tempus, commodo ที่ Risus. Arcu Curabitur NEC. แบบพกพา sollicitudin ไมล์ Amet นั่งมาร์ท. น้ำ ELEMENTUM Quam ullamcorper ante. Etiam aliquet Massa et Lorem. มาร์ท dapibus Lacus auctor Risus. Aenean tempor ullamcorper ราศีสิงห์. Vivamus SED Magna โฟน ligula eleifend adipiscing. Duis Orci. แบ่งปัน sodales tortor Vitae Ipsum. แบ่งปัน nulla. Duis แบ่งปัน molestie Erat. Ut et มาร์ทหรือกะเทย varius sollicitudin. sed UT บังคับ NEC Orci tincidunt interdum. Phasellus Ipsum. Nunc เทนนิส Tempus Lectus . </ p>
</ div>
</ div>
</ body>
</ html>
โดย event ตัวเลือกในการเปลี่ยนชิ้นส่วนเมื่อเลื่อนเมาส์ / ปิดสถานะ ค่าเริ่มต้นคือเหตุการณ์ "คลิก"
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> แท็บ jQuery UI (แท็บ) - เมื่อเมาส์อยู่เหนือเปิด </ title>
<link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#tabs") .tabs ({
เหตุการณ์: "วางเมาส์"
});
});
</ script>
</ head>
<body>
<div id = "แท็บ">
<ul>
<li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<li> <a href="#tabs-2"> ไมโครเวฟได้บังคับ </a> </ li>
<li> <a href="#tabs-3"> Aenean Lacinia </a> </ li>
</ ul>
<div id = "แท็บ-1">
<p> ไมโครเวฟ Elit Arcu, rutrum commodo, vehicula Tempus, commodo ที่ Risus. Arcu Curabitur NEC. แบบพกพา sollicitudin ไมล์ Amet นั่งมาร์ท. น้ำ ELEMENTUM Quam ullamcorper ante. Etiam aliquet Massa et Lorem. มาร์ท dapibus Lacus auctor Risus. Aenean tempor ullamcorper ราศีสิงห์. Vivamus SED Magna โฟน ligula eleifend adipiscing. Duis Orci. แบ่งปัน sodales tortor Vitae Ipsum. แบ่งปัน nulla. Duis แบ่งปัน molestie Erat. Ut et มาร์ทหรือกะเทย varius sollicitudin. sed UT บังคับ NEC Orci tincidunt interdum. Phasellus Ipsum. Nunc เทนนิส Tempus Lectus . </ p>
</ div>
<div id = "แท็บ 2">
<p> ผ้า tincidunt, DUI Amet นั่ง facilisis feugiat, Odio Metus Gravida ante, UT pharetra Massa Metus ID ในขณะนี้. Duis scelerisque molestie turpis. Sed fringilla สซ่า Eget luctus malesuada, Metus อยู่ molestie Lectus, UT Tempus อยู่ Massa UT บังคับ. Aenean aliquet fringilla SEM. Suspendisse ligula ใน ligula suscipit แบ่งปัน sed. ติดต่อเราในที่อยู่พนันไมล์ adipiscing adipiscing. ผ้า facilisis. Curabitur ornare consequat ในขณะนี้. Aenean หรือ Metus. Ut สอบถามข้อมูล viverra nulla. แบ่งปัน Erat volutpat. pellentesque convallis. Maecenas feugiat, เทลลัส pellentesque ราคาที่ สอบถามข้อมูล, แมว Lorem euismod Felis สหภาพยุโรป ornare สิงห์ค้างคาหรือแมว. มาร์ท consectetur tortor et Purus. </ p>
</ div>
<div id = "แท็บ-3">
<p> มาร์ท eleifend EST et turpis. Duis ID Erat. potenti Suspendisse. แบ่งปัน vulputate, กะเทยหรือ vehicula accumsan ไมล์วัด rutrum Erat สหภาพยุโรป congue Orci Lorem Eget Lorem. การพนันไม่ใช่ ante. ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ inceptos himenaeos. ผู้ดูแลระบบ sodales. Quisque สหภาพยุโรปหรือ urna enim commodo pellentesque. ติดต่อเราสหภาพยุโรป Risus สำนัก ligula Tempus ราคาที่. Curabitur Lorem enim, ราคาที่ NEC, NEC feugiat, luctus ที่ Lacus. </ p>
<p> Duis ซัส. Maecenas อยู่ ligula, NEC blandit, pharetra AT, Semper AT, Magna. Nullam AC คัส. Nulla facilisi. ติดต่อเรา viverra Justo ประวัติวัด. ติดต่อเรา blandit adipiscing velit. potenti Suspendisse. แบบพกพา Mattis, กะเทยหรือ pharetra blandit, Magna ligula faucibus ที่อยู่รหัส euismod คัสได้บังคับ Eget Odio. น้ำ scelerisque. แบบพกพาที่ไม่ใช่ Libero SED nulla Mattis commodo. Ut sagittis. แบบพกพาค้างคา Lectus, feugiat porttitor, tempor AC, tempor ประวัติ, กะเทย. Aenean vehicula velit สหภาพยุโรปเทลลัส interdum rutrum. Maecenas commodo. Pellentesque NEC Elit. ผู้ดูแลระบบใน Lacus. Vivamus Libero Vitae Lectus สำนักสำนัก. </ p>
</ div>
</ div>
</ body>
</ html>
เพียงแค่เพิ่มและลบแท็บ
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> แท็บ jQuery UI (แท็บ) - การดำเนินงานที่เรียบง่าย </ title>
<link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
ป้าย #dialog ใส่ #dialog {display: บล็อก;}
ป้าย #dialog {ขอบด้านบน: 0.5em;}
การป้อนข้อมูล #dialog, textarea {#dialog ความกว้าง: 95%;}
#tabs {ขอบด้านบน: 1em;}
#tabs li .ui ไอคอนอย่างใกล้ชิด {ลอย: ด้านซ้าย; margin: 0.4em 0.2em 0 0; เคอร์เซอร์: ตัวชี้;}
#add_tab {เคอร์เซอร์: ตัวชี้;}
</ style>
<script>
$ (ฟังก์ชั่น () {
var tabTitle = $ ( "#tab_title")
TabContent = $ ( "#tab_content")
tabTemplate = "<li> <a href='#{href}'> # {} ฉลาก </a> <ระดับช่วง = 'UI-ไอคอน UI-ไอคอนปิด' บทบาท = 'นำเสนอ'> ลบแท็บ </ span > </ li> "
tabCounter = 2;
แท็บ var = $ ( "#tabs") .tabs ();
// เริ่มต้นกล่องโต้ตอบ modal: ปุ่มและรูปแบบการตั้งค่าภายใน "ปิด" โต้ตอบโทรกลับ var = $ ( "#dialog") .dialog ปรับแต่ง ({
AutoOpen: เท็จ
กิริยา: จริง
ปุ่ม: {
เพิ่มฟังก์ชั่น () {
addTab ();
$ (นี้) .dialog ( "ใกล้");
}
ยกเลิก: ฟังก์ชั่น () {
$ (นี้) .dialog ( "ใกล้");
}
}
ใกล้: ฟังก์ชั่น () {
รูปแบบ [0] .reset ();
}
});
// รูปแบบ AddTab: เรียกว่าเมื่อมีการส่ง addTab ฟังก์ชั่นและปิด var โต้ตอบแบบฟอร์ม = dialog.find ( "รูปแบบ") .submit (ฟังก์ชั่น (event) {
addTab ();
dialog.dialog ( "ใกล้");
event.preventDefault ();
});
ฟังก์ชั่น // addTab จริง: ใช้แบบฟอร์มด้านบนเพื่อเพิ่มฟังก์ชั่นใหม่ addTab ป้อนข้อมูลแท็บ () {
ป้าย var = tabTitle.val () || "แท็บ" + tabCounter,
id = "tabs-" + tabCounter,
Li = $ (tabTemplate.replace (/ # \ {href \} / g "#" + ID) .replace (/ # \ {ฉลาก \} / g ฉลาก))
tabContentHtml = tabContent.val () || "แท็บ" + tabCounter + "เนื้อหา.";
tabs.find ( ".ui แท็บ-NAV") .append (Li);
tabs.append ( "<div id = '" + รหัส + "'> <p>" + tabContentHtml + "</ p> </ div>");
tabs.tabs ( "รีเฟรช");
tabCounter ++;
}
// ปุ่ม AddTab: ค่าของกล่องโต้ตอบเปิด $ ( "#add_tab") เดอะ
.button ()
จำนวนคลิก (ฟังก์ชั่น () {
dialog.dialog ( "เปิด");
});
// ปิดไอคอน: เอา tabs.delegate แท็บ ( "span.ui ไอคอนอย่างใกล้ชิด" เมื่อคลิก "คลิก" ฟังก์ชั่น () {
var panelId = $ (นี้) .closest ( "หลี่") remove () attr ( "Aria-ควบคุม") .;
$ ( "#" + PanelId) remove ();
tabs.tabs ( "รีเฟรช");
});
tabs.bind ( "keyup" ฟังก์ชั่น (event) {
ถ้า (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
. Var panelId = tabs.find ( ".ui แท็บที่ใช้งาน") remove () attr ( "Aria-ควบคุม");
$ ( "#" + PanelId) remove ();
tabs.tabs ( "รีเฟรช");
}
});
});
</ script>
</ head>
<body>
<div id = "โต้ตอบ" title = "ข้อมูลแท็บ">
<form>
<ระดับ fieldset = "UI-ผู้ช่วยรีเซ็ต">
<label สำหรับ = "TAB_TITLE"> ชื่อ </ label>
<ประเภทขาเข้า = "text" name = "TAB_TITLE" id = "TAB_TITLE" value = "" class = "UI-Widget เนื้อหา UI-มุมทั้งหมด">
<label สำหรับ = "tab_content"> เนื้อหา </ label>
<textarea ชื่อ = "tab_content" id = "tab_content" class = "UI-Widget เนื้อหา UI-มุมทั้งหมด"> </ textarea>
</ fieldset>
</ form>
</ div>
<ปุ่ม id = "add_tab"> เพิ่มแท็บ </ ปุ่ม>
<div id = "แท็บ">
<ul>
<li> <a href="#tabs-1"> Nunc tincidunt </a> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนอย่างใกล้ชิดบทบาท" = "นำเสนอ"> นำแท็บ </ span> </ li>
</ ul>
<div id = "แท็บ-1">
<p> ไมโครเวฟ Elit Arcu, rutrum commodo, vehicula Tempus, commodo ที่ Risus. Arcu Curabitur NEC. แบบพกพา sollicitudin ไมล์ Amet นั่งมาร์ท. น้ำ ELEMENTUM Quam ullamcorper ante. Etiam aliquet Massa et Lorem. มาร์ท dapibus Lacus auctor Risus. Aenean tempor ullamcorper ราศีสิงห์. Vivamus SED Magna โฟน ligula eleifend adipiscing. Duis Orci. แบ่งปัน sodales tortor Vitae Ipsum. แบ่งปัน nulla. Duis แบ่งปัน molestie Erat. Ut et มาร์ทหรือกะเทย varius sollicitudin. sed UT บังคับ NEC Orci tincidunt interdum. Phasellus Ipsum. Nunc เทนนิส Tempus Lectus . </ p>
</ div>
</ div>
</ body>
</ html>
ลากแท็บด้านบนเพื่อเรียงลำดับใหม่
เพียงโทร .ui-tabs-nav องค์ประกอบใน .sortable() คุณสามารถให้แท็บจัดเรียง
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> แท็บ jQuery UI (แท็บ) - การเรียงลำดับ (จัดเรียง) </ title>
<link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
แท็บ var = $ ( "#tabs") .tabs ();
tabs.find ( ".ui แท็บ-NAV") .sortable ({
แกน: "X"
หยุด: ฟังก์ชั่น () {
tabs.tabs ( "รีเฟรช");
}
});
});
</ script>
</ head>
<body>
<div id = "แท็บ">
<ul>
<li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<li> <a href="#tabs-2"> ไมโครเวฟได้บังคับ </a> </ li>
<li> <a href="#tabs-3"> Aenean Lacinia </a> </ li>
</ ul>
<div id = "แท็บ-1">
<p> ไมโครเวฟ Elit Arcu, rutrum commodo, vehicula Tempus, commodo ที่ Risus. Arcu Curabitur NEC. แบบพกพา sollicitudin ไมล์ Amet นั่งมาร์ท. น้ำ ELEMENTUM Quam ullamcorper ante. Etiam aliquet Massa et Lorem. มาร์ท dapibus Lacus auctor Risus. Aenean tempor ullamcorper ราศีสิงห์. Vivamus SED Magna โฟน ligula eleifend adipiscing. Duis Orci. แบ่งปัน sodales tortor Vitae Ipsum. แบ่งปัน nulla. Duis แบ่งปัน molestie Erat. Ut et มาร์ทหรือกะเทย varius sollicitudin. sed UT บังคับ NEC Orci tincidunt interdum. Phasellus Ipsum. Nunc เทนนิส Tempus Lectus . </ p>
</ div>
<div id = "แท็บ 2">
<p> ผ้า tincidunt, DUI Amet นั่ง facilisis feugiat, Odio Metus Gravida ante, UT pharetra Massa Metus ID ในขณะนี้. Duis scelerisque molestie turpis. Sed fringilla สซ่า Eget luctus malesuada, Metus อยู่ molestie Lectus, UT Tempus อยู่ Massa UT บังคับ. Aenean aliquet fringilla SEM. Suspendisse ligula ใน ligula suscipit แบ่งปัน sed. ติดต่อเราในที่อยู่พนันไมล์ adipiscing adipiscing. ผ้า facilisis. Curabitur ornare consequat ในขณะนี้. Aenean หรือ Metus. Ut สอบถามข้อมูล viverra nulla. แบ่งปัน Erat volutpat. pellentesque convallis. Maecenas feugiat, เทลลัส pellentesque ราคาที่ สอบถามข้อมูล, แมว Lorem euismod Felis สหภาพยุโรป ornare สิงห์ค้างคาหรือแมว. มาร์ท consectetur tortor et Purus. </ p>
</ div>
<div id = "แท็บ-3">
<p> มาร์ท eleifend EST et turpis. Duis ID Erat. potenti Suspendisse. แบ่งปัน vulputate, กะเทยหรือ vehicula accumsan ไมล์วัด rutrum Erat สหภาพยุโรป congue Orci Lorem Eget Lorem. การพนันไม่ใช่ ante. ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ inceptos himenaeos. ผู้ดูแลระบบ sodales. Quisque สหภาพยุโรปหรือ urna enim commodo pellentesque. ติดต่อเราสหภาพยุโรป Risus สำนัก ligula Tempus ราคาที่. Curabitur Lorem enim, ราคาที่ NEC, NEC feugiat, luctus ที่ Lacus. </ p>
<p> Duis ซัส. Maecenas อยู่ ligula, NEC blandit, pharetra AT, Semper AT, Magna. Nullam AC คัส. Nulla facilisi. ติดต่อเรา viverra Justo ประวัติวัด. ติดต่อเรา blandit adipiscing velit. potenti Suspendisse. แบบพกพา Mattis, กะเทยหรือ pharetra blandit, Magna ligula faucibus ที่อยู่รหัส euismod คัสได้บังคับ Eget Odio. น้ำ scelerisque. แบบพกพาที่ไม่ใช่ Libero SED nulla Mattis commodo. Ut sagittis. แบบพกพาค้างคา Lectus, feugiat porttitor, tempor AC, tempor ประวัติ, กะเทย. Aenean vehicula velit สหภาพยุโรปเทลลัส interdum rutrum. Maecenas commodo. Pellentesque NEC Elit. ผู้ดูแลระบบใน Lacus. Vivamus Libero Vitae Lectus สำนักสำนัก. </ p>
</ div>
</ div>
</ body>
</ html>
กับบางส่วน CSS เพิ่มเติม (สำหรับตำแหน่ง) และ JS (อยู่ในองค์ประกอบระดับที่ถูกต้อง) แท็บ Jieke ที่ด้านล่างของเนื้อหา
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI แท็บ (แท็บ) - ที่ด้านล่างของหน้าแท็บ </ title> The
<link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#tabs") .tabs ();
// การปรับเปลี่ยนระดับ
$ ( ".tabs ล่าง .ui แท็บ-NAV, .tabs ล่าง .ui แท็บ-NAV> *")
.removeClass ( "UI-มุมทุกมุม UI บน")
.addClass ( "UI-มุมด้านล่าง");
นำทางมือถือในส่วนท้าย // $ ( ".tabs ล่าง .ui แท็บ-NAV") .appendTo ( ".tabs ล่าง");
});
</ script>
<style>
/ * บังคับความสูงเพื่อให้แท็บไม่เปลี่ยนแปลงมีความสูงของเนื้อหาที่มีการเปลี่ยนแปลง * /
#tabs .tabs-spacer {ลอย: ด้านซ้าย; ความสูง: 200px;}
.tabs ล่าง .ui แท็บ-NAV {ชัดเจนซ้าย; padding: 0 .2em .2em .2em;}
.tabs ล่าง .ui แท็บ-NAV li {ด้านบน: อัตโนมัติด้านล่าง: 0; margin: 0 .2em 1px 0; ขอบล่าง: อัตโนมัติชายแดนด้านบน: 0;}
.tabs ล่าง .ui แท็บ-NAV li.ui แท็บที่ใช้งาน {ขอบด้านบน: -1px; padding-top box: 1px;}
</ style>
</ head>
<body>
<div id = "แท็บ" class = "แท็บด้านล่าง">
<ul>
<li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<li> <a href="#tabs-2"> ไมโครเวฟได้บังคับ </a> </ li>
<li> <a href="#tabs-3"> Aenean Lacinia </a> </ li>
</ ul>
<ระดับ Div = "แท็บ-spacer"> </ div>
<div id = "แท็บ-1">
<p> ไมโครเวฟ Elit Arcu, rutrum commodo, vehicula Tempus, commodo ที่ Risus. Arcu Curabitur NEC. แบบพกพา sollicitudin ไมล์ Amet นั่งมาร์ท. น้ำ ELEMENTUM Quam ullamcorper ante. Etiam aliquet Massa et Lorem. มาร์ท dapibus Lacus auctor Risus. Aenean tempor ullamcorper ราศีสิงห์. Vivamus SED Magna โฟน ligula eleifend adipiscing. Duis Orci. แบ่งปัน sodales tortor Vitae Ipsum. แบ่งปัน nulla. Duis แบ่งปัน molestie Erat. Ut et มาร์ทหรือกะเทย varius sollicitudin. sed UT บังคับ NEC Orci tincidunt interdum. Phasellus Ipsum. Nunc เทนนิส Tempus Lectus . </ p>
</ div>
<div id = "แท็บ 2">
<p> ผ้า tincidunt, DUI Amet นั่ง facilisis feugiat, Odio Metus Gravida ante, UT pharetra Massa Metus ID ในขณะนี้. Duis scelerisque molestie turpis. Sed fringilla สซ่า Eget luctus malesuada, Metus อยู่ molestie Lectus, UT Tempus อยู่ Massa UT บังคับ. Aenean aliquet fringilla SEM. Suspendisse ligula ใน ligula suscipit แบ่งปัน sed. ติดต่อเราในที่อยู่พนันไมล์ adipiscing adipiscing. ผ้า facilisis. Curabitur ornare consequat ในขณะนี้. Aenean หรือ Metus. Ut สอบถามข้อมูล viverra nulla. แบ่งปัน Erat volutpat. Pellentesque convallis. Maecenas feugiat, เทลลัส pellentesque ราคาที่ สอบถามข้อมูล, แมว Lorem euismod Felis สหภาพยุโรป ornare สิงห์ค้างคาหรือแมว. มาร์ท consectetur tortor et Purus. </ p>
</ div>
<div id = "แท็บ-3">
<p> มาร์ท eleifend EST et turpis. Duis ID Erat. potenti Suspendisse. แบ่งปัน vulputate, กะเทยหรือ vehicula accumsan ไมล์วัด rutrum Erat สหภาพยุโรป congue Orci Lorem Eget Lorem. การพนันไม่ใช่ ante. ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ inceptos himenaeos. ผู้ดูแลระบบ sodales. Quisque สหภาพยุโรปหรือ urna enim commodo pellentesque. ติดต่อเราสหภาพยุโรป Risus สำนัก ligula Tempus ราคาที่. Curabitur Lorem enim, ราคาที่ NEC, NEC feugiat, luctus ที่ Lacus. </ p>
<p> Duis ซัส. Maecenas อยู่ ligula, NEC blandit, pharetra AT, Semper AT, Magna. Nullam AC คัส. Nulla facilisi. ติดต่อเรา viverra Justo ประวัติวัด. ติดต่อเรา blandit adipiscing velit. potenti Suspendisse. แบบพกพา Mattis, กะเทยหรือ pharetra blandit, Magna ligula faucibus ที่อยู่รหัส euismod คัสได้บังคับ Eget Odio. น้ำ scelerisque. แบบพกพาที่ไม่ใช่ Libero SED nulla Mattis commodo. Ut sagittis. แบบพกพาค้างคา Lectus, feugiat porttitor, tempor AC, tempor ประวัติ, กะเทย. Aenean vehicula velit สหภาพยุโรปเทลลัส interdum rutrum. Maecenas commodo. Pellentesque NEC Elit. ผู้ดูแลระบบใน Lacus. Vivamus Libero Vitae Lectus สำนักสำนัก. </ p>
</ div>
</ div>
</ body>
</ html>
คลิกที่แท็บเพื่อสลับแบ่งออกเป็นส่วนตรรกะที่แตกต่างกันของเนื้อหา
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI แท็บ (แท็บ) - แท็บแนวตั้ง </ title>
<link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#tabs") .tabs () AddClass ( "UI แท็บแนวตั้ง UI-ผู้ช่วย clearfix") .;
$ ( "#tabs ลี่") .removeClass ( "UI-มุมด้านบน") .addClass ( "UI-มุมซ้าย");
});
</ script>
<style>
.ui แท็บแนวตั้ง {กว้าง: 55em;}
.ui แท็บแนวตั้ง .ui แท็บ-NAV {padding: .2em .1em .2em .2em; ลอย: ด้านซ้าย; กว้าง: 12em;}
.ui แท็บแนวตั้ง .ui แท็บ-NAV li {ชัดเจนเหลือความกว้าง: 100%; ขอบล่างกว้าง: 1px สำคัญ; border-ขวากว้าง :! 0 ที่สำคัญขอบ :! 0 -1px .2em 0;
.ui แท็บแนวตั้ง .ui แท็บ-NAV หลี่ {display: บล็อก;}
.ui แท็บแนวตั้ง .ui แท็บ-NAV li.ui แท็บที่ใช้งาน {padding ล่าง: 0; padding ขวา: .1em; border-ขวากว้าง: 1px; border-ขวากว้าง: 1px;}
.ui แท็บแนวตั้ง .ui แท็บแบน {padding: 1em; ลอย: ขวา; กว้าง: 40em;}
</ style>
</ head>
<body>
<div id = "แท็บ">
<ul>
<li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<li> <a href="#tabs-2"> ไมโครเวฟได้บังคับ </a> </ li>
<li> <a href="#tabs-3"> Aenean Lacinia </a> </ li>
</ ul>
<div id = "แท็บ-1">
<H2> เนื้อหาชื่อ 1 </ h2>
<p> ไมโครเวฟ Elit Arcu, rutrum commodo, vehicula Tempus, commodo ที่ Risus. Arcu Curabitur NEC. แบบพกพา sollicitudin ไมล์ Amet นั่งมาร์ท. น้ำ ELEMENTUM Quam ullamcorper ante. Etiam aliquet Massa et Lorem. มาร์ท dapibus Lacus auctor Risus. Aenean tempor ullamcorper ราศีสิงห์. Vivamus SED Magna โฟน ligula eleifend adipiscing. Duis Orci. แบ่งปัน sodales tortor Vitae Ipsum. แบ่งปัน nulla. Duis แบ่งปัน molestie Erat. Ut et มาร์ทหรือกะเทย varius sollicitudin. sed UT บังคับ NEC Orci tincidunt interdum. Phasellus Ipsum. Nunc เทนนิส Tempus Lectus . </ p>
</ div>
<div id = "แท็บ 2">
<h2> ชื่อเนื้อหา 2 </ h2>
<p> ผ้า tincidunt, DUI Amet นั่ง facilisis feugiat, Odio Metus Gravida ante, UT pharetra Massa Metus ID ในขณะนี้. Duis scelerisque molestie turpis. Sed fringilla สซ่า Eget luctus malesuada, Metus อยู่ molestie Lectus, UT Tempus อยู่ Massa UT บังคับ. Aenean aliquet fringilla SEM. Suspendisse ligula ใน ligula suscipit แบ่งปัน sed. ติดต่อเราในที่อยู่พนันไมล์ adipiscing adipiscing. ผ้า facilisis. Curabitur ornare consequat ในขณะนี้. Aenean หรือ Metus. Ut สอบถามข้อมูล viverra nulla. แบ่งปัน Erat volutpat. pellentesque convallis. Maecenas feugiat, เทลลัส pellentesque ราคาที่ สอบถามข้อมูล, แมว Lorem euismod Felis สหภาพยุโรป ornare สิงห์ค้างคาหรือแมว. มาร์ท consectetur tortor et Purus. </ p>
</ div>
<div id = "แท็บ-3">
<H2> เนื้อหาชื่อ 3 </ h2>
<p> มาร์ท eleifend EST et turpis. Duis ID Erat. potenti Suspendisse. แบ่งปัน vulputate, กะเทยหรือ vehicula accumsan ไมล์วัด rutrum Erat สหภาพยุโรป congue Orci Lorem Eget Lorem. การพนันไม่ใช่ ante. ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ inceptos himenaeos. ผู้ดูแลระบบ sodales. Quisque สหภาพยุโรปหรือ urna enim commodo pellentesque. ติดต่อเราสหภาพยุโรป Risus สำนัก ligula Tempus ราคาที่. Curabitur Lorem enim, ราคาที่ NEC, NEC feugiat, luctus ที่ Lacus. </ p>
<p> Duis ซัส. Maecenas อยู่ ligula, NEC blandit, pharetra AT, Semper AT, Magna. Nullam AC คัส. Nulla facilisi. ติดต่อเรา viverra Justo ประวัติวัด. ติดต่อเรา blandit adipiscing velit. potenti Suspendisse. แบบพกพา Mattis, กะเทยหรือ pharetra blandit, Magna ligula faucibus ที่อยู่รหัส euismod คัสได้บังคับ Eget Odio. น้ำ scelerisque. แบบพกพาที่ไม่ใช่ Libero SED nulla Mattis commodo. Ut sagittis. แบบพกพาค้างคา Lectus, feugiat porttitor, tempor AC, tempor ประวัติ, กะเทย. Aenean vehicula velit สหภาพยุโรปเทลลัส interdum rutrum. Maecenas commodo. Pellentesque NEC Elit. ผู้ดูแลระบบใน Lacus. Vivamus Libero Vitae Lectus สำนักสำนัก. </ p>
</ div>
</ div>
</ body>
</ html>