JavaScript
ਇੱਕ ਦਰਜਨ ਤੋਂ ਵੱਧ ਕਸਟਮ jQuery ਪਲੱਗਇਨਾਂ ਨਾਲ ਬੂਟਸਟਰੈਪ ਦੇ ਭਾਗਾਂ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਲਿਆਓ। ਉਹਨਾਂ ਸਾਰਿਆਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਇੱਕ ਇੱਕ ਕਰਕੇ।
ਇੱਕ ਦਰਜਨ ਤੋਂ ਵੱਧ ਕਸਟਮ jQuery ਪਲੱਗਇਨਾਂ ਨਾਲ ਬੂਟਸਟਰੈਪ ਦੇ ਭਾਗਾਂ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਲਿਆਓ। ਉਹਨਾਂ ਸਾਰਿਆਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਇੱਕ ਇੱਕ ਕਰਕੇ।
ਪਲੱਗਇਨਾਂ ਨੂੰ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਬੂਟਸਟ੍ਰੈਪ ਦੀਆਂ ਵਿਅਕਤੀਗਤ *.js
ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ), ਜਾਂ ਸਾਰੀਆਂ ਇੱਕੋ ਵਾਰ (ਵਰਤਦੇ ਹੋਏ bootstrap.js
ਜਾਂ ਮਿਨਿਫਾਈਡ bootstrap.min.js
)।
ਦੋਵੇਂ bootstrap.js
ਅਤੇ bootstrap.min.js
ਇੱਕ ਸਿੰਗਲ ਫਾਈਲ ਵਿੱਚ ਸਾਰੇ ਪਲੱਗਇਨ ਸ਼ਾਮਲ ਹਨ। ਸਿਰਫ਼ ਇੱਕ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ।
ਕੁਝ ਪਲੱਗਇਨ ਅਤੇ CSS ਭਾਗ ਦੂਜੇ ਪਲੱਗਇਨਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਪਲੱਗਇਨ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਡੌਕਸ ਵਿੱਚ ਇਹਨਾਂ ਨਿਰਭਰਤਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਇਹ ਵੀ ਨੋਟ ਕਰੋ ਕਿ ਸਾਰੇ ਪਲੱਗਇਨ jQuery 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ (ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ jQuery ਨੂੰ ਪਲੱਗਇਨ ਫਾਈਲਾਂ ਤੋਂ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ)। ਇਹ ਦੇਖਣ ਲਈ ਸਾਡੇbower.json
ਨਾਲ ਸਲਾਹ ਕਰੋ ਕਿ jQuery ਦੇ ਕਿਹੜੇ ਸੰਸਕਰਣ ਸਮਰਥਿਤ ਹਨ।
ਤੁਸੀਂ JavaScript ਦੀ ਇੱਕ ਵੀ ਲਾਈਨ ਲਿਖੇ ਬਿਨਾਂ ਮਾਰਕਅੱਪ API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਬੂਟਸਟਰੈਪ ਦਾ ਫਸਟ-ਕਲਾਸ API ਹੈ ਅਤੇ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡਾ ਪਹਿਲਾ ਵਿਚਾਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
ਉਸ ਨੇ ਕਿਹਾ, ਕੁਝ ਸਥਿਤੀਆਂ ਵਿੱਚ ਇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਬੰਦ ਕਰਨਾ ਫਾਇਦੇਮੰਦ ਹੋ ਸਕਦਾ ਹੈ। ਇਸਲਈ, ਅਸੀਂ ਦਸਤਾਵੇਜ਼ ਦੇ ਨਾਮ-ਸਪੇਸ 'ਤੇ ਸਾਰੇ ਇਵੈਂਟਾਂ ਨੂੰ ਅਨਬਾਈਂਡ ਕਰਕੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ API ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਦੀ ਯੋਗਤਾ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ data-api
। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਕਿਸੇ ਖਾਸ ਪਲੱਗਇਨ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ, ਸਿਰਫ਼ ਪਲੱਗਇਨ ਦਾ ਨਾਮ ਇੱਕ ਨੇਮ-ਸਪੇਸ ਦੇ ਨਾਲ-ਨਾਲ ਡੇਟਾ-ਏਪੀਆਈ ਨੇਮਸਪੇਸ ਦੇ ਨਾਲ ਇਸ ਤਰ੍ਹਾਂ ਸ਼ਾਮਲ ਕਰੋ:
ਇੱਕੋ ਤੱਤ 'ਤੇ ਮਲਟੀਪਲ ਪਲੱਗਇਨਾਂ ਤੋਂ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਬਟਨ ਵਿੱਚ ਟੂਲਟਿਪ ਅਤੇ ਮਾਡਲ ਟੌਗਲ ਦੋਵੇਂ ਨਹੀਂ ਹੋ ਸਕਦੇ ਹਨ। ਇਸ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ, ਇੱਕ ਲਪੇਟਣ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ.
ਅਸੀਂ ਇਹ ਵੀ ਮੰਨਦੇ ਹਾਂ ਕਿ ਤੁਹਾਨੂੰ JavaScript API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਰੇ ਜਨਤਕ API ਸਿੰਗਲ, ਚੇਨ ਕਰਨ ਯੋਗ ਢੰਗ ਹਨ, ਅਤੇ ਕਾਰਵਾਈ ਕੀਤੇ ਗਏ ਸੰਗ੍ਰਹਿ ਨੂੰ ਵਾਪਸ ਕਰਦੇ ਹਨ।
ਸਾਰੀਆਂ ਵਿਧੀਆਂ ਨੂੰ ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਆਬਜੈਕਟ, ਇੱਕ ਸਤਰ ਜੋ ਕਿਸੇ ਖਾਸ ਵਿਧੀ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ, ਜਾਂ ਕੁਝ ਨਹੀਂ (ਜੋ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨਾਲ ਇੱਕ ਪਲੱਗਇਨ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ) ਨੂੰ ਸਵੀਕਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ:
ਹਰੇਕ ਪਲੱਗਇਨ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ 'ਤੇ ਇਸਦੇ ਕੱਚੇ ਕੰਸਟਰਕਟਰ ਨੂੰ ਵੀ ਪ੍ਰਗਟ ਕਰਦੀ ਹੈ Constructor
: $.fn.popover.Constructor
. ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਖਾਸ ਪਲੱਗਇਨ ਉਦਾਹਰਣ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਸਿੱਧੇ ਇੱਕ ਤੱਤ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰੋ: $('[rel="popover"]').data('popover')
.
Constructor.DEFAULTS
ਤੁਸੀਂ ਪਲੱਗਇਨ ਦੇ ਆਬਜੈਕਟ ਨੂੰ ਸੋਧ ਕੇ ਪਲੱਗਇਨ ਲਈ ਡਿਫੌਲਟ ਸੈਟਿੰਗਾਂ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ :
ਕਈ ਵਾਰ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨ ਨੂੰ ਹੋਰ UI ਫਰੇਮਵਰਕ ਨਾਲ ਵਰਤਣਾ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ। ਇਹਨਾਂ ਹਾਲਤਾਂ ਵਿੱਚ, ਨੇਮਸਪੇਸ ਦੀ ਟੱਕਰ ਕਦੇ-ਕਦਾਈਂ ਹੋ ਸਕਦੀ ਹੈ। ਜੇਕਰ ਅਜਿਹਾ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ .noConflict
ਉਸ ਪਲੱਗਇਨ 'ਤੇ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਦਾ ਮੁੱਲ ਤੁਸੀਂ ਵਾਪਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ।
ਬੂਟਸਟਰੈਪ ਜ਼ਿਆਦਾਤਰ ਪਲੱਗਇਨਾਂ ਦੀਆਂ ਵਿਲੱਖਣ ਕਾਰਵਾਈਆਂ ਲਈ ਕਸਟਮ ਇਵੈਂਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਇਹ ਇੱਕ ਅਨੰਤ ਅਤੇ ਪੂਰਵ ਭਾਗੀ ਰੂਪ ਵਿੱਚ ਆਉਂਦੇ ਹਨ - ਜਿੱਥੇ ਇੱਕ ਘਟਨਾ ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਅਨੰਤ (ਉਦਾਹਰਨ show
) ਨੂੰ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਸਦਾ ਪਿਛਲਾ ਭਾਗੀ ਰੂਪ (ਉਦਾਹਰਨ shown
) ਇੱਕ ਕਿਰਿਆ ਦੇ ਪੂਰਾ ਹੋਣ 'ਤੇ ਚਾਲੂ ਹੁੰਦਾ ਹੈ।
3.0.0 ਤੱਕ, ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਇਵੈਂਟਸ ਨੇਮਸਪੇਸ ਵਿੱਚ ਹਨ।
ਸਾਰੀਆਂ ਅਨੰਤ ਘਟਨਾਵਾਂ preventDefault
ਕਾਰਜਕੁਸ਼ਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਕਿਸੇ ਕਾਰਵਾਈ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਉਸ ਨੂੰ ਲਾਗੂ ਕਰਨ ਨੂੰ ਰੋਕਣ ਦੀ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਬੂਟਸਟਰੈਪ ਦੇ ਹਰੇਕ jQuery ਪਲੱਗਇਨ ਦੇ ਸੰਸਕਰਣ ਨੂੰ VERSION
ਪਲੱਗਇਨ ਦੇ ਨਿਰਮਾਤਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਐਕਸੈਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਲਈ:
ਬੂਟਸਟਰੈਪ ਦੇ ਪਲੱਗਇਨ ਖਾਸ ਤੌਰ 'ਤੇ ਸ਼ਾਨਦਾਰ ਢੰਗ ਨਾਲ ਵਾਪਸ ਨਹੀਂ ਆਉਂਦੇ ਹਨ ਜਦੋਂ JavaScript ਅਸਮਰੱਥ ਹੁੰਦੀ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਦੀ ਪਰਵਾਹ ਕਰਦੇ ਹੋ, <noscript>
ਤਾਂ ਆਪਣੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਥਿਤੀ (ਅਤੇ JavaScript ਨੂੰ ਮੁੜ-ਸਮਰੱਥ ਕਿਵੇਂ ਕਰਨਾ ਹੈ) ਦੀ ਵਿਆਖਿਆ ਕਰਨ ਲਈ ਵਰਤੋ, ਅਤੇ/ਜਾਂ ਆਪਣੇ ਖੁਦ ਦੇ ਕਸਟਮ ਫਾਲਬੈਕ ਜੋੜੋ।
ਬੂਟਸਟਰੈਪ ਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ ਪ੍ਰੋਟੋਟਾਈਪ ਜਾਂ jQuery UI ਵਰਗੀਆਂ ਤੀਜੀ-ਧਿਰ ਦੀਆਂ JavaScript ਲਾਇਬ੍ਰੇਰੀਆਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਵੈਂਟਾਂ ਅਤੇ ਨੇਮਸਪੇਸ ਦੇ ਬਾਵਜੂਦ .noConflict
, ਅਨੁਕੂਲਤਾ ਸਮੱਸਿਆਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਆਪ ਠੀਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
ਸਧਾਰਨ ਪਰਿਵਰਤਨ ਪ੍ਰਭਾਵਾਂ ਲਈ, transition.js
ਦੂਜੀਆਂ JS ਫਾਈਲਾਂ ਦੇ ਨਾਲ ਇੱਕ ਵਾਰ ਸ਼ਾਮਲ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ (ਜਾਂ ਮਿੰਨੀਫਾਈਡ) ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ bootstrap.js
, ਤਾਂ ਇਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ—ਇਹ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ।
Transition.js ਇਵੈਂਟਾਂ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ ਸਹਾਇਕ ਹੈ transitionEnd
ਅਤੇ ਨਾਲ ਹੀ ਇੱਕ CSS ਪਰਿਵਰਤਨ ਇਮੂਲੇਟਰ ਹੈ। ਇਹ ਦੂਜੇ ਪਲੱਗਇਨਾਂ ਦੁਆਰਾ CSS ਪਰਿਵਰਤਨ ਸਮਰਥਨ ਦੀ ਜਾਂਚ ਕਰਨ ਅਤੇ ਲਟਕਣ ਵਾਲੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਫੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
ਹੇਠਾਂ ਦਿੱਤੇ JavaScript ਸਨਿੱਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਰਿਵਰਤਨ ਗਲੋਬਲ ਤੌਰ 'ਤੇ ਅਸਮਰੱਥ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ, ਜੋ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ transition.js
(ਜਾਂ bootstrap.js
, bootstrap.min.js
ਜਿਵੇਂ ਕਿ ਕੇਸ ਹੋ ਸਕਦਾ ਹੈ) ਆਉਣਾ ਚਾਹੀਦਾ ਹੈ:
ਮਾਡਲ ਸੁਚਾਰੂ, ਪਰ ਲਚਕਦਾਰ, ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਅਤੇ ਸਮਾਰਟ ਡਿਫੌਲਟ ਦੇ ਨਾਲ ਡਾਇਲਾਗ ਪ੍ਰੋਂਪਟ ਹਨ।
ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਇੱਕ ਮਾਡਲ ਨੂੰ ਨਾ ਖੋਲ੍ਹੋ ਜਦੋਂ ਕਿ ਕੋਈ ਹੋਰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਇੱਕ ਤੋਂ ਵੱਧ ਮਾਡਲ ਦਿਖਾਉਣ ਲਈ ਕਸਟਮ ਕੋਡ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਮਾਡਲ ਦੀ ਦਿੱਖ ਅਤੇ/ਜਾਂ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਨ ਵਾਲੇ ਹੋਰ ਭਾਗਾਂ ਤੋਂ ਬਚਣ ਲਈ ਹਮੇਸ਼ਾਂ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇੱਕ ਮਾਡਲ ਦੇ HTML ਕੋਡ ਨੂੰ ਉੱਚ-ਪੱਧਰੀ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
ਮੋਬਾਈਲ ਉਪਕਰਣਾਂ 'ਤੇ ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਸੰਬੰਧ ਵਿੱਚ ਕੁਝ ਚੇਤਾਵਨੀਆਂ ਹਨ। ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ ।
HTML5 ਆਪਣੇ ਅਰਥ ਵਿਗਿਆਨ ਨੂੰ ਕਿਵੇਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, autofocus
HTML ਗੁਣ ਦਾ ਬੂਟਸਟਰੈਪ ਮਾਡਲਾਂ ਵਿੱਚ ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਉਸੇ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਕੁਝ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ:
ਫੁੱਟਰ ਵਿੱਚ ਸਿਰਲੇਖ, ਬਾਡੀ, ਅਤੇ ਕਾਰਵਾਈਆਂ ਦੇ ਸੈੱਟ ਦੇ ਨਾਲ ਇੱਕ ਰੈਂਡਰ ਕੀਤਾ ਮਾਡਲ।
ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ JavaScript ਰਾਹੀਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਟੌਗਲ ਕਰੋ। ਇਹ ਪੰਨੇ ਦੇ ਸਿਖਰ ਤੋਂ ਹੇਠਾਂ ਸਲਾਈਡ ਅਤੇ ਫਿੱਕਾ ਹੋ ਜਾਵੇਗਾ।
ਮਾਡਲ ਸਿਰਲੇਖ ਦਾ ਹਵਾਲਾ ਦਿੰਦੇ ਹੋਏ, ਨੂੰ ਅਤੇ ਆਪਣੇ role="dialog"
ਆਪ ਨੂੰ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ ।aria-labelledby="..."
.modal
role="document"
.modal-dialog
aria-describedby
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ on ਨਾਲ ਆਪਣੇ ਮਾਡਲ ਡਾਇਲਾਗ ਦਾ ਵੇਰਵਾ ਦੇ ਸਕਦੇ ਹੋ .modal
।
ਮੋਡਲਾਂ ਵਿੱਚ YouTube ਵਿਡੀਓਜ਼ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਲਈ ਵਾਧੂ JavaScript ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਨਾ ਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪਲੇਬੈਕ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬੰਦ ਕਰਨ ਲਈ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਇਹ ਮਦਦਗਾਰ ਸਟੈਕ ਓਵਰਫਲੋ ਪੋਸਟ ਦੇਖੋ ।
ਮਾਡਲਾਂ ਦੇ ਦੋ ਵਿਕਲਪਿਕ ਆਕਾਰ ਹੁੰਦੇ ਹਨ, ਜੋ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਰਾਹੀਂ ਉਪਲਬਧ ਹੁੰਦੇ ਹਨ ਜੋ ਕਿ ਇੱਕ 'ਤੇ ਰੱਖੇ ਜਾਣ ਲਈ ਹਨ .modal-dialog
।
ਉਹਨਾਂ ਮਾਡਲਾਂ ਲਈ ਜੋ ਦੇਖਣ ਲਈ ਫਿੱਕੇ ਹੋਣ ਦੀ ਬਜਾਏ ਸਿਰਫ਼ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ, .fade
ਆਪਣੇ ਮਾਡਲ ਮਾਰਕਅੱਪ ਤੋਂ ਕਲਾਸ ਨੂੰ ਹਟਾਓ।
ਇੱਕ ਮਾਡਲ ਦੇ ਅੰਦਰ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਦਾ ਫਾਇਦਾ ਉਠਾਉਣ ਲਈ, ਸਿਰਫ਼ Nest .row
s ਦੇ ਅੰਦਰ .modal-body
ਅਤੇ ਫਿਰ ਆਮ ਗਰਿੱਡ ਸਿਸਟਮ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕੀ ਤੁਹਾਡੇ ਕੋਲ ਬਟਨਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਹੈ ਜੋ ਸਾਰੇ ਇੱਕੋ ਮਾਡਲ ਨੂੰ ਟਰਿੱਗਰ ਕਰਦੇ ਹਨ, ਸਿਰਫ ਥੋੜੀ ਵੱਖਰੀ ਸਮੱਗਰੀ ਦੇ ਨਾਲ? ਮਾਡਲ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਵੱਖ-ਵੱਖ ਕਰਨ ਲਈ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਸੰਭਵ ਤੌਰ ' ਤੇ jQuery ਰਾਹੀਂ ) ਦੀ ਵਰਤੋਂ ਕਰੋ event.relatedTarget
ਅਤੇ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜਾ ਬਟਨ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਸੀ। 'ਤੇ ਵੇਰਵਿਆਂ ਲਈ ਮਾਡਲ ਇਵੈਂਟਸ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ ,data-*
relatedTarget
ਮਾਡਲ ਪਲੱਗਇਨ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ, ਮੰਗ 'ਤੇ ਤੁਹਾਡੀ ਲੁਕੀ ਹੋਈ ਸਮੱਗਰੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਇਹ ਡਿਫੌਲਟ ਸਕ੍ਰੋਲਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ .modal-open
ਲਈ ਵੀ ਜੋੜਦਾ ਹੈ ਅਤੇ ਮਾਡਲ ਤੋਂ ਬਾਹਰ ਕਲਿੱਕ ਕਰਨ ਵੇਲੇ ਦਿਖਾਏ ਗਏ ਮਾਡਲਾਂ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਇੱਕ ਕਲਿੱਕ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਇੱਕ ਬਣਾਉਂਦਾ ਹੈ।<body>
.modal-backdrop
JavaScript ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਸਰਗਰਮ ਕਰੋ। data-toggle="modal"
ਇੱਕ ਕੰਟਰੋਲਰ ਤੱਤ 'ਤੇ ਸੈੱਟ ਕਰੋ , ਜਿਵੇਂ ਕਿ ਇੱਕ ਬਟਨ, ਇੱਕ ਦੇ ਨਾਲ data-target="#foo"
ਜਾਂ href="#foo"
ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਖਾਸ ਮਾਡਲ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ।
myModal
JavaScript ਦੀ ਇੱਕ ਲਾਈਨ ਨਾਲ id ਦੇ ਨਾਲ ਇੱਕ ਮਾਡਲ ਨੂੰ ਕਾਲ ਕਰੋ :
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-backdrop=""
।
ਨਾਮ | ਕਿਸਮ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਪਿਛੋਕੜ | ਬੂਲੀਅਨ ਜਾਂ ਸਤਰ'static' |
ਸੱਚ ਹੈ | ਇੱਕ ਮਾਡਲ-ਬੈਕਡ੍ਰੌਪ ਤੱਤ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ, static ਇੱਕ ਬੈਕਡ੍ਰੌਪ ਲਈ ਨਿਸ਼ਚਿਤ ਕਰੋ ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਨਹੀਂ ਕਰਦਾ ਹੈ। |
ਕੀਬੋਰਡ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਐਸਕੇਪ ਕੁੰਜੀ ਦਬਾਉਣ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ |
ਦਿਖਾਓ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਸ਼ੁਰੂਆਤੀ ਹੋਣ 'ਤੇ ਮਾਡਲ ਦਿਖਾਉਂਦਾ ਹੈ। |
ਰਿਮੋਟ | ਮਾਰਗ | ਝੂਠਾ | ਇਹ ਵਿਕਲਪ v3.3.0 ਤੋਂ ਬਰਤਰਫ਼ ਹੈ ਅਤੇ v4 ਵਿੱਚ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ। ਅਸੀਂ ਇਸ ਦੀ ਬਜਾਏ ਕਲਾਇੰਟ-ਸਾਈਡ ਟੈਂਪਲੇਟਿੰਗ ਜਾਂ ਡੇਟਾ ਬਾਈਡਿੰਗ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਨ, ਜਾਂ ਆਪਣੇ ਆਪ ਨੂੰ jQuery.load ਕਾਲ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ। ਜੇਕਰ ਇੱਕ ਰਿਮੋਟ URL ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਮੱਗਰੀ ਨੂੰ jQuery ਦੀ ਵਿਧੀ ਰਾਹੀਂ ਇੱਕ ਵਾਰ ਲੋਡ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ div ਵਿੱਚ ਇੰਜੈਕਟ ਕੀਤਾ ਜਾਵੇਗਾ। ਜੇਕਰ ਤੁਸੀਂ ਡੇਟਾ-ਏਪੀਆਈ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਰਿਮੋਟ ਸਰੋਤ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਸਦਾ ਇੱਕ ਉਦਾਹਰਣ ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ: |
.modal(options)
ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਮਾਡਲ ਵਜੋਂ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object
।
.modal('toggle')
ਇੱਕ ਮਾਡਲ ਨੂੰ ਹੱਥੀਂ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਮਾਡਲ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ shown.bs.modal
ਜਾਂ hidden.bs.modal
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
.modal('show')
ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਖੋਲ੍ਹਦਾ ਹੈ। ਮਾਡਲ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.modal
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
.modal('hide')
ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਲੁਕਾਉਂਦਾ ਹੈ। ਮਾਡਲ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.modal
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
.modal('handleUpdate')
ਇੱਕ ਸਕ੍ਰੌਲਬਾਰ ਦਾ ਮੁਕਾਬਲਾ ਕਰਨ ਲਈ ਮਾਡਲ ਦੀ ਸਥਿਤੀ ਨੂੰ ਮੁੜ-ਵਿਵਸਥਿਤ ਕਰਦਾ ਹੈ ਜੇਕਰ ਕੋਈ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ, ਜੋ ਕਿ ਮਾਡਲ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਜੰਪ ਕਰੇਗਾ।
ਸਿਰਫ ਉਦੋਂ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਮੋਡਲ ਦੀ ਉਚਾਈ ਬਦਲ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਇਹ ਖੁੱਲ੍ਹਾ ਹੁੰਦਾ ਹੈ।
ਬੂਟਸਟਰੈਪ ਦੀ ਮਾਡਲ ਕਲਾਸ ਮਾਡਲ ਫੰਕਸ਼ਨੈਲਿਟੀ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।
ਸਾਰੀਆਂ ਮਾਡਲ ਇਵੈਂਟਾਂ ਨੂੰ ਮਾਡਲ 'ਤੇ ਹੀ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਭਾਵ 'ਤੇ <div class="modal">
)।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.modal | ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ show ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਇੱਕ ਕਲਿੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਤੱਤ relatedTarget ਘਟਨਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਜੋਂ ਉਪਲਬਧ ਹੁੰਦਾ ਹੈ। |
ਦਿਖਾਇਆ ਗਿਆ.bs.modal | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਨੂੰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। ਜੇਕਰ ਇੱਕ ਕਲਿੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਤੱਤ relatedTarget ਘਟਨਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਜੋਂ ਉਪਲਬਧ ਹੁੰਦਾ ਹੈ। |
hide.bs.modal | ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hide ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
hidden.bs.modal | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਾਉਣਾ ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
loaded.bs.modal | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ remote ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਮੱਗਰੀ ਲੋਡ ਕਰਦਾ ਹੈ। |
ਇਸ ਸਧਾਰਨ ਪਲੱਗਇਨ ਨਾਲ ਲਗਭਗ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਸ਼ਾਮਲ ਕਰੋ, ਜਿਸ ਵਿੱਚ ਨਵਬਾਰ, ਟੈਬਾਂ ਅਤੇ ਗੋਲੀਆਂ ਸ਼ਾਮਲ ਹਨ।
ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਰਾਹੀਂ, ਡ੍ਰੌਪਡਾਉਨ ਪਲੱਗਇਨ .open
ਮਾਤਾ-ਪਿਤਾ ਸੂਚੀ ਆਈਟਮ 'ਤੇ ਕਲਾਸ ਨੂੰ ਟੌਗਲ ਕਰਕੇ ਲੁਕੀ ਹੋਈ ਸਮੱਗਰੀ (ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ) ਨੂੰ ਟੌਗਲ ਕਰਦੀ ਹੈ।
ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ, ਡ੍ਰੌਪਡਾਉਨ ਖੋਲ੍ਹਣ ਨਾਲ .dropdown-backdrop
ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਇੱਕ ਟੈਪ ਖੇਤਰ ਵਜੋਂ ਜੋੜਦਾ ਹੈ ਜਦੋਂ ਮੀਨੂ ਤੋਂ ਬਾਹਰ ਟੈਪ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਸਹੀ iOS ਸਹਾਇਤਾ ਲਈ ਇੱਕ ਲੋੜ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇੱਕ ਖੁੱਲੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਤੋਂ ਇੱਕ ਵੱਖਰੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿੱਚ ਬਦਲਣ ਲਈ ਮੋਬਾਈਲ 'ਤੇ ਇੱਕ ਵਾਧੂ ਟੈਪ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਨੋਟ: data-toggle="dropdown"
ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਪੱਧਰ 'ਤੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਇਸਲਈ ਇਸਨੂੰ ਹਮੇਸ਼ਾ ਵਰਤਣਾ ਇੱਕ ਚੰਗਾ ਵਿਚਾਰ ਹੈ।
data-toggle="dropdown"
ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਲਿੰਕ ਜਾਂ ਬਟਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।
ਲਿੰਕ ਬਟਨਾਂ ਨਾਲ URL ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਣ ਲਈ, ਦੀ data-target
ਬਜਾਏ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰੋ href="#"
।
JavaScript ਦੁਆਰਾ ਡਰਾਪਡਾਊਨ ਨੂੰ ਕਾਲ ਕਰੋ:
data-toggle="dropdown"
ਅਜੇ ਵੀ ਲੋੜ ਹੈਭਾਵੇਂ ਤੁਸੀਂ JavaScript ਰਾਹੀਂ ਆਪਣੇ ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ ਜਾਂ ਇਸ ਦੀ ਬਜਾਏ ਡੇਟਾ-ਏਪੀਆਈ ਦੀ ਵਰਤੋਂ ਕਰਦੇ data-toggle="dropdown"
ਹੋ, ਡ੍ਰੌਪਡਾਉਨ ਦੇ ਟਰਿੱਗਰ ਤੱਤ 'ਤੇ ਮੌਜੂਦ ਹੋਣਾ ਜ਼ਰੂਰੀ ਹੈ।
ਕੋਈ ਨਹੀਂ
$().dropdown('toggle')
ਦਿੱਤੇ ਗਏ ਨੇਵੀਬਾਰ ਜਾਂ ਟੈਬਡ ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।
ਸਾਰੇ ਡ੍ਰੌਪਡਾਉਨ ਇਵੈਂਟਸ .dropdown-menu
ਦੇ ਮੂਲ ਤੱਤ 'ਤੇ ਫਾਇਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
ਸਾਰੇ ਡ੍ਰੌਪਡਾਉਨ ਇਵੈਂਟਸ ਦੀ ਇੱਕ relatedTarget
ਵਿਸ਼ੇਸ਼ਤਾ ਹੁੰਦੀ ਹੈ, ਜਿਸਦਾ ਮੁੱਲ ਟੌਗਲ ਕਰਨ ਵਾਲਾ ਐਂਕਰ ਤੱਤ ਹੁੰਦਾ ਹੈ।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.dropdown | ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਸ਼ੋਅ ਇੰਸਟੈਂਸ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
ਦਿਖਾਇਆ ਗਿਆ.bs.ਡ੍ਰੌਪਡਾਊਨ | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਡ੍ਰੌਪਡਾਉਨ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ (ਪੂਰਾ ਹੋਣ ਲਈ CSS ਪਰਿਵਰਤਨ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
hide.bs.dropdown | ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਓਹਲੇ ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
hidden.bs.dropdown | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਡ੍ਰੌਪਡਾਉਨ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਿਆ ਹੋਇਆ ਹੁੰਦਾ ਹੈ (ਪੂਰਾ ਹੋਣ ਲਈ CSS ਪਰਿਵਰਤਨ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
ScrollSpy ਪਲੱਗਇਨ ਸਕ੍ਰੋਲ ਸਥਿਤੀ ਦੇ ਆਧਾਰ 'ਤੇ ਨੈਵੀ ਟੀਚਿਆਂ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਹੈ। ਨਵਬਾਰ ਦੇ ਹੇਠਾਂ ਖੇਤਰ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਸਰਗਰਮ ਕਲਾਸ ਤਬਦੀਲੀ ਦੇਖੋ। ਡ੍ਰੌਪਡਾਉਨ ਸਬ ਆਈਟਮਾਂ ਨੂੰ ਵੀ ਉਜਾਗਰ ਕੀਤਾ ਜਾਵੇਗਾ।
ਐਡ ਲੈਗਿੰਗਸ ਕੀਟਾਰ, ਬ੍ਰੰਚ ਆਈਡੀ ਆਰਟ ਪਾਰਟੀ ਡੋਰ ਲੇਬਰ। Pitchfork yr enim lo-fi ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਉਹ qui ਵਿਕ ਗਏ। ਟਮਬਲਰ ਫਾਰਮ-ਟੂ-ਟੇਬਲ ਸਾਈਕਲ ਅਧਿਕਾਰ ਜੋ ਵੀ ਹੋਵੇ। ਐਨੀਮ ਕੇਫੀਯੇਹ ਕਾਰਲੇਸ ਕਾਰਡਿਗਨ. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui ਸ਼ਾਇਦ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ ਅਤੇ ਕਾਰਡਿਗਨ ਟਰੱਸਟ ਫੰਡ ਕਲਪਾ ਬਾਇਓਡੀਜ਼ਲ ਵੇਸ ਐਂਡਰਸਨ ਸੁਹਜ। ਨਿਹਿਲ ਟੈਟੂਡ ਐਕਿਊਸੈਮਸ, ਕ੍ਰੈਡ ਆਇਰਨ ਬਾਇਓਡੀਜ਼ਲ ਕੇਫੀਯੇਹ ਕਾਰੀਗਰ ਉਲਮਕੋ ਨਤੀਜਾ.
ਵੇਨੀਅਮ ਮਾਰਫਾ ਮੁੱਛਾਂ ਵਾਲਾ ਸਕੇਟਬੋਰਡ, ਐਡੀਪਿਸਿੰਗ ਫੂਗੀਆਟ ਵੇਲੀਟ ਪਿੱਚਫੋਰਕ ਦਾੜ੍ਹੀ। ਫ੍ਰੀਗਨ ਦਾੜ੍ਹੀ ਅਲੀਕਾ ਕਪਿਡਾਟੈਟ ਮੈਕਸਵੀਨੀ ਦਾ ਵੇਰੋ। ਕਪਿਡਾਟੈਟ ਚਾਰ ਲੋਕੋ ਨੀਸੀ, ਈ ਏ ਹੇਲਵੇਟਿਕਾ ਨੱਲਾ ਕਾਰਲਸ. ਟੈਟੂ ਕੀਤਾ cosby sweater ਭੋਜਨ ਟਰੱਕ, mcsweeney's quis non freegan vinyl. ਲੋ-ਫਾਈ ਵੇਸ ਐਂਡਰਸਨ +1 ਸਰਟੋਰੀਅਲ। ਕਾਰਲੇਸ ਗੈਰ ਸੁਹਜਾਤਮਕ ਅਭਿਆਸ quis gentrify. ਬਰੁਕਲਿਨ ਐਡੀਪਿਸਿਸਿੰਗ ਕਰਾਫਟ ਬੀਅਰ ਵਾਈਸ ਕੀਟਾਰ ਡਿਜ਼ਰੰਟ।
Occaecat commodo aliqua delectus. ਫੈਪ ਕਰਾਫਟ ਬੀਅਰ ਡੇਜ਼ਰੰਟ ਸਕੇਟਬੋਰਡ ਈ.ਏ. ਲੋਮੋ ਸਾਈਕਲ ਰਾਈਟਸ ਐਡੀਪਿਸਿਸਿੰਗ ਬੈਨ ਮੀ, ਵੇਲੀਟ ਈਏ ਸਨਟ ਨੈਕਸਟ ਲੈਵਲ ਲੋਕਾਵੋਰ ਸਿੰਗਲ-ਓਰਿਜਨ ਕੌਫੀ ਇਨ ਮੈਗਨਾ ਵੇਨੀਅਮ। ਹਾਈ ਲਾਈਫ ਆਈਡੀ ਵਿਨਾਇਲ, ਈਕੋ ਪਾਰਕ ਕਨਸੈਕਟ ਕੁਇਸ ਅਲੀਕਿਪ ਬੈਨ ਮੀ ਪਿਚਫੋਰਕ। Vero VHS est adipising. DIY ਘੱਟੋ-ਘੱਟ ਮੈਸੇਂਜਰ ਬੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਵਿੱਚ ਕ੍ਰੈਡਿਟ ਸਾਬਕਾ, ਸਸਟੇਨੇਬਲ ਡਿਲੈਕਟਸ ਕੰਸੈਕਟੁਰ ਫੈਨੀ ਪੈਕ ਆਈਫੋਨ.
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.
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.
ਕੀਟਾਰ ਟਵੀ ਬਲੌਗ, ਕਲਪਾ ਮੈਸੇਂਜਰ ਬੈਗ ਮਾਰਫਾ ਜੋ ਵੀ ਡੀਲੈਕਟਸ ਫੂਡ ਟਰੱਕ। Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats ਸ਼ਾਇਦ ਤੁਸੀਂ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ ਜਿਸਦਾ ਨਤੀਜਾ ਹੂਡੀ ਗਲੁਟਨ-ਮੁਕਤ lo-fi fap aliquip ਹੈ। ਲੇਬਰ ਇਲੀਟ ਪਲੇਸੈਟ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਉਹ ਵਿਕ ਗਏ, ਟੈਰੀ ਰਿਚਰਡਸਨ ਪ੍ਰੋਡੈਂਟ ਬ੍ਰੰਚ ਨੇਸਸੀਅੰਟ ਕਵਿਸ ਕੋਸਬੀ ਸਵੈਟਰ ਪੈਰੀਟੁਰ ਕੇਫੀਏਹ ਯੂਟ ਹੈਲਵੇਟਿਕਾ ਆਰਟੀਸਨ। ਕਾਰਡਿਗਨ ਕਰਾਫਟ ਬੀਅਰ ਸੀਟਨ ਰੈਡੀਮੇਡ ਵੇਲੀਟ। VHS ਚੈਂਬਰੇ ਲੇਬਰਿਸ ਟੈਂਪਰ ਵੇਨੀਅਮ। ਐਨੀਮ ਮੋਲਟ ਮਿਨੀਮ ਕਮੋਡੋ ਉਲਮਕੋ ਗਰਜ.
ਨਵਬਾਰ ਲਿੰਕਾਂ ਵਿੱਚ ਹੱਲ ਕਰਨ ਯੋਗ id ਟੀਚੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ <a href="#home">home</a>
DOM ਵਿੱਚ ਕਿਸੇ ਚੀਜ਼ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜਿਵੇਂ ਕਿ <div id="home"></div>
.
:visible
ਨਿਸ਼ਾਨਾ ਤੱਤਾਂ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਗਿਆਟਾਰਗੇਟ ਐਲੀਮੈਂਟਸ ਜੋ :visible
jQuery ਦੇ ਅਨੁਸਾਰ ਨਹੀਂ ਹਨ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰੀ ਨੇਵੀ ਆਈਟਮਾਂ ਨੂੰ ਕਦੇ ਵੀ ਉਜਾਗਰ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।
ਕੋਈ ਗੱਲ ਲਾਗੂ ਕਰਨ ਦੇ ਢੰਗ, scrollspy position: relative;
ਤੁਹਾਨੂੰ 'ਤੇ ਜਾਸੂਸੀ ਕਰ ਰਹੇ ਹੋ ਤੱਤ 'ਤੇ ਵਰਤਣ ਦੀ ਲੋੜ ਹੈ. ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ ਇਹ ਹੈ <body>
. ਤੋਂ ਇਲਾਵਾ ਹੋਰ ਤੱਤਾਂ 'ਤੇ ਸਕ੍ਰੌਲਸਪਾਈ ਕਰਦੇ ਸਮੇਂ , ਇੱਕ ਸੈੱਟ ਅਤੇ ਲਾਗੂ <body>
ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।height
overflow-y: scroll;
ਆਪਣੀ ਟੌਪਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਸਕ੍ਰੌਲਸਪੀ ਵਿਵਹਾਰ ਨੂੰ ਸ਼ਾਮਲ data-spy="scroll"
ਕਰਨ ਲਈ, ਉਸ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਜਿਸਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ (ਆਮ ਤੌਰ 'ਤੇ ਇਹ ਹੋਵੇਗਾ <body>
)। ਫਿਰ ਕਿਸੇ ਵੀ ਬੂਟਸਟਰੈਪ ਕੰਪੋਨੈਂਟ data-target
ਦੇ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ ਦੀ ID ਜਾਂ ਕਲਾਸ ਨਾਲ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜੋ।.nav
ਆਪਣੇ CSS ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਬਾਅਦ position: relative;
, JavaScript ਦੁਆਰਾ scrollspy ਨੂੰ ਕਾਲ ਕਰੋ:
.scrollspy('refresh')
DOM ਤੋਂ ਤੱਤਾਂ ਨੂੰ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਦੇ ਨਾਲ scrollspy ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਤੁਹਾਨੂੰ ਰਿਫਰੈਸ਼ ਵਿਧੀ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਕਾਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ:
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-offset=""
।
ਨਾਮ | ਕਿਸਮ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਆਫਸੈੱਟ | ਗਿਣਤੀ | 10 | ਸਕਰੋਲ ਦੀ ਸਥਿਤੀ ਦੀ ਗਣਨਾ ਕਰਦੇ ਸਮੇਂ ਸਿਖਰ ਤੋਂ ਔਫਸੈੱਟ ਕਰਨ ਲਈ ਪਿਕਸਲ। |
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
activate.bs.scrollspy | ਜਦੋਂ ਵੀ ਕੋਈ ਨਵੀਂ ਆਈਟਮ ਸਕ੍ਰੌਲਸਪੀ ਦੁਆਰਾ ਕਿਰਿਆਸ਼ੀਲ ਹੋ ਜਾਂਦੀ ਹੈ ਤਾਂ ਇਹ ਇਵੈਂਟ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ। |
ਸਥਾਨਕ ਸਮਗਰੀ ਦੇ ਪੈਨਾਂ ਰਾਹੀਂ ਤਬਦੀਲੀ ਕਰਨ ਲਈ ਤੇਜ਼, ਗਤੀਸ਼ੀਲ ਟੈਬ ਕਾਰਜਕੁਸ਼ਲਤਾ ਸ਼ਾਮਲ ਕਰੋ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਰਾਹੀਂ ਵੀ। ਨੇਸਟਡ ਟੈਬਾਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।
ਕੱਚਾ ਡੈਨੀਮ ਤੁਸੀਂ ਸ਼ਾਇਦ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ ਜੀਨ ਸ਼ਾਰਟਸ ਔਸਟਿਨ. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, Williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh Dreamcatcher synth. Cosby sweater eu banh mi, qui irure Terry richardson ex squid. ਐਲੀਕਿਪ ਪਲੇਸੈਟ ਸੈਲਵੀਆ ਸਿਲਮ ਆਈਫੋਨ. Seitan aliquip quis cardigan American apparel, butcher 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
ਇਹ ਪਲੱਗਇਨ ਟੈਬ ਕੀਤੇ ਨੈਵੀਗੇਸ਼ਨ ਕੰਪੋਨੈਂਟ ਨੂੰ ਟੈਬਬਲ ਖੇਤਰਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਵਧਾਉਂਦੀ ਹੈ।
JavaScript ਰਾਹੀਂ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ (ਹਰੇਕ ਟੈਬ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕਿਰਿਆਸ਼ੀਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ):
ਤੁਸੀਂ ਵਿਅਕਤੀਗਤ ਟੈਬਾਂ ਨੂੰ ਕਈ ਤਰੀਕਿਆਂ ਨਾਲ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ:
data-toggle="tab"
ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਨੂੰ ਸਿਰਫ਼ ਨਿਰਧਾਰਿਤ ਕਰਕੇ ਜਾਂ data-toggle="pill"
ਕਿਸੇ ਤੱਤ 'ਤੇ ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਟੈਬ ਜਾਂ ਪਿਲ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ । nav
ਟੈਬ ਵਿੱਚ ਅਤੇ nav-tabs
ਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨ ul
ਨਾਲ ਬੂਟਸਟਰੈਪ ਟੈਬ ਸਟਾਈਲਿੰਗ ਲਾਗੂ ਹੋਵੇਗੀ , ਜਦੋਂ ਕਿ nav
ਅਤੇ nav-pills
ਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨ ਨਾਲ ਗੋਲੀ ਸਟਾਈਲਿੰਗ ਲਾਗੂ ਹੋਵੇਗੀ ।
ਟੈਬਾਂ ਨੂੰ ਫੇਡ ਇਨ ਕਰਨ ਲਈ, .fade
ਹਰੇਕ ਵਿੱਚ ਜੋੜੋ .tab-pane
। ਪਹਿਲੇ ਟੈਬ ਪੈਨ ਨੂੰ ਵੀ .in
ਸ਼ੁਰੂਆਤੀ ਸਮੱਗਰੀ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।
$().tab
ਇੱਕ ਟੈਬ ਤੱਤ ਅਤੇ ਸਮੱਗਰੀ ਕੰਟੇਨਰ ਨੂੰ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਟੈਬ ਵਿੱਚ DOM ਵਿੱਚ ਇੱਕ data-target
ਜਾਂ href
ਇੱਕ ਕੰਟੇਨਰ ਨੋਡ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਉਪਰੋਕਤ ਉਦਾਹਰਨਾਂ ਵਿੱਚ, ਟੈਬ ਗੁਣਾਂ ਵਾਲੇ <a>
s ਹਨ।data-toggle="tab"
.tab('show')
ਦਿੱਤੀ ਗਈ ਟੈਬ ਨੂੰ ਚੁਣਦਾ ਹੈ ਅਤੇ ਇਸ ਨਾਲ ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ ਦਿਖਾਉਂਦਾ ਹੈ। ਕੋਈ ਵੀ ਹੋਰ ਟੈਬ ਜੋ ਪਹਿਲਾਂ ਚੁਣੀ ਗਈ ਸੀ, ਅਣ-ਚੁਣਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਇਸ ਨਾਲ ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ ਲੁਕ ਜਾਂਦੀ ਹੈ। ਟੈਬ ਪੈਨ ਦੇ ਅਸਲ ਵਿੱਚ ਵਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.tab
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਉਂਦੇ ਸਮੇਂ, ਇਵੈਂਟਸ ਹੇਠਾਂ ਦਿੱਤੇ ਕ੍ਰਮ ਵਿੱਚ ਚਾਲੂ ਹੁੰਦੇ ਹਨ:
hide.bs.tab
(ਮੌਜੂਦਾ ਸਰਗਰਮ ਟੈਬ 'ਤੇ)show.bs.tab
(ਦਿਖਾਈ ਜਾਣ ਵਾਲੀ ਟੈਬ 'ਤੇ)hidden.bs.tab
hide.bs.tab
(ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ 'ਤੇ, ਇਵੈਂਟ ਲਈ ਉਹੀ )shown.bs.tab
show.bs.tab
(ਨਵੇਂ-ਸਰਗਰਮ ਹੁਣੇ-ਦਿਖਾਈ ਗਈ ਟੈਬ 'ਤੇ, ਘਟਨਾ ਲਈ ਉਹੀ )ਜੇਕਰ ਕੋਈ ਟੈਬ ਪਹਿਲਾਂ ਹੀ ਕਿਰਿਆਸ਼ੀਲ ਨਹੀਂ ਸੀ, ਤਾਂ hide.bs.tab
ਅਤੇ hidden.bs.tab
ਇਵੈਂਟਾਂ ਨੂੰ ਚਾਲੂ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.tab | ਇਹ ਇਵੈਂਟ ਟੈਬ ਸ਼ੋਅ 'ਤੇ ਫਾਇਰ ਕਰਦਾ ਹੈ, ਪਰ ਨਵੀਂ ਟੈਬ ਦਿਖਾਈ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ। ਕ੍ਰਮਵਾਰ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ (ਜੇ ਉਪਲਬਧ ਹੋਵੇ) ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ ਵਰਤੋਂ event.target ਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।event.relatedTarget |
ਦਿਖਾਇਆ ਗਿਆ.bs.tab | ਇਹ ਇਵੈਂਟ ਇੱਕ ਟੈਬ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਟੈਬ ਸ਼ੋਅ 'ਤੇ ਫਾਇਰ ਕਰਦਾ ਹੈ। ਕ੍ਰਮਵਾਰ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ (ਜੇ ਉਪਲਬਧ ਹੋਵੇ) ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ ਵਰਤੋਂ event.target ਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।event.relatedTarget |
hide.bs.tab | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਾਲੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਈ ਜਾਂਦੀ ਹੈ (ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਨੂੰ ਲੁਕਾਇਆ ਜਾਣਾ ਹੁੰਦਾ ਹੈ)। ਕ੍ਰਮਵਾਰ ਮੌਜੂਦਾ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਨਵੀਂ ਛੇਤੀ ਹੀ ਸਰਗਰਮ ਹੋਣ ਵਾਲੀ ਟੈਬ ਦੀ ਵਰਤੋਂ event.target ਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ।event.relatedTarget |
hidden.bs.tab | ਇਹ ਇਵੈਂਟ ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਚਾਲੂ ਹੁੰਦਾ ਹੈ (ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਲੁਕ ਜਾਂਦੀ ਹੈ)। ਕ੍ਰਮਵਾਰ ਪਿਛਲੀ ਐਕਟਿਵ ਟੈਬ ਅਤੇ ਨਵੀਂ ਐਕਟਿਵ ਟੈਬ ਦੀ ਵਰਤੋਂ ਕਰੋ event.target ਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।event.relatedTarget |
ਜੇਸਨ ਫਰੇਮ ਦੁਆਰਾ ਲਿਖੇ ਸ਼ਾਨਦਾਰ jQuery.tipsy ਪਲੱਗਇਨ ਤੋਂ ਪ੍ਰੇਰਿਤ; ਟੂਲਟਿਪਸ ਇੱਕ ਅੱਪਡੇਟ ਕੀਤਾ ਸੰਸਕਰਣ ਹੈ, ਜੋ ਚਿੱਤਰਾਂ 'ਤੇ ਨਿਰਭਰ ਨਹੀਂ ਕਰਦਾ, ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ CSS3 ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਥਾਨਕ ਸਿਰਲੇਖ ਸਟੋਰੇਜ ਲਈ ਡਾਟਾ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਜ਼ੀਰੋ-ਲੰਬਾਈ ਦੇ ਸਿਰਲੇਖਾਂ ਵਾਲੇ ਟੂਲਟਿੱਪ ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।
ਟੂਲਟਿਪਸ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਲਿੰਕਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ:
ਤੰਗ ਪੈਂਟ ਅਗਲੇ ਪੱਧਰ ਦੇ ਕੇਫੀਯੇਹ ਤੁਸੀਂ ਸ਼ਾਇਦ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ। ਫੋਟੋ ਬੂਥ ਦਾੜ੍ਹੀ ਕੱਚੀ ਡੈਨੀਮ ਲੈਟਰਪ੍ਰੈਸ ਸ਼ਾਕਾਹਾਰੀ ਮੈਸੇਂਜਰ ਬੈਗ ਸਟੰਪਟਾਊਨ। ਫਾਰਮ-ਟੂ-ਟੇਬਲ ਸੀਟੈਨ, ਮੈਕਸਵੀਨੀ ਦੇ ਫਿਕਸੀ ਸਸਟੇਨੇਬਲ ਕਵਿਨੋਆ 8-ਬਿਟ ਅਮਰੀਕੀ ਲਿਬਾਸ ਵਿੱਚ ਟੈਰੀ ਰਿਚਰਡਸਨ ਵਿਨਾਇਲ ਚੈਂਬਰੇ ਹੈ। ਦਾੜ੍ਹੀ ਸਟੰਪਟਾਊਨ, ਕਾਰਡਿਗਨਸ ਬੈਨ ਮੀ ਲੋਮੋ ਥੰਡਰਕੇਟਸ। ਟੋਫੂ ਬਾਇਓਡੀਜ਼ਲ ਵਿਲੀਅਮਸਬਰਗ ਮਾਰਫਾ, ਚਾਰ ਲੋਕੋ ਮੈਕਸਵੀਨੀ ਦੀ ਕਲੀਨਜ਼ ਸ਼ਾਕਾਹਾਰੀ ਚੈਂਬਰੇ। ਇੱਕ ਸੱਚਮੁੱਚ ਵਿਅੰਗਾਤਮਕ ਕਾਰੀਗਰ ਜੋ ਵੀ ਕੀਟਾਰ, ਸੀਨਸਟਰ ਫਾਰਮ-ਟੂ-ਟੇਬਲ ਬੈਂਕਸੀ ਔਸਟਿਨ ਟਵਿੱਟਰ ਹੈਂਡਲ ਫ੍ਰੀਗਨ ਕ੍ਰੇਡ ਕੱਚਾ ਡੈਨੀਮ ਸਿੰਗਲ-ਓਰੀਜਨ ਕੌਫੀ ਵਾਇਰਲ।
ਚਾਰ ਵਿਕਲਪ ਉਪਲਬਧ ਹਨ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ, ਅਤੇ ਖੱਬਾ ਇਕਸਾਰ।
ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਕਰਕੇ, ਟੂਲਟਿਪ ਅਤੇ ਪੌਪਓਵਰ ਡੇਟਾ-ਏਪੀਸ ਆਪਟ-ਇਨ ਹਨ, ਮਤਲਬ ਕਿ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ।
ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਟੂਲਟਿਪਸ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ data-toggle
ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਚੁਣਨਾ ਹੋਵੇਗਾ:
ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਮੰਗ 'ਤੇ ਸਮੱਗਰੀ ਅਤੇ ਮਾਰਕਅੱਪ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਉਹਨਾਂ ਦੇ ਟਰਿੱਗਰ ਤੱਤ ਦੇ ਬਾਅਦ ਟੂਲਟਿਪ ਰੱਖਦਾ ਹੈ।
JavaScript ਦੁਆਰਾ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ:
ਟੂਲਟਿਪ ਲਈ ਲੋੜੀਂਦਾ ਮਾਰਕਅੱਪ ਸਿਰਫ਼ ਇੱਕ data
ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਅਤੇ title
HTML ਤੱਤ 'ਤੇ ਤੁਸੀਂ ਟੂਲਟਿਪ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇੱਕ ਟੂਲਟਿਪ ਦਾ ਤਿਆਰ ਕੀਤਾ ਮਾਰਕਅੱਪ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੈ, ਹਾਲਾਂਕਿ ਇਸਨੂੰ ਇੱਕ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਮੂਲ ਰੂਪ ਵਿੱਚ, top
ਪਲੱਗਇਨ ਦੁਆਰਾ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ)।
ਕਈ ਵਾਰ ਤੁਸੀਂ ਇੱਕ ਹਾਈਪਰਲਿੰਕ ਵਿੱਚ ਇੱਕ ਟੂਲਟਿਪ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਕਈ ਲਾਈਨਾਂ ਨੂੰ ਲਪੇਟਦਾ ਹੈ। ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਦਾ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਇਸ ਨੂੰ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੈ। white-space: nowrap;
ਇਸ ਤੋਂ ਬਚਣ ਲਈ ਆਪਣੇ ਐਂਕਰਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।
.btn-group
a ਜਾਂ an .input-group
, ਜਾਂ ਸਾਰਣੀ-ਸਬੰਧਤ ਤੱਤਾਂ ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) ਦੇ ਅੰਦਰ ਤੱਤਾਂ 'ਤੇ ਟੂਲਟਿਪਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ <tfoot>
, ਤੁਹਾਨੂੰ container: 'body'
ਅਣਚਾਹੇ ਮਾੜੇ ਪ੍ਰਭਾਵਾਂ (ਜਿਵੇਂ ਕਿ ਤੱਤ ਦਾ ਵੱਧਣਾ ਅਤੇ/ ਜਾਂ ਜਦੋਂ ਟੂਲਟਿਪ ਚਾਲੂ ਹੁੰਦੀ ਹੈ ਤਾਂ ਇਸਦੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਗੁਆਉਣਾ)।
ਕੀਬੋਰਡ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰਨ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ, ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ, ਤੁਹਾਨੂੰ ਕੀਬੋਰਡ-ਫੋਕਸ ਕਰਨ ਯੋਗ ਤੱਤਾਂ ਜਿਵੇਂ ਕਿ ਲਿੰਕ, ਫਾਰਮ ਨਿਯੰਤਰਣ, ਜਾਂ ਕਿਸੇ tabindex="0"
ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਕਿਸੇ ਵੀ ਮਨਮਾਨੇ ਤੱਤ ਵਿੱਚ ਟੂਲਟਿੱਪ ਸ਼ਾਮਲ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ।
ਇੱਕ disabled
ਜਾਂ .disabled
ਐਲੀਮੈਂਟ ਵਿੱਚ ਟੂਲਟਿੱਪ ਜੋੜਨ ਲਈ, ਐਲੀਮੈਂਟ ਨੂੰ a ਦੇ ਅੰਦਰ ਰੱਖੋ ਅਤੇ ਇਸਦੀ ਬਜਾਏ <div>
ਟੂਲਟਿਪ ਨੂੰ ਲਾਗੂ ਕਰੋ ।<div>
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""
।
ਨਾਮ | ਟਾਈਪ ਕਰੋ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਐਨੀਮੇਸ਼ਨ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਟੂਲਟਿਪ 'ਤੇ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ |
ਕੰਟੇਨਰ | ਸਤਰ | ਝੂਠਾ | ਝੂਠਾ | ਟੂਲਟਿਪ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: |
ਦੇਰੀ | ਨੰਬਰ | ਵਸਤੂ | 0 | ਟੂਲਟਿਪ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਵਸਤੂ ਬਣਤਰ ਹੈ: |
html | ਬੁਲੀਅਨ | ਝੂਠਾ | ਟੂਲਟਿਪ ਵਿੱਚ HTML ਪਾਓ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ jQuery ਦੀ text ਵਿਧੀ DOM ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਵੇਗੀ। ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। |
ਪਲੇਸਮੈਂਟ | ਸਤਰ | ਫੰਕਸ਼ਨ | 'ਸਿਖਰ' | ਟੂਲਟਿਪ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਸਿਖਰ | ਥੱਲੇ | ਖੱਬੇ | ਸਹੀ | ਆਟੋ. ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਟੂਲਟਿਪ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
ਚੋਣਕਾਰ | ਸਤਰ | ਝੂਠਾ | ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਆਬਜੈਕਟ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪੇ ਜਾਣਗੇ। ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ HTML ਸਮੱਗਰੀ ਨੂੰ ਟੂਲਟਿੱਪ ਜੋੜਨ ਲਈ ਯੋਗ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ । |
ਟੈਮਪਲੇਟ | ਸਤਰ | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
ਟੂਲਟਿਪ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML। ਟੂਲਟਿਪ
ਸਭ ਤੋਂ ਬਾਹਰਲੇ ਰੈਪਰ ਤੱਤ ਵਿੱਚ |
ਸਿਰਲੇਖ | ਸਤਰ | ਫੰਕਸ਼ਨ | '' | ਜੇਕਰ ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ |
ਟਰਿੱਗਰ | ਸਤਰ | 'ਹੋਵਰ ਫੋਕਸ' | ਟੂਲਟਿਪ ਨੂੰ ਕਿਵੇਂ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ | ਹੋਵਰ | ਫੋਕਸ | ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ। manual ਕਿਸੇ ਹੋਰ ਟਰਿੱਗਰ ਨਾਲ ਜੋੜਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। |
ਵਿਊਪੋਰਟ | ਸਤਰ | ਵਸਤੂ | ਫੰਕਸ਼ਨ | { ਚੋਣਕਾਰ: 'ਸਰੀਰ', ਪੈਡਿੰਗ: 0 } | ਟੂਲਟਿਪ ਨੂੰ ਇਸ ਤੱਤ ਦੀਆਂ ਸੀਮਾਵਾਂ ਦੇ ਅੰਦਰ ਰੱਖਦਾ ਹੈ। ਉਦਾਹਰਨ: ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਦੇ ਨਾਲ ਇਸਦੇ ਸਿਰਫ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
ਵਿਅਕਤੀਗਤ ਟੂਲਟਿੱਪਾਂ ਲਈ ਵਿਕਲਪਾਂ ਨੂੰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ।
$().tooltip(options)
ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਵਿੱਚ ਇੱਕ ਟੂਲਟਿਪ ਹੈਂਡਲਰ ਨੱਥੀ ਕਰਦਾ ਹੈ।
.tooltip('show')
ਇੱਕ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪ ਅਸਲ ਵਿੱਚ ਵਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਆਉਂਦੀ ਹੈ (ਭਾਵ shown.bs.tooltip
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। ਜ਼ੀਰੋ-ਲੰਬਾਈ ਦੇ ਸਿਰਲੇਖਾਂ ਵਾਲੇ ਟੂਲਟਿੱਪ ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।
.tooltip('hide')
ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਟੂਲਟਿਪ ਨੂੰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.tooltip
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
.tooltip('toggle')
ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪ ਦੇ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ shown.bs.tooltip
ਜਾਂ hidden.bs.tooltip
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
.tooltip('destroy')
ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪਸ ਜੋ ਡੈਲੀਗੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ (ਜੋ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇselector
ਬਣਾਏ ਗਏ ਹਨ ) ਨੂੰ ਵੰਸ਼ਜ ਟਰਿੱਗਰ ਤੱਤਾਂ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਨਸ਼ਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.tooltip | ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ show ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
show.bs.tooltip | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੂਲਟਿਪ ਨੂੰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
hide.bs.tooltip | ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hide ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
hidden.bs.tooltip | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੂਲਟਿਪ ਨੂੰ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਣਾ ਖਤਮ ਹੋ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
inserted.bs.tooltip | ਇਹ ਇਵੈਂਟ ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ show.bs.tooltip ਜਦੋਂ ਟੂਲਟਿਪ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। |
ਹਾਊਸਿੰਗ ਸੈਕੰਡਰੀ ਜਾਣਕਾਰੀ ਲਈ ਕਿਸੇ ਵੀ ਤੱਤ ਵਿੱਚ ਸਮੱਗਰੀ ਦੇ ਛੋਟੇ ਓਵਰਲੇ ਸ਼ਾਮਲ ਕਰੋ, ਜਿਵੇਂ ਕਿ ਆਈਪੈਡ 'ਤੇ।
Popovers ਜਿਨ੍ਹਾਂ ਦਾ ਸਿਰਲੇਖ ਅਤੇ ਸਮੱਗਰੀ ਦੋਵੇਂ ਜ਼ੀਰੋ-ਲੰਬਾਈ ਹਨ, ਕਦੇ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
ਪੌਪਵਰਸ ਨੂੰ ਬੂਟਸਟਰੈਪ ਦੇ ਤੁਹਾਡੇ ਸੰਸਕਰਣ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਕਰਕੇ, ਟੂਲਟਿਪ ਅਤੇ ਪੌਪਓਵਰ ਡੇਟਾ-ਏਪੀਸ ਆਪਟ-ਇਨ ਹਨ, ਮਤਲਬ ਕਿ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ।
ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਪੌਪਓਵਰਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ data-toggle
ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਚੁਣਨਾ ਹੋਵੇਗਾ:
.btn-group
a ਜਾਂ an .input-group
, ਜਾਂ ਟੇਬਲ-ਸਬੰਧਤ ਤੱਤਾਂ ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) ਦੇ ਅੰਦਰ ਤੱਤਾਂ 'ਤੇ ਪੌਪਓਵਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ <tfoot>
, ਤੁਹਾਨੂੰ container: 'body'
ਅਣਚਾਹੇ ਮਾੜੇ ਪ੍ਰਭਾਵਾਂ (ਜਿਵੇਂ ਕਿ ਤੱਤ ਦਾ ਵੱਧਣਾ ਅਤੇ/ ਜਾਂ ਜਦੋਂ ਪੌਪਓਵਰ ਚਾਲੂ ਹੁੰਦਾ ਹੈ ਤਾਂ ਇਸਦੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਗੁਆਉਣਾ)।
disabled
ਇੱਕ ਜਾਂ .disabled
ਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਪੌਪਓਵਰ ਜੋੜਨ ਲਈ , ਐਲੀਮੈਂਟ ਨੂੰ a ਦੇ ਅੰਦਰ ਰੱਖੋ ਅਤੇ ਇਸਦੀ ਬਜਾਏ <div>
ਪੌਪਓਵਰ ਨੂੰ ਲਾਗੂ ਕਰੋ ।<div>
ਕਈ ਵਾਰ ਤੁਸੀਂ ਇੱਕ ਹਾਈਪਰਲਿੰਕ ਵਿੱਚ ਇੱਕ ਪੌਪਓਵਰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਕਈ ਲਾਈਨਾਂ ਨੂੰ ਲਪੇਟਦਾ ਹੈ। ਪੌਪਓਵਰ ਪਲੱਗਇਨ ਦਾ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਇਸ ਨੂੰ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੈ। white-space: nowrap;
ਇਸ ਤੋਂ ਬਚਣ ਲਈ ਆਪਣੇ ਐਂਕਰਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।
ਚਾਰ ਵਿਕਲਪ ਉਪਲਬਧ ਹਨ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ, ਅਤੇ ਖੱਬਾ ਇਕਸਾਰ।
Sed posuere consectetur est at lobortis. ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum.
focus
ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਕੀਤੀ ਗਈ ਅਗਲੀ ਕਲਿੱਕ 'ਤੇ ਪੋਪਓਵਰ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਟਰਿੱਗਰ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਸਹੀ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਕਰਾਸ-ਪਲੇਟਫਾਰਮ ਵਿਵਹਾਰ ਲਈ, ਤੁਹਾਨੂੰ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ <a>
, ਨਾ ਕਿ <button>
ਟੈਗ, ਅਤੇ ਤੁਹਾਨੂੰ role="button"
ਅਤੇ tabindex
ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਵੀ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
JavaScript ਦੁਆਰਾ ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""
।
ਨਾਮ | ਟਾਈਪ ਕਰੋ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਐਨੀਮੇਸ਼ਨ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਪੌਪਓਵਰ ਲਈ ਇੱਕ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ |
ਕੰਟੇਨਰ | ਸਤਰ | ਝੂਠਾ | ਝੂਠਾ | ਪੌਪਓਵਰ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: |
ਸਮੱਗਰੀ | ਸਤਰ | ਫੰਕਸ਼ਨ | '' | ਜੇਕਰ ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ |
ਦੇਰੀ | ਨੰਬਰ | ਵਸਤੂ | 0 | ਪੌਪਓਵਰ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਵਸਤੂ ਬਣਤਰ ਹੈ: |
html | ਬੁਲੀਅਨ | ਝੂਠਾ | ਪੋਪਓਵਰ ਵਿੱਚ HTML ਪਾਓ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ jQuery ਦੀ text ਵਿਧੀ DOM ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਵੇਗੀ। ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। |
ਪਲੇਸਮੈਂਟ | ਸਤਰ | ਫੰਕਸ਼ਨ | 'ਸਹੀ' | ਪੌਪਓਵਰ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਸਿਖਰ | ਥੱਲੇ | ਖੱਬੇ | ਸਹੀ | ਆਟੋ. ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਪੋਪੋਵਰ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਦੇ ਰੂਪ ਵਿੱਚ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। |
ਚੋਣਕਾਰ | ਸਤਰ | ਝੂਠਾ | ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਪੌਪਓਵਰ ਵਸਤੂਆਂ ਨੂੰ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪਿਆ ਜਾਵੇਗਾ। ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ HTML ਸਮੱਗਰੀ ਨੂੰ ਪੌਪਓਵਰ ਜੋੜਨ ਲਈ ਯੋਗ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ । |
ਟੈਮਪਲੇਟ | ਸਤਰ | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
ਪੌਪਓਵਰ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML। ਪੌਪਓਵਰ ਪੌਪਓਵਰ
ਸਭ ਤੋਂ ਬਾਹਰਲੇ ਰੈਪਰ ਤੱਤ ਵਿੱਚ |
ਸਿਰਲੇਖ | ਸਤਰ | ਫੰਕਸ਼ਨ | '' | ਜੇਕਰ ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ |
ਟਰਿੱਗਰ | ਸਤਰ | 'ਕਲਿੱਕ' | ਪੌਪਓਵਰ ਕਿਵੇਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ | ਹੋਵਰ | ਫੋਕਸ | ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ। manual ਕਿਸੇ ਹੋਰ ਟਰਿੱਗਰ ਨਾਲ ਜੋੜਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। |
ਵਿਊਪੋਰਟ | ਸਤਰ | ਵਸਤੂ | ਫੰਕਸ਼ਨ | { ਚੋਣਕਾਰ: 'ਸਰੀਰ', ਪੈਡਿੰਗ: 0 } | ਪੌਪਓਵਰ ਨੂੰ ਇਸ ਤੱਤ ਦੀਆਂ ਸੀਮਾਵਾਂ ਦੇ ਅੰਦਰ ਰੱਖਦਾ ਹੈ। ਉਦਾਹਰਨ: ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਦੇ ਨਾਲ ਇਸਦੇ ਸਿਰਫ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
ਵਿਅਕਤੀਗਤ ਪੌਪਓਵਰਾਂ ਲਈ ਵਿਕਲਪਾਂ ਨੂੰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ।
$().popover(options)
ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਲਈ ਪੌਪਓਵਰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।
.popover('show')
ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.popover
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। Popovers ਜਿਨ੍ਹਾਂ ਦਾ ਸਿਰਲੇਖ ਅਤੇ ਸਮੱਗਰੀ ਦੋਵੇਂ ਜ਼ੀਰੋ-ਲੰਬਾਈ ਹਨ, ਕਦੇ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
.popover('hide')
ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.popover
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
.popover('toggle')
ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.popover
ਜਾਂ hidden.bs.popover
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
.popover('destroy')
ਇੱਕ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। ਡੈਲੀਗੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਪੌਪਓਵਰ (ਜੋ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇselector
ਬਣਾਏ ਗਏ ਹਨ ) ਨੂੰ ਵੰਸ਼ਜ ਟਰਿੱਗਰ ਤੱਤਾਂ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਨਸ਼ਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.popover | ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ show ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
ਦਿਖਾਇਆ ਗਿਆ.bs.popover | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
hide.bs.popover | ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hide ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
hidden.bs.popover | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਿਆ ਹੋਇਆ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
inserted.bs.popover | ਇਹ ਇਵੈਂਟ ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ show.bs.popover ਜਦੋਂ ਪੋਪਓਵਰ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। |
ਇਸ ਪਲੱਗਇਨ ਨਾਲ ਸਾਰੇ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ਾਂ ਵਿੱਚ ਖਾਰਜ ਕਾਰਜਸ਼ੀਲਤਾ ਸ਼ਾਮਲ ਕਰੋ।
ਇੱਕ .close
ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਇਹ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਦਾ ਪਹਿਲਾ ਬੱਚਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ .alert-dismissible
ਅਤੇ ਮਾਰਕਅੱਪ ਵਿੱਚ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕੋਈ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨਹੀਂ ਆ ਸਕਦੀ ��ੈ।
ਇਸ ਅਤੇ ਉਸ ਨੂੰ ਬਦਲੋ ਅਤੇ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰੋ। Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.
data-dismiss="alert"
ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅਲਰਟ ਨਜ਼ਦੀਕੀ ਕਾਰਜਸ਼ੀਲਤਾ ਦੇਣ ਲਈ ਬਸ ਆਪਣੇ ਬੰਦ ਬਟਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ। ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ ਬੰਦ ਕਰਨਾ ਇਸਨੂੰ DOM ਤੋਂ ਹਟਾ ਦਿੰਦਾ ਹੈ।
ਬੰਦ ਕਰਨ ਵੇਲੇ ਤੁਹਾਡੀਆਂ ਚੇਤਾਵਨੀਆਂ ਐਨੀਮੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਉਹਨਾਂ ਕੋਲ ਹੈ.fade
ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਲਾਗੂ ਹਨ ਅਤੇ .in
ਕਲਾਸਾਂ ਹਨ।
$().alert()
data-dismiss="alert"
ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਉੱਤਰਾਧਿਕਾਰੀ ਤੱਤਾਂ 'ਤੇ ਕਲਿੱਕ ਇਵੈਂਟਾਂ ਲਈ ਇੱਕ ਚੇਤਾਵਨੀ ਸੁਣਦਾ ਹੈ । (ਡਾਟਾ-ਏਪੀਆਈ ਦੀ ਸਵੈ-ਸ਼ੁਰੂਆਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ।)
$().alert('close')
ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ DOM ਤੋਂ ਹਟਾ ਕੇ ਬੰਦ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਦ.fade
ਐਲੀਮੈਂਟ 'ਤੇ ਅਤੇ .in
ਕਲਾਸ ਮੌਜੂਦ ਹਨ, ਤਾਂ ਇਸ ਨੂੰ ਹਟਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਅਲਰਟ ਖਤਮ ਹੋ ਜਾਵੇਗਾ।
ਬੂਟਸਟਰੈਪ ਦਾ ਅਲਰਟ ਪਲੱਗਇਨ ਚੇਤਾਵਨੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦਾ ਹੈ।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
close.bs.alert | ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ close ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
ਬੰਦ. bs. ਚੇਤਾਵਨੀ | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਚੇਤਾਵਨੀ ਬੰਦ ਹੋ ਜਾਂਦੀ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
ਬਟਨਾਂ ਨਾਲ ਹੋਰ ਕਰੋ। ਕੰਟਰੋਲ ਬਟਨ ਸਟੇਟਸ ਜਾਂ ਟੂਲਬਾਰ ਵਰਗੇ ਹੋਰ ਹਿੱਸਿਆਂ ਲਈ ਬਟਨਾਂ ਦੇ ਸਮੂਹ ਬਣਾਓ।
ਫਾਇਰਫਾਕਸ ਪੰਨਾ ਲੋਡਾਂ ਵਿੱਚ ਨਿਯੰਤਰਣ ਅਵਸਥਾਵਾਂ (ਅਯੋਗਤਾ ਅਤੇ ਜਾਂਚ) ਨੂੰ ਕਾਇਮ ਰੱਖਦਾ ਹੈ । ਇਸਦੇ ਲਈ ਇੱਕ ਉਪਾਅ ਵਰਤਣਾ ਹੈ autocomplete="off"
। ਮੋਜ਼ੀਲਾ ਬੱਗ #654072 ਵੇਖੋ ।
data-loading-text="Loading..."
ਇੱਕ ਬਟਨ 'ਤੇ ਲੋਡਿੰਗ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਜੋੜੋ ।
ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ v3.3.5 ਤੋਂ ਬਰਤਰਫ਼ ਹੈ ਅਤੇ v4 ਵਿੱਚ ਹਟਾ ਦਿੱਤੀ ਗਈ ਹੈ।
ਇਸ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਖ਼ਾਤਰ, ਅਸੀਂ data-loading-text
ਅਤੇ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ $().button('loading')
, ਪਰ ਇਹ ਸਿਰਫ਼ ਉਹੀ ਸਥਿਤੀ ਨਹੀਂ ਹੈ ਜਿਸਦੀ ਵਰਤੋਂ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ। ਹੇਠਾਂ $().button(string)
ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਇਸ ਬਾਰੇ ਹੋਰ ਦੇਖੋ ।
data-toggle="button"
ਇੱਕ ਸਿੰਗਲ ਬਟਨ 'ਤੇ ਟੌਗਲਿੰਗ ਨੂੰ ਸਰਗਰਮ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ।
.active
ਅਤੇaria-pressed="true"
ਪ੍ਰੀ-ਟੌਗਲ ਕੀਤੇ ਬਟਨਾਂ ਲਈ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਲਈ .active
ਕਲਾਸ ਅਤੇ aria-pressed="true"
ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰਨੀ ਚਾਹੀਦੀ button
ਹੈ।
ਉਹਨਾਂ ਦੀਆਂ ਸੰਬੰਧਿਤ ਸ਼ੈਲੀਆਂ ਵਿੱਚ ਟੌਗਲਿੰਗ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣ data-toggle="buttons"
ਲਈ ਇੱਕ .btn-group
ਰੱਖਣ ਵਾਲੇ ਚੈਕਬਾਕਸ ਜਾਂ ਰੇਡੀਓ ਇਨਪੁਟਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।
.active
ਪਹਿਲਾਂ ਤੋਂ ਚੁਣੇ ਗਏ ਵਿਕਲਪਾਂ ਲਈ, ਤੁਹਾਨੂੰ .active
ਕਲਾਸ ਨੂੰ label
ਆਪਣੇ ਆਪ ਵਿੱਚ ਇਨਪੁਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
click
ਜੇਕਰ ਇੱਕ ਚੈਕਬਾਕਸ ਬਟਨ ਦੀ ਚੈਕ ਕੀਤੀ ਸਥਿਤੀ ਨੂੰ ਬਟਨ 'ਤੇ ਕਿਸੇ ਇਵੈਂਟ ਨੂੰ ਫਾਇਰ ਕੀਤੇ ਬਿਨਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ ਇਨਪੁਟ <input type="reset">
ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸੈੱਟ ਕਰਕੇ ਜਾਂ ਰਾਹੀਂ ), ਤੁਹਾਨੂੰ ਇਨਪੁਟ ਦੀ ਖੁਦ ਦੀ ਕਲਾਸ checked
ਨੂੰ ਟੌਗਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ।.active
label
$().button('toggle')
ਪੁਸ਼ ਸਥਿਤੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਬਟਨ ਨੂੰ ਇਹ ਦਿੱਖ ਦਿੰਦਾ ਹੈ ਕਿ ਇਹ ਕਿਰਿਆਸ਼ੀਲ ਹੋ ਗਿਆ ਹੈ।
$().button('reset')
ਬਟਨ ਸਥਿਤੀ ਨੂੰ ਰੀਸੈੱਟ ਕਰਦਾ ਹੈ - ਟੈਕਸਟ ਨੂੰ ਮੂਲ ਟੈਕਸਟ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਅਸਿੰਕ੍ਰੋਨਸ ਹੈ ਅਤੇ ਰੀਸੈਟਿੰਗ ਅਸਲ ਵਿੱਚ ਪੂਰੀ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਵਾਪਸ ਆਉਂਦੀ ਹੈ।
$().button(string)
ਟੈਕਸਟ ਨੂੰ ਕਿਸੇ ਵੀ ਡੇਟਾ ਪਰਿਭਾਸ਼ਿਤ ਟੈਕਸਟ ਸਥਿਤੀ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।
ਲਚਕਦਾਰ ਪਲੱਗਇਨ ਜੋ ਆਸਾਨ ਟੌਗਲ ਵਿਵਹਾਰ ਲਈ ਮੁੱਠੀ ਭਰ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਸੰਕੁਚਿਤ ਕਰਨ ਲਈ ਤੁਹਾਡੇ ਬੂਟਸਟਰੈਪ ਦੇ ਸੰਸਕਰਣ ਵਿੱਚ ਪਰਿਵਰਤਨ ਪਲੱਗਇਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
ਕਲਾਸ ਤਬਦੀਲੀਆਂ ਰਾਹੀਂ ਕਿਸੇ ਹੋਰ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰੋ:
.collapse
ਸਮੱਗਰੀ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ.collapsing
ਪਰਿਵਰਤਨ ਦੌਰਾਨ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ.collapse.in
ਸਮੱਗਰੀ ਦਿਖਾਉਂਦਾ ਹੈਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਲਿੰਕ href
, ਜਾਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ data-target
। ਦੋਵਾਂ ਮਾਮਲਿਆਂ ਵਿੱਚ, data-toggle="collapse"
ਲੋੜੀਂਦਾ ਹੈ.
ਪੈਨਲ ਕੰਪੋਨੈਂਟ ਦੇ ਨਾਲ ਇੱਕ ਅਕਾਰਡੀਅਨ ਬਣਾਉਣ ਲਈ ਡਿਫੌਲਟ ਸਮੇਟਣ ਦੇ ਵਿਹਾਰ ਨੂੰ ਵਧਾਓ।
.panel-body
s ਨੂੰ s ਨਾਲ ਸਵੈਪ ਕਰਨਾ ਵੀ ਸੰਭਵ ਹੈ .list-group
।
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"
ਅਤੇ a । ਵਿਸ਼ੇਸ਼ਤਾ ਸਮੇਟਣ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਇੱਕ CSS ਚੋਣਕਾਰ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ data-target
। ਕਲਾਸ ਨੂੰ ਸਮੇਟਣਯੋਗ ਤੱਤ ਵਿੱਚ data-target
ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ । collapse
ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਡਿਫੌਲਟ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਵਾਧੂ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ in
।
ਇੱਕ ਸਮੇਟਣਯੋਗ ਨਿਯੰਤਰਣ ਵਿੱਚ ਅਕਾਰਡੀਅਨ-ਵਰਗੇ ਸਮੂਹ ਪ੍ਰਬੰਧਨ ਨੂੰ ਜੋੜਨ ਲਈ, ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ data-parent="#selector"
। ਇਸ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਣ ਲਈ ਡੈਮੋ ਵੇਖੋ।
ਇਸ ਨਾਲ ਹੱਥੀਂ ਯੋਗ ਕਰੋ:
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-parent=""
।
ਨਾਮ | ਕਿਸਮ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਮਾਪੇ | ਚੋਣਕਾਰ | ਝੂਠਾ | ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸ ਸਮੇਟਣਯੋਗ ਆਈਟਮ ਦੇ ਦਿਖਾਏ ਜਾਣ 'ਤੇ ਨਿਰਧਾਰਤ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅਧੀਨ ਸਾਰੇ ਸਮੇਟਣਯੋਗ ਤੱਤ ਬੰਦ ਹੋ ਜਾਣਗੇ। (ਰਵਾਇਤੀ ਐਕੌਰਡੀਅਨ ਵਿਵਹਾਰ ਦੇ ਸਮਾਨ - ਇਹ panel ਕਲਾਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ) |
ਟੌਗਲ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਬੇਨਤੀ 'ਤੇ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ |
.collapse(options)
ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਰਿਆਸ਼ੀਲ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object
।
.collapse('toggle')
ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਉਣ ਲਈ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਸਮੇਟਣਯੋਗ ਤੱਤ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.collapse
ਜਾਂ hidden.bs.collapse
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
.collapse('show')
ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦਿਖਾਉਂਦਾ ਹੈ। ਸਮੇਟਣਯੋਗ ਤੱਤ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.collapse
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
.collapse('hide')
ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਸਮੇਟਣਯੋਗ ਤੱਤ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.collapse
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
ਬੂਟਸਟਰੈਪ ਦੀ ਸਮੇਟਣ ਵਾਲੀ ਕਲਾਸ ਸਮੇਟਣ ਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.collaps | ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ show ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
ਦਿਖਾਇਆ ਗਿਆ.bs.collaps | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਸਮੇਟਣ ਦਾ ਤੱਤ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
hide.bs.collaps | hide ਜਦੋਂ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਕੱਢ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ . |
hidden.bs.collaps | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਸਮੇਟਣ ਦਾ ਤੱਤ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
ਐਲੀਮੈਂਟਸ ਦੁਆਰਾ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਇੱਕ ਸਲਾਈਡਸ਼ੋ ਭਾਗ, ਜਿਵੇਂ ਕਿ ਕੈਰੋਸਲ। ਨੇਸਟਡ ਕੈਰੋਸਲ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।
ਕੈਰੋਜ਼ਲ ਕੰਪੋਨੈਂਟ ਆਮ ਤੌਰ 'ਤੇ ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਨੂੰ ਪਾਲਣਾ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਕਿਰਪਾ ਕਰਕੇ ਆਪਣੀ ਸਮੱਗਰੀ ਨੂੰ ਪੇਸ਼ ਕਰਨ ਲਈ ਹੋਰ ਵਿਕਲਪਾਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।
ਬੂਟਸਟਰੈਪ ਆਪਣੇ ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ CSS3 ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਪਰ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ 9 ਜ਼ਰੂਰੀ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ। ਇਸ ਤਰ੍ਹਾਂ, ਇਹਨਾਂ ਬ੍ਰਾਉਜ਼ਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਕੋਈ ਸਲਾਈਡ ਪਰਿਵਰਤਨ ਐਨੀਮੇਸ਼ਨ ਨਹੀਂ ਹੁੰਦੇ ਹਨ। ਅਸੀਂ ਜਾਣਬੁੱਝ ਕੇ ਤਬਦੀਲੀਆਂ ਲਈ jQuery-ਅਧਾਰਿਤ ਫਾਲਬੈਕ ਨੂੰ ਸ਼ਾਮਲ ਨਾ ਕਰਨ ਦਾ ਫੈਸਲਾ ਕੀਤਾ ਹੈ।
.active
ਕਲਾਸ ਨੂੰ ਇੱਕ ਸਲਾਈਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ । ਨਹੀਂ ਤਾਂ, ਕੈਰੋਸਲ ਦਿਖਾਈ ਨਹੀਂ ਦੇਵੇਗਾ।
ਨਿਯੰਤਰਣ ਲਈ ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਅਤੇ ਕਲਾਸਾਂ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ .glyphicon .glyphicon-chevron-left
। .glyphicon .glyphicon-chevron-right
ਬੂਟਸਟਰੈਪ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ .icon-prev
ਅਤੇ .icon-next
ਸਧਾਰਨ ਯੂਨੀਕੋਡ ਵਿਕਲਪਾਂ ਵਜੋਂ।
.carousel-caption
ਕਿਸੇ ਵੀ ਵਿੱਚ ਤੱਤ ਦੇ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਆਪਣੀਆਂ ਸਲਾਈਡਾਂ ਵਿੱਚ ਸੁਰਖੀਆਂ ਸ਼ਾਮਲ ਕਰੋ .item
। ਉੱਥੇ ਕਿਸੇ ਵੀ ਵਿਕਲਪਿਕ HTML ਨੂੰ ਰੱਖੋ ਅਤੇ ਇਹ ਆਪਣੇ ਆਪ ਹੀ ਇਕਸਾਰ ਅਤੇ ਫਾਰਮੈਟ ਹੋ ਜਾਵੇਗਾ।
ਕੈਰੋਸੇਲ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਕੈਰੋਜ਼ਲ ਨਿਯੰਤਰਣ ਲਈ id
ਸਭ ਤੋਂ ਬਾਹਰੀ ਕੰਟੇਨਰ (the ) ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ । .carousel
ਇੱਕ ਤੋਂ ਵੱਧ ਕੈਰੋਜ਼ਲ ਜੋੜਦੇ ਸਮੇਂ, ਜਾਂ ਇੱਕ ਕੈਰੋਸੇਲ ਨੂੰ ਬਦਲਦੇ ਸਮੇਂ id
, ਸੰਬੰਧਿਤ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।
ਕੈਰੋਜ਼ਲ ਦੀ ਸਥਿਤੀ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। data-slide
ਕੀਵਰਡਸ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ prev
ਜਾਂ next
, ਜੋ ਇਸਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦੇ ਅਨੁਸਾਰ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਬਦਲਦਾ ਹੈ। ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, data-slide-to
ਇੱਕ ਕੱਚੀ ਸਲਾਈਡ ਸੂਚਕਾਂਕ ਨੂੰ ਕੈਰੋਜ਼ਲ ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ ਵਰਤੋ data-slide-to="2"
, ਜੋ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਇੱਕ ਖਾਸ ਸੂਚਕਾਂਕ ਵਿੱਚ ਬਦਲਦਾ ਹੈ 0
।
ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ data-ride="carousel"
ਵਰਤੋਂ ਪੰਨੇ ਦੇ ਲੋਡ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਕੈਰੋਜ਼ਲ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਚਿੰਨ੍ਹਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਉਸੇ ਕੈਰੋਜ਼ਲ ਦੇ (ਬੇਲੋੜੀ ਅਤੇ ਬੇਲੋੜੀ) ਸਪੱਸ਼ਟ JavaScript ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ ਨਹੀਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।
ਕੈਰੋਸੇਲ ਨੂੰ ਇਸ ਨਾਲ ਹੱਥੀਂ ਕਾਲ ਕਰੋ:
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-interval=""
।
ਨਾਮ | ਕਿਸਮ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਅੰਤਰਾਲ | ਗਿਣਤੀ | 5000 | ਕਿਸੇ ਆਈਟਮ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਸਾਈਕਲ ਚਲਾਉਣ ਦੇ ਵਿਚਕਾਰ ਦੇਰੀ ਲਈ ਸਮੇਂ ਦੀ ਮਾਤਰਾ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ ਕੈਰੋਸਲ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਚੱਕਰ ਨਹੀਂ ਲਵੇਗਾ। |
ਵਿਰਾਮ | ਸਤਰ | null | "ਹੋਵਰ" | ਜੇਕਰ ਇਸ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ "hover" , ਤਾਂ ਕੈਰੋਜ਼ਲ ਦੀ ਸਾਈਕਲਿੰਗ ਚਾਲੂ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਕੈਰੋਜ਼ਲ mouseenter ਦੀ ਸਾਈਕਲਿੰਗ ਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ mouseleave । ਜੇਕਰ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ null , ਤਾਂ ਕੈਰੋਜ਼ਲ 'ਤੇ ਹੋਵਰ ਕਰਨ ਨਾਲ ਇਸ ਨੂੰ ਰੋਕਿਆ ਨਹੀਂ ਜਾਵੇਗਾ। |
ਸਮੇਟਣਾ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਲਗਾਤਾਰ ਸਾਈਕਲ ਚਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਸਖ਼ਤ ਸਟਾਪਾਂ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। |
ਕੀਬੋਰਡ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਕੀਬੋਰਡ ਇਵੈਂਟਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। |
.carousel(options)
ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪਾਂ ਨਾਲ ਕੈਰੋਜ਼ਲ ਨੂੰ object
ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਅਤੇ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।
.carousel('cycle')
ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ ਰਾਹੀਂ ਚੱਕਰ।
.carousel('pause')
ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।
.carousel(number)
ਕੈਰੋਸਲ ਨੂੰ ਕਿਸੇ ਖਾਸ ਫ੍ਰੇਮ (0 ਅਧਾਰਤ, ਇੱਕ ਐਰੇ ਦੇ ਸਮਾਨ) ਵਿੱਚ ਚੱਕਰ ਲਗਾਓ।
.carousel('prev')
ਪਿਛਲੀ ਆਈਟਮ ਲਈ ਚੱਕਰ।
.carousel('next')
ਅਗਲੀ ਆਈਟਮ 'ਤੇ ਚੱਕਰ ਲਗਾਓ।
ਬੂਟਸਟਰੈਪ ਦੀ ਕੈਰੋਜ਼ਲ ਕਲਾਸ ਕੈਰੋਜ਼ਲ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਦੋ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦੀ ਹੈ।
ਦੋਵਾਂ ਘਟਨਾਵਾਂ ਦੀਆਂ ਹੇਠ ਲਿਖੀਆਂ ਵਾਧੂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ:
direction
: ਉਹ ਦਿਸ਼ਾ ਜਿਸ ਵਿੱਚ ਕੈਰੋਜ਼ਲ ਖਿਸਕ ਰਿਹਾ ਹੈ (ਜਾਂ "left"
ਜਾਂ "right"
)।relatedTarget
: DOM ਤੱਤ ਜੋ ਕਿਰਿਆਸ਼ੀਲ ਆਈਟਮ ਦੇ ਤੌਰ 'ਤੇ ਥਾਂ 'ਤੇ ਖਿਸਕਿਆ ਜਾ ਰਿਹਾ ਹੈ।ਕੈਰੋਜ਼ਲ ਦੀਆਂ ਸਾਰੀਆਂ ਘਟਨਾਵਾਂ ਕੈਰੋਜ਼ਲ 'ਤੇ ਹੀ ਫਾਇਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ (ਭਾਵ 'ਤੇ <div class="carousel">
)।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
slide.bs.carousel | ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ slide ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
slid.bs.carousel | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਕੈਰੋਜ਼ਲ ਆਪਣੀ ਸਲਾਈਡ ਤਬਦੀਲੀ ਨੂੰ ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ। |
affix ਪਲੱਗਇਨ position: fixed;
ਨਾਲ ਮਿਲੇ ਪ੍ਰਭਾਵ ਦੀ ਨਕਲ ਕਰਦੇ ਹੋਏ, ਚਾਲੂ ਅਤੇ ਬੰਦ ਟੌਗਲ ਕਰਦਾ ਹੈ position: sticky;
। ਸੱਜੇ ਪਾਸੇ ਸਬਨੇਵੀਗੇਸ਼ਨ affix ਪਲੱਗਇਨ ਦਾ ਲਾਈਵ ਡੈਮੋ ਹੈ।
ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੁਆਰਾ ਜਾਂ ਆਪਣੀ ਖੁਦ ਦੀ JavaScript ਨਾਲ ਹੱਥੀਂ affix ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਦੋਵਾਂ ਸਥਿਤੀਆਂ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਆਪਣੀ ਚਿਪਕਾਈ ਸਮੱਗਰੀ ਦੀ ਸਥਿਤੀ ਅਤੇ ਚੌੜਾਈ ਲਈ CSS ਪ੍ਰਦਾਨ ਕਰਨਾ ਲਾਜ਼ਮੀ ਹੈ।
ਨੋਟ: ਇੱਕ Safari ਰੈਂਡਰਿੰਗ ਬੱਗ ਦੇ ਕਾਰਨ, ਇੱਕ ਮੁਕਾਬਲਤਨ ਸਥਿਤੀ ਵਾਲੇ ਤੱਤ, ਜਿਵੇਂ ਕਿ ਖਿੱਚਿਆ ਜਾਂ ਧੱਕਿਆ ਗਿਆ ਕਾਲਮ, ਵਿੱਚ ਸ਼ਾਮਲ ਕਿਸੇ ਤੱਤ 'ਤੇ affix ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ ।
affix ਪਲੱਗਇਨ ਤਿੰਨ ਸ਼੍ਰੇਣੀਆਂ ਦੇ ਵਿਚਕਾਰ ਟੌਗਲ ਕਰਦਾ ਹੈ, ਹਰੇਕ ਇੱਕ ਖਾਸ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ: .affix
, .affix-top
, ਅਤੇ .affix-bottom
. ਤੁਹਾਨੂੰ ਅਸਲ ਸਥਿਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇਹਨਾਂ ਕਲਾਸਾਂ ਲਈ (ਇਸ ਪਲੱਗਇਨ ਤੋਂ ਸੁਤੰਤਰ) ਦੇ ਅਪਵਾਦ ਦੇ ਨਾਲ, ਸ਼ੈਲੀਆਂ ਪ੍ਰਦਾਨ ਕਰਨੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ position: fixed;
।.affix
ਇੱਥੇ affix ਪਲੱਗਇਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:
.affix-top
ਇਹ ਦਰਸਾਉਣ ਲਈ ਜੋੜਦਾ ਹੈ ਕਿ ਤੱਤ ਆਪਣੀ ਸਭ ਤੋਂ ਉੱਚੀ ਸਥਿਤੀ ਵਿੱਚ ਹੈ। ਇਸ ਸਮੇਂ ਕੋਈ CSS ਪੋਜੀਸ਼ਨਿੰਗ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।.affix
ਬਦਲਦਾ ਹੈ .affix-top
ਅਤੇ ਸੈੱਟ ਕਰਦਾ ਹੈ position: fixed;
(ਬੂਟਸਟ੍ਰੈਪ ਦੇ CSS ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ)।.affix
ਨਾਲ ਬਦਲਣਾ ਚਾਹੀਦਾ ਹੈ .affix-bottom
। ਕਿਉਂਕਿ ਆਫਸੈੱਟ ਵਿਕਲਪਿਕ ਹਨ, ਇੱਕ ਸੈੱਟ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਉਚਿਤ CSS ਸੈੱਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, position: absolute;
ਲੋੜ ਪੈਣ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ. ਪਲੱਗਇਨ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਜਾਂ JavaScript ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ ਕਿ ਉਥੇ ਤੱਤ ਨੂੰ ਕਿੱਥੇ ਰੱਖਣਾ ਹੈ।ਹੇਠਾਂ ਦਿੱਤੇ ਕਿਸੇ ਵੀ ਵਰਤੋਂ ਵਿਕਲਪਾਂ ਲਈ ਆਪਣਾ CSS ਸੈਟ ਕਰਨ ਲਈ ਉਪਰੋਕਤ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ।
ਕਿਸੇ ਵੀ ਤੱਤ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਜੋੜਨ ਲਈ ਵਿਵਹਾਰ ਨੂੰ ਜੋੜਨ data-spy="affix"
ਲਈ, ਸਿਰਫ਼ ਉਸ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਜਿਸਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਕਿਸੇ ਤੱਤ ਦੀ ਪਿਨਿੰਗ ਨੂੰ ਕਦੋਂ ਟੌਗਲ ਕਰਨਾ ਹੈ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਆਫਸੈੱਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
JavaScript ਦੁਆਰਾ affix ਪਲੱਗਇਨ ਨੂੰ ਕਾਲ ਕਰੋ:
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-offset-top="200"
।
ਨਾਮ | ਕਿਸਮ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਆਫਸੈੱਟ | ਨੰਬਰ | ਫੰਕਸ਼ਨ | ਵਸਤੂ | 10 | ਸਕਰੋਲ ਦੀ ਸਥਿਤੀ ਦੀ ਗਣਨਾ ਕਰਦੇ ਸਮੇਂ ਸਕ੍ਰੀਨ ਤੋਂ ਔਫਸੈੱਟ ਕਰਨ ਲਈ ਪਿਕਸਲ। ਜੇਕਰ ਇੱਕ ਸਿੰਗਲ ਨੰਬਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਆਫਸੈੱਟ ਉੱਪਰੀ ਅਤੇ ਹੇਠਾਂ ਦੋਵਾਂ ਦਿਸ਼ਾਵਾਂ ਵਿੱਚ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇਗਾ। ਇੱਕ ਵਿਲੱਖਣ, ਹੇਠਾਂ ਅਤੇ ਸਿਖਰ ਔਫਸੈੱਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਵਸਤੂ ਪ੍ਰਦਾਨ ਕਰੋ offset: { top: 10 } ਜਾਂ offset: { top: 10, bottom: 5 } . ਇੱਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇੱਕ ਔਫਸੈੱਟ ਦੀ ਗਤੀਸ਼ੀਲ ਗਣਨਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। |
ਟੀਚਾ | ਚੋਣਕਾਰ | ਨੋਡ | jQuery ਤੱਤ | window ਵਸਤੂ _ |
affix ਦਾ ਟੀਚਾ ਤੱਤ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ। |
.affix(options)
ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਫਿਕਸ ਕੀਤੀ ਸਮਗਰੀ ਦੇ ਰੂਪ ਵਿੱਚ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object
।
.affix('checkPosition')
ਸੰਬੰਧਿਤ ਤੱਤਾਂ ਦੇ ਮਾਪ, ਸਥਿਤੀ, ਅਤੇ ਸਕ੍ਰੋਲ ਸਥਿਤੀ ਦੇ ਆਧਾਰ 'ਤੇ affix ਦੀ ਸਥਿਤੀ ਦੀ ਮੁੜ ਗਣਨਾ ਕਰਦਾ ਹੈ। , .affix
, .affix-top
ਅਤੇ .affix-bottom
ਕਲਾਸਾਂ ਨੂੰ ਨਵੀਂ ਸਥਿਤੀ ਦੇ ਅਨੁਸਾਰ ਚਿਪਕਾਈ ਗਈ ਸਮੱਗਰੀ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂ ਹਟਾਇਆ ਜਾਂਦਾ ਹੈ। ਇਸ ਵਿਧੀ ਨੂੰ ਉਦੋਂ ਬੁਲਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਜਦੋਂ ਵੀ ਚਿਪਕਾਈ ਸਮੱਗਰੀ ਦੇ ਮਾਪ ਜਾਂ ਨਿਸ਼ਾਨਾ ਤੱਤ ਨੂੰ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਜੋ ਚਿਪਕਾਈ ਸਮੱਗਰੀ ਦੀ ਸਹੀ ਸਥਿਤੀ ਨੂੰ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ।
ਬੂਟਸਟਰੈਪ ਦਾ ਐਫਿਕਸ ਪਲੱਗਇਨ ਐਫੀਕਸ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਇਵੈਂਟਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦਾ ਹੈ।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
affix.bs.affix | ਇਹ ਘਟਨਾ ਤੱਤ ਦੇ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਤੁਰੰਤ ਪਹਿਲਾਂ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ। |
affixed.bs.affix | ਇਸ ਘਟਨਾ ਨੂੰ ਤੱਤ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। |
affix-top.bs.affix | ਇਹ ਇਵੈਂਟ ਤੱਤ ਦੇ ਉੱਪਰ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਤੁਰੰਤ ਪਹਿਲਾਂ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ। |
affixed-top.bs.affix | ਇਹ ਇਵੈਂਟ ਤੱਤ ਦੇ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
affix-bottom.bs.affix | ਇਹ ਇਵੈਂਟ ਤੱਤ ਦੇ ਹੇਠਾਂ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਤੁਰੰਤ ਪਹਿਲਾਂ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ। |
affixed-bottom.bs.affix | ਇਹ ਇਵੈਂਟ ਤੱਤ-ਥੱਲੇ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। |