Source

បញ្ជីក្រុម

បញ្ជីក្រុមគឺជាសមាសធាតុដែលអាចបត់បែនបាន និងមានឥទ្ធិពលសម្រាប់បង្ហាញស៊េរីនៃមាតិកា។ កែប្រែ និងពង្រីកពួកវាដើម្បីគាំទ្រខ្លឹមសារណាមួយនៅក្នុង។

ឧទាហរណ៍ជាមូលដ្ឋាន

ក្រុម​បញ្ជី​មូលដ្ឋាន​បំផុត​គឺ​បញ្ជី​ដែល​មិន​មាន​លំដាប់​ដោយ​មាន​ធាតុ​បញ្ជី​និង​ថ្នាក់​ត្រឹមត្រូវ។ បង្កើតវាជាមួយនឹងជម្រើសដែលធ្វើតាម ឬជាមួយ CSS ផ្ទាល់ខ្លួនរបស់អ្នកតាមតម្រូវការ។

  • Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • Morbi leo risus
  • Porta ac consectetur ac
  • vestibulum នៅ eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ធាតុសកម្ម

បន្ថែម .activeទៅ a .list-group-itemដើម្បីបង្ហាញពីការជ្រើសរើសសកម្មបច្ចុប្បន្ន។

  • Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • Morbi leo risus
  • Porta ac consectetur ac
  • vestibulum នៅ eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ធាតុដែលបិទ

បន្ថែម .disabledទៅ a .list-group-itemដើម្បីធ្វើឱ្យវា ហាក់ដូចជា បិទ។ ចំណាំថាធាតុមួយចំនួនជាមួយ .disabledក៏នឹងទាមទារ JavaScript ផ្ទាល់ខ្លួនផងដែរ ដើម្បីបិទព្រឹត្តិការណ៍ចុចរបស់វាទាំងស្រុង (ឧទាហរណ៍ តំណភ្ជាប់)។

  • Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • Morbi leo risus
  • Porta ac consectetur ac
  • vestibulum នៅ eros
<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ប្រើ <a>s ឬ <button>s ដើម្បីបង្កើត ធាតុក្រុមបញ្ជី សកម្មភាព.list-group-item-action ដែលមានដាក់ដាក់ បិទ និងស្ថានភាពសកម្មដោយបន្ថែម . យើងបែងចែកថ្នាក់ pseudo-class ទាំងនេះដើម្បីធានាថាក្រុមបញ្ជីដែលធ្វើពីធាតុមិនអន្តរកម្ម (ដូចជា <li>s ឬ <div>s) មិនផ្តល់ការចុច ឬប៉ះ។

ត្រូវប្រាកដថា មិនប្រើថ្នាក់ស្តង់ដារ .btnនៅទីនេះ

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

ជាមួយ <button>s អ្នកក៏អាចប្រើ disabledattribute ជំនួសឱ្យ .disabledclass ផងដែរ។ ជាអកុសល <a>s មិនគាំទ្រគុណលក្ខណៈពិការ។

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

ហូរ

បន្ថែម .list-group-flushដើម្បីលុបស៊ុមមួយចំនួន និងជ្រុងមូល ដើម្បីបង្ហាញធាតុក្រុមបញ្ជីពីគែមមួយទៅគែមនៅក្នុងធុងមេ (ឧទាហរណ៍កាត)។

  • Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • Morbi leo risus
  • Porta ac consectetur ac
  • vestibulum នៅ eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ថ្នាក់បរិបទ

ប្រើថ្នាក់បរិបទដើម្បីធ្វើរចនាប័ទ្មធាតុបញ្ជីដែលមានផ្ទៃខាងក្រោយ និងពណ៌ដែលមានលក្ខណៈច្បាស់លាស់។

  • Dapibus ac facilisis ក្នុង
  • ធាតុក្រុមបញ្ជីបឋមសាមញ្ញ
  • ធាតុក្រុមបញ្ជីបន្ទាប់បន្សំសាមញ្ញ
  • ធាតុក្រុមបញ្ជីជោគជ័យសាមញ្ញ
  • ធាតុក្រុមបញ្ជីគ្រោះថ្នាក់សាមញ្ញ
  • ធាតុ​ក្រុម​បញ្ជី​ព្រមាន​សាមញ្ញ
  • ធាតុក្រុមបញ្ជីព័ត៌មានសាមញ្ញ
  • ធាតុក្រុមបញ្ជីពន្លឺសាមញ្ញ
  • ធាតុក្រុមបញ្ជីខ្មៅសាមញ្ញ
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

ថ្នាក់បរិបទក៏ដំណើរការជាមួយ .list-group-item-action. ចំណាំការបន្ថែមរចនាប័ទ្មដាក់លើទីនេះមិនមានវត្តមាននៅក្នុងឧទាហរណ៍មុនទេ។ គាំទ្រផងដែរគឺ .activeរដ្ឋ; អនុវត្តវាដើម្បីចង្អុលបង្ហាញការជ្រើសរើសសកម្មនៅលើធាតុក្រុមបញ្ជីបរិបទ។

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>


  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
ការ​បង្ហាញ​អត្ថន័យ​ទៅ​កាន់​បច្ចេកវិទ្យា​ជំនួយ

ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ឧ. អត្ថបទដែលមើលឃើញ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .sr-onlyថ្នាក់។

ជាមួយនឹងផ្លាកសញ្ញា

បន្ថែមផ្លាកសញ្ញាទៅធាតុក្រុមក្នុងបញ្ជីណាមួយ ដើម្បីបង្ហាញចំនួនមិនទាន់អាន ​​សកម្មភាព និងច្រើនទៀត ដោយមានជំនួយពី ឧបករណ៍ប្រើប្រាស់ មួយចំនួន ។

  • Cras justo odio១៤
  • Dapibus ac facilisis ក្នុង
  • Morbi leo risus
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

មាតិកាផ្ទាល់ខ្លួន

បន្ថែម HTML ស្ទើរតែទាំងអស់នៅក្នុង សូម្បីតែសម្រាប់ក្រុមបញ្ជីដែលបានភ្ជាប់ដូចជាមួយខាងក្រោម ដោយមានជំនួយពី ឧបករណ៍ប្រើប្រាស់ flexbox

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

ឥរិយាបថ JavaScript

ប្រើផ្ទាំងជំនួយ JavaScript — រួមបញ្ចូលវាជាលក្ខណៈបុគ្គល ឬតាមរយៈឯកសារដែលបានចងក្រង bootstrap.js— ដើម្បីពង្រីកក្រុមបញ្ជីរបស់យើងដើម្បីបង្កើតផ្ទាំងផ្ទាំងដែលអាចដាក់បាននៃមាតិកាក្នុងតំបន់។

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

ការប្រើប្រាស់គុណលក្ខណៈទិន្នន័យ

អ្នកអាចធ្វើឱ្យការរុករកក្រុមបញ្ជីសកម្មដោយមិនចាំបាច់សរសេរ JavaScript ណាមួយដោយគ្រាន់តែបញ្ជាក់ data-toggle="list"ឬនៅលើធាតុមួយ។ ប្រើគុណលក្ខណៈទិន្នន័យទាំងនេះនៅលើ .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

តាមរយៈ JavaScript

បើកដំណើរការធាតុបញ្ជីផ្ទាំងដែលអាចប្រើបានតាមរយៈ JavaScript (ធាតុបញ្ជីនីមួយៗត្រូវធ្វើឱ្យសកម្មដោយឡែកពីគ្នា)៖

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

អ្នកអាចធ្វើឱ្យធាតុបញ្ជីនីមួយៗសកម្មតាមវិធីជាច្រើន៖

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

ប្រសិទ្ធិភាពបន្ថយ

ដើម្បីធ្វើឱ្យផ្ទាំងផ្ទាំងធ្លាក់ចុះ សូមបន្ថែម .fadeទៅនីមួយៗ .tab-pane។ ផ្ទាំងផ្ទាំងទីមួយក៏ត្រូវតែ .showធ្វើឱ្យមាតិកាដំបូងអាចមើលឃើញផងដែរ។

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

វិធីសាស្រ្ត

$().ផ្ទាំង

បើកដំណើរការធាតុធាតុបញ្ជី និងធុងមាតិកា។ ថេបគួរតែមាន មួយ data-targethrefកំណត់គោលដៅថ្នាំងកុងតឺន័រនៅក្នុង DOM ។

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('បង្ហាញ')

ជ្រើស​ធាតុ​បញ្ជី​ដែល​បាន​ផ្ដល់​ឱ្យ​ហើយ​បង្ហាញ​បន្ទះ​ដែល​ពាក់ព័ន្ធ​របស់​វា។ ធាតុ​បញ្ជី​ផ្សេង​ទៀត​ដែល​ត្រូវ​បាន​ជ្រើស​ពី​មុន​នឹង​ក្លាយ​ជា​មិន​បាន​ជ្រើស ហើយ​បន្ទះ​ដែល​ពាក់ព័ន្ធ​របស់​វា​ត្រូវ​បាន​លាក់។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ មុន​ពេល​ផ្ទាំង​ផ្ទាំង​ត្រូវ​បាន​បង្ហាញ​យ៉ាង​ពិត ​ប្រាកដ (ឧទាហរណ៍ មុន shown.bs.tab​ព្រឹត្តិការណ៍​កើត​ឡើង)។

$('#someListItem').tab('show')

ព្រឹត្តិការណ៍

នៅពេលបង្ហាញផ្ទាំងថ្មី ព្រឹត្តិការណ៍នឹងឆេះតាមលំដាប់ដូចខាងក្រោម៖

  1. hide.bs.tab(នៅលើផ្ទាំងសកម្មបច្ចុប្បន្ន)
  2. show.bs.tab(នៅលើផ្ទាំងដែលត្រូវបង្ហាញ)
  3. hidden.bs.tab(នៅលើផ្ទាំងសកម្មមុន ដូចគ្នាទៅនឹង hide.bs.tabព្រឹត្តិការណ៍)
  4. shown.bs.tab(នៅលើផ្ទាំងដែលទើបនឹងបង្ហាញសកម្មថ្មី ដូចគ្នាទៅនឹង show.bs.tabព្រឹត្តិការណ៍)

ប្រសិន​បើ​គ្មាន​ផ្ទាំង​សកម្ម hide.bs.tab​ហើយ hidden.bs.tab​ព្រឹត្តិការណ៍​នឹង​មិន​ត្រូវ​បាន​គេ​បណ្តេញ​ចេញ​ទេ។

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
show.bs.tab ព្រឹត្តិការណ៍នេះចាប់ផ្តើមនៅលើផ្ទាំងបង្ហាញ ប៉ុន្តែមុនពេលផ្ទាំងថ្មីត្រូវបានបង្ហាញ។ ប្រើ event.targetនិង event.relatedTargetដើម្បីកំណត់គោលដៅផ្ទាំងសកម្ម និងផ្ទាំងសកម្មពីមុន (ប្រសិនបើមាន) រៀងគ្នា។
ផ្ទាំងបង្ហាញ ព្រឹត្តិការណ៍នេះចាប់ផ្តើមនៅលើផ្ទាំងបង្ហាញបន្ទាប់ពីផ្ទាំងមួយត្រូវបានបង្ហាញ។ ប្រើ event.targetនិង event.relatedTargetដើម្បីកំណត់គោលដៅផ្ទាំងសកម្ម និងផ្ទាំងសកម្មពីមុន (ប្រសិនបើមាន) រៀងគ្នា។
hide.bs.tab ព្រឹត្តិការណ៍នេះដំណើរការនៅពេលដែលផ្ទាំងថ្មីត្រូវបានបង្ហាញ (ហើយដូច្នេះផ្ទាំងសកម្មពីមុននឹងត្រូវលាក់)។ ប្រើ event.targetនិង event.relatedTargetដើម្បីកំណត់គោលដៅផ្ទាំងសកម្មបច្ចុប្បន្ន និងផ្ទាំងថ្មីដែលនឹងសកម្មក្នុងពេលឆាប់ៗនេះ រៀងគ្នា។
hidden.bs.tab ព្រឹត្តិការណ៍នេះដំណើរការបន្ទាប់ពីផ្ទាំងថ្មីត្រូវបានបង្ហាញ (ហើយដូច្នេះផ្ទាំងសកម្មពីមុនត្រូវបានលាក់)។ ប្រើ event.targetនិង event.relatedTargetដើម្បីកំណត់គោលដៅផ្ទាំងសកម្មពីមុន និងផ្ទាំងសកម្មថ្មីរៀងៗខ្លួន។
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})