របៀបប្រើផ្ទាំង (Tab) នៅក្នុង Bootstrap

ផ្ទាំង (tab) ត្រូវបានប្រើដើម្បីបែងចែកផ្ទាំងមាតិការឲ្យចូលទៅក្នុងផ្ទាំងផ្សេងទៀតដែលជាកន្លែងអាចមើលនៅពេលមួយ ។

១) Classes ជំនួយផ្ទាំង (The Tab Plugin Classes)

tab-class

ឧទាហរណ៍ .nav nav-tabs

tab1

យើងបានលទ្ធផលដូចខាងក្រោម

tabs-coding

ឧទាហរណ៍ .nav-justified

justify-tabs

យើងបានលទ្ធផលដូចខាងក្រោម

justify-tabs001

ឧទាហរណ៍ .tab-content

dynamic-tabs

dynamic-tabs2

យើងបានលទ្ធផលដូចខាងក្រោម

dynamic-tabs-result

ឧទាហរណ៍ .tab-pane

tab1

យើងបានលទ្ធផលដូចខាងក្រោម

tabs-coding

២) តាមរយៈ data-* Attributes

បន្ថែម data-toggle=“ផ្ទាំង” ដើម្បីទៅផ្ទាំងនីមួយៗ និងបន្ថែម .tab-pane class មួយដែលមាន ID តែមួយគត់សម្រាប់រាល់ផ្ទាំងទាំងអស់ ហើយខ្ចប់ពួកគេទៅក្នុង .tab-content class 

dynamic-tabs

dynamic-tabs2

យើងបានលទ្ធផលដូចខាងក្រោម

dynamic-tabs-result

៣) តាមរយៈ JavaScript
បើក manual ជាមួយ:

java

ឧទាហរណ៍ JavaScript

javascript-coding

javascript-coding2

យើងបានលទ្ធផលដូចខាងក្រោម

dynamic-tabs-result

៤) វិធីសាស្រ្តផ្ទាំង (Tab Methods)
តារាងដូចខាងក្រោមរាយវិធីសាស្រ្តផ្ទាំងដែលមានទាំងអស់។

tab-class001

៥) ព្រឹត្តិការណ៍ផ្ទាំង (Tab Events)
តារាងដូចខាងក្រោមរាយព្រឹត្តិការណ៍ផ្ទាំងដែលមានទាំងអស់។

tab-class002

ជំនួយ: ប្រើ jQuery របស់ event.target និង event.relatedTarget ដើម្បីទទួលបានផ្ទាំងសកម្ម និង ផ្ទាំងសកម្មមុន:

javascript-tabs-x

javascript-tabs002

យើងបានលទ្ធផលដូចខាងក្រោម

javascript-tabs-dynamic