JavaScript
jQuery 'ਤੇ ਬਣੇ ਸਾਡੇ ਵਿਕਲਪਿਕ JavaScript ਪਲੱਗਇਨਾਂ ਨਾਲ ਬੂਟਸਟਰੈਪ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਲਿਆਓ। ਹਰੇਕ ਪਲੱਗਇਨ, ਸਾਡੇ ਡੇਟਾ ਅਤੇ ਪ੍ਰੋਗਰਾਮੇਟਿਕ API ਵਿਕਲਪਾਂ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬਾਰੇ ਜਾਣੋ।
ਵਿਅਕਤੀਗਤ ਜਾਂ ਸੰਕਲਿਤ
ਪਲੱਗਇਨਾਂ ਨੂੰ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਬੂਟਸਟਰੈਪ ਦੇ ਵਿਅਕਤੀਗਤ ਦੀ ਵਰਤੋਂ ਕਰਕੇ js/dist/*.js
), ਜਾਂ ਸਭ ਨੂੰ ਇੱਕੋ ਵਾਰ ਵਰਤ ਕੇ bootstrap.js
ਜਾਂ ਮਿਨਿਫਾਈਡ bootstrap.min.js
(ਦੋਵੇਂ ਸ਼ਾਮਲ ਨਾ ਕਰੋ)।
ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਬੰਡਲਰ (ਵੈਬਪੈਕ, ਰੋਲਅੱਪ…) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਉਹਨਾਂ /js/dist/*.js
ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜੋ UMD ਤਿਆਰ ਹਨ।
ਨਿਰਭਰਤਾਵਾਂ
ਕੁਝ ਪਲੱਗਇਨ ਅਤੇ CSS ਭਾਗ ਦੂਜੇ ਪਲੱਗਇਨਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਪਲੱਗਇਨ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਡੌਕਸ ਵਿੱਚ ਇਹਨਾਂ ਨਿਰਭਰਤਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਇਹ ਵੀ ਨੋਟ ਕਰੋ ਕਿ ਸਾਰੇ ਪਲੱਗਇਨ jQuery 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ (ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ jQuery ਨੂੰ ਪਲੱਗਇਨ ਫਾਈਲਾਂ ਤੋਂ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ)। ਇਹ ਦੇਖਣ ਲਈ ਸਾਡੇpackage.json
ਨਾਲ ਸਲਾਹ ਕਰੋ ਕਿ jQuery ਦੇ ਕਿਹੜੇ ਸੰਸਕਰਣ ਸਮਰਥਿਤ ਹਨ।
ਸਾਡੇ ਡ੍ਰੌਪਡਾਉਨ, ਪੌਪਓਵਰ ਅਤੇ ਟੂਲਟਿਪਸ ਵੀ Popper.js 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ ।
ਡਾਟਾ ਗੁਣ
ਲਗਭਗ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਨੂੰ ਸਿਰਫ HTML ਦੁਆਰਾ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਕਾਰਜਕੁਸ਼ਲਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਾਡਾ ਤਰਜੀਹੀ ਤਰੀਕਾ) ਨਾਲ ਸਮਰੱਥ ਅਤੇ ਸੰਰਚਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇੱਕ ਸਿੰਗਲ ਐਲੀਮੈਂਟ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਸਿਰਫ਼ ਇੱਕ ਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ (ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਇੱਕੋ ਬਟਨ ਤੋਂ ਟੂਲਟਿਪ ਅਤੇ ਮਾਡਲ ਨੂੰ ਟਰਿੱਗਰ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹੋ।)
ਹਾਲਾਂਕਿ, ਕੁਝ ਸਥਿਤੀਆਂ ਵਿੱਚ ਇਸ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਅਯੋਗ ਕਰਨਾ ਫਾਇਦੇਮੰਦ ਹੋ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਐਟਰੀਬਿਊਟ API ਨੂੰ ਅਸਮਰੱਥ ਕਰਨ ਲਈ, ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਨਾਲ ਡੌਕੂਮੈਂਟ ਨੇਮਸਪੇਸ ਵਾਲੇ ਸਾਰੇ ਇਵੈਂਟਾਂ ਨੂੰ ਅਨਬਾਈਂਡ ਕਰੋ data-api
:
ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਕਿਸੇ ਖਾਸ ਪਲੱਗਇਨ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ, ਸਿਰਫ਼ ਪਲੱਗਇਨ ਦਾ ਨਾਮ ਇੱਕ ਨੇਮ-ਸਪੇਸ ਦੇ ਨਾਲ-ਨਾਲ ਡੇਟਾ-ਏਪੀਆਈ ਨੇਮਸਪੇਸ ਦੇ ਨਾਲ ਇਸ ਤਰ੍ਹਾਂ ਸ਼ਾਮਲ ਕਰੋ:
ਚੋਣਕਾਰ
ਵਰਤਮਾਨ ਵਿੱਚ DOM ਐਲੀਮੈਂਟਸ ਦੀ ਪੁੱਛਗਿੱਛ ਕਰਨ ਲਈ ਅਸੀਂ ਮੂਲ ਤਰੀਕਿਆਂ querySelector
ਅਤੇ querySelectorAll
ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਵੈਧ ਚੋਣਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ । ਜੇਕਰ ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ ਚੋਣਕਾਰ ਵਰਤਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ: collapse:Example
ਉਹਨਾਂ ਤੋਂ ਬਚਣਾ ਯਕੀਨੀ ਬਣਾਓ।
ਸਮਾਗਮ
ਬੂਟਸਟਰੈਪ ਜ਼ਿਆਦਾਤਰ ਪਲੱਗਇਨਾਂ ਦੀਆਂ ਵਿਲੱਖਣ ਕਾਰਵਾਈਆਂ ਲਈ ਕਸਟਮ ਇਵੈਂਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਇਹ ਇੱਕ ਅਨੰਤ ਅਤੇ ਪੂਰਵ ਭਾਗੀ ਰੂਪ ਵਿੱਚ ਆਉਂਦੇ ਹਨ - ਜਿੱਥੇ ਇੱਕ ਘਟਨਾ ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਅਨੰਤ (ਉਦਾਹਰਨ show
) ਨੂੰ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਸਦਾ ਪਿਛਲਾ ਭਾਗੀ ਰੂਪ (ਉਦਾਹਰਨ shown
) ਇੱਕ ਕਿਰਿਆ ਦੇ ਪੂਰਾ ਹੋਣ 'ਤੇ ਚਾਲੂ ਹੁੰਦਾ ਹੈ।
ਸਾਰੀਆਂ ਅਨੰਤ ਘਟਨਾਵਾਂ preventDefault()
ਕਾਰਜਕੁਸ਼ਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਕਿਸੇ ਕਾਰਵਾਈ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਉਸ ਨੂੰ ਲਾਗੂ ਕਰਨ ਨੂੰ ਰੋਕਣ ਦੀ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਕਿਸੇ ਇਵੈਂਟ ਹੈਂਡਲਰ ਤੋਂ ਗਲਤ ਵਾਪਸ ਆਉਣਾ ਵੀ ਆਪਣੇ ਆਪ ਕਾਲ ਕਰੇਗਾ preventDefault()
।
ਪ੍ਰੋਗਰਾਮੇਟਿਕ API
ਅਸੀਂ ਇਹ ਵੀ ਮੰਨਦੇ ਹਾਂ ਕਿ ਤੁਹਾਨੂੰ JavaScript API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਰੇ ਜਨਤਕ API ਸਿੰਗਲ, ਚੇਨ ਕਰਨ ਯੋਗ ਢੰਗ ਹਨ, ਅਤੇ ਕਾਰਵਾਈ ਕੀਤੇ ਗਏ ਸੰਗ੍ਰਹਿ ਨੂੰ ਵਾਪਸ ਕਰਦੇ ਹਨ।
ਸਾਰੀਆਂ ਵਿਧੀਆਂ ਨੂੰ ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਆਬਜੈਕਟ, ਇੱਕ ਸਤਰ ਜੋ ਕਿਸੇ ਖਾਸ ਵਿਧੀ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ, ਜਾਂ ਕੁਝ ਨਹੀਂ (ਜੋ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨਾਲ ਇੱਕ ਪਲੱਗਇਨ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ) ਨੂੰ ਸਵੀਕਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ:
ਹਰੇਕ ਪਲੱਗਇਨ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ 'ਤੇ ਇਸਦੇ ਕੱਚੇ ਕੰਸਟਰਕਟਰ ਨੂੰ ਵੀ ਪ੍ਰਗਟ ਕਰਦੀ ਹੈ Constructor
: $.fn.popover.Constructor
. ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਖਾਸ ਪਲੱਗਇਨ ਉਦਾਹਰਣ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਸਿੱਧੇ ਇੱਕ ਤੱਤ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰੋ: $('[rel="popover"]').data('popover')
.
ਅਸਿੰਕ੍ਰੋਨਸ ਫੰਕਸ਼ਨ ਅਤੇ ਪਰਿਵਰਤਨ
ਸਾਰੇ ਪ੍ਰੋਗਰਾਮੇਟਿਕ API ਵਿਧੀਆਂ ਅਸਿੰਕਰੋਨਸ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ 'ਤੇ ਵਾਪਸ ਆਉਂਦੀਆਂ ਹਨ ।
ਇੱਕ ਵਾਰ ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਤੋਂ ਬਾਅਦ ਇੱਕ ਕਾਰਵਾਈ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਸੰਬੰਧਿਤ ਘਟਨਾ ਨੂੰ ਸੁਣ ਸਕਦੇ ਹੋ।
ਇਸ ਤੋਂ ਇਲਾਵਾ ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸੈਟਿੰਗਾਂ
Constructor.Default
ਤੁਸੀਂ ਪਲੱਗਇਨ ਦੇ ਆਬਜੈਕਟ ਨੂੰ ਸੋਧ ਕੇ ਪਲੱਗਇਨ ਲਈ ਡਿਫੌਲਟ ਸੈਟਿੰਗਾਂ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ :
ਕੋਈ ਟਕਰਾਅ ਨਹੀਂ
ਕਈ ਵਾਰ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨ ਨੂੰ ਹੋਰ UI ਫਰੇਮਵਰਕ ਨਾਲ ਵਰਤਣਾ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ। ਇਹਨਾਂ ਹਾਲਤਾਂ ਵਿੱਚ, ਨੇਮਸਪੇਸ ਦੀ ਟੱਕਰ ਕਦੇ-ਕਦਾਈਂ ਹੋ ਸਕਦੀ ਹੈ। ਜੇਕਰ ਅਜਿਹਾ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ .noConflict
ਉਸ ਪਲੱਗਇਨ 'ਤੇ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਦਾ ਮੁੱਲ ਤੁਸੀਂ ਵਾਪਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ।
ਸੰਸਕਰਣ ਨੰਬਰ
ਬੂਟਸਟਰੈਪ ਦੇ ਹਰੇਕ jQuery ਪਲੱਗਇਨ ਦੇ ਸੰਸਕਰਣ ਨੂੰ VERSION
ਪਲੱਗਇਨ ਦੇ ਨਿਰਮਾਤਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਐਕਸੈਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਲਈ:
JavaScript ਅਯੋਗ ਹੋਣ 'ਤੇ ਕੋਈ ਖਾਸ ਫਾਲਬੈਕ ਨਹੀਂ
ਬੂਟਸਟਰੈਪ ਦੇ ਪਲੱਗਇਨ ਖਾਸ ਤੌਰ 'ਤੇ ਸ਼ਾਨਦਾਰ ਢੰਗ ਨਾਲ ਵਾਪਸ ਨਹੀਂ ਆਉਂਦੇ ਹਨ ਜਦੋਂ JavaScript ਅਸਮਰੱਥ ਹੁੰਦੀ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਦੀ ਪਰਵਾਹ ਕਰਦੇ ਹੋ, <noscript>
ਤਾਂ ਆਪਣੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਥਿਤੀ (ਅਤੇ JavaScript ਨੂੰ ਮੁੜ-ਸਮਰੱਥ ਕਿਵੇਂ ਕਰਨਾ ਹੈ) ਦੀ ਵਿਆਖਿਆ ਕਰਨ ਲਈ ਵਰਤੋ, ਅਤੇ/ਜਾਂ ਆਪਣੇ ਖੁਦ ਦੇ ਕਸਟਮ ਫਾਲਬੈਕ ਜੋੜੋ।
ਤੀਜੀ-ਧਿਰ ਲਾਇਬ੍ਰੇਰੀਆਂ
ਬੂਟਸਟਰੈਪ ਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ ਪ੍ਰੋਟੋਟਾਈਪ ਜਾਂ jQuery UI ਵਰਗੀਆਂ ਤੀਜੀ-ਧਿਰ ਦੀਆਂ JavaScript ਲਾਇਬ੍ਰੇਰੀਆਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਵੈਂਟਾਂ ਅਤੇ ਨੇਮਸਪੇਸ ਦੇ ਬਾਵਜੂਦ .noConflict
, ਅਨੁਕੂਲਤਾ ਸਮੱਸਿਆਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਆਪ ਠੀਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
ਉਪਯੋਗ
ਸਾਰੀਆਂ ਬੂਟਸਟਰੈਪ ਦੀਆਂ JavaScript ਫਾਈਲਾਂ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀਆਂ ਹਨ util.js
ਅਤੇ ਇਸਨੂੰ ਹੋਰ JavaScript ਫਾਈਲਾਂ ਦੇ ਨਾਲ ਸ਼ਾਮਲ ਕਰਨਾ ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ (ਜਾਂ ਮਿੰਨੀਫਾਈਡ) ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ bootstrap.js
, ਤਾਂ ਇਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ—ਇਹ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ।
util.js
ਉਪਯੋਗਤਾ ਫੰਕਸ਼ਨ ਅਤੇ transitionEnd
ਇਵੈਂਟਾਂ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ ਸਹਾਇਕ ਦੇ ਨਾਲ ਨਾਲ ਇੱਕ CSS ਪਰਿਵਰਤਨ ਇਮੂਲੇਟਰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਇਹ ਦੂਜੇ ਪਲੱਗਇਨਾਂ ਦੁਆਰਾ CSS ਪਰਿਵਰਤਨ ਸਮਰਥਨ ਦੀ ਜਾਂਚ ਕਰਨ ਅਤੇ ਲਟਕਣ ਵਾਲੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਫੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
ਸੈਨੀਟਾਈਜ਼ਰ
ਟੂਲਟਿਪਸ ਅਤੇ ਪੋਪੋਵਰ HTML ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਵਾਲੇ ਵਿਕਲਪਾਂ ਨੂੰ ਰੋਗਾਣੂ-ਮੁਕਤ ਕਰਨ ਲਈ ਸਾਡੇ ਬਿਲਟ-ਇਨ ਸੈਨੀਟਾਈਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।
ਡਿਫੌਲਟ whiteList
ਮੁੱਲ ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਹੈ:
ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਡਿਫੌਲਟ ਵਿੱਚ ਨਵੇਂ ਮੁੱਲ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਇਹ whiteList
ਕਰ ਸਕਦੇ ਹੋ:
ਜੇਕਰ ਤੁਸੀਂ ਸਾਡੇ ਸੈਨੀਟਾਈਜ਼ਰ ਨੂੰ ਬਾਈਪਾਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿਉਂਕਿ ਤੁਸੀਂ ਇੱਕ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ DOMpurify , ਤਾਂ ਤੁਹਾਨੂੰ ਇਹ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ: