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

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

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

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

អ្នកអាចប្រើកម្មវិធីជំនួយ 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
})

ទឹកអនាម័យ

ព័ត៌មានជំនួយ និង Popovers ប្រើប្រាស់ឧបករណ៍អនាម័យដែលភ្ជាប់មកជាមួយរបស់យើង ដើម្បីធ្វើអនាម័យជម្រើសដែលទទួលយក HTML ។

តម្លៃ លំនាំដើម whiteListមានដូចខាងក្រោម៖

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

ប្រសិនបើអ្នកចង់បន្ថែមតម្លៃថ្មីទៅលំនាំដើមនេះ whiteListអ្នកអាចធ្វើដូចខាងក្រោម៖

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

ប្រសិនបើ​អ្នក​ចង់​រំលង​ឧបករណ៍​អនាម័យ​របស់​យើង ដោយសារ​អ្នក​ចូលចិត្ត​ប្រើ​បណ្ណាល័យ​ដែល​មាន​ការ​យកចិត្តទុកដាក់ ឧទាហរណ៍ DOMPurify អ្នក​គួរ​ធ្វើ​ដូច​ខាងក្រោម៖

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

លេខកំណែ

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

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

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

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

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

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

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

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

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

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

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

$.support.transition = false

ម៉ូឌុល modal.js

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

ដោយសាររបៀបដែល 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>

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

ម៉ូឌុលមានទំហំស្រេចចិត្តពីរ ដែលអាចរកបានតាមរយៈថ្នាក់កែប្រែដែលត្រូវដាក់នៅលើ .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" 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" 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="".

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

វិធីសាស្រ្ត

.modal(options)

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

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

.modal('toggle')

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

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

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

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

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

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

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

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

ឧទាហរណ៍

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

នៅក្នុងរបាររុករក

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

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

តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ 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>

ដើម្បីរក្សា URLs ឱ្យនៅដដែលជាមួយប៊ូតុងតំណ សូមប្រើ 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()

ជម្រើស

គ្មាន

វិធីសាស្រ្ត

$().dropdown('toggle')

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

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

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

កម្មវិធីជំនួយ ScrollSpy គឺសម្រាប់ធ្វើបច្ចុប្បន្នភាពដោយស្វ័យប្រវត្តិនូវគោលដៅ 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="".

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

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

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

បើកផ្ទាំងដែលអាចប្រើបានតាមរយៈ 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-targetឬ hrefកំណត់គោលដៅថ្នាំងកុងតឺន័រនៅក្នុង 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​ព្រឹត្តិការណ៍​នឹង​មិន​ត្រូវ​បាន​បណ្តេញ​ចេញ​ទេ។

$('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 សម្រាប់គំនូរជីវចល និងគុណលក្ខណៈទិន្នន័យសម្រាប់ការផ្ទុកចំណងជើងមូលដ្ឋាន។

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

ឧទាហរណ៍

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

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

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

ទិសទាំងបួន

<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>

$(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>

ជម្រើស

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

វិធីសាស្រ្ត

$().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')

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

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

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

ឧទាហរណ៍

popover ឋិតិវន្ត

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

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

<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 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="".

វិធីសាស្រ្ត

$().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')

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

$('#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 បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារជូនដំណឹង។

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ប៊ូតុង button.js

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

រដ្ឋ

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

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

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

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

បិទបើកតែមួយ

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

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

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

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

វិធីសាស្រ្ត

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

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

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

បង្រួម collapse.js

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

ឧទាហរណ៍

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

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

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

<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 ជាមួយសមាសភាគបន្ទះ។

<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 ។

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

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

• .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="".

វិធីសាស្រ្ត

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

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

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

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

$('#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 ស្រេចចិត្តណាមួយនៅក្នុងនោះ ហើយវានឹងត្រូវបានតម្រឹម និងធ្វើទ្រង់ទ្រាយដោយស្វ័យប្រវត្តិ។

ស្លាកស្លាយដំបូង

Nulla vitae elit libero ដែលជា pharetra augue mollis interdum ។

ស្លាកស្លាយទីពីរ

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។

ស្លាកស្លាយទីបី

Praesent commodo cursus magna, vel scelerisque nisl consectetur ។

មុន បន្ទាប់

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

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

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

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

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

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

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

តាមរយៈ JavaScript

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

$('.carousel').carousel()

ជម្រើស

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

វិធីសាស្រ្ត

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

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

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

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

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

ព្រឹត្តិការណ៍ carousel ទាំងអស់ត្រូវបានបាញ់នៅ carousel ខ្លួនវា (ឧទាហរណ៍នៅ <div class="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".

វិធីសាស្រ្ត

.affix(options)

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

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

.affix('checkPosition')

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

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

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

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