Framework7 - แท็บ

คำอธิบาย

แท็บคือชุดของเนื้อหาที่จัดกลุ่มอย่างมีเหตุผลซึ่งช่วยให้เราสามารถพลิกไปมาระหว่างแท็บเหล่านี้ได้อย่างรวดเร็วและประหยัดพื้นที่เช่นหีบเพลง

เค้าโครงแท็บ

รหัสต่อไปนี้กำหนดโครงร่างสำหรับแท็บ -

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

ที่ไหน -

• <div class = "tabs">- เป็นกระดาษห่อหุ้มที่จำเป็นสำหรับทุกแท็บ หากเราพลาดสิ่งนี้แท็บต่างๆจะไม่ทำงานเลย

• <div class = "tab"> - เป็นแท็บเดียวที่ควรมี unique id แอตทริบิวต์

• <div class = "tab active">- เป็นแท็บเดียวที่ใช้งานอยู่ซึ่งใช้คลาสที่ใช้งานเพิ่มเติมเพื่อให้มองเห็นแท็บ (ใช้งานอยู่)

การสลับระหว่างแท็บ

คุณสามารถใช้คอนโทรลเลอร์บางตัวในเค้าโครงแท็บเพื่อให้ผู้ใช้สลับไปมาระหว่างกันได้

สำหรับสิ่งนี้คุณต้องสร้างลิงก์ (แท็ก <a>) ที่มีคลาสtab-linkและแอตทริบิวต์hrefเท่ากับแอตทริบิวต์idของแท็บเป้าหมาย -

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

สลับหลายแท็บ

หากคุณใช้ลิงก์แท็บเดียวเพื่อสลับไปมาระหว่างแท็บต่างๆคุณสามารถใช้คลาสแทนการใช้แอตทริบิวต์ของIDและแท็บข้อมูลได้

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

ข้อมูลแท็บแอตทริบิวต์ของแท็บเชื่อมโยงมีตัวเลือก CSS เป้าหมาย / แท็บแท็บ

เราสามารถใช้แท็บต่างๆได้ตามที่ระบุไว้ในตารางต่อไปนี้ -

ส. เลขที่	ประเภทแท็บและคำอธิบาย
1	แท็บแบบอินไลน์ แท็บแบบอินไลน์คือชุดของการจัดกลุ่มแบบอินไลน์ที่ช่วยให้คุณพลิกไปมาระหว่างแท็บเหล่านี้ได้อย่างรวดเร็ว
2	สลับแท็บจาก Navbar เราสามารถวางแท็บในแถบนำทางเพื่อให้คุณสามารถพลิกไปมาระหว่างแท็บเหล่านั้นได้
3	เปลี่ยนมุมมองจากแถบแท็บ แท็บเดียวสามารถใช้เพื่อสลับระหว่างมุมมองที่มีการนำทางและเค้าโครงของตัวเอง
4	แท็บเคลื่อนไหว คุณสามารถใช้การเปลี่ยนอย่างง่าย (ภาพเคลื่อนไหว) เพื่อสลับแท็บ
5	แท็บแบบกวาดนิ้วได้ คุณสามารถสร้างแท็บแบบรูดได้ด้วยการเปลี่ยนอย่างง่ายโดยใช้คลาสแท็บที่รูดได้ - ห่อสำหรับแท็บ
6	เหตุการณ์ JavaScript ของแท็บ สามารถใช้เหตุการณ์ JavaScript เมื่อคุณทำงานกับโค้ด JavaScript สำหรับแท็บ
7	แสดงแท็บโดยใช้ JavaScript คุณสามารถสลับหรือแสดงแท็บโดยใช้วิธีการของ JavaScript