ಪಾಪೋವರ್ಸ್
ನಿಮ್ಮ ಸೈಟ್ನಲ್ಲಿನ ಯಾವುದೇ ಅಂಶಕ್ಕೆ iOS ನಲ್ಲಿ ಕಂಡುಬರುವಂತೆ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಪಾಪೋವರ್ಗಳನ್ನು ಸೇರಿಸಲು ದಾಖಲೆ ಮತ್ತು ಉದಾಹರಣೆಗಳು.
ಅವಲೋಕನ
ಪಾಪೋವರ್ ಪ್ಲಗಿನ್ ಬಳಸುವಾಗ ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ವಿಷಯಗಳು:
- Popovers ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ 3rd ಪಾರ್ಟಿ ಲೈಬ್ರರಿ Popper ಅನ್ನು ಅವಲಂಬಿಸಿದೆ . ನೀವು bootstrap.js ಮೊದಲು popper.min.js ಅನ್ನು ಸೇರಿಸಬೇಕು ಅಥವಾ popovers ಕೆಲಸ ಮಾಡಲು Popper ಅನ್ನು ಒಳಗೊಂಡಿರುವ
bootstrap.bundle.min.js
/bootstrap.bundle.js
ಅನ್ನು ಬಳಸಬೇಕು! - ಪಾಪೋವರ್ಗಳಿಗೆ ಟೂಲ್ಟಿಪ್ ಪ್ಲಗಿನ್ ಅವಲಂಬನೆಯಾಗಿ ಅಗತ್ಯವಿದೆ.
- ನೀವು ಮೂಲದಿಂದ ನಮ್ಮ JavaScript ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಅದಕ್ಕೆ ಅಗತ್ಯವಿದೆ
util.js
. - ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ Popovers ಆಯ್ಕೆಯಾಗಿದೆ, ಆದ್ದರಿಂದ ನೀವು ಅವುಗಳನ್ನು ನೀವೇ ಪ್ರಾರಂಭಿಸಬೇಕು .
- ಶೂನ್ಯ-ಉದ್ದ
title
ಮತ್ತುcontent
ಮೌಲ್ಯಗಳು ಎಂದಿಗೂ ಪಾಪೋವರ್ ಅನ್ನು ತೋರಿಸುವುದಿಲ್ಲ. container: 'body'
ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಘಟಕಗಳಲ್ಲಿ (ನಮ್ಮ ಇನ್ಪುಟ್ ಗುಂಪುಗಳು, ಬಟನ್ ಗುಂಪುಗಳು, ಇತ್ಯಾದಿ) ರೆಂಡರಿಂಗ್ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ .- ಗುಪ್ತ ಅಂಶಗಳ ಮೇಲೆ ಪಾಪೋವರ್ಗಳನ್ನು ಪ್ರಚೋದಿಸುವುದು ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ.
- ಪೊಪೊವರ್ಗಳು
.disabled
ಅಥವಾdisabled
ಎಲಿಮೆಂಟ್ಗಳನ್ನು ರ್ಯಾಪರ್ ಅಂಶದ ಮೇಲೆ ಪ್ರಚೋದಿಸಬೇಕು. - ಬಹು ಸಾಲುಗಳಲ್ಲಿ ಸುತ್ತುವ ಆಂಕರ್ಗಳಿಂದ ಪ್ರಚೋದಿಸಿದಾಗ, ಆಂಕರ್ಗಳ ಒಟ್ಟಾರೆ ಅಗಲದ ನಡುವೆ ಪಾಪೋವರ್ಗಳು ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತವೆ. ಈ ನಡವಳಿಕೆಯನ್ನು ತಪ್ಪಿಸಲು
.text-nowrap
ನಿಮ್ಮ s ನಲ್ಲಿ ಬಳಸಿ .<a>
- DOM ನಿಂದ ಅವುಗಳ ಅನುಗುಣವಾದ ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ಮೊದಲು ಪಾಪೋವರ್ಗಳನ್ನು ಮರೆಮಾಡಬೇಕು.
- ನೆರಳು DOM ಒಳಗಿನ ಅಂಶಕ್ಕೆ ಧನ್ಯವಾದಗಳು Popovers ಅನ್ನು ಪ್ರಚೋದಿಸಬಹುದು.
prefers-reduced-motion
ಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ನಮ್ಮ ಪ್ರವೇಶಿಸುವಿಕೆ ದಸ್ತಾವೇಜನ್ನು ಕಡಿಮೆ ಚಲನೆಯ ವಿಭಾಗವನ್ನು ನೋಡಿ
.
ಕೆಲವು ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಪಾಪೋವರ್ಸ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.
ಉದಾಹರಣೆ: ಎಲ್ಲೆಡೆ ಪಾಪೋವರ್ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ
data-toggle
ಪುಟದಲ್ಲಿ ಎಲ್ಲಾ ಪಾಪೋವರ್ಗಳನ್ನು ಪ್ರಾರಂಭಿಸಲು ಒಂದು ಮಾರ್ಗವೆಂದರೆ ಅವುಗಳ ಗುಣಲಕ್ಷಣದ ಮೂಲಕ ಅವುಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು :
$(function () {
$('[data-toggle="popover"]').popover()
})
ಉದಾಹರಣೆ: container
ಆಯ್ಕೆಯನ್ನು ಬಳಸುವುದು
ಪೋಪೋವರ್ನೊಂದಿಗೆ ಮಧ್ಯಪ್ರವೇಶಿಸುವಂತಹ ಪೋಷಕ ಅಂಶದಲ್ಲಿ ನೀವು ಕೆಲವು ಶೈಲಿಗಳನ್ನು ಹೊಂದಿರುವಾಗ, ನೀವು ಕಸ್ಟಮ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಬಯಸುತ್ತೀರಿ container
ಇದರಿಂದ ಪಾಪೋವರ್ನ HTML ಆ ಅಂಶದೊಳಗೆ ಗೋಚರಿಸುತ್ತದೆ.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
ಉದಾಹರಣೆ
<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-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
ಮುಂದಿನ ಕ್ಲಿಕ್ನಲ್ಲಿ ವಜಾಗೊಳಿಸಿ
focus
ಟಾಗಲ್ ಅಂಶಕ್ಕಿಂತ ವಿಭಿನ್ನ ಅಂಶದ ಬಳಕೆದಾರರ ಮುಂದಿನ ಕ್ಲಿಕ್ನಲ್ಲಿ ಪಾಪೋವರ್ಗಳನ್ನು ವಜಾಗೊಳಿಸಲು ಪ್ರಚೋದಕವನ್ನು ಬಳಸಿ .
ಮುಂದಿನ ಕ್ಲಿಕ್ನಲ್ಲಿ ವಜಾಗೊಳಿಸಲು ನಿರ್ದಿಷ್ಟ ಮಾರ್ಕ್ಅಪ್ ಅಗತ್ಯವಿದೆ
<a>
ಸರಿಯಾದ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಮತ್ತು ಕ್ರಾಸ್-ಪ್ಲಾಟ್ಫಾರ್ಮ್ ನಡವಳಿಕೆಗಾಗಿ, ನೀವು ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಬೇಕು, ಟ್ಯಾಗ್ ಅಲ್ಲ , ಮತ್ತು ನೀವು ಗುಣಲಕ್ಷಣವನ್ನು <button>
ಸಹ ಸೇರಿಸಬೇಕು .tabindex
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
trigger: 'focus'
})
ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಅಂಶಗಳು
ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳು disabled
ಸಂವಾದಾತ್ಮಕವಾಗಿರುವುದಿಲ್ಲ, ಅಂದರೆ ಬಳಕೆದಾರರು ಪಾಪೋವರ್ (ಅಥವಾ ಟೂಲ್ಟಿಪ್) ಅನ್ನು ಪ್ರಚೋದಿಸಲು ಅವುಗಳನ್ನು ಸುಳಿದಾಡಲು ಅಥವಾ ಕ್ಲಿಕ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. ಪರಿಹಾರವಾಗಿ, ನೀವು ಹೊದಿಕೆಯಿಂದ ಪಾಪೋವರ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲು <div>
ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಅಂಶವನ್ನು <span>
ಅತಿಕ್ರಮಿಸಲು ಬಯಸುತ್ತೀರಿ.pointer-events
ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಪಾಪ್ಓವರ್ ಟ್ರಿಗ್ಗರ್ಗಳಿಗಾಗಿ, ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಪಾಪ್ಓವರ್ ತಕ್ಷಣದ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳಲು ನೀವು ಆದ್ಯತೆ ನೀಡಬಹುದು data-trigger="hover"
ಏಕೆಂದರೆ ಅವರು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಅಂಶವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲು ನಿರೀಕ್ಷಿಸುವುದಿಲ್ಲ.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
ಬಳಕೆ
JavaScript ಮೂಲಕ popovers ಸಕ್ರಿಯಗೊಳಿಸಿ:
$('#example').popover(options)
GPU ವೇಗವರ್ಧನೆ
GPU ವೇಗವರ್ಧನೆ ಮತ್ತು ಮಾರ್ಪಡಿಸಿದ ಸಿಸ್ಟಮ್ DPI ಕಾರಣದಿಂದಾಗಿ Windows 10 ಸಾಧನಗಳಲ್ಲಿ ಕೆಲವೊಮ್ಮೆ Popovers ಅಸ್ಪಷ್ಟವಾಗಿ ಗೋಚರಿಸುತ್ತದೆ. ನಿಮ್ಮ ಪಾಪೋವರ್ಗಳಲ್ಲಿ ಅಗತ್ಯವಿರುವಂತೆ GPU ವೇಗವರ್ಧನೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು v4 ನಲ್ಲಿ ಇದರ ಪರಿಹಾರವಾಗಿದೆ.
ಸಲಹೆ ಪರಿಹಾರ:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನ ಬಳಕೆದಾರರಿಗೆ ಪಾಪೋವರ್ಸ್ ಕೆಲಸ ಮಾಡುವಂತೆ ಮಾಡುವುದು
ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ಪಾಪೋವರ್ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಅನುಮತಿಸಲು, ನೀವು ಅವುಗಳನ್ನು ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಕೀಬೋರ್ಡ್-ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ (ಲಿಂಕ್ಗಳು ಅಥವಾ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಂತಹ) HTML ಅಂಶಗಳಿಗೆ ಮಾತ್ರ ಸೇರಿಸಬೇಕು. ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಅನಿಯಂತ್ರಿತ HTML ಅಂಶಗಳನ್ನು (ಉದಾಹರಣೆಗೆ <span>
s) ಕೇಂದ್ರೀಕರಿಸಬಹುದಾದರೂ tabindex="0"
, ಇದು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಸಂವಾದಾತ್ಮಕವಲ್ಲದ ಅಂಶಗಳ ಮೇಲೆ ಸಂಭಾವ್ಯ ಕಿರಿಕಿರಿ ಮತ್ತು ಗೊಂದಲಮಯ ಟ್ಯಾಬ್ ಸ್ಟಾಪ್ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು ಪ್ರಸ್ತುತ ಈ ಪರಿಸ್ಥಿತಿಯಲ್ಲಿ ಪಾಪೋವರ್ನ ವಿಷಯವನ್ನು ಪ್ರಕಟಿಸುವುದಿಲ್ಲ. . ಹೆಚ್ಚುವರಿಯಾಗಿ, ನಿಮ್ಮ ಪಾಪೋವರ್ಗಳಿಗೆ ಪ್ರಚೋದಕವಾಗಿ ಮಾತ್ರ ಅವಲಂಬಿಸಬೇಡಿ hover
, ಏಕೆಂದರೆ ಇದು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಪ್ರಚೋದಿಸಲು ಅಸಾಧ್ಯವಾಗುತ್ತದೆ.
ಆಯ್ಕೆಯೊಂದಿಗೆ ನೀವು ಶ್ರೀಮಂತ, ರಚನಾತ್ಮಕ HTML ಅನ್ನು ಪಾಪೋವರ್ಗಳಲ್ಲಿ ಸೇರಿಸಬಹುದಾದರೂ html
, ಹೆಚ್ಚಿನ ಪ್ರಮಾಣದ ವಿಷಯವನ್ನು ಸೇರಿಸುವುದನ್ನು ತಡೆಯಲು ನಾವು ಬಲವಾಗಿ ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಪಾಪೋವರ್ಗಳು ಪ್ರಸ್ತುತ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ವಿಧಾನವೆಂದರೆ, ಒಮ್ಮೆ ಪ್ರದರ್ಶಿಸಿದರೆ, ಅವುಗಳ ವಿಷಯವು ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಪ್ರಚೋದಕ ಅಂಶಕ್ಕೆ aria-describedby
ಸಂಬಂಧಿಸಿರುತ್ತದೆ. ಇದರ ಪರಿಣಾಮವಾಗಿ, ಪಾಪೋವರ್ನ ಸಂಪೂರ್ಣ ವಿಷಯವನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನ ಬಳಕೆದಾರರಿಗೆ ಒಂದು ದೀರ್ಘವಾದ, ತಡೆರಹಿತ ಸ್ಟ್ರೀಮ್ನಂತೆ ಘೋಷಿಸಲಾಗುತ್ತದೆ.
ಹೆಚ್ಚುವರಿಯಾಗಿ, ನಿಮ್ಮ ಪಾಪೋವರ್ನಲ್ಲಿ ಸಂವಾದಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳನ್ನು (ಫಾರ್ಮ್ ಎಲಿಮೆಂಟ್ಗಳು ಅಥವಾ ಲಿಂಕ್ಗಳಂತಹ) ಸೇರಿಸಲು ಸಾಧ್ಯವಿರುವಾಗ (ಈ ಅಂಶಗಳನ್ನು whiteList
ಅಥವಾ ಅನುಮತಿಸಲಾದ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಟ್ಯಾಗ್ಗಳಿಗೆ ಸೇರಿಸುವ ಮೂಲಕ), ಪ್ರಸ್ತುತ ಪಾಪೋವರ್ ಕೀಬೋರ್ಡ್ ಫೋಕಸ್ ಆರ್ಡರ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದಿಲ್ಲ ಎಂದು ತಿಳಿದಿರಲಿ. ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರು ಪಾಪೋವರ್ ಅನ್ನು ತೆರೆದಾಗ, ಪ್ರಚೋದಕ ಅಂಶದ ಮೇಲೆ ಗಮನವು ಉಳಿಯುತ್ತದೆ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ನ ರಚನೆಯಲ್ಲಿನ ಪ್ರಚೋದಕವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಪಾಪೋವರ್ ತಕ್ಷಣವೇ ಅನುಸರಿಸುವುದಿಲ್ಲವಾದ್ದರಿಂದ, ಮುಂದಕ್ಕೆ ಚಲಿಸುವ/ಒತ್ತುವ ಯಾವುದೇ ಗ್ಯಾರಂಟಿ ಇರುವುದಿಲ್ಲTABಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರನ್ನು ಪಾಪೋವರ್ಗೆ ಸರಿಸುತ್ತದೆ. ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಹೇಳುವುದಾದರೆ, ಪಾಪೋವರ್ಗೆ ಸಂವಾದಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳನ್ನು ಸರಳವಾಗಿ ಸೇರಿಸುವುದರಿಂದ ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ಈ ನಿಯಂತ್ರಣಗಳನ್ನು ತಲುಪಲಾಗುವುದಿಲ್ಲ/ಬಳಕೆಯಾಗದಂತೆ ಮಾಡುತ್ತದೆ ಅಥವಾ ಕನಿಷ್ಠ ತರ್ಕಬದ್ಧವಲ್ಲದ ಒಟ್ಟಾರೆ ಫೋಕಸ್ ಆರ್ಡರ್ ಅನ್ನು ಮಾಡುತ್ತದೆ. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಬದಲಿಗೆ ಮಾದರಿ ಸಂವಾದವನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
ಆಯ್ಕೆಗಳು
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-
, data-animation=""
.
sanitize
,
sanitizeFn
ಮತ್ತು
whiteList
ಆಯ್ಕೆಗಳನ್ನು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪೂರೈಸಲಾಗುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
ಹೆಸರು | ಮಾದರಿ | ಡೀಫಾಲ್ಟ್ | ವಿವರಣೆ |
---|---|---|---|
ಅನಿಮೇಷನ್ | ಬೂಲಿಯನ್ | ನಿಜ | ಪಾಪೋವರ್ಗೆ CSS ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ |
ಕಂಟೇನರ್ | ದಾರ | ಅಂಶ | ಸುಳ್ಳು | ಸುಳ್ಳು | ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಪಾಪೋವರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಉದಾಹರಣೆ: |
ವಿಷಯ | ದಾರ | ಅಂಶ | ಕಾರ್ಯ | '' |
ಒಂದು ಕಾರ್ಯವನ್ನು ನೀಡಿದರೆ, |
ವಿಳಂಬ | ಸಂಖ್ಯೆ | ವಸ್ತು | 0 | popover (ms) ಅನ್ನು ತೋರಿಸುವುದು ಮತ್ತು ಮರೆಮಾಡುವುದು ವಿಳಂಬ - ಹಸ್ತಚಾಲಿತ ಪ್ರಚೋದಕ ಪ್ರಕಾರಕ್ಕೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ ಸಂಖ್ಯೆಯನ್ನು ಒದಗಿಸಿದರೆ, ಮರೆಮಾಡು/ತೋರಿಕೆ ಎರಡಕ್ಕೂ ವಿಳಂಬವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ವಸ್ತುವಿನ ರಚನೆ ಹೀಗಿದೆ: |
html | ಬೂಲಿಯನ್ | ಸುಳ್ಳು | ಪಾಪೋವರ್ಗೆ HTML ಅನ್ನು ಸೇರಿಸಿ. ತಪ್ಪಾಗಿದ್ದರೆ, text DOM ಗೆ ವಿಷಯವನ್ನು ಸೇರಿಸಲು jQuery ನ ವಿಧಾನವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ನೀವು XSS ದಾಳಿಗಳ ಬಗ್ಗೆ ಚಿಂತೆ ಮಾಡುತ್ತಿದ್ದರೆ ಪಠ್ಯವನ್ನು ಬಳಸಿ. |
ನಿಯೋಜನೆ | ದಾರ | ಕಾರ್ಯ | 'ಬಲ' | ಪಾಪೋವರ್ ಅನ್ನು ಹೇಗೆ ಇರಿಸುವುದು - ಸ್ವಯಂ | ಅಗ್ರ | ಕೆಳಗೆ | ಬಿಟ್ಟು | ಬಲ. ನಿರ್ದಿಷ್ಟಪಡಿಸಿದಾಗ, ಇದು ಪಾಪೋವರ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮರುಹೊಂದಿಸುತ್ತದೆ ನಿಯೋಜನೆಯನ್ನು ನಿರ್ಧರಿಸಲು ಕಾರ್ಯವನ್ನು ಬಳಸಿದಾಗ, ಅದನ್ನು ಪಾಪೋವರ್ DOM ನೋಡ್ ಅನ್ನು ಅದರ ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರಚೋದಿಸುವ ಅಂಶ DOM ನೋಡ್ ಅನ್ನು ಅದರ ಎರಡನೆಯದಾಗಿ ಕರೆಯಲಾಗುತ್ತದೆ. ಸಂದರ್ಭವನ್ನು ಪಾಪೋವರ್ |
ಆಯ್ಕೆಗಾರ | ದಾರ | ಸುಳ್ಳು | ಸುಳ್ಳು | ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಒದಗಿಸಿದರೆ, ನಿರ್ದಿಷ್ಟ ಗುರಿಗಳಿಗೆ ಪಾಪೋವರ್ ಆಬ್ಜೆಕ್ಟ್ಗಳನ್ನು ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ. ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಪಾಪೋವರ್ಗಳನ್ನು ಸೇರಿಸಲು ಡೈನಾಮಿಕ್ HTML ವಿಷಯವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಇದನ್ನು ಮತ್ತು ಮಾಹಿತಿಯುಕ್ತ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ . |
ಟೆಂಪ್ಲೇಟ್ | ಸ್ಟ್ರಿಂಗ್ | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
ಪಾಪೋವರ್ ಅನ್ನು ರಚಿಸುವಾಗ ಬಳಸಲು ಬೇಸ್ HTML. ಪಾಪೋವರ್ ಪಾಪೋವರ್
ಹೊರಗಿನ ಹೊದಿಕೆ ಅಂಶವು |
ಶೀರ್ಷಿಕೆ | ದಾರ | ಅಂಶ | ಕಾರ್ಯ | '' |
ಒಂದು ಕಾರ್ಯವನ್ನು ನೀಡಿದರೆ, |
ಪ್ರಚೋದಕ | ಸ್ಟ್ರಿಂಗ್ | 'ಕ್ಲಿಕ್' | ಪಾಪೋವರ್ ಅನ್ನು ಹೇಗೆ ಪ್ರಚೋದಿಸಲಾಗುತ್ತದೆ - ಕ್ಲಿಕ್ ಮಾಡಿ | ಸುಳಿದಾಡಿ | ಗಮನ | ಕೈಪಿಡಿ. ನೀವು ಬಹು ಪ್ರಚೋದಕಗಳನ್ನು ರವಾನಿಸಬಹುದು; ಅವುಗಳನ್ನು ಜಾಗದಿಂದ ಪ್ರತ್ಯೇಕಿಸಿ. manual ಯಾವುದೇ ಇತರ ಪ್ರಚೋದಕಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲಾಗುವುದಿಲ್ಲ. |
ಆಫ್ಸೆಟ್ | ಸಂಖ್ಯೆ | ಸ್ಟ್ರಿಂಗ್ | 0 | ಅದರ ಗುರಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಪಾಪೋವರ್ನ ಆಫ್ಸೆಟ್. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್ನ ಆಫ್ಸೆಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ . |
ಫಾಲ್ಬ್ಯಾಕ್ ಪ್ಲೇಸ್ಮೆಂಟ್ | ದಾರ | ಶ್ರೇಣಿ | 'ಫ್ಲಿಪ್' | ಫಾಲ್ಬ್ಯಾಕ್ನಲ್ಲಿ ಪಾಪ್ಪರ್ ಯಾವ ಸ್ಥಾನವನ್ನು ಬಳಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುಮತಿಸಿ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್ನ ನಡವಳಿಕೆ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ |
ಕಸ್ಟಮ್ ವರ್ಗ | ದಾರ | ಕಾರ್ಯ | '' | ಅದನ್ನು ತೋರಿಸಿದಾಗ ಪಾಪೋವರ್ಗೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ. ಟೆಂಪ್ಲೇಟ್ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಯಾವುದೇ ತರಗತಿಗಳಿಗೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ಈ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬಹು ವರ್ಗಗಳನ್ನು ಸೇರಿಸಲು, ಅವುಗಳನ್ನು ಸ್ಪೇಸ್ಗಳೊಂದಿಗೆ ಪ್ರತ್ಯೇಕಿಸಿ: ಹೆಚ್ಚುವರಿ ವರ್ಗದ ಹೆಸರುಗಳನ್ನು ಹೊಂದಿರುವ ಒಂದೇ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುವ ಕಾರ್ಯವನ್ನು ಸಹ ನೀವು ರವಾನಿಸಬಹುದು. |
ಗಡಿ | ದಾರ | ಅಂಶ | 'ಸ್ಕ್ರೋಲ್ ಪೇರೆಂಟ್' | ಪಾಪೋವರ್ನ ಓವರ್ಫ್ಲೋ ನಿರ್ಬಂಧದ ಗಡಿ. 'viewport' , 'window' , 'scrollParent' , ಅಥವಾ HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾತ್ರ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್ನ ಪ್ರಿವೆಂಟ್ಓವರ್ಫ್ಲೋ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ . |
ಶುಚಿಗೊಳಿಸು | ಬೂಲಿಯನ್ | ನಿಜ | ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ. ಸಕ್ರಿಯಗೊಳಿಸಿದರೆ 'template' , 'content' ಮತ್ತು 'title' ಆಯ್ಕೆಗಳನ್ನು ಸ್ಯಾನಿಟೈಸ್ ಮಾಡಲಾಗುತ್ತದೆ. ನಮ್ಮ JavaScript ದಸ್ತಾವೇಜನ್ನು ಸ್ಯಾನಿಟೈಸರ್ ವಿಭಾಗವನ್ನು ನೋಡಿ . |
ಬಿಳಿಪಟ್ಟಿ | ವಸ್ತು | ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ | ಅನುಮತಿಸಲಾದ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಟ್ಯಾಗ್ಗಳನ್ನು ಹೊಂದಿರುವ ವಸ್ತು |
ಸ್ಯಾನಿಟೈಜ್ಎಫ್ಎನ್ | ಶೂನ್ಯ | ಕಾರ್ಯ | ಶೂನ್ಯ | ಇಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ಸ್ಯಾನಿಟೈಜ್ ಕಾರ್ಯವನ್ನು ಪೂರೈಸಬಹುದು. ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು ಮೀಸಲಾದ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ. |
ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗ್ | ಶೂನ್ಯ | ವಸ್ತು | ಶೂನ್ಯ | ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಸಂರಚನೆಯನ್ನು ಬದಲಾಯಿಸಲು, ಪಾಪ್ಪರ್ನ ಸಂರಚನೆಯನ್ನು ನೋಡಿ |
ವೈಯಕ್ತಿಕ ಪಾಪೋವರ್ಗಳಿಗಾಗಿ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು
ಮೇಲೆ ವಿವರಿಸಿದಂತೆ ವೈಯಕ್ತಿಕ ಪಾಪೋವರ್ಗಳ ಆಯ್ಕೆಗಳನ್ನು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಬಳಕೆಯ ಮೂಲಕ ಪರ್ಯಾಯವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.
ವಿಧಾನಗಳು
ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು
ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .
$().popover(options)
ಅಂಶ ಸಂಗ್ರಹಕ್ಕಾಗಿ ಪಾಪೋವರ್ಗಳನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
.popover('show')
ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಪಾಪೋವರ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ shown.bs.popover
ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ. ಇದನ್ನು ಪಾಪೋವರ್ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಶೀರ್ಷಿಕೆ ಮತ್ತು ವಿಷಯ ಎರಡೂ ಶೂನ್ಯ-ಉದ್ದದ ಪಾಪೋವರ್ಗಳನ್ನು ಎಂದಿಗೂ ಪ್ರದರ್ಶಿಸಲಾಗುವುದಿಲ್ಲ.
$('#element').popover('show')
.popover('hide')
ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಪಾಪೋವರ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ hidden.bs.popover
ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ. ಇದನ್ನು ಪಾಪೋವರ್ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.
$('#element').popover('hide')
.popover('toggle')
ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಪಾಪೋವರ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ shown.bs.popover
ಅಥವಾ hidden.bs.popover
ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ. ಇದನ್ನು ಪಾಪೋವರ್ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.
$('#element').popover('toggle')
.popover('dispose')
ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ ಮತ್ತು ನಾಶಪಡಿಸುತ್ತದೆ. ನಿಯೋಗವನ್ನು ಬಳಸುವ ಪಾಪೋವರ್ಗಳನ್ನು ( ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು ರಚಿಸಲಾಗಿದೆ )selector
ವಂಶಸ್ಥ ಪ್ರಚೋದಕ ಅಂಶಗಳ ಮೇಲೆ ಪ್ರತ್ಯೇಕವಾಗಿ ನಾಶಪಡಿಸಲಾಗುವುದಿಲ್ಲ.
$('#element').popover('dispose')
.popover('enable')
ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ತೋರಿಸಲು ಸಾಮರ್ಥ್ಯವನ್ನು ನೀಡುತ್ತದೆ. Popovers ಡೀಫಾಲ್ಟ್ ಆಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ.
$('#element').popover('enable')
.popover('disable')
ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ತೋರಿಸಲು ಸಾಮರ್ಥ್ಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಅದನ್ನು ಮರು-ಸಕ್ರಿಯಗೊಳಿಸಿದರೆ ಮಾತ್ರ ಪಾಪೋವರ್ ಅನ್ನು ತೋರಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
$('#element').popover('disable')
.popover('toggleEnabled')
ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ತೋರಿಸಲು ಅಥವಾ ಮರೆಮಾಡಲು ಸಾಮರ್ಥ್ಯವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.
$('#element').popover('toggleEnabled')
.popover('update')
ಅಂಶದ ಪಾಪೋವರ್ನ ಸ್ಥಾನವನ್ನು ನವೀಕರಿಸುತ್ತದೆ.
$('#element').popover('update')
ಕಾರ್ಯಕ್ರಮಗಳು
ಈವೆಂಟ್ ಪ್ರಕಾರ | ವಿವರಣೆ |
---|---|
show.bs.popover | show ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ . |
ತೋರಿಸಲಾಗಿದೆ.bs.popover | ಬಳಕೆದಾರರಿಗೆ ಪಾಪೋವರ್ ಗೋಚರಿಸುವಂತೆ ಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ). |
hide.bs.popover | hide ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ . |
ಗುಪ್ತ.ಬಿಎಸ್.ಪೋಪೋವರ್ | ಬಳಕೆದಾರರಿಂದ ಪಾಪ್ಓವರ್ ಅನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ). |
inserted.bs.popover | show.bs.popover DOM ಗೆ ಪಾಪೋವರ್ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ಸೇರಿಸಿದಾಗ ಈವೆಂಟ್ ನಂತರ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ . |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})