ទិដ្ឋភាពទូទៅ

បុគ្គល ឬចងក្រង

កម្មវិធីជំនួយអាចត្រូវបានរួមបញ្ចូលជាលក្ខណៈបុគ្គល (ដោយប្រើ *.jsឯកសារបុគ្គលរបស់ Bootstrap) ឬទាំងអស់ក្នុងពេលតែមួយ (ដោយប្រើ bootstrap.jsឬបង្រួមតូច bootstrap.min.js)។

ដោយប្រើ JavaScript ដែលបានចងក្រង

ទាំងពីរ bootstrap.jsនិង bootstrap.min.jsមានកម្មវិធីជំនួយទាំងអស់នៅក្នុងឯកសារតែមួយ។ រួមបញ្ចូលតែមួយ។

ភាពអាស្រ័យនៃកម្មវិធីជំនួយ

កម្មវិធីជំនួយ និងសមាសធាតុ CSS មួយចំនួនអាស្រ័យលើកម្មវិធីជំនួយផ្សេងទៀត។ ប្រសិនបើអ្នករួមបញ្ចូលកម្មវិធីជំនួយដាច់ដោយឡែក ត្រូវប្រាកដថាពិនិត្យមើលភាពអាស្រ័យទាំងនេះនៅក្នុងឯកសារ។ សូមចំណាំផងដែរថាកម្មវិធីជំនួយទាំងអស់ពឹងផ្អែកលើ jQuery (នេះមានន័យថា jQuery ត្រូវតែរួមបញ្ចូល មុនពេល ឯកសារកម្មវិធីជំនួយ) ។ ពិគ្រោះជាមួយពួកយើងbower.json ដើម្បីមើលថាតើ jQuery កំណែណាដែលត្រូវបានគាំទ្រ។

គុណលក្ខណៈទិន្នន័យ

អ្នកអាចប្រើកម្មវិធីជំនួយ Bootstrap ទាំងអស់តាមរយៈ markup API ដោយមិនចាំបាច់សរសេរ JavaScript តែមួយជួរ។ នេះគឺជា API ថ្នាក់ដំបូងរបស់ Bootstrap ហើយគួរតែជាការពិចារណាដំបូងរបស់អ្នកនៅពេលប្រើកម្មវិធីជំនួយ។

ដែលបាននិយាយថា ក្នុងស្ថានភាពខ្លះ វាអាចជាការចង់បិទមុខងារនេះ។ ដូច្នេះហើយ យើងក៏ផ្តល់លទ្ធភាពក្នុងការបិទដំណើរការ API គុណលក្ខណៈទិន្នន័យដោយ unbinding ព្រឹត្តិការណ៍ទាំងអស់នៅលើ namespaced ជាមួយ data-api. វាមើលទៅដូចនេះ៖

$(document).off('.data-api')

ជាជម្រើស ដើម្បីកំណត់គោលដៅកម្មវិធីជំនួយជាក់លាក់មួយ គ្រាន់តែបញ្ចូលឈ្មោះរបស់កម្មវិធីជំនួយជា namespace រួមជាមួយនឹង data-api namespace ដូចនេះ៖

$(document).off('.alert.data-api')

មានតែកម្មវិធីជំនួយមួយប៉ុណ្ណោះក្នុងមួយធាតុតាមរយៈគុណលក្ខណៈទិន្នន័យ

កុំប្រើគុណលក្ខណៈទិន្នន័យពីកម្មវិធីជំនួយច្រើននៅលើធាតុតែមួយ។ ឧទាហរណ៍ ប៊ូតុងមួយមិនអាចមានព័ត៌មានជំនួយ និងបិទ/បើកម៉ូឌុលបានទេ។ ដើម្បីសម្រេចបាន សូមប្រើធាតុរុំ។

API កម្មវិធី

យើងក៏ជឿថាអ្នកគួរតែអាចប្រើកម្មវិធីជំនួយ Bootstrap ទាំងអស់តាមរយៈ JavaScript API ។ APIs សាធារណៈទាំងអស់គឺជាវិធីសាស្រ្ដតែមួយ ដែលអាចច្រវ៉ាក់បាន ហើយត្រឡប់ការប្រមូលដែលបានធ្វើសកម្មភាព។

$('.btn.danger').button('toggle').addClass('fat')

វិធីសាស្រ្តទាំងអស់គួរតែទទួលយកវត្ថុជម្រើសស្រេចចិត្ត ខ្សែអក្សរដែលកំណត់គោលដៅវិធីសាស្រ្តជាក់លាក់ណាមួយ ឬគ្មានអ្វីសោះ (ដែលផ្តួចផ្តើមកម្មវិធីជំនួយដែលមានឥរិយាបថលំនាំដើម)៖

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

កម្មវិធីជំនួយនីមួយៗក៏លាតត្រដាង constructor ដើមរបស់វានៅលើ Constructorលក្ខណៈសម្បត្តិ៖ $.fn.popover.Constructor. ប្រសិនបើអ្នកចង់ទទួលបានឧទាហរណ៍កម្មវិធីជំនួយជាក់លាក់មួយ ទាញយកវាដោយផ្ទាល់ពីធាតុមួយ៖ $('[rel="popover"]').data('popover').

កំណត់​លំនាំដើម

អ្នកអាចផ្លាស់ប្តូរការកំណត់លំនាំដើមសម្រាប់កម្មវិធីជំនួយដោយកែប្រែ Constructor.DEFAULTSវត្ថុរបស់កម្មវិធីជំនួយ៖

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

គ្មានជម្លោះ

ពេលខ្លះចាំបាច់ត្រូវប្រើកម្មវិធីជំនួយ Bootstrap ជាមួយនឹងក្របខ័ណ្ឌ UI ផ្សេងទៀត។ ក្នុង​កាលៈទេសៈ​ទាំងនេះ ការ​ប៉ះទង្គិច​ឈ្មោះ​ចន្លោះ​អាច​កើតឡើង​ម្តងម្កាល។ ប្រសិនបើរឿងនេះកើតឡើង អ្នកអាចហៅ .noConflictទៅកម្មវិធីជំនួយដែលអ្នកចង់ត្រឡប់តម្លៃនៃ

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

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

Bootstrap ផ្តល់នូវព្រឹត្តិការណ៍ផ្ទាល់ខ្លួនសម្រាប់សកម្មភាពពិសេសៗរបស់កម្មវិធីជំនួយភាគច្រើន។ ជាទូទៅ ទាំងនេះមកក្នុងទម្រង់ចូលរួមគ្មានកំណត់ និងអតីតកាល ដែលអកំណត់ (ឧ។ show) ត្រូវបានបង្កឡើងនៅពេលចាប់ផ្តើមព្រឹត្តិការណ៍ ហើយទម្រង់ចូលរួមអតីតកាលរបស់វា (ឧ. shown) ត្រូវបានបង្កឡើងនៅពេលបញ្ចប់សកម្មភាព។

ចាប់ពី 3.0.0 ព្រឹត្តិការណ៍ Bootstrap ទាំងអស់ត្រូវបានដាក់ឈ្មោះ។

ព្រឹត្តិការណ៍គ្មានកំណត់ទាំងអស់ផ្តល់នូវ preventDefaultមុខងារ។ វាផ្តល់នូវសមត្ថភាពក្នុងការបញ្ឈប់ការប្រតិបត្តិនៃសកម្មភាពមុនពេលវាចាប់ផ្តើម។

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

លេខកំណែ

កំណែនៃកម្មវិធីជំនួយ jQuery របស់ Bootstrap នីមួយៗអាចចូលប្រើបានតាមរយៈ VERSIONលក្ខណសម្បត្តិរបស់អ្នកបង្កើតកម្មវិធីជំនួយ។ ឧទាហរណ៍ សម្រាប់កម្មវិធីជំនួយព័ត៌មានជំនួយ៖

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

មិនមានការបដិសេធពិសេសនៅពេលដែល JavaScript ត្រូវបានបិទ

កម្មវិធីជំនួយរបស់ Bootstrap មិនធ្លាក់ចុះមកវិញទេ ជាពិសេសនៅពេលដែល JavaScript ត្រូវបានបិទ។ ប្រសិនបើអ្នកខ្វល់ពីបទពិសោធន៍អ្នកប្រើប្រាស់ក្នុងករណីនេះ សូមប្រើ <noscript>ដើម្បីពន្យល់ពីស្ថានភាព (និងរបៀបបើក JavaScript ឡើងវិញ) ដល់អ្នកប្រើប្រាស់របស់អ្នក និង/ឬបន្ថែមការបដិសេធផ្ទាល់ខ្លួនរបស់អ្នក។

បណ្ណាល័យភាគីទីបី

Bootstrap មិនគាំទ្រជាផ្លូវការនូវបណ្ណាល័យ JavaScript ភាគីទីបី ដូចជា Prototype ឬ jQuery UI ទេ។ ទោះបីជា .noConflictនិងព្រឹត្តិការណ៍ដាក់ឈ្មោះក៏ដោយ វាអាចមានបញ្ហាភាពឆបគ្នាដែលអ្នកត្រូវជួសជុលដោយខ្លួនឯង។

ដំណើរផ្លាស់ ប្តូរ transition.js

អំពីដំណើរផ្លាស់ប្តូរ

សម្រាប់បែបផែនការផ្លាស់ប្តូរសាមញ្ញ រួមបញ្ចូល transition.jsម្តងជាមួយឯកសារ JS ផ្សេងទៀត។ ប្រសិនបើអ្នកកំពុងប្រើការចងក្រង (ឬបង្រួម) bootstrap.jsនោះមិនចាំបាច់បញ្ចូលវាទេ វាមានរួចហើយ។

តើមានអ្វីនៅខាងក្នុង

Transition.js គឺជាជំនួយការមូលដ្ឋានសម្រាប់ transitionEndព្រឹត្តិការណ៍ក៏ដូចជាកម្មវិធីត្រាប់តាមការផ្លាស់ប្តូរ CSS ។ វា​ត្រូវ​បាន​ប្រើ​ដោយ​កម្មវិធី​ជំនួយ​ផ្សេង​ទៀត​ដើម្បី​ពិនិត្យ​មើល​ការ​គាំទ្រ​ការ​ផ្លាស់​ប្តូរ CSS និង​ដើម្បី​ចាប់​ដំណើរ​ការ​ព្យួរ។

បិទដំណើរការផ្លាស់ប្តូរ

ដំណើរផ្លាស់ប្តូរអាចត្រូវបានបិទជាសកលដោយប្រើអត្ថបទ JavaScript ខាងក្រោម ដែលត្រូវតែមកបន្ទាប់ពី transition.js(ឬ bootstrap.jsbootstrap.min.jsតាមករណី) បានផ្ទុក៖

$.support.transition = false

ម៉ូឌុល modal.js

ម៉ូឌុលត្រូវបានធ្វើឱ្យទាន់សម័យ ប៉ុន្តែអាចបត់បែនបាន ប្រអប់ជំរុញឱ្យមានមុខងារចាំបាច់អប្បបរមា និងលំនាំដើមឆ្លាតវៃ។

ម៉ូឌុលបើកចំហច្រើនមិនត្រូវបានគាំទ្រទេ។

ត្រូវប្រាកដថាកុំបើកម៉ូឌុលមួយ ខណៈពេលដែលមួយទៀតនៅតែអាចមើលឃើញ។ ការបង្ហាញម៉ូតច្រើនជាងមួយក្នុងពេលតែមួយ ទាមទារកូដផ្ទាល់ខ្លួន។

ការដាក់សញ្ញាសម្គាល់ម៉ូឌុល

ព្យាយាមដាក់កូដ HTML របស់ modal ជានិច្ចនៅក្នុងទីតាំងកម្រិតកំពូលនៅក្នុងឯកសាររបស់អ្នក ដើម្បីជៀសវាងសមាសធាតុផ្សេងទៀតដែលប៉ះពាល់ដល់រូបរាង និង/ឬមុខងាររបស់ modal ។

ឧបករណ៍ចល័តព្រមាន

មានការព្រមានមួយចំនួនទាក់ទងនឹងការប្រើប្រាស់ម៉ូឌុលនៅលើឧបករណ៍ចល័ត។ សូមមើលឯកសារជំនួយកម្មវិធីរុករករបស់យើង សម្រាប់ព័ត៌មានលម្អិត។

ដោយសាររបៀបដែល HTML5 កំណត់អត្ថន័យរបស់វា autofocusគុណលក្ខណៈ HTML មិនមានឥទ្ធិពលនៅក្នុងម៉ូឌុល Bootstrap ទេ។ ដើម្បីសម្រេចបាននូវប្រសិទ្ធិភាពដូចគ្នា សូមប្រើ JavaScript ផ្ទាល់ខ្លួនមួយចំនួន៖

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

ឧទាហរណ៍

ឧទាហរណ៍ឋិតិវន្ត

ម៉ូឌុលដែលបង្ហាញជាមួយបឋមកថា តួ និងសំណុំសកម្មភាពនៅក្នុងបាតកថា។

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ការបង្ហាញផ្ទាល់

បិទ/បើកម៉ូឌុលតាមរយៈ JavaScript ដោយចុចប៊ូតុងខាងក្រោម។ វា​នឹង​រំកិល​ចុះ​ក្រោម ហើយ​ចុះ​ពី​ខាង​លើ​នៃ​ទំព័រ។

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ធ្វើឱ្យម៉ូឌុលអាចចូលប្រើបាន។

ត្រូវប្រាកដថាបន្ថែម role="dialog"និង aria-labelledby="..."យោងចំណងជើងម៉ូឌុល ទៅ និង .modalខ្លួន វាផ្ទាល់។role="document".modal-dialog

លើសពីនេះទៀត អ្នកអាចផ្តល់ការពិពណ៌នាអំពីប្រអប់ម៉ូឌុលរបស់អ្នកជាមួយ aria-describedbyនៅលើ .modal.

ការបង្កប់វីដេអូ YouTube

ការបង្កប់វីដេអូ YouTube នៅក្នុងម៉ូឌុលទាមទារ JavaScript បន្ថែមដែលមិននៅក្នុង Bootstrap ដើម្បីបញ្ឈប់ការចាក់សារថ្មីដោយស្វ័យប្រវត្តិ និងច្រើនទៀត។ សូមមើលការបង្ហោះ Stack Overflow ដែលមានប្រយោជន៍នេះ សម្រាប់ព័ត៌មានបន្ថែម។

ទំហំស្រេចចិត្ត

ម៉ូឌុលមានទំហំស្រ���ចចិត្តពីរ ដែលអាចរកបានតាមរយៈថ្នាក់កែប្រែដែលត្រូវដាក់នៅលើ .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

លុប​ចលនា

សម្រាប់ម៉ូឌុលដែលគ្រាន់តែបង្ហាញជាជាងបន្ថយក្នុងការមើល សូមដក .fadeថ្នាក់ចេញពីការសម្គាល់ម៉ូឌុលរបស់អ្នក។

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

ការប្រើប្រាស់ប្រព័ន្ធក្រឡាចត្រង្គ

ដើម្បីទាញយកអត្ថប្រយោជន៍ពីប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap នៅក្នុងម៉ូឌុលមួយ គ្រាន់តែដាក់សំបុក .rowនៅក្នុង .modal-bodyហើយបន្ទាប់មកប្រើថ្នាក់ប្រព័ន្ធក្រឡាចត្រង្គធម្មតា។

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

មាន​ប៊ូតុង​មួយ​ចំនួន​ដែល​បើក​ដំណើរការ​ម៉ូឌុល​ដូច​គ្នា ដោយ​គ្រាន់​តែ​មាន​មាតិកា​ខុស​គ្នា​បន្តិច? ប្រើ event.relatedTargetនិង គុណលក្ខណៈ HTMLdata-* (អាច តាមរយៈ jQuery ) ដើម្បីផ្លាស់ប្តូរខ្លឹមសារនៃម៉ូឌុល អាស្រ័យលើប៊ូតុងមួយណាដែលត្រូវចុច។ សូមមើលឯកសារព្រឹត្តិការណ៍ Modal សម្រាប់ព័ត៌មានលម្អិតនៅលើ relatedTarget,

...ប៊ូតុងច្រើនទៀត...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

ការប្រើប្រាស់

កម្មវិធីជំនួយម៉ូឌុលបិទបើកមាតិកាលាក់របស់អ្នកតាមតម្រូវការ តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ វាក៏បន្ថែម .modal-openទៅ <body>ដើម្បីបដិសេធឥរិយាបទរមូរលំនាំដើម និងបង្កើត a .modal-backdropដើម្បីផ្តល់តំបន់ចុចសម្រាប់ការបដិសេធម៉ូឌុលដែលបានបង្ហាញនៅពេលចុចនៅខាងក្រៅម៉ូឌុល។

តាមរយៈគុណលក្ខណៈទិន្នន័យ

ធ្វើឱ្យម៉ូឌុលសកម្មដោយមិនសរសេរ JavaScript ។ កំណត់ data-toggle="modal"នៅលើធាតុឧបករណ៍បញ្ជា ដូចជាប៊ូតុងមួយ រួមជាមួយ data-target="#foo"href="#foo"ដើម្បីកំណត់គោលដៅម៉ូឌុលជាក់លាក់មួយដើម្បីបិទបើក។

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

តាមរយៈ JavaScript

ហៅម៉ូឌុលដែលមានលេខសម្គាល់ myModalជាមួយបន្ទាត់តែមួយនៃ JavaScript៖

$('#myModal').modal(options)

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-backdrop="".

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
ផ្ទៃខាងក្រោយ ប៊ូលីនឬខ្សែអក្សរ'static' ពិត រួមបញ្ចូលធាតុផ្ទៃខាងក្រោយម៉ូឌុល។ ជាជម្រើស បញ្ជាក់ staticសម្រាប់ផ្ទាំងខាងក្រោយដែលមិនបិទម៉ូឌុលនៅពេលចុច។
ក្តារចុច ប៊ូលីន ពិត បិទម៉ូឌុលនៅពេលចុចគ្រាប់ចុចគេច
បង្ហាញ ប៊ូលីន ពិត បង្ហាញម៉ូឌុលនៅពេលចាប់ផ្តើម។
ពីចម្ងាយ ផ្លូវ មិនពិត

ជម្រើសនេះត្រូវបានបដិសេធចាប់តាំងពី v3.3.0 ហើយត្រូវបានដកចេញនៅក្នុង v4 ។ យើង​សូម​ណែនាំ​ជំនួស​វិញ​ដោយ​ប្រើ​គំរូ​ខាង​អតិថិជន ឬ​ក្របខ័ណ្ឌ​ចងទិន្នន័យ ឬ​ហៅ ​ទៅ jQuery.load ដោយខ្លួនឯង។

ប្រសិនបើ URL ពីចម្ងាយត្រូវបានផ្តល់ មាតិកានឹងត្រូវបានផ្ទុកតែម្តង តាមរយៈវិធីសាស្ត្ររបស់ jQuery loadហើយបញ្ចូលទៅក្នុង .modal-contentdiv ។ ប្រសិនបើអ្នកកំពុងប្រើ data-api អ្នកអាចប្រើ hrefលក្ខណៈជំនួសដើម្បីបញ្ជាក់ប្រភពពីចម្ងាយ។ ឧទាហរណ៍នៃរឿងនេះត្រូវបានបង្ហាញខាងក្រោម:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

វិធីសាស្រ្ត

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាគំរូ។ ទទួលយកជម្រើសស្រេចចិត្ត object

$('#myModal').modal({
  keyboard: false
})

បិទ/បើកម៉ូឌុលដោយដៃ។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលដែលម៉ូឌុលពិតជាត្រូវបានបង្ហាញ ឬលាក់shown.bs.modal ( ឧទាហរណ៍ មុនពេល hidden.bs.modalព្រឹត្តិការណ៍កើតឡើង)។

$('#myModal').modal('toggle')

បើកម៉ូឌុលដោយដៃ។ ត្រឡប់ទៅអ្នកហៅទូរស័ព្ទវិញ មុនពេលដែលម៉ូឌុលត្រូវបានបង្ហាញយ៉ាងពិតប្រាកដ (ឧទាហរណ៍ មុនពេល shown.bs.modalព្រឹត្តិការណ៍កើតឡើង)។

$('#myModal').modal('show')

លាក់ម៉ូឌុលដោយដៃ។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលដែលម៉ូឌុលពិតជាត្រូវបានលាក់ (ឧទាហរណ៍ មុនពេល hidden.bs.modalព្រឹត្តិការណ៍កើតឡើង)។

$('#myModal').modal('hide')

កែតម្រូវទីតាំងរបស់ម៉ូឌុលដើម្បីប្រឆាំងរបាររមូរក្នុងករណីដែលគួរលេចឡើង ដែលនឹងធ្វើឱ្យម៉ូឌុលលោតទៅខាងឆ្វេង។

ត្រូវការតែនៅពេលដែលកម្ពស់នៃម៉ូឌុលផ្លាស់ប្តូរខណៈពេលដែលវាបើក។

$('#myModal').modal('handleUpdate')

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

ថ្នាក់ modal របស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់ចូលទៅក្នុងមុខងារ modal ។

ព្រឹត្តិការណ៍ modal ទាំងអស់ត្រូវបានបាញ់នៅ modal ខ្លួនវាផ្ទាល់ (ឧទាហរណ៍នៅ <div class="modal">) ។

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
show.bs.modal ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល showវិធីសាស្ត្រ instance ត្រូវបានហៅ។ ប្រសិនបើបណ្តាលមកពីការចុច ធាតុដែលបានចុចគឺអាចប្រើបានជា relatedTargetលក្ខណសម្បត្តិនៃព្រឹត្តិការណ៍។
បង្ហាញ.bs.modal ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ដែល​ម៉ូឌុល​ត្រូវ​បាន​ធ្វើ​ឱ្យ​អ្នក​ប្រើ​អាច​មើល​ឃើញ (នឹង​រង់ចាំ​ការ​ផ្លាស់​ប្តូរ CSS ដើម្បី​បញ្ចប់)។ ប្រសិនបើបណ្តាលមកពីការចុច ធាតុដែលបានចុចគឺអាចប្រើបានជា relatedTargetលក្ខណសម្បត្តិនៃព្រឹត្តិការណ៍។
hide.bs.modal ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​ភ្លាមៗ​នៅ​ពេល​ដែល hide​វិធីសាស្ត្រ​វត្ថុ​ត្រូវ​បាន​ហៅ។
hidden.bs.modal ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញនៅពេលដែលម៉ូឌុលបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។
loaded.bs.modal ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលម៉ូឌុលបានផ្ទុកមាតិកាដោយប្រើ remoteជម្រើស។
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ទម្លាក់ចុះ dropdown.js

បន្ថែមម៉ឺនុយទម្លាក់ចុះទៅស្ទើរតែទាំងអស់ជាមួយនឹងកម្មវិធីជំនួយដ៏សាមញ្ញនេះ រួមទាំងរបាររុករក ផ្ទាំង និងថ្នាំគ្រាប់។

នៅក្នុង navbar មួយ។

ក្នុងថ្នាំគ្រាប់

តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript កម្មវិធីជំនួយទម្លាក់ចុះបិទបើកមាតិកាដែលលាក់ (ម៉ឺនុយទម្លាក់ចុះ) ដោយបិទបើក .openថ្នាក់នៅលើធាតុបញ្ជីមេ។

នៅលើឧបករណ៍ចល័ត ការបើកបញ្ជីទម្លាក់ចុះបន្ថែម .dropdown-backdropតំបន់ប៉ះសម្រាប់បិទម៉ឺនុយទម្លាក់ចុះ នៅពេលប៉ះនៅខាងក្រៅម៉ឺនុយ ដែលជាតម្រូវការសម្រាប់ការគាំទ្រប្រព័ន្ធប្រតិបត្តិការ iOS ត្រឹមត្រូវ។ នេះមានន័យថាការប្តូរពីម៉ឺនុយទម្លាក់ចុះដែលបើកទៅម៉ឺនុយទម្លាក់ចុះផ្សេងតម្រូវឱ្យមានការចុចបន្ថែមនៅលើទូរស័ព្ទ។

ចំណាំ៖ data-toggle="dropdown"គុណលក្ខណៈគឺពឹងផ្អែកលើការបិទម៉ឺនុយទម្លាក់ចុះនៅកម្រិតកម្មវិធី ដូច្នេះវាជាការប្រសើរក្នុងការប្រើវាជានិច្ច។

តាមរយៈគុណលក្ខណៈទិន្នន័យ

បន្ថែម data-toggle="dropdown"ទៅតំណ ឬប៊ូតុងដើម្បីបិទបើកបញ្ជីទម្លាក់ចុះ។

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

ដើម្បីរក្សា URL ឱ្យនៅដដែលជាមួយប៊ូតុងតំណ សូមប្រើ data-targetគុណលក្ខណៈជំនួសឱ្យ href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

តាមរយៈ JavaScript

ហៅបញ្ជីទម្លាក់ចុះតាមរយៈ JavaScript៖

$('.dropdown-toggle').dropdown()

data-toggle="dropdown"នៅតែត្រូវការ

មិនថាអ្នកហៅ dropdown របស់អ្នកតាមរយៈ JavaScript ឬជំនួសអោយប្រើ data-api ទេ data-toggle="dropdown"តែងតែតម្រូវឱ្យមានវត្តមាននៅលើធាតុ trigger របស់ dropdown ។

គ្មាន

បិទ/បើកម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។

ព្រឹត្តិការណ៍ទម្លាក់ចុះទាំងអស់ត្រូវបានបណ្តេញចេញពី .dropdown-menuធាតុមេរបស់។

ព្រឹត្តិការណ៍ទម្លាក់ចុះទាំងអស់មាន relatedTargetលក្ខណសម្បត្តិ ដែលតម្លៃរបស់វាជាធាតុយុថ្កាបិទបើក។

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
show.bs.dropdown ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលគេហៅវិធីសាស្ត្របង្ហាញឧទាហរណ៍។
បង្ហាញ.bs.dropdown ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ដែល​ការ​ទម្លាក់​ចុះ​ត្រូវ​បាន​ធ្វើ​ឱ្យ​អ្នក​ប្រើ​មើល​ឃើញ (នឹង​រង់ចាំ​ការ​ផ្លាស់​ប្តូរ CSS ដើម្បី​បញ្ចប់)។
hide.bs.dropdown ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញភ្លាមៗ នៅពេលដែលវិធីសាស្ត្រលាក់វត្ថុត្រូវបានហៅ។
hidden.bs.dropdown ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញ នៅពេលដែលការទម្លាក់ចុះបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS ដើម្បីបញ្ចប់)។
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

ឧទាហរណ៍នៅក្នុង navbar

កម្មវិធីជំនួយ ScrollSpy គឺសម្រាប់ធ្វើបច្ចុប្បន្នភាពដោយស្វ័យប្រវត្តិនូវគោលដៅ nav ដោយផ្អែកលើទីតាំងរមូរ។ រមូរតំបន់ខាងក្រោមរបាររុករក ហើយមើលការផ្លាស់ប្តូរថ្នាក់សកម្ម។ ធាតុរងដែលទម្លាក់ចុះនឹងត្រូវបានបន្លិចផងដែរ។

@ខ្លាញ់

ខោខូវប៊យ ខោខូវប៊យ ខោខូវប៊យ លេខសម្គាល់ថ្ងៃត្រង់ សិល្បៈជប់លៀង ធ្វើពលកម្ម។ Pitchfork yr enim lo-fi មុនពេលដែលពួកគេបានលក់ចេញ qui ។ សិទ្ធិជិះកង់ Tumblr farm-to-table យ៉ាងណាក៏ដោយ។ Anim keffiyeh carles cardigan ។ ស្តង់រូបថតរបស់ Velit seitan mcsweeney 3 wolf moon irure ។ Cosby sweater lomo jean shorts, williamsburg hoodie minim qui អ្នកប្រហែលជាមិនធ្លាប់លឺពីពួកគេ និង cardigan trust fund culpa biodiesel wes anderson aesthetic ។ Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat ។

@mdo

ក្តារបន្ទះពុកមាត់ Veniam marfa, adipisicing fugiat velit pitchfork ពុកចង្ការ។ Freegan ពុកចង្ការ aliqua cupidatat mcsweeney's vero ។ Cupidatat បួន loko nisi, ea helvetica nulla carles ។ ឡានដឹកអាហារ អាវយឺត cosby សាក់រូប វីនីល quis non freegan របស់ mcsweeney ។ Lo-fi wes anderson +1 sartorial ។ Carles ការធ្វើលំហាត់ប្រាណដែលមិនមែនជាសោភ័ណភាព quis gentrify ។ Brooklyn adipisicing craft beer vice keytar deserunt។

មួយ។

Occaecat commodo aliqua delectus ។ Fap craft beer deserunt skateboard ea ។ សិទ្ធិជិះកង់ Lomo adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS គឺជា adipisicing ។ Consectetur nisi កាបូបផ្ញើសារខ្នាតតូច DIY ។ Cred ex in, និរន្តរភាព delectus consectetur fanny pack iphone ។

ពីរ

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

ប្លក់ Keytar twee, culpa messenger bag marfa អ្វីក៏ដោយ delectus food truck ។ Sapiente synth id assumenda ។ Locavore sed helvetica cliche ហួសចិត្ត ផ្គរលាន់ អ្នកប្រហែលជាមិនធ្លាប់បានឮអំពីពួកវា នាំឱ្យសត្វកណ្ដុរគ្មានជាតិស្ករ lo-fi fap aliquip ។ Labore elit placeat មុនពេលពួកគេលក់ចេញ, Terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan ។ ស្រាបៀរ ខាឌីហ្គែន ស៊ីតាន វីលីត ផលិតរួចរាល់។ VHS Chambray Laboris Tempor Veniam ។ Anim mollit minim commodo ullamco thundercats។

ការប្រើប្រាស់

ទាមទារ Bootstrap nav

បច្ចុប្បន្ន Scrollspy តម្រូវឱ្យប្រើ សមាសភាគ Bootstrap nav សម្រាប់ការបន្លិចត្រឹមត្រូវនៃតំណភ្ជាប់សកម្ម។

តម្រូវ​ឱ្យ​មាន​គោលដៅ ID ដែលអាចដោះស្រាយបាន។

តំណភ្ជាប់ Navbar ត្រូវតែមានគោលដៅលេខសម្គាល់ដែលអាចដោះស្រាយបាន។ ឧទាហរណ៍ <a href="#home">home</a>ត្រូវតែឆ្លើយតបទៅនឹងអ្វីមួយនៅក្នុង DOM ដូចជា <div id="home"></div>.

ធាតុដែល មិនមែនជា :visibleគោលដៅត្រូវបានអើពើ

ធាតុគោលដៅដែលមិន :visibleយោងទៅតាម jQuery នឹងត្រូវបានមិនអើពើ ហើយធាតុ nav ដែលត្រូវគ្នារបស់ពួកគេនឹងមិនត្រូវបានបន្លិចឡើយ។

ទាមទារទីតាំងដែលទាក់ទង

មិនថាវិធីសាស្រ្តនៃការអនុវត្តនោះទេ scrollspy តម្រូវឱ្យមានការប្រើប្រាស់ position: relative;នៅលើធាតុដែលអ្នកកំពុងចារកម្ម។ ក្នុងករណីភាគច្រើននេះគឺជា <body>។ នៅពេលរមូរនៅលើធាតុផ្សេងក្រៅពី <body>នេះ ត្រូវប្រាកដថាមាន heightសំណុំ និង overflow-y: scroll;អនុវត្ត។

តាមរយៈគុណលក្ខណៈទិន្នន័យ

ដើម្បីងាយស្រួលបន្ថែមឥរិយាបថរមូរទៅការរុករករបារកំពូលរបស់អ្នក បន្ថែម data-spy="scroll"ទៅធាតុដែលអ្នកចង់ឈ្លបយកការណ៍ (ភាគច្រើនជាធម្មតាវាជា <body>)។ បន្ទាប់មកបន្ថែម data-targetគុណលក្ខណៈជាមួយនឹងលេខសម្គាល់ ឬថ្នាក់នៃធាតុមេនៃ .navសមាសធាតុ Bootstrap ណាមួយ។

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

តាមរយៈ JavaScript

បន្ទាប់ពីបន្ថែម position: relative;នៅក្នុង CSS របស់អ្នក សូមហៅទៅ scrollspy តាមរយៈ JavaScript៖

$('body').scrollspy({ target: '#navbar-example' })

វិធីសាស្រ្ត

.scrollspy('refresh')

នៅពេលប្រើ scrollspy ដោយភ្ជាប់ជាមួយការបន្ថែម ឬការដកធាតុចេញពី DOM អ្នកនឹងត្រូវហៅវិធីសាស្ត្រធ្វើឱ្យស្រស់ដូចនេះ៖

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-offset="".

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
អុហ្វសិត ចំនួន ១០ ភីកសែលដែលត្រូវទូទាត់ពីកំពូលនៅពេលគណនាទីតាំងរមូរ។

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

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
activate.bs.scrollspy ព្រឹត្តិការណ៍នេះឆេះនៅពេលណាដែលធាតុថ្មីត្រូវបានធ្វើឱ្យសកម្មដោយ scrollspy ។
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

ផ្ទាំង ដែលអាចបិទបើកបាន tab.js

ផ្ទាំងឧទាហរណ៍

បន្ថែមមុខងារផ្ទាំងរហ័ស និងថាមវន្តទៅការផ្លាស់ប្តូរតាមរយៈផ្ទាំងនៃមាតិកាមូលដ្ឋាន សូម្បីតែតាមរយៈម៉ឺនុយទម្លាក់ចុះក៏ដោយ។ ផ្ទាំង Nested មិនត្រូវបានគាំទ្រទេ។

អំបោះឆៅ អ្នកប្រហែលជាមិនធ្លាប់លឺពីខោខូវប៊យ អូស្ទីន។ តៅហ៊ូ Nesciunt stumptown aliqua, retro synth master cleanse ។ Mustache cliche tempor, Williamsburg carles vegan helvetica ។ Reprehenderit butcher retro keffiyeh dreamcatcher synth ។ អាវយឺត Cosby eu banh mi, qui irure terry richardson ex squid ។ Aliquip placeat salvia cillum ទូរស័ព្ទ iPhone ។ Seitan aliquip quis cardigan សំលៀកបំពាក់អាមេរិច អ្នកកាប់សាច់ voluptate nisi qui ។

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

ពង្រីកការរុករកតាមផ្ទាំង

កម្មវិធីជំនួយនេះពង្រីក សមាសភាគរុករកផ្ទាំង ដើម្បីបន្ថែមតំបន់ដែលអាចធ្វើតារាងបាន។

ការប្រើប្រាស់

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

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

អ្នកអាចធ្វើឱ្យផ្ទាំងនីមួយៗសកម្មតាមវិធីជាច្រើន៖

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

សម្គាល់

អ្នកអាចបើកដំណើរការផ្ទាំង ឬថ្នាំគ្រាប់រុករកដោយមិនចាំបាច់សរសេរ JavaScript ដោយគ្រាន់តែបញ្ជាក់ data-toggle="tab"data-toggle="pill"នៅលើធាតុមួយ។ ការបន្ថែម navនិង nav-tabsថ្នាក់ទៅផ្ទាំង នឹងអនុវត្ត រចនាប័ទ្មផ្ទាំងul Bootstrap ខណៈពេលដែលការបន្ថែម និង ថ្នាក់នឹងអនុវត្ត រចនាប័ទ្មថ្នាំគ្រាប់navnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

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

</div>

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

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

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

វិធីសាស្រ្ត

$().tab

ធ្វើឱ្យធាតុផ្ទាំង និងឧបករណ៍ផ្ទុកមាតិកាសកម្ម។ ថេបគួរតែមាន មួយ data-targethrefកំណត់គោលដៅថ្នាំងកុងតឺន័រនៅក្នុង DOM ។ ក្នុងឧទាហរណ៍ខាងលើ ផ្ទាំងគឺជា <a>s ដែលមាន data-toggle="tab"គុណលក្ខណៈ។

.tab('show')

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

$('#someTab').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="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

ព័ត៌មានជំនួយ tooltip.js

បំផុសគំនិតដោយកម្មវិធីជំនួយ jQuery.tipsy ដ៏ល្អឥតខ្ចោះដែលសរសេរដោយ Jason Frame; ការណែនាំអំពីឧបករណ៍គឺជាកំណែដែលបានអាប់ដេត ដែលមិនពឹងផ្អែកលើរូបភាព ប្រើ CSS3 សម្រាប់គំនូរជីវចល និងគុណលក្ខណៈទិន្នន័យសម្រាប់ការផ្ទុកចំណងជើងមូលដ្ឋាន។

ព័ត៌មានជំនួយដែលមានចំណងជើងប្រវែងសូន្យមិនត្រូវបានបង្ហាញទេ។

ឧទាហរណ៍

ដាក់លើតំណខាងក្រោមដើម្បីមើលព័ត៌មានជំនួយ៖

ខោតឹង កម្រិតបន្ទាប់ keffiyeh អ្នកប្រហែលជា មិនធ្លាប់ឮពីពួកគេ។ ស្តង់រូបថតពុកចង្ការឆៅ denim letterpress vegan messenger bag stumptown ។ Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit សំលៀកបំពាក់អាមេរិច មាន terry richardson vinyl chambray ។ ពុកចង្ការ, cardigans banh mi lomo thundercats. តៅហ៊ូ biodiesel williamsburg marfa, 4 Loko mcsweeney's cleanse vegan chambray ។ សិប្បករដ៏គួរឱ្យអស់សំណើចមួយរូប ដែលមិនថាជា keytar អ្វីក៏ដោយ ធនាគារ scenester farm-to-table banksy Austin twitter គ្រប់គ្រង freegan cred raw denim មេរោគកាហ្វេដើមតែមួយ។

ព័ត៌មានជំនួយឋិតិវន្ត

មានជម្រើសចំនួនបួន៖ ខាងលើ ស្តាំ បាត និងតម្រឹមឆ្វេង។

ទិសទាំងបួន

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

មុខងារជ្រើសរើស

សម្រាប់ហេតុផលនៃការអនុវត្ត Tooltip និង Popover data-apis ត្រូវបានជ្រើសរើស មានន័យថា អ្នកត្រូវតែចាប់ផ្តើមពួកវាដោយខ្លួនឯង .

វិធីមួយដើម្បីចាប់ផ្តើមព័ត៌មានជំនួយទាំងអស់នៅលើទំព័រមួយគឺជ្រើសរើសពួកវាតាម data-toggleគុណលក្ខណៈរបស់ពួកគេ៖

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ការប្រើប្រាស់

កម្មវិធីជំនួយព័ត៌មានជំនួយបង្កើតមាតិកា និងការសម្គាល់តាមតម្រូវការ ហើយតាមលំនាំដើមដាក់ព័ត៌មានជំនួយបន្ទាប់ពីធាតុគន្លឹះរបស់ពួកគេ។

កេះព័ត៌មានជំនួយតាមរយៈ JavaScript៖

$('#example').tooltip(options)

សម្គាល់

ការសម្គាល់ដែលត្រូវការសម្រាប់ព័ត៌មានជំនួយគឺគ្រាន់តែជា dataគុណលក្ខណៈ និង titleនៅលើធាតុ HTML ដែលអ្នកចង់មានព័ត៌មានជំនួយ។ ការសម្គាល់ដែលបានបង្កើតនៃព័ត៌មានជំនួយគឺសាមញ្ញជាង ទោះបីជាវាទាមទារទីតាំង (តាមលំនាំដើម កំណត់ topដោយកម្មវិធីជំនួយ)។

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

តំណភ្ជាប់ច្រើនជួរ

ពេលខ្លះអ្នកចង់បន្ថែមព័ត៌មានជំនួយទៅតំណខ្ពស់ដែលរុំបន្ទាត់ជាច្រើន។ ឥរិយាបថលំនាំដើមនៃកម្មវិធីជំនួយព័ត៌មានជំនួយគឺត្រូវដាក់កណ្តាលវាផ្ដេក និងបញ្ឈរ។ បន្ថែម white-space: nowrap;ទៅយុថ្ការបស់អ្នកដើម្បីជៀសវាងបញ្ហានេះ។

ព័ត៌មានជំនួយក្នុងក្រុមប៊ូតុង ក្រុមបញ្ចូល និងតារាងទាមទារការកំណត់ពិសេស

នៅពេលប្រើព័ត៌មានជំនួយលើធាតុនៅក្នុង មួយ .btn-groupឬមួយ .input-groupឬនៅលើធាតុដែលទាក់ទងនឹងតារាង ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>) អ្នកនឹងត្រូវបញ្ជាក់ជម្រើស container: 'body'(ឯកសារខាងក្រោម) ដើម្បីជៀសវាងផលប៉ះពាល់ដែលមិនចង់បាន (ដូចជាធាតុកាន់តែទូលំទូលាយ និង/ ឬបាត់បង់ជ្រុងមូលរបស់វា នៅពេលដែលព័ត៌មានជំនួយត្រូវបានកេះ)។

កុំព្យាយាមបង្ហាញព័ត៌មានជំនួយលើធាតុលាក់

ការហៅ $(...).tooltip('show')នៅពេលដែលធាតុគោលដៅគឺ display: none;នឹងធ្វើឱ្យព័ត៌មានជំនួយត្រូវបានដាក់មិនត្រឹមត្រូវ។

ព័ត៌មានជំនួយដែលអាចចូលប្រើបានសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច និងបច្ចេកវិទ្យាជំនួយ

សម្រាប់អ្នកប្រើប្រាស់ដែលរុករកដោយប្រើក្តារចុច និងជាពិសេសអ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយ អ្នកគួរតែបន្ថែមព័ត៌មានជំនួយទៅធាតុដែលអាចផ្តោតលើក្តារចុចដូចជាតំណភ្ជាប់ ការគ្រប់គ្រងទម្រង់ ឬធាតុបំពានណាមួយដែលមាន tabindex="0"គុណលក្ខណៈ។

ព័ត៌មានជំនួយអំពីធាតុបិទដំណើរការត្រូវការធាតុរុំ

ដើម្បីបន្ថែមព័ត៌មានជំនួយទៅ disabledធាតុ .disabledមួយ ដាក់ធាតុនៅខាងក្នុងនៃ a <div>ហើយអនុវត្តព័ត៌មានជំនួយទៅវា <div>ជំនួសវិញ។

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-animation="".

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
ចលនា ប៊ូលីន ពិត អនុវត្តការផ្លាស់ប្តូរបន្ថយ CSS ទៅព័ត៌មានជំនួយ
ធុង ខ្សែអក្សរ | មិនពិត មិនពិត

បន្ថែមព័ត៌មានជំនួយទៅធាតុជាក់លាក់មួយ។ ឧទាហរណ៍៖ container: 'body'. ជម្រើសនេះមានប្រយោជន៍ជាពិសេសក្នុងការដែលវាអនុញ្ញាតឱ្យអ្នកដាក់ព័ត៌មានជំនួយនៅក្នុងលំហូរនៃឯកសារនៅជិតធាតុកេះ - ដែលនឹងការពារព័ត៌មានជំនួយមិនឱ្យអណ្តែតចេញពីធាតុកេះកំឡុងពេលផ្លាស់ប្តូរទំហំបង្អួច។

ពន្យាពេល លេខ | វត្ថុ 0

ពន្យារពេលបង្ហាញ និងលាក់ព័ត៌មានជំនួយ (ms) - មិនអនុវត្តចំពោះប្រភេទគន្លឹះដោយដៃទេ។

ប្រសិនបើលេខត្រូវបានផ្គត់ផ្គង់ ការពន្យារពេលត្រូវបានអនុវត្តចំពោះទាំងលាក់/បង្ហាញ

រចនាសម្ព័ន្ធវត្ថុគឺ៖delay: { "show": 500, "hide": 100 }

html ប៊ូលីន មិនពិត បញ្ចូល HTML ទៅក្នុងព័ត៌មានជំនួយ។ ប្រសិនបើមិនពិត វិធីសាស្ត្ររបស់ jQuery textនឹងត្រូវបានប្រើដើម្បីបញ្ចូលមាតិកាទៅក្នុង DOM ។ ប្រើអត្ថបទប្រសិនបើអ្នកព្រួយបារម្ភអំពីការវាយប្រហារ XSS ។
ការដាក់ ខ្សែអក្សរ | មុខងារ 'កំពូល'

How to position the tooltip - កំពូល | បាត | ឆ្វេង | ត្រូវ | ស្វ័យប្រវត្តិ។
នៅពេលដែល "ស្វ័យប្រវត្តិ" ត្រូវបានបញ្ជាក់ វានឹងតម្រង់ទិសគន្លឹះឧបករណ៍ឡើងវិញដោយថាមវន្ត។ ឧទាហរណ៍ ប្រសិនបើការដាក់គឺ "ខាងឆ្វេងដោយស្វ័យប្រវត្តិ" នោះព័ត៌មានជំនួយនឹងបង្ហាញទៅខាងឆ្វេងនៅពេលដែលអាចធ្វើទៅបាន បើមិនដូច្នេះទេវានឹងបង្ហាញខាងស្តាំ។

នៅពេលដែលអនុគមន៍មួយត្រូវបានប្រើដើម្បីកំណត់ការដាក់ វាត្រូវបានហៅដោយប្រើថ្នាំង DOM ជំនួយជាអាគុយម៉ង់ដំបូងរបស់វា និងធាតុដែលបង្កដោយថ្នាំង DOM ជាទីពីររបស់វា។ បរិបទ thisត្រូវបានកំណត់ទៅឧទាហរណ៍ព័ត៌មានជំនួយ។

អ្នកជ្រើសរើស ខ្សែអក្សរ មិនពិត ប្រសិនបើឧបករណ៍ជ្រើសរើសត្រូវបានផ្តល់ឱ្យ វត្ថុជំនួយនឹងត្រូវបានផ្ទេរទៅគោលដៅដែលបានបញ្ជាក់។ នៅក្នុងការអនុវត្ត វាត្រូវបានប្រើដើម្បីបើកមាតិកា HTML ថាមវន្ត ដើម្បីឱ្យមានការបន្ថែមព័ត៌មានជំនួយ។ សូមមើល នេះ និង ឧទាហរណ៍ព័ត៌មាន
គំរូ ខ្សែអក្សរ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

មូលដ្ឋាន HTML ដើម្បីប្រើនៅពេលបង្កើតព័ត៌មានជំនួយ។

ព័ត៌មានជំនួយ titleនឹងត្រូវបានចាក់ចូលទៅក្នុង .tooltip-inner.

.tooltip-arrowនឹងក្លាយជាព្រួញរបស់ឧបករណ៍។

ធាតុរុំខាងក្រៅបំផុតគួរតែមាន .tooltipថ្នាក់។

ចំណងជើង ខ្សែអក្សរ | មុខងារ ''

តម្លៃចំណងជើងលំនាំដើម ប្រសិនបើ titleគុណលក្ខណៈមិនមានវត្តមាន។

ប្រសិនបើមុខងារមួយត្រូវបានផ្តល់ឱ្យ វានឹងត្រូវបានគេហៅជាមួយនឹង thisឯកសារយោងរបស់វាទៅកាន់ធាតុដែលព័ត៌មានជំនួយត្រូវបានភ្ជាប់។

កេះ ខ្សែអក្សរ 'ផ្ដោត​លើ' របៀបដែលព័ត៌មានជំនួយត្រូវបានកេះ - ចុច | hover | ផ្តោតអារម្មណ៍ | ហត្ថកម្ម។ អ្នកអាចឆ្លងកាត់គន្លឹះជាច្រើន; បំបែកពួកវាដោយចន្លោះមួយ។ manualមិន​អាច​ត្រូវ​បាន​រួម​បញ្ចូល​ជាមួយ​កេះ​ផ្សេង​ទៀត​។
ច្រកមើល ខ្សែអក្សរ | វត្ថុ | មុខងារ { អ្នកជ្រើសរើស៖ 'តួ', ទ្រនាប់៖ 0 }

រក្សាព័ត៌មានជំនួយក្នុងដែនកំណត់នៃធាតុនេះ។ ឧទាហរណ៍៖ viewport: '#viewport'{ "selector": "#viewport", "padding": 0 }

ប្រសិនបើអនុគមន៍មួយត្រូវបានផ្តល់ឱ្យ វាត្រូវបានហៅដោយប្រើថ្នាំង DOM ធាតុដែលជាអាគុយម៉ង់តែមួយគត់របស់វា។ បរិបទ thisត្រូវបានកំណត់ទៅឧទាហរណ៍ព័ត៌មានជំនួយ។

គុណលក្ខណៈទិន្នន័យសម្រាប់ព័ត៌មានជំនួយបុគ្គល

ជម្រើសសម្រាប់ព័ត៌មានជំនួយបុគ្គលអាចត្រូវបានបញ្ជាក់ជាជម្រើសតាមរយៈការប្រើប្រាស់គុណលក្ខណៈទិន្នន័យ ដូចដែលបានពន្យល់ខាងលើ។

វិធីសាស្រ្ត

$().tooltip(options)

ភ្ជាប់ឧបករណ៍ដោះស្រាយព័ត៌មានជំនួយទៅនឹងបណ្តុំធាតុ។

.tooltip('show')

បង្ហាញព័ត៌មានជំនួយរបស់ធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរស័ព្ទវិញ មុនពេលព័ត៌មានជំនួយត្រូវបានបង្ហាញយ៉ាងពិតប្រាកដ (ឧទាហរណ៍ មុនពេល shown.bs.tooltipព្រឹត្តិការណ៍កើតឡើង)។ នេះ​ត្រូវ​បាន​គេ​ចាត់​ទុក​ថា​ជា​ការ​កេះ "សៀវភៅ​ដៃ" នៃ​ព័ត៌មាន​ជំនួយ។ ព័ត៌មានជំនួយដែលមានចំណងជើងប្រវែងសូន្យមិនត្រូវបានបង្ហាញទេ។

$('#element').tooltip('show')

.tooltip('hide')

លាក់ព័ត៌មានជំនួយរបស់ធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញ មុនពេលព័ត៌មានជំនួយត្រូវបានលាក់ (ឧ. មុនពេល hidden.bs.tooltipព្រឹត្តិការណ៍កើតឡើង)។ នេះ​ត្រូវ​បាន​គេ​ចាត់​ទុក​ថា​ជា​ការ​កេះ "សៀវភៅ​ដៃ" នៃ​ព័ត៌មាន​ជំនួយ។

$('#element').tooltip('hide')

.tooltip('toggle')

បិទបើកព័ត៌មានជំនួយរបស់ធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញ មុនពេលព័ត៌មានជំនួយត្រូវបានបង្ហាញ ឬលាក់shown.bs.tooltip ( ឧទាហរណ៍ មុនពេល hidden.bs.tooltipព្រឹត្តិការណ៍កើតឡើង)។ នេះ​ត្រូវ​បាន​គេ​ចាត់​ទុក​ថា​ជា​ការ​កេះ "សៀវភៅ​ដៃ" នៃ​ព័ត៌មាន​ជំនួយ។

$('#element').tooltip('toggle')

.tooltip('destroy')

លាក់ និងបំផ្លាញព័ត៌មានជំនួយរបស់ធាតុមួយ។ ព័ត៌មានជំនួយដែលប្រើការផ្ទេរសិទ្ធិ (ដែលត្រូវបានបង្កើតដោយប្រើ ជម្រើសselector ) មិនអាចត្រូវបានបំផ្លាញដោយឡែកៗពីគ្នាលើធាតុកេះបន្តបន្ទាប់ឡើយ

$('#element').tooltip('destroy')

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

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
show.bs.ព័ត៌មានជំនួយ ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល showវិធីសាស្ត្រ instance ត្រូវបានហៅ។
show.bs.tooltip ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ព័ត៌មាន​ជំនួយ​ត្រូវ​បាន​ធ្វើ​ឱ្យ​អ្នក​ប្រើ​មើល​ឃើញ (នឹង​រង់ចាំ​ការ​ផ្លាស់​ប្តូរ CSS បញ្ចប់)។
hide.bs.tooltip ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​ភ្លាមៗ​នៅ​ពេល​ដែល hide​វិធីសាស្ត្រ​វត្ថុ​ត្រូវ​បាន​ហៅ។
hidden.bs.tooltip ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញ នៅពេលដែលព័ត៌មានជំនួយបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។
inserted.bs.tooltip ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់បន្ទាប់ពី show.bs.tooltipព្រឹត្តិការណ៍ នៅពេលដែលគំរូព័ត៌មានជំនួយត្រូវបានបន្ថែមទៅ DOM ។
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

បន្ថែមការត្រួតគ្នាតូចៗនៃមាតិកាដូចជានៅលើ iPad ទៅនឹងធាតុណាមួយសម្រាប់ព័ត៌មានបន្ទាប់បន្សំ។

Popover ដែលទាំងចំណងជើង និងខ្លឹមសារមានប្រវែងសូន្យ មិនត្រូវបានបង្ហាញទេ។

ភាពអាស្រ័យនៃកម្មវិធីជំនួយ

Popovers តម្រូវឱ្យ កម្មវិធីជំនួយព័ត៌មានជំនួយ ត្រូវបានរួមបញ្ចូលនៅក្នុងកំណែ Bootstrap របស់អ្នក។

មុខងារជ្រើសរើស

សម្រាប់ហេតុផលនៃការអនុវត្ត Tooltip និង Popover data-apis ត្រូវបានជ្រើសរើស មានន័យថា អ្នកត្រូវតែចាប់ផ្តើមពួកវាដោយខ្លួនឯង .

វិធីមួយដើម្បីចាប់ផ្តើមការលេចឡើងទាំងអស់នៅលើទំព័រមួយគឺដើម្បីជ្រើសរើសពួកវាតាម data-toggleគុណលក្ខណៈរបស់ពួកគេ៖

$(function () {
  $('[data-toggle="popover"]').popover()
})

ការលេចឡើងក្នុងក្រុមប៊ូតុង ក្រុមបញ្ចូល និងតារាងទាមទារការកំណត់ពិសេស

នៅពេលប្រើ popovers លើធាតុនៅក្នុង a .btn-groupឬ an .input-group, or on table-related elements ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>) អ្នកនឹងត្រូវបញ្ជាក់ជម្រើស container: 'body'(ឯកសារខាងក្រោម) ដើម្បីជៀសវាងផលប៉ះពាល់ដែលមិនចង់បាន (ដូចជាធាតុដែលរីកធំឡើង និង/ ឬបាត់បង់ជ្រុងមូលរបស់វា នៅពេលដែលការលេចចេញត្រូវបានកេះ)។

កុំព្យាយាមបង្ហាញ popovers នៅលើធាតុដែលលាក់

ការហៅ $(...).popover('show')នៅពេលដែលធាតុគោលដៅគឺ display: none;នឹងបណ្តាលឱ្យ popover ត្រូវបានដាក់មិនត្រឹមត្រូវ។

Popovers លើធាតុពិការត្រូវការធាតុរុំ

ដើម្បីបន្ថែម popover ទៅ disabledធាតុ .disabledមួយ ដាក់ធាតុខាងក្នុងនៃ a <div>ហើយអនុវត្ត popover ទៅវា <div>ជំនួសវិញ។

តំណភ្ជាប់ច្រើនជួរ

ពេលខ្លះអ្នកចង់បន្ថែម popover ទៅតំណខ្ពស់ដែលរុំបន្ទាត់ជាច្រើន។ ឥរិយាបថលំនាំដើមរបស់កម្មវិធីជំនួយ popover គឺត្រូវដាក់កណ្តាលវាផ្ដេក និងបញ្ឈរ។ បន្ថែម white-space: nowrap;ទៅយុថ្ការបស់អ្នកដើម្បីជៀសវាងបញ្ហានេះ។

ឧទាហរណ៍

popover ឋិតិវន្ត

មានជម្រើសចំនួនបួន៖ ខាងលើ ស្តាំ បាត និងតម្រឹមឆ្វេង។

Popover កំពូល

Sed posuere consectetur est at lobortis ។ Aenean eu leo ​​quam ។ Pellentesque ornare sem lacinia quam venenatis vestibulum ។

Popover ត្រឹមត្រូវ។

Sed posuere consectetur est at lobortis ។ Aenean eu leo ​​quam ។ Pellentesque ornare sem lacinia quam venenatis vestibulum ។

Popover បាត

Sed posuere consectetur est at lobortis ។ Aenean eu leo ​​quam ។ Pellentesque ornare sem lacinia quam venenatis vestibulum ។

Popover ចាកចេញ

Sed posuere consectetur est at lobortis ។ Aenean eu leo ​​quam ។ Pellentesque ornare sem lacinia quam venenatis vestibulum ។

ការបង្ហាញផ្ទាល់

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

ទិសទាំងបួន

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

ច្រានចោលនៅពេលចុចបន្ទាប់

ប្រើ focusគន្លឹះដើម្បីច្រានចោលការលេចឡើងនៅលើការចុចបន្ទាប់ដែលអ្នកប្រើប្រាស់បង្កើត។

តម្រូវឱ្យមានការសម្គាល់ជាក់លាក់សម្រាប់ការបដិសេធនៅពេលចុចបន្ទាប់

សម្រាប់ឥរិយាបថឆ្លងកម្មវិធីរុករក និងឆ្លងវេទិកាត្រឹមត្រូវ អ្នកត្រូវតែប្រើ <a>ស្លាក មិនមែន ស្លាក <button>ទេ ហើយអ្នកក៏ត្រូវបញ្ចូល role="button"និង tabindexគុណលក្ខណៈផងដែរ។

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

ការប្រើប្រាស់

បើកដំណើរការ popovers តាមរយៈ JavaScript៖

$('#example').popover(options)

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-animation="".

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
ចលនា ប៊ូលីន ពិត អនុវត្តការផ្លាស់ប្តូរបន្ថយ CSS ទៅ popover
ធុង ខ្សែអក្សរ | មិនពិត មិនពិត

បន្ថែម popover ទៅធាតុជាក់លាក់មួយ។ ឧទាហរណ៍៖ container: 'body'. ជម្រើសនេះមានប្រយោជន៍ជាពិសេសក្នុងការដែលវាអនុញ្ញាតឱ្យអ្នកកំណត់ទីតាំង popover នៅក្នុងលំហូរនៃឯកសារនៅជិតធាតុកេះ - ដែលនឹងការពារ popover ពីការអណ្តែតចេញពីធាតុកេះកំឡុងពេលផ្លាស់ប្តូរទំហំបង្អួច។

មាតិកា ខ្សែអក្សរ | មុខងារ ''

តម្លៃមាតិកាលំនាំដើម ប្រសិនបើ data-contentគុណលក្ខណៈមិនមានវត្តមាន។

ប្រសិនបើមុខងារត្រូវបានផ្តល់ឱ្យ វានឹងត្រូវបានគេហៅជាមួយនឹង thisការកំណត់របស់វាទៅកាន់ធាតុដែល popover ត្រូវបានភ្ជាប់។

ពន្យាពេល លេខ | វត្ថុ 0

ការពន្យាពេលបង្ហាញ និងលាក់ popover (ms) - មិនអនុវត្តចំពោះប្រភេទកេះដោយដៃទេ។

ប្រសិនបើលេខត្រូវបានផ្គត់ផ្គង់ ការពន្យារពេលត្រូវបានអនុវត្តចំពោះទាំងលាក់/បង្ហាញ

រចនាសម្ព័ន្ធវត្ថុគឺ៖delay: { "show": 500, "hide": 100 }

html ប៊ូលីន មិនពិត បញ្ចូល HTML ទៅក្នុង popover ។ ប្រសិនបើមិនពិត វិធីសាស្ត្ររបស់ jQuery textនឹងត្រូវបានប្រើដើម្បីបញ្ចូលមាតិកាទៅក្នុង DOM ។ ប្រើអត្ថបទប្រសិនបើអ្នកព្រួយបារម្ភអំពីការវាយប្រហារ XSS ។
ការដាក់ ខ្សែអក្សរ | មុខងារ 'ត្រូវ'

How to position the popover - កំពូល | បាត | ឆ្វេង | ត្រូវ | ស្វ័យប្រវត្តិ។
នៅពេលដែល "ស្វ័យប្រវត្តិ" ត្រូវបានបញ្ជាក់ វានឹងតម្រង់ទិសឡើងវិញយ៉ាងសកម្ម។ ឧទាហរណ៍ ប្រសិនបើការដាក់គឺ "ខាងឆ្វេងដោយស្វ័យប្រវត្តិ" នោះផ្ទាំងលេចឡើងនឹងបង្ហាញទៅខាងឆ្វេងនៅពេលដែលអាចធ្វើទៅបាន បើមិនដូច្នេះទេវានឹងបង្ហាញខាងស្តាំ។

នៅពេលដែលអនុគមន៍មួយត្រូវបានប្រើដើម្បីកំណត់ការដាក់ វាត្រូវបានហៅជាមួយថ្នាំង DOM popover ជាអាគុយម៉ង់ដំបូងរបស់វា និងធាតុបង្កកថ្នាំង DOM ជាលើកទីពីររបស់វា។ បរិបទ thisត្រូវបានកំណត់ទៅឧទាហរណ៍ popover ។

អ្នកជ្រើសរើស ខ្សែអក្សរ មិនពិត ប្រសិនបើឧបករណ៍ជ្រើសរើសត្រូវបានផ្តល់ឱ្យ វត្ថុ popover នឹងត្រូវបានផ្ទេរទៅគោលដៅដែលបានបញ្ជាក់។ នៅក្នុងការអនុវត្ត វាត្រូវបានប្រើដើម្បីបើកមាតិកា HTML ថាមវន្ត ដើម្បីឱ្យមានការបន្ថែម popovers ។ សូមមើល នេះ និង ឧទាហរណ៍ព័ត៌មាន
គំរូ ខ្សែអក្សរ '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

មូលដ្ឋាន HTML ដើម្បីប្រើនៅពេលបង្កើត popover ។

Popover's titleនឹងត្រូវបានចាក់ចូលទៅក្នុង .popover-title.

Popover's contentនឹងត្រូវបានចាក់ចូលទៅក្នុង .popover-content.

.arrowនឹងក្លាយជាព្រួញរបស់ popover ។

ធាតុរុំខាងក្រៅបំផុតគួរតែមាន .popoverថ្នាក់។

ចំណងជើង ខ្សែអក្សរ | មុខងារ ''

តម្លៃចំណងជើងលំនាំដើម ប្រសិនបើ titleគុណលក្ខណៈមិនមានវត្តមាន។

ប្រសិនបើមុខងារត្រូវបានផ្តល់ឱ្យ វានឹងត្រូវបានគេហៅជាមួយនឹង thisការកំណត់របស់វាទៅកាន់ធាតុដែល popover ត្រូវបានភ្ជាប់។

កេះ ខ្សែអក្សរ 'ចុច' របៀបដែល popover ត្រូវបានកេះ - ចុច | hover | ផ្តោតអារម្មណ៍ | ហត្ថកម្ម។ អ្នកអាចឆ្លងកាត់គន្លឹះជាច្រើន; បំបែកពួកវាដោយចន្លោះមួយ។ manualមិន​អាច​ត្រូវ​បាន​រួម​បញ្ចូល​ជាមួយ​កេះ​ផ្សេង​ទៀត​។
ច្រកមើល ខ្សែអក្សរ | វត្ថុ | មុខងារ { អ្នកជ្រើសរើស៖ 'តួ', ទ្រនាប់៖ 0 }

រក្សា popover ក្នុងដែនកំណត់នៃធាតុនេះ។ ឧទាហរណ៍៖ viewport: '#viewport'{ "selector": "#viewport", "padding": 0 }

ប្រសិនបើអនុគមន៍មួយត្រូវបានផ្តល់ឱ្យ វាត្រូវបានហៅដោយប្រើថ្នាំង DOM ធាតុដែលជាអាគុយម៉ង់តែមួយគត់របស់វា។ បរិបទ thisត្រូវបានកំណត់ទៅឧទាហរណ៍ popover ។

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

ជម្រើសសម្រាប់ popovers បុគ្គលអាចត្រូវបានបញ្ជាក់ជាជម្រើសតាមរយៈការប្រើប្រាស់គុណលក្ខណៈទិន្នន័យ ដូចដែលបានពន្យល់ខាងលើ។

វិធីសាស្រ្ត

$().popover(options)

ចាប់ផ្តើម popovers សម្រាប់ការប្រមូលធាតុ។

.popover('show')

បង្ហាញការលេចឡើងនៃធាតុមួយ។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ​មុន​ពេល​លេច​ចេញ​ត្រូវ​បាន​បង្ហាញ​យ៉ាង​ពិត​ប្រាកដ (ឧ. មុន shown.bs.popover​ព្រឹត្តិការណ៍​កើត​ឡើង)។ នេះ​ត្រូវ​បាន​គេ​ចាត់​ទុក​ថា​ជា "សៀវភៅ​ដៃ​" ការ​កេះ​នៃ popover ។ Popover ដែលទាំងចំណងជើង និងខ្លឹមសារមានប្រវែងសូន្យ មិនត្រូវបានបង្ហាញទេ។

$('#element').popover('show')

.popover('hide')

លាក់ការលេចឡើងនៃធាតុមួយ។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ​មុន​ពេល​លេច​ឮ​តាម​ពិត​ត្រូវ​បាន​លាក់ (ឧ. មុន hidden.bs.popover​ព្រឹត្តិការណ៍​កើត​ឡើង)។ នេះ​ត្រូវ​បាន​គេ​ចាត់​ទុក​ថា​ជា "សៀវភៅ​ដៃ​" ការ​កេះ​នៃ popover ។

$('#element').popover('hide')

.popover('toggle')

បិទ/បើកការលេចឡើងនៃធាតុមួយ។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលការលេចចេញត្រូវបានបង្ហាញ ឬ លាក់ (ឧទាហរណ៍ មុនពេល ព្រឹត្តិការណ៍កើតឡើង)។ នេះ​ត្រូវ​បាន​គេ​ចាត់​ទុក​ថា​ជា "សៀវភៅ​ដៃ​" ការ​កេះ​នៃ popover ។shown.bs.popoverhidden.bs.popover

$('#element').popover('toggle')

.popover('destroy')

លាក់ និងបំផ្លាញការលេចឡើងនៃធាតុមួយ។ Popovers ដែលប្រើការធ្វើប្រតិភូកម្ម (ដែលត្រូវបានបង្កើតដោយប្រើ ជម្រើស )selector មិនអាចត្រូវបំផ្លាញដោយឡែកៗពីគ្នាលើធាតុ descendant trigger ទេ។

$('#element').popover('destroy')

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

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
show.bs.popover ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល showវិធីសាស្ត្រ instance ត្រូវបានហៅ។
បង្ហាញ.bs.popover ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ដែល​ផ្ទាំង​ព័ត៌មាន​ត្រូវ​បាន​ធ្វើ​ឱ្យ​អ្នក​ប្រើ​មើល​ឃើញ (នឹង​រង់ចាំ​ការ​ផ្លាស់​ប្តូរ CSS ដើម្បី​បញ្ចប់)។
hide.bs.popover ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​ភ្លាមៗ​នៅ​ពេល​ដែល hide​វិធីសាស្ត្រ​វត្ថុ​ត្រូវ​បាន​ហៅ។
លាក់.bs.popover ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែល popover បានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។
បញ្ចូល.bs.popover ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់បន្ទាប់ពី show.bs.popoverព្រឹត្តិការណ៍នៅពេលដែលគំរូ popover ត្រូវបានបន្ថែមទៅ DOM ។
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

សារជូនដំណឹង alert.js

ការជូនដំណឹងឧទាហរណ៍

បន្ថែមមុខងារច្រានចោលទៅសារជូនដំណឹងទាំងអស់ជាមួយកម្មវិធីជំនួយនេះ។

នៅពេលប្រើ .closeប៊ូតុង វាត្រូវតែជាកូនទីមួយនៃ .alert-dismissibleអត្ថបទ ហើយគ្មានខ្លឹមសារអត្ថបទអាចមកមុនវាក្នុងការសម្គាល់នោះទេ។

ការប្រើប្រាស់

គ្រាន់តែបន្ថែម data-dismiss="alert"ទៅប៊ូតុងបិទរបស់អ្នក ដើម្បីផ្តល់មុខងារបិទការជូនដំណឹងដោយស្វ័យប្រវត្តិ។ ការបិទការជូនដំណឹងដកវាចេញពី DOM ។

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

ដើម្បីអោយការដាស់តឿនរបស់អ្នកប្រើចលនានៅពេលបិទ សូមប្រាកដថាពួកគេមាន .fadeនិង .inថ្នាក់ដែលបានអនុវត្តរួចហើយចំពោះពួកគេ។

វិធីសាស្រ្ត

$().alert()

ធ្វើឱ្យការដាស់តឿនស្តាប់សម្រាប់ព្រឹត្តិការណ៍ចុចនៅលើធាតុបន្តពូជដែលមាន data-dismiss="alert"គុណលក្ខណៈ។ (មិនចាំបាច់នៅពេលប្រើការចាប់ផ្តើមស្វ័យប្រវត្តិរបស់ data-api ។ )

$().alert('close')

បិទការជូនដំណឹងដោយយកវាចេញពី DOM ។ ប្រសិនបើ ថ្នាក់ .fadeនិង .inថ្នាក់មានវត្តមាននៅលើធាតុ នោះការជូនដំណឹងនឹងរលត់មុនពេលវាត្រូវបានយកចេញ។

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

កម្មវិធីជំនួយការជូនដំណឹងរបស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារជូនដំណឹង។

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
close.bs.alert ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល closeវិធីសាស្ត្រ instance ត្រូវបានហៅ។
closed.bs.alert ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលការជូនដំណឹងត្រូវបានបិទ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ប៊ូតុង button.js

ធ្វើច្រើនទៀតដោយប្រើប៊ូតុង។ ស្ថានភាពប៊ូតុងគ្រប់គ្រង ឬបង្កើតក្រុមនៃប៊ូតុងសម្រាប់សមាសធាតុជាច្រើនទៀតដូចជារបារឧបករណ៍ជាដើម។

ភាពឆបគ្នាឆ្លងកម្មវិធីរុករក

Firefox បន្តបង្កើតស្ថានភាពគ្រប់គ្រង (ភាពពិការ និងការត្រួតពិនិត្យ) នៅទូទាំងការផ្ទុកទំព័រ ។ ដំណោះស្រាយសម្រាប់ការនេះគឺដើម្បីប្រើ autocomplete="off"។ សូមមើល កំហុសរបស់ Mozilla #654072

រដ្ឋ

បន្ថែម data-loading-text="Loading..."ដើម្បីប្រើស្ថានភាពផ្ទុកនៅលើប៊ូតុងមួយ។

មុខងារនេះត្រូវបានបដិសេធចាប់តាំងពី v3.3.5 ហើយត្រូវបានដកចេញនៅក្នុង v4 ។

ប្រើរដ្ឋណាមួយដែលអ្នកចូលចិត្ត!

សម្រាប់ជាប្រយោជន៍នៃបាតុកម្មនេះ យើងកំពុងប្រើ data-loading-textនិង $().button('loading')ប៉ុន្តែនោះមិនមែនជារដ្ឋតែមួយគត់ដែលអ្នកអាចប្រើបានទេ។ សូមមើលបន្ថែមអំពីវាខាងក្រោមនៅក្នុង $().button(string)ឯកសារ

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

បិទបើកតែមួយ

បន្ថែម data-toggle="button"ដើម្បីធ្វើឱ្យការបិទបើកនៅលើប៊ូតុងតែមួយ។

ប៊ូតុងបិទបើកជាមុនត្រូវការ .activeនិងaria-pressed="true"

សម្រាប់ប៊ូតុងបិទបើកជាមុន អ្នកត្រូវតែបន្ថែម .activeថ្នាក់ និង aria-pressed="true"គុណលក្ខណៈទៅ buttonខ្លួនអ្នក។

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

ប្រអប់ធីក / វិទ្យុ

បន្ថែម data-toggle="buttons"ទៅ .btn-groupប្រអប់ធីកដែលមាន ឬធាតុបញ្ចូលវិទ្យុ ដើម្បីបើកការបិទបើកក្នុងរចនាប័ទ្មរៀងៗខ្លួន។

ជម្រើសដែលបានជ្រើសរើសជាមុនត្រូវការ.active

សម្រាប់ជម្រើសដែលបានជ្រើសរើសជាមុន អ្នកត្រូវតែបន្ថែម .activeថ្នាក់ទៅធាតុបញ្ចូល labelដោយខ្លួនឯង។

ស្ថានភាពដែលបានពិនិត្យដែលមើលឃើញបានធ្វើបច្ចុប្បន្នភាពតែលើការចុចប៉ុណ្ណោះ។

ប្រសិនបើស្ថានភាពដែលបានធីកនៃប៊ូតុងប្រអប់ធីកត្រូវបានធ្វើបច្ចុប្បន្នភាពដោយមិនចាំបាច់ clickចាប់ផ្តើមព្រឹត្តិការណ៍នៅលើប៊ូតុង (ឧទាហរណ៍តាមរយៈ <input type="reset">ឬតាមរយៈការកំណត់ checkedលក្ខណសម្បត្តិនៃការបញ្ចូល) អ្នកនឹងត្រូវបិទបើក .activeថ្នាក់នៅលើធាតុបញ្ចូល labelដោយខ្លួនឯង។

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

វិធីសាស្រ្ត

$().button('toggle')

បិទបើកស្ថានភាពរុញ។ ផ្តល់ឱ្យប៊ូតុងនូវរូបរាងដែលវាត្រូវបានធ្វើឱ្យសកម្ម។

$().button('reset')

កំណត់ស្ថានភាពប៊ូតុងឡើងវិញ - ប្តូរអត្ថបទទៅជាអត្ថបទដើម។ វិធីសាស្រ្តនេះគឺអសមកាល ហើយត្រឡប់មុនពេលការកំណត់ឡើងវិញពិតជាបានបញ្ចប់។

$().button(string)

ប្តូរអត្ថបទទៅស្ថានភាពអត្ថបទដែលបានកំណត់ទិន្នន័យណាមួយ។

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

បង្រួម collapse.js

កម្មវិធីជំនួយដែលអាចបត់បែនបានដែលប្រើប្រាស់ថ្នាក់មួយក្តាប់តូចសម្រាប់ឥរិយាបថងាយស្រួលក្នុងការបិទបើក។

ភាពអាស្រ័យនៃកម្មវិធីជំនួយ

បង្រួមតម្រូវឱ្យ កម្មវិធីជំនួយការផ្លាស់ប្តូរ ត្រូវបានរួមបញ្ចូលនៅក្នុងកំណែ Bootstrap របស់អ្នក។

ឧទាហរណ៍

ចុចប៊ូតុងខាងក្រោមដើម្បីបង្ហាញ និងលាក់ធាតុផ្សេងទៀតតាមរយៈការផ្លាស់ប្តូរថ្នាក់៖

  • .collapseលាក់មាតិកា
  • .collapsingត្រូវបានអនុវត្តក្នុងអំឡុងពេលអន្តរកាល
  • .collapse.inបង្ហាញមាតិកា

អ្នកអាចប្រើតំណដែលមាន hrefគុណលក្ខណៈ ឬប៊ូតុងដែលមាន data-targetគុណលក្ខណៈ។ ក្នុង​ករណី​ទាំង​ពីរ​នេះ data-toggle="collapse"​ត្រូវ​បាន​ទាមទារ​។

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

ឧទាហរណ៏នៃ accordion

ពង្រីកឥរិយាបថការដួលរលំលំនាំដើមដើម្បីបង្កើត accordion ជាមួយសមាសភាគបន្ទះ។

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid ។ 3 wolf moon officia aute, non cupidatat skateboard dolor brunch។ រថយន្តដឹកអាហារ quinoa nesciunt laborum eiusmod ។ អាហារថ្ងៃត្រង់ 3 wolf moon tempor, sunt aliqua ដាក់បក្សីមួយនៅលើវា មឹកកាហ្វេ ប្រភពដើមតែមួយ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident ។ Ad vegan excepteur butcher vice lomo ។ Leggings occaecat សិប្បកម្មផលិតស្រាបៀរពីកសិដ្ឋានមួយទៅតុ ក្រណាត់អំបោះឆៅ សំយោគសំយោគ nesciunt អ្នកប្រហែលជាមិនធ្លាប់បានឮអំពីពួកវា accusamus ធ្វើការ VHS ប្រកបដោយនិរន្តរភាព។
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid ។ 3 wolf moon officia aute, non cupidatat skateboard dolor brunch។ រថយន្តដឹកអាហារ quinoa nesciunt laborum eiusmod ។ អាហារថ្ងៃត្រង់ 3 wolf moon tempor, sunt aliqua ដាក់បក្សីមួយនៅលើវា មឹកកាហ្វេ ប្រភពដើមតែមួយ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident ។ Ad vegan excepteur butcher vice lomo ។ Leggings occaecat សិប្បកម្មផលិតស្រាបៀរពីកសិដ្ឋានមួយទៅតុ ក្រណាត់អំបោះឆៅ សំយោគសំយោគ nesciunt អ្នកប្រហែលជាមិនធ្លាប់បានឮអំពីពួកវា accusamus ធ្វើការ VHS ប្រកបដោយនិរន្តរភាព។
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid ។ 3 wolf moon officia aute, non cupidatat skateboard dolor brunch។ រថយន្តដឹកអាហារ quinoa nesciunt laborum eiusmod ។ អាហារថ្ងៃត្រង់ 3 wolf moon tempor, sunt aliqua ដាក់បក្សីមួយនៅលើវា មឹកកាហ្វេ ប្រភពដើមតែមួយ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident ។ Ad vegan excepteur butcher vice lomo ។ Leggings occaecat សិប្បកម្មផលិតស្រាបៀរពីកសិដ្ឋានមួយទៅតុ ក្រណាត់អំបោះឆៅ សំយោគសំយោគ nesciunt អ្នកប្រហែលជាមិនធ្លាប់បានឮអំពីពួកវា accusamus ធ្វើការ VHS ប្រកបដោយនិរន្តរភាព។
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

វាក៏អាចធ្វើទៅបានដើម្បីប្តូរចេញ .panel-bodys ជាមួយ .list-groups ។

  • បិទ
  • មួយ itmus ac facilin
  • អេរ៉ូសទីពីរ

ធ្វើឱ្យការគ្រប់គ្រងពង្រីក/បង្រួមអាចចូលប្រើបាន។

ត្រូវប្រាកដថាបន្ថែម aria-expandedទៅធាតុត្រួតពិនិត្យ។ គុណលក្ខណៈនេះកំណត់យ៉ាងច្បាស់នូវស្ថានភាពបច្ចុប្បន្ននៃធាតុដែលអាចបង្រួមបានចំពោះអ្នកអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយស្រដៀងគ្នា។ ប្រសិនបើធាតុដែលអាចដួលរលំបានត្រូវបានបិទតាមលំនាំដើម វាគួរតែមានតម្លៃ aria-expanded="false". ប្រសិនបើអ្នកបានកំណត់ធាតុដែលអាចបង្រួមបានឱ្យបើកតាមលំនាំដើមដោយប្រើ inថ្នាក់ សូមកំណត់aria-expanded="true" លើវត្ថុបញ្ជាជំនួសវិញ។ កម្មវិធីជំនួយនឹងបិទបើកលក្ខណៈនេះដោយស្វ័យប្រវត្តិដោយផ្អែកលើថាតើធាតុដែលអាចបង្រួមបានត្រូវបានបើក ឬបិទ។

លើសពីនេះទៀត ប្រសិនបើធាតុវត្ថុបញ្ជារបស់អ្នកកំពុងកំណត់គោលដៅធាតុដែលអាចបង្រួមបានតែមួយ - ពោលគឺ data-targetគុណលក្ខណៈកំពុងចង្អុលទៅ idឧបករណ៍ជ្រើសរើស - អ្នកអាចបន្ថែម aria-controlsគុណលក្ខណៈបន្ថែមទៅធាតុវត្ថុបញ្ជាដែលមានធាតុដែល idអាចបង្រួមបាន។ កម្មវិធីអានអេក្រង់ទំនើប និងបច្ចេកវិជ្ជាជំនួយស្រដៀងគ្នា ប្រើប្រាស់លក្ខណៈនេះ ដើម្បីផ្តល់ឱ្យអ្នកប្រើប្រាស់នូវផ្លូវកាត់បន្ថែម ដើម្បីរុករកដោយផ្ទាល់ទៅកាន់ធាតុដែលអាចបង្រួមបាន។

ការប្រើប្រាស់

កម្មវិធីជំនួយការដួលរលំប្រើថ្នាក់មួយចំនួនដើម្បីដោះស្រាយការលើកធ្ងន់៖

  • .collapseលាក់មាតិកា
  • .collapse.inបង្ហាញមាតិកា
  • .collapsingត្រូវបានបន្ថែមនៅពេលដែលការផ្លាស់ប្តូរចាប់ផ្តើម ហើយត្រូវបានដកចេញនៅពេលដែលវាបញ្ចប់

ថ្នាក់ទាំងនេះអាចរកបាននៅក្នុង component-animations.less.

តាមរយៈគុណលក្ខណៈទិន្នន័យ

គ្រាន់​តែ​បន្ថែម data-toggle="collapse"​និង​មួយ data-target​ទៅ​ធាតុ​ដើម្បី​កំណត់​ការ​គ្រប់​គ្រង​ដោយ​ស្វ័យ​ប្រវត្តិ​នៃ​ធាតុ​ដែល​អាច​បង្រួម​។ គុណលក្ខណៈ data-targetទទួលយកឧបករណ៍ជ្រើសរើស CSS ដើម្បីអនុវត្តការដួលរលំ។ ត្រូវប្រាកដថាបន្ថែមថ្នាក់ collapseទៅធាតុដែលអាចបង្រួមបាន។ ប្រសិនបើអ្នកចង់ឱ្យវាបើកលំនាំដើម សូមបន្ថែមថ្នាក់បន្ថែម in

ដើម្បីបន្ថែមការគ្រប់គ្រងក្រុមដូច accordion ទៅការគ្រប់គ្រងដែលអាចបង្រួមបាន សូមបន្ថែមគុណលក្ខណៈទិន្នន័យ data-parent="#selector"។ សូមមើលការបង្ហាញដើម្បីមើលសកម្មភាពនេះ។

តាមរយៈ JavaScript

បើកដំណើរការដោយដៃជាមួយ៖

$('.collapse').collapse()

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-parent="".

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
ឪពុកម្តាយ អ្នកជ្រើសរើស មិនពិត ប្រសិនបើឧបករណ៍ជ្រើសរើសត្រូវបានផ្តល់ឱ្យ នោះធាតុដែលអាចបង្រួមបានទាំងអស់នៅក្រោមមេដែលបានបញ្ជាក់នឹងត្រូវបានបិទនៅពេលដែលធាតុដែលអាចបង្រួមបាននេះត្រូវបានបង្ហាញ។ (ស្រដៀងទៅនឹងអាកប្បកិរិយា accordion ប្រពៃណី - នេះគឺអាស្រ័យលើ panelថ្នាក់)
បិទបើក ប៊ូលីន ពិត បិទ/បើកធាតុដែលអាចបង្រួមបាននៅលើការហៅ

វិធីសាស្រ្ត

.collapse(options)

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាធាតុដែលអាចបង្រួមបាន។ ទទួលយកជម្រើសស្រេចចិត្ត object

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

បិទ/បើកធាតុដែលអាចបង្រួមបានដើម្បីបង្ហាញ ឬលាក់។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ មុន​ពេល​ធាតុ​ដែល​អាច​បង្រួម​បាន​ត្រូវ​បាន​បង្ហាញ ឬ​លាក់ (ឧ. មុន​ពេល shown.bs.collapsehidden.bs.collapse​ព្រឹត្តិការណ៍​កើត​ឡើង)។

.collapse('show')

បង្ហាញធាតុដែលអាចបង្រួមបាន។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ មុន​ពេល​ធាតុ​ដែល​អាច​បង្រួម​បាន​ត្រូវ​បាន​បង្ហាញ​យ៉ាង​ពិត​ប្រាកដ (ឧ. មុន shown.bs.collapse​ព្រឹត្តិការណ៍​កើត​ឡើង)។

.collapse('hide')

លាក់ធាតុដែលអាចបង្រួមបាន។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ មុន​ពេល​ធាតុ​ដែល​អាច​បង្រួម​បាន​ត្រូវ​បាន​លាក់​យ៉ាង​ពិត​ប្រាកដ (ឧ. មុន hidden.bs.collapse​ព្រឹត្តិការណ៍​កើត​ឡើង)។

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

ថ្នាក់ដួលរលំរបស់ Bootstrap លាតត្រដាងព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារដួលរលំ។

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
show.bs.ដួលរលំ ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល showវិធីសាស្ត្រ instance ត្រូវបានហៅ។
បង្ហាញ.bs.ដួលរលំ ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ដែល​ធាតុ​បង្រួម​ត្រូវ​បាន​ធ្វើ​ឱ្យ​អ្នក​ប្រើ​មើល​ឃើញ (នឹង​រង់ចាំ​ការ​ផ្លាស់​ប្តូរ CSS ដើម្បី​បញ្ចប់)។
hide.bs.ដួលរលំ ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញភ្លាមៗនៅពេលដែល hideវិធីសាស្ត្រត្រូវបានហៅ។
hidden.bs.collapse ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញនៅពេលដែលធាតុដួលរលំត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

រទេះរុញ carousel.js

សមាសភាគ​ការ​បញ្ចាំង​ស្លាយ​សម្រាប់​ការ​ជិះ​កង់​តាម​ធាតុ ដូចជា​រង្វង់​មូល។រង្វង់មូលដែលលាក់មិនត្រូវបានគាំទ្រទេ។

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ចំណងជើងជាជម្រើស

បន្ថែមចំណងជើងទៅស្លាយរបស់អ្នកយ៉ាងងាយស្រួលជាមួយនឹង .carousel-captionធាតុនៅក្នុងណាមួយ .item។ ដាក់តែ HTML ស្រេចចិត្តណាមួយនៅក្នុងនោះ ហើយវានឹងត្រូវបានតម្រឹម និងធ្វើទ្រង់ទ្រាយដោយស្វ័យប្រវត្តិ។

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

រង្វង់មូលច្រើន។

Carousels តម្រូវ​ឱ្យ​មាន​ការ​ប្រើ​ប្រាស់​នៃ id​កុងតឺន័រ​ខាង​ក្រៅ​បំផុត (the .carousel) សម្រាប់​ការ​គ្រប់​គ្រង carousel ឱ្យ​ដំណើរការ​បាន​ត្រឹមត្រូវ​។ នៅពេលបន្ថែមការបង្វិលច្រើន ឬនៅពេលផ្លាស់ប្តូររង្វង់មូលid ត្រូវប្រាកដថាធ្វើបច្ចុប្បន្នភាពការគ្រប់គ្រងដែលពាក់ព័ន្ធ។

តាមរយៈគុណលក្ខណៈទិន្នន័យ

ប្រើគុណលក្ខណៈទិន្នន័យ ដើម្បីងាយស្រួលគ្រប់គ្រងទីតាំងរបស់រង្វង់មូល។ data-slideទទួលយកពាក្យគន្លឹះ prevnextដែលផ្លាស់ប្តូរទីតាំងស្លាយទាក់ទងទៅនឹងទីតាំងបច្ចុប្បន្នរបស់វា។ ជាជម្រើស ប្រើ data-slide-toដើម្បីបញ្ជូនសន្ទស្សន៍ស្លាយឆៅទៅរង្វង់មូលdata-slide-to="2" ដែលផ្លាស់ប្តូរទីតាំងស្លាយទៅសន្ទស្សន៍ជាក់លាក់ដែលចាប់ផ្តើមដោយ 0.

គុណលក្ខណៈ data-ride="carousel"​ត្រូវ​បាន​ប្រើ​ដើម្បី​សម្គាល់​រង្វង់​មូល​ថា​ជា​ចលនា​ចាប់​ផ្តើម​នៅ​ពេល​ផ្ទុក​ទំព័រ។ វាមិនអាចប្រើរួមជាមួយនឹង (លែងត្រូវការតទៅទៀត និងមិនចាំបាច់) ការចាប់ផ្តើម JavaScript ច្បាស់លាស់នៃរង្វង់មូលដូចគ្នា។

តាមរយៈ JavaScript

ហៅទូរសព្ទទៅរង្វង់ដោយដៃដោយប្រើ៖

$('.carousel').carousel()

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-interval="".

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
ចន្លោះពេល ចំនួន ៥០០០ ចំនួនពេលវេលាដើម្បីពន្យាពេលរវាងការជិះកង់ដោយស្វ័យប្រវត្តិនូវវត្ថុមួយ។ ប្រសិនបើមិនពិត រង្វង់មូលនឹងមិនវិលដោយស្វ័យប្រវត្តិទេ។
ផ្អាក ខ្សែអក្សរ | មោឃៈ "លោត" ប្រសិនបើ​កំណត់​ទៅ "hover"ផ្អាក​ការ​ជិះ​កង់​នៃ​រង្វង់​មូល​នៅលើ mouseenterហើយ​បន្ត​ការ​ជិះ​កង់​របស់​រង្វង់​មូល​នៅលើ mouseleave. ប្រសិនបើ​កំណត់​ទៅ ការ null​ដាក់​លើ​រង្វង់​មូល​នឹង​មិន​ផ្អាក​វា​ទេ។
រុំ ប៊ូលីន ពិត ថាតើរង្វង់មូលគួរធ្វើចលនាបន្ត ឬមានការឈប់ពិបាក។
ក្តារចុច ប៊ូលីន ពិត ថាតើរង្វង់គួរមានប្រតិកម្មចំពោះព្រឹត្តិការណ៍ក្តារចុចដែរឬទេ។

ចាប់ផ្ដើម​រង្វង់​មូល​ជាមួយ​ជម្រើស​ជា​ជម្រើស objectហើយ​ចាប់ផ្ដើម​ជិះ​កង់​តាម​ធាតុ។

$('.carousel').carousel({
  interval: 2000
})

ធ្វើរង្វង់តាមធាតុរង្វង់ពីឆ្វេងទៅស្តាំ។

បញ្ឈប់​រង្វង់​មូល​មិន​ឱ្យ​ជិះ​កង់​កាត់​វត្ថុ។

បង្វិល​រង្វង់​ទៅ​ស៊ុម​ជាក់លាក់​មួយ (ដោយ​ផ្អែក 0 ស្រដៀង​នឹង​អារេ​មួយ)។

រង្វង់ទៅធាតុមុន។

រង្វង់ទៅធាតុបន្ទាប់។

ថ្នាក់ carousel របស់ Bootstrap លាតត្រដាងនូវព្រឹត្តិការណ៍ចំនួនពីរសម្រាប់ភ្ជាប់មុខងារ carousel ។

ព្រឹត្តិការណ៍ទាំងពីរមានលក្ខណៈសម្បត្តិបន្ថែមដូចខាងក្រោមៈ

  • direction៖ ទិស​ដែល​រង្វង់​មូល​កំពុង​រអិល ( "left""right")។
  • relatedTarget៖ ធាតុ DOM ដែលកំពុងត្រូវបានដាក់បញ្ចូលជាធាតុសកម្ម។

ព្រឹត្តិការណ៍ carousel ទាំងអស់ត្រូវបានបាញ់នៅ carousel ខ្លួនវា (ឧទាហរណ៍នៅ <div class="carousel">) ។

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
slide.bs.carousel ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល slideវិធីសាស្ត្រ instance ត្រូវបានហៅ។
slid.bs.carousel ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ដែល​រង្វង់​បាន​បញ្ចប់​ការ​ផ្លាស់​ប្តូរ​ស្លាយ​របស់​ខ្លួន។
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

ភ្ជាប់ affix.js

ឧទាហរណ៍

កម្មវិធីជំនួយ affix បិទបើក position: fixed;និងបិទ ដោយត្រាប់តាមបែបផែនដែលបានរកឃើញជាមួយ position: sticky;. subnavigation នៅខាងស្តាំគឺជាការបង្ហាញផ្ទាល់នៃកម្មវិធីជំនួយ affix ។


ការប្រើប្រាស់

ប្រើកម្មវិធីជំនួយ affix តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬដោយដៃជាមួយ JavaScript ផ្ទាល់ខ្លួនរបស់អ្នក។ ក្នុងស្ថានភាពទាំងពីរ អ្នកត្រូវតែផ្តល់ CSS សម្រាប់ការកំណត់ទីតាំង និងទទឹងនៃមាតិកាដែលជាប់ទាក់ទងរបស់អ្នក។

ចំណាំ៖ កុំប្រើកម្មវិធីជំនួយ affix នៅលើធាតុដែលមាននៅក្នុងធាតុដែលមានទីតាំងទាក់ទងគ្នា ដូចជាជួរឈរដែលទាញ ឬរុញ ដោយសារ កំហុសបង្ហាញ Safari

ការកំណត់ទីតាំងតាមរយៈ CSS

កម្មវិធីជំនួយ affix បិទបើករវាងថ្នាក់បី ដែលនីមួយៗតំណាងឱ្យរដ្ឋជាក់លាក់មួយ៖ .affix, .affix-top, និង .affix-bottom. អ្នកត្រូវតែផ្តល់រចនាប័ទ្ម លើកលែងតែ position: fixed;បើក .affixសម្រាប់ថ្នាក់ទាំងនេះដោយខ្លួនឯង (ឯករាជ្យនៃកម្មវិធីជំនួយនេះ) ដើម្បីគ្រប់គ្រងមុខតំណែងជាក់ស្តែង។

នេះជារបៀបដែលកម្មវិធីជំនួយ affix ដំណើរការ៖

  1. ដើម្បីចាប់ផ្តើម កម្មវិធីជំនួយបន្ថែម.affix-top ដើម្បីបង្ហាញថាធាតុស្ថិតនៅក្នុងទីតាំងកំពូលបំផុតរបស់វា។ នៅពេលនេះមិនតម្រូវឱ្យមានទីតាំង CSS ទេ។
  2. ការរមូរឆ្លងកាត់ធាតុដែលអ្នកចង់ដាក់បញ្ជូលគ្នា គួរតែបង្កឱ្យមានការភ្ជាប់ពិតប្រាកដ។ នេះគឺជាកន្លែងដែល .affixជំនួស .affix-topនិងកំណត់ position: fixed;(ផ្តល់ដោយ CSS របស់ Bootstrap)។
  3. ប្រសិនបើ​អុហ្វសិត​ខាងក្រោម​ត្រូវ​បាន​កំណត់ នោះ​ការ​រំកិល​ទៅ​ខាង​ក្រោយ​វា​គួរ​ជំនួស .affix​ដោយ .affix-bottom. ដោយសារអុហ្វសិតគឺជាជម្រើស ការកំណត់មួយតម្រូវឱ្យអ្នកកំណត់ CSS ដែលសមស្រប។ ក្នុងករណីនេះបន្ថែម position: absolute;នៅពេលចាំបាច់។ កម្មវិធីជំនួយប្រើគុណលក្ខណៈទិន្នន័យ ឬជម្រើស JavaScript ដើម្បីកំណត់កន្លែងដែលត្រូវដាក់ទីតាំងធាតុពីទីនោះ។

អនុវត្តតាមជំហានខាងលើដើម្បីកំណត់ CSS របស់អ្នកសម្រាប់ជម្រើសប្រើប្រាស់ណាមួយខាងក្រោម។

តាមរយៈគុណលក្ខណៈទិន្នន័យ

ដើម្បីងាយស្រួលបន្ថែមឥរិយាបទ affix ទៅធាតុណាមួយ គ្រាន់តែបន្ថែម data-spy="affix"ទៅធាតុដែលអ្នកចង់ឈ្លបយកការណ៍។ ប្រើអុហ្វសិតដើម្បីកំណត់ពេលដែលត្រូវបិទបើកការខ្ទាស់នៃធាតុមួយ។

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

តាមរយៈ JavaScript

ហៅកម្មវិធីជំនួយ affix តាមរយៈ JavaScript៖

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-offset-top="200".

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
អុហ្វសិត លេខ | មុខងារ | វត្ថុ ១០ ភីកសែលដែលត្រូវទូទាត់ពីអេក្រង់នៅពេលគណនាទីតាំងរមូរ។ ប្រសិនបើលេខតែមួយត្រូវបានផ្តល់ អុហ្វសិតនឹងត្រូវបានអនុវត្តទាំងទិសដៅខាងលើ និងខាងក្រោម។ ដើម្បីផ្តល់នូវអុហ្វសិតបាត និងកំពូលតែមួយគត់ គ្រាន់តែផ្តល់វត្ថុ offset: { top: 10 }offset: { top: 10, bottom: 5 }. ប្រើមុខងារមួយនៅពេលដែលអ្នកត្រូវការគណនាថាមវន្តអុហ្វសិត។
គោលដៅ អ្នកជ្រើសរើស | ថ្នាំង | ធាតុ jQuery windowវត្ថុ _ បញ្ជាក់ធាតុគោលដៅនៃ affix ។

វិធីសាស្រ្ត

.affix(options)

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាមាតិកាដែលជាប់ទាក់ទង។ ទទួលយកជម្រើសស្រេចចិត្ត object

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

គណនាឡើងវិញនូវស្ថានភាពនៃធាតុដែលផ្អែកលើវិមាត្រ ទីតាំង និងទីតាំងរមូរនៃធាតុដែលពាក់ព័ន្ធ។ ថ្នាក់ .affix, .affix-top, និង .affix-bottomថ្នាក់ត្រូវបានបន្ថែមទៅ ឬដកចេញពីមាតិកាដែលជាប់ទាក់ទងនឹងស្ថានភាពថ្មី។ វិធីសាស្រ្តនេះចាំបាច់ត្រូវហៅនៅពេលណាដែលវិមាត្រនៃមាតិកាដែលជាប់ទាក់ទង ឬធាតុគោលដៅត្រូវបានផ្លាស់ប្តូរ ដើម្បីធានាបាននូវទីតាំងត្រឹមត្រូវនៃមាតិកាដែលជាប់។

$('#myAffix').affix('checkPosition')

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

កម្មវិធីជំនួយ affix របស់ Bootstrap លាតត្រដាងព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់ទៅមុខងារ affix ។

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
affix.bs.affix ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ មុនពេលធាតុត្រូវបានភ្ជាប់។
affixed.bs.affix ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញបន្ទាប់ពីធាតុត្រូវបានភ្ជាប់
affix-top.bs.affix ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ មុនពេលដែលធាតុត្រូវបានដាក់ជាប់។
affixed-top.bs.affix ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បណ្តេញ​ចេញ​បន្ទាប់​ពី​ធាតុ​ត្រូវ​បាន​គេ​ដាក់​នៅ​លើ​កំពូល។
affix-bottom.bs.affix ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ មុនពេលធាតុត្រូវបានបិទភ្ជាប់-បាត។
affixed-bottom.bs.affix ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បណ្តេញ​ចេញ​បន្ទាប់​ពី​ធាតុ​ត្រូវ​បាន​ភ្ជាប់​ទៅ​ខាង​ក្រោម។