วิธีสร้างปุ่มกดก่อนหน้าและถัดไปใน Oxygen Tabs
บทความนี้จะแสดงวิธีการตั้งค่าปุ่ม ก่อนหน้า และ ถัดไป ใน Oxygen Tabs ที่ช่วยให้ผู้ใช้สามารถไปยังแท็บก่อนหน้าและถัดไปได้โดยอัตโนมัติ
ขั้นตอนที่ 1
เพิ่ม Section และย้ายไปใน Tabs Component
สร้าง Div แล้วย้าย Tab Component ไปไว้ข้างในนั้น แล้วนำ Div นั้นย้ายไปไว้ใน Section ที่เพิ่งเพิ่มไป
เพิ่ม class has-tab-navigation ใน Div ที่คุม Tabs Component และกำหนด Style ตามตัวอย่างด้านล่าง และ แก้ไขชื่อแท็บหรือเนื้อหาได้ตามต้องการ
width: 100%;
max-width: 600px; /* หากต้องการให้กว้างสุดขอบ ไม่ต้องใส่ */
margin-left:auto; /* กรณีต้องการให้ Element อยู่ตรงกลาง */
margin-right:auto /* กรณีต้องการให้ Element อยู่ตรงกลาง */
ขั้นตอนที่ 2
เพิ่ม Div ภายในเนื้อหาแท็บแรก ที่ต้องการให้มีสองปุ่ม และตั้ง Layout Child Elements เป็น "Horizontal" และตั้ง Vertical Item Alignment เป็น "Middle"
ให้ปุ่มแรกมีคลาสชื่อ prev-tab และตั้งค่าลิงค์เป็น "#" และใส่ชื่อปุ่มว่า "ก่อนหน้า"
ให้ปุ่มที่สองมีคลาสชื่อ next-tab และตั้งค่าลิงค์เป็น "#" และใส่ชื่อปุ่มว่า "ถัดไป"
ทำวิธีนี้ซ้ำ และวางไว้ในเนื้อหาแท็บแต่ละรายการ ต่อจาก Tab Content แรกกของคุณ
ขั้นตอนที่ 3
หากคุณต้องการให้แท็บดูเหมือนแท็บจริงๆ ให้เพิ่ม CSS ใน Element บนขั้นตอนที่ 2
ขั้นตอนที่ 4
เพิ่ม Code Block เป็นองค์ประกอบสุดท้ายในโครงสร้างของคุณ
<?php
// echo "คอมเม้นต์ไว้ หรือลบบรรทัดนี้ออกได้เลย";
?>.has-tab-navigation .oxy-tab-content:first-child .prev-tab.ct-link-button,
.has-tab-navigation .oxy-tab-content:last-child .next-tab.ct-link-button {
background-color: #cc3d6a; /* กำหนดสีพื้นหลังปุ่ม */
color: #fff; /* กำหนดสีตัวอักษร */
border-color: transparent;
}document.addEventListener("DOMContentLoaded", () => {
// loop through all ".has-tab-navigation .next-tab" and attach a click handler that clicks the next tab
document.querySelectorAll(".has-tab-navigation .next-tab").forEach((el) => {
el.addEventListener("click", (e) => {
e.preventDefault()
nextTab = e.target
.closest(".oxy-tabs-contents")
.previousElementSibling.querySelector(
"div[class$='active']"
).nextElementSibling
nextTab.click()
})
})
// loop through all ".has-tab-navigation .prev-tab" and attach a click handler that clicks the previous tab
document.querySelectorAll(".has-tab-navigation .prev-tab").forEach((el) => {
el.addEventListener("click", (e) => {
e.preventDefault()
prevTab = e.target
.closest(".oxy-tabs-contents")
.previousElementSibling.querySelector(
"div[class$='active']"
).previousElementSibling
prevTab.click()
})
})
})
