JavaScript

jQuery 'ਤੇ ਬਣੇ ਸਾਡੇ ਵਿਕਲਪਿਕ JavaScript ਪਲੱਗਇਨਾਂ ਨਾਲ ਬੂਟਸਟਰੈਪ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਲਿਆਓ। ਹਰੇਕ ਪਲੱਗਇਨ, ਸਾਡੇ ਡੇਟਾ ਅਤੇ ਪ੍ਰੋਗਰਾਮੇਟਿਕ API ਵਿਕਲਪਾਂ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬਾਰੇ ਜਾਣੋ।

ਵਿਅਕਤੀਗਤ ਜਾਂ ਸੰਕਲਿਤ

ਪਲੱਗਇਨਾਂ ਨੂੰ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਬੂਟਸਟ੍ਰੈਪ ਦੀਆਂ ਵਿਅਕਤੀਗਤ *.jsਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ), ਜਾਂ ਸਭ ਨੂੰ ਇੱਕੋ ਵਾਰ ਵਰਤ ਕੇ bootstrap.jsਜਾਂ ਮਿੰਨੀਫਾਈਡ bootstrap.min.js(ਦੋਵਾਂ ਨੂੰ ਸ਼ਾਮਲ ਨਾ ਕਰੋ)।

ਨਿਰਭਰਤਾਵਾਂ

ਕੁਝ ਪਲੱਗਇਨ ਅਤੇ CSS ਭਾਗ ਦੂਜੇ ਪਲੱਗਇਨਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਪਲੱਗਇਨ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਡੌਕਸ ਵਿੱਚ ਇਹਨਾਂ ਨਿਰਭਰਤਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਇਹ ਵੀ ਨੋਟ ਕਰੋ ਕਿ ਸਾਰੇ ਪਲੱਗਇਨ jQuery 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ (ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ jQuery ਨੂੰ ਪਲੱਗਇਨ ਫਾਈਲਾਂ ਤੋਂ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ)। ਇਹ ਦੇਖਣ ਲਈ ਸਾਡੇpackage.json ਨਾਲ ਸਲਾਹ ਕਰੋ ਕਿ jQuery ਦੇ ਕਿਹੜੇ ਸੰਸਕਰਣ ਸਮਰਥਿਤ ਹਨ।

ਸਾਡੇ ਡ੍ਰੌਪਡਾਉਨ, ਪੌਪਓਵਰ ਅਤੇ ਟੂਲਟਿਪਸ ਵੀ Popper.js 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ ।

ਡਾਟਾ ਗੁਣ

ਲਗਭਗ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਨੂੰ ਸਿਰਫ HTML ਦੁਆਰਾ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਕਾਰਜਕੁਸ਼ਲਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਾਡਾ ਤਰਜੀਹੀ ਤਰੀਕਾ) ਨਾਲ ਸਮਰੱਥ ਅਤੇ ਸੰਰਚਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇੱਕ ਸਿੰਗਲ ਐਲੀਮੈਂਟ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਸਿਰਫ਼ ਇੱਕ ਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ (ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਇੱਕੋ ਬਟਨ ਤੋਂ ਟੂਲਟਿਪ ਅਤੇ ਮਾਡਲ ਨੂੰ ਟਰਿੱਗਰ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹੋ।)

ਹਾਲਾਂਕਿ, ਕੁਝ ਸਥਿਤੀਆਂ ਵਿੱਚ ਇਸ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਅਯੋਗ ਕਰਨਾ ਫਾਇਦੇਮੰਦ ਹੋ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਐਟਰੀਬਿਊਟ API ਨੂੰ ਅਸਮਰੱਥ ਕਰਨ ਲਈ, ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਨਾਲ ਡੌਕੂਮੈਂਟ ਨੇਮਸਪੇਸ ਵਾਲੇ ਸਾਰੇ ਇਵੈਂਟਾਂ ਨੂੰ ਅਨਬਾਈਂਡ ਕਰੋ data-api:

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

ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਕਿਸੇ ਖਾਸ ਪਲੱਗਇਨ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ, ਸਿਰਫ਼ ਪਲੱਗਇਨ ਦਾ ਨਾਮ ਇੱਕ ਨੇਮ-ਸਪੇਸ ਦੇ ਨਾਲ-ਨਾਲ ਡੇਟਾ-ਏਪੀਆਈ ਨੇਮਸਪੇਸ ਦੇ ਨਾਲ ਇਸ ਤਰ੍ਹਾਂ ਸ਼ਾਮਲ ਕਰੋ:

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

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਜ਼ਿਆਦਾਤਰ ਪਲੱਗਇਨਾਂ ਦੀਆਂ ਵਿਲੱਖਣ ਕਾਰਵਾਈਆਂ ਲਈ ਕਸਟਮ ਇਵੈਂਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਇਹ ਇੱਕ ਅਨੰਤ ਅਤੇ ਪੂਰਵ ਭਾਗੀ ਰੂਪ ਵਿੱਚ ਆਉਂਦੇ ਹਨ - ਜਿੱਥੇ ਇੱਕ ਘਟਨਾ ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਅਨੰਤ (ਉਦਾਹਰਨ show) ਨੂੰ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਸਦਾ ਪਿਛਲਾ ਭਾਗੀ ਰੂਪ (ਉਦਾਹਰਨ shown) ਇੱਕ ਕਿਰਿਆ ਦੇ ਪੂਰਾ ਹੋਣ 'ਤੇ ਚਾਲੂ ਹੁੰਦਾ ਹੈ।

ਸਾਰੀਆਂ ਅਨੰਤ ਘਟਨਾਵਾਂ preventDefault()ਕਾਰਜਕੁਸ਼ਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਕਿਸੇ ਕਾਰਵਾਈ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਉਸ ਨੂੰ ਲਾਗੂ ਕਰਨ ਨੂੰ ਰੋਕਣ ਦੀ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਕਿਸੇ ਇਵੈਂਟ ਹੈਂਡਲਰ ਤੋਂ ਗਲਤ ਵਾਪਸ ਆਉਣਾ ਵੀ ਆਪਣੇ ਆਪ ਕਾਲ ਕਰੇਗਾ preventDefault()।

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

ਪ੍ਰੋਗਰਾਮੇਟਿਕ API

ਅਸੀਂ ਇਹ ਵੀ ਮੰਨਦੇ ਹਾਂ ਕਿ ਤੁਹਾਨੂੰ JavaScript API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਰੇ ਜਨਤਕ API ਸਿੰਗਲ, ਚੇਨ ਕਰਨ ਯੋਗ ਢੰਗ ਹਨ, ਅਤੇ ਕਾਰਵਾਈ ਕੀਤੇ ਗਏ ਸੰਗ੍ਰਹਿ ਨੂੰ ਵਾਪਸ ਕਰਦੇ ਹਨ।

$('.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: $.fn.popover.Constructor. ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਖਾਸ ਪਲੱਗਇਨ ਉਦਾਹਰਣ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਸਿੱਧੇ ਇੱਕ ਤੱਤ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰੋ: $('[rel="popover"]').data('popover').

ਅਸਿੰਕ੍ਰੋਨਸ ਫੰਕਸ਼ਨ ਅਤੇ ਪਰਿਵਰਤਨ

ਸਾਰੇ ਪ੍ਰੋਗਰਾਮੇਟਿਕ API ਵਿਧੀਆਂ ਅਸਿੰਕਰੋਨਸ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਇੱਕ ਵਾਰ ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਆਉਂਦੀਆਂ ਹਨ ।

ਇੱਕ ਵਾਰ ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਤੋਂ ਬਾਅਦ ਇੱਕ ਕਾਰਵਾਈ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਸੰਬੰਧਿਤ ਘਟਨਾ ਨੂੰ ਸੁਣ ਸਕਦੇ ਹੋ।

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

ਇਸ ਤੋਂ ਇਲਾਵਾ ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸੈਟਿੰਗਾਂ

Constructor.Defaultਤੁਸੀਂ ਪਲੱਗਇਨ ਦੇ ਆਬਜੈਕਟ ਨੂੰ ਸੋਧ ਕੇ ਪਲੱਗਇਨ ਲਈ ਡਿਫੌਲਟ ਸੈਟਿੰਗਾਂ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ :

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

ਕੋਈ ਟਕਰਾਅ ਨਹੀਂ

ਕਈ ਵਾਰ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨ ਨੂੰ ਹੋਰ UI ਫਰੇਮਵਰਕ ਨਾਲ ਵਰਤਣਾ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ। ਇਹਨਾਂ ਹਾਲਤਾਂ ਵਿੱਚ, ਨੇਮਸਪੇਸ ਦੀ ਟੱਕਰ ਕਦੇ-ਕਦਾਈਂ ਹੋ ਸਕਦੀ ਹੈ। ਜੇਕਰ ਅਜਿਹਾ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ .noConflictਉਸ ਪਲੱਗਇਨ 'ਤੇ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਦਾ ਮੁੱਲ ਤੁਸੀਂ ਵਾਪਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ।

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

ਸੰਸਕਰਣ ਨੰਬਰ

ਬੂਟਸਟਰੈਪ ਦੇ ਹਰੇਕ jQuery ਪਲੱਗਇਨ ਦੇ ਸੰਸਕਰਣ ਨੂੰ VERSIONਪਲੱਗਇਨ ਦੇ ਨਿਰਮਾਤਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਐਕਸੈਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਲਈ:

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

JavaScript ਅਯੋਗ ਹੋਣ 'ਤੇ ਕੋਈ ਖਾਸ ਫਾਲਬੈਕ ਨਹੀਂ

ਬੂਟਸਟਰੈਪ ਦੇ ਪਲੱਗਇਨ ਖਾਸ ਤੌਰ 'ਤੇ ਸ਼ਾਨਦਾਰ ਢੰਗ ਨਾਲ ਵਾਪਸ ਨਹੀਂ ਆਉਂਦੇ ਹਨ ਜਦੋਂ JavaScript ਅਸਮਰੱਥ ਹੁੰਦੀ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਦੀ ਪਰਵਾਹ ਕਰਦੇ ਹੋ, <noscript>ਤਾਂ ਆਪਣੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਥਿਤੀ (ਅਤੇ JavaScript ਨੂੰ ਮੁੜ-ਸਮਰੱਥ ਕਿਵੇਂ ਕਰਨਾ ਹੈ) ਦੀ ਵਿਆਖਿਆ ਕਰਨ ਲਈ ਵਰਤੋ, ਅਤੇ/ਜਾਂ ਆਪਣੇ ਖੁਦ ਦੇ ਕਸਟਮ ਫਾਲਬੈਕ ਜੋੜੋ।

ਉਪਯੋਗ

ਸਾਰੀਆਂ ਬੂਟਸਟਰੈਪ ਦੀਆਂ JavaScript ਫਾਈਲਾਂ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀਆਂ ਹਨ util.jsਅਤੇ ਇਸਨੂੰ ਹੋਰ JavaScript ਫਾਈਲਾਂ ਦੇ ਨਾਲ ਸ਼ਾਮਲ ਕਰਨਾ ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ (ਜਾਂ ਮਿੰਨੀਫਾਈਡ) ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ bootstrap.js, ਤਾਂ ਇਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ—ਇਹ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ।

util.jsਉਪਯੋਗਤਾ ਫੰਕਸ਼ਨ ਅਤੇ transitionEndਇਵੈਂਟਾਂ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ ਸਹਾਇਕ ਦੇ ਨਾਲ ਨਾਲ ਇੱਕ CSS ਪਰਿਵਰਤਨ ਇਮੂਲੇਟਰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਇਹ ਦੂਜੇ ਪਲੱਗਇਨਾਂ ਦੁਆਰਾ CSS ਪਰਿਵਰਤਨ ਸਮਰਥਨ ਦੀ ਜਾਂਚ ਕਰਨ ਅਤੇ ਲਟਕਣ ਵਾਲੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਫੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।