Tab Class - ตัวสร้างเมนูแท็บ (Tab Interface)

คลาส Tab ช่วยสร้าง HTML สำหรับทำเมนูแบบแท็บ (Tabbed Interface) ได้อย่างง่ายดาย รองรับการจัดการ URL query string และการกำหนดสถานะ Active อัตโนมัติ

Namespace

Kotchasan\Tab

การใช้งานหลัก

คลาสนี้จะสร้าง HTML Structure:

<div class="inline">
  <div class="writetab">
    <ul id="tab_id">
      <li class="select"><a href="...">...</a></li>
      <li><a href="...">...</a></li>
    </ul>
  </div>
</div>

Public Methods

__construct()

สร้างอินสแตนซ์ของ Tab

public function __construct(string $id, string $url, array $items = [])

พารามิเตอร์:

• $id - ID ของ <ul> (HTML Attribute)
• $url - URL ปัจจุบันของหน้านั้น (ใช้สำหรับสร้าง link แท็บที่ไม่มี URL เฉพาะเจาะจง)
• $items - Array ข้อมูลเริ่มต้นของแท็บ

add()

เพิ่มรายการแท็บ

public function add(string $id, string $title, string $url = '', string $target = null)

พารามิเตอร์:

• $id - ID ของแท็บ (ใช้สำหรับระบุการเลือก tab=...)
• $title - ข้อความที่จะแสดงบนแท็บ
• $url - ลิงก์เมื่อคลิก (ถ้าว่าง จะใช้ URL ปัจจุบัน + tab=$id)
• $target - HTML target attribute (เช่น _blank)

render()

สร้าง HTML Code สำหรับแสดงผล

public function render(string $select = ''): string

พารามิเตอร์:

• $select - ID ของแท็บที่ต้องการให้ Active (ถ้าไม่ระบุ จะ Active ตัวแรก)

คืนค่า: HTML String

getSelect()

ดึง ID ของแท็บที่กำลังถูก Active (หลังจากเรียก render แล้ว)

public function getSelect(): string

คืนค่า: ID ของแท็บที่ถูกเลือก

ตัวอย่างการใช้งาน

// สร้างออบเจ็กต์ Tab
// 'my_tab' คือ ID ของ <ul>
// 'index.php?module=home' คือ Base URL
$tab = new \Kotchasan\Tab('my_tab', 'index.php?module=home');

// เพิ่มแท็บ
$tab->add('first', 'หน้าแรก'); // ลิงก์จะเป็น index.php?module=home&tab=first
$tab->add('second', 'หน้าที่สอง', 'index.php?module=second'); // ลิงก์ตามที่กำหนด
$tab->add('third', 'Google', 'https://google.com', '_blank'); // ลิงก์ภายนอก

// แสดงผล HTML โดยให้แท็บ 'first' ถูกเลือก
echo $tab->render('first');

// ดึง ID ที่ถูกเลือก
echo $tab->getSelect(); // "first"

หมายเหตุ

• หาก $url ในเมธอด add เป็นค่าว่าง ระบบจะสร้าง URL โดยเพิ่มพารามิเตอร์ tab ต่อท้าย Base URL ให้อัตโนมัติ โดยจัดการเรื่อง ? และ & ให้อย่างถูกต้อง
• CSS Class ที่ใช้ควบคุมการแสดงผลคือ writetab และเมนูที่ถูกเลือกจะมี Class select

ขนาดไฟล์: 120 บรรทัด