ಲಭ್ಯವಿರುವ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಎಚ್ಚರಿಕೆಯ ಸಂದೇಶಗಳ ಕೈಬೆರಳೆಣಿಕೆಯ ಜೊತೆಗೆ ವಿಶಿಷ್ಟ ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳಿಗೆ ಸಂದರ್ಭೋಚಿತ ಪ್ರತಿಕ್ರಿಯೆ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಿ.
ಉದಾಹರಣೆಗಳು
ಪಠ್ಯದ ಯಾವುದೇ ಉದ್ದಕ್ಕೆ ಎಚ್ಚರಿಕೆಗಳು ಲಭ್ಯವಿವೆ, ಹಾಗೆಯೇ ಐಚ್ಛಿಕ ವಜಾ ಬಟನ್. ಸರಿಯಾದ ವಿನ್ಯಾಸಕ್ಕಾಗಿ, ಅಗತ್ಯವಿರುವ ಎಂಟು ಸಂದರ್ಭೋಚಿತ ವರ್ಗಗಳಲ್ಲಿ ಒಂದನ್ನು ಬಳಸಿ (ಉದಾ, .alert-success). ಇನ್ಲೈನ್ ವಜಾಗೊಳಿಸಲು, ಎಚ್ಚರಿಕೆಗಳನ್ನು ಬಳಸಿ jQuery ಪ್ಲಗಿನ್ .
ಸರಳವಾದ ಪ್ರಾಥಮಿಕ ಎಚ್ಚರಿಕೆ-ಇದನ್ನು ಪರಿಶೀಲಿಸಿ!
ಸರಳವಾದ ದ್ವಿತೀಯ ಎಚ್ಚರಿಕೆ-ಇದನ್ನು ಪರಿಶೀಲಿಸಿ!
ಸರಳವಾದ ಯಶಸ್ಸಿನ ಎಚ್ಚರಿಕೆ-ಇದನ್ನು ಪರಿಶೀಲಿಸಿ!
ಒಂದು ಸರಳ ಅಪಾಯದ ಎಚ್ಚರಿಕೆ-ಇದನ್ನು ಪರಿಶೀಲಿಸಿ!
ಒಂದು ಸರಳ ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ಇದನ್ನು ಪರಿಶೀಲಿಸಿ!
ಒಂದು ಸರಳ ಮಾಹಿತಿ ಎಚ್ಚರಿಕೆ-ಇದನ್ನು ಪರಿಶೀಲಿಸಿ!
ಸರಳ ಬೆಳಕಿನ ಎಚ್ಚರಿಕೆ-ಇದನ್ನು ಪರಿಶೀಲಿಸಿ!
ಸರಳವಾದ ಡಾರ್ಕ್ ಎಚ್ಚರಿಕೆ-ಇದನ್ನು ಪರಿಶೀಲಿಸಿ!
ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು
ಅರ್ಥವನ್ನು ಸೇರಿಸಲು ಬಣ್ಣವನ್ನು ಬಳಸುವುದು ದೃಶ್ಯ ಸೂಚನೆಯನ್ನು ಮಾತ್ರ ಒದಗಿಸುತ್ತದೆ, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ರವಾನೆಯಾಗುವುದಿಲ್ಲ. ಬಣ್ಣದಿಂದ ಸೂಚಿಸಲಾದ ಮಾಹಿತಿಯು ವಿಷಯದಿಂದಲೇ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಉದಾ ಗೋಚರ ಪಠ್ಯ), ಅಥವಾ .sr-onlyವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಲಾಗಿರುವ ಹೆಚ್ಚುವರಿ ಪಠ್ಯದಂತಹ ಪರ್ಯಾಯ ವಿಧಾನಗಳ ಮೂಲಕ ಸೇರಿಸಲಾಗಿದೆ.
ಲಿಂಕ್ ಬಣ್ಣ
.alert-linkಯಾವುದೇ ಎಚ್ಚರಿಕೆಯೊಳಗೆ ಹೊಂದಾಣಿಕೆಯ ಬಣ್ಣದ ಲಿಂಕ್ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಒದಗಿಸಲು ಯುಟಿಲಿಟಿ ವರ್ಗವನ್ನು ಬಳಸಿ .
ಎಚ್ಚರಿಕೆಗಳು ಶೀರ್ಷಿಕೆಗಳು, ಪ್ಯಾರಾಗಳು ಮತ್ತು ವಿಭಾಜಕಗಳಂತಹ ಹೆಚ್ಚುವರಿ HTML ಅಂಶಗಳನ್ನು ಸಹ ಒಳಗೊಂಡಿರಬಹುದು.
ಚೆನ್ನಾಗಿದೆ!
ಓಹ್ ಹೌದು, ನೀವು ಈ ಪ್ರಮುಖ ಎಚ್ಚರಿಕೆ ಸಂದೇಶವನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಓದಿದ್ದೀರಿ. ಈ ಉದಾಹರಣೆ ಪಠ್ಯವು ಸ್ವಲ್ಪ ಮುಂದೆ ರನ್ ಆಗಲಿದೆ ಇದರಿಂದ ಎಚ್ಚರಿಕೆಯೊಳಗಿನ ಅಂತರವು ಈ ರೀತಿಯ ವಿಷಯದೊಂದಿಗೆ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ನೋಡಬಹುದು.
ನಿಮಗೆ ಅಗತ್ಯವಿರುವಾಗ, ವಿಷಯಗಳನ್ನು ಚೆನ್ನಾಗಿ ಮತ್ತು ಅಚ್ಚುಕಟ್ಟಾಗಿ ಇರಿಸಿಕೊಳ್ಳಲು ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ.
ವಜಾಗೊಳಿಸಲಾಗುತ್ತಿದೆ
ಎಚ್ಚರಿಕೆಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸುವುದರಿಂದ, ಯಾವುದೇ ಎಚ್ಚರಿಕೆಯ ಇನ್ಲೈನ್ ಅನ್ನು ವಜಾಗೊಳಿಸಲು ಸಾಧ್ಯವಿದೆ. ಹೇಗೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:
ನೀವು ಎಚ್ಚರಿಕೆಯ ಪ್ಲಗಿನ್ ಅಥವಾ ಕಂಪೈಲ್ ಮಾಡಿದ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ನೀವು ಮೂಲದಿಂದ ನಮ್ಮ JavaScript ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಅದಕ್ಕೆ ಅಗತ್ಯವಿದೆutil.js . ಸಂಕಲನ ಆವೃತ್ತಿಯು ಇದನ್ನು ಒಳಗೊಂಡಿದೆ.
ವಜಾಗೊಳಿಸುವ ಬಟನ್ ಮತ್ತು .alert-dismissibleವರ್ಗವನ್ನು ಸೇರಿಸಿ, ಇದು ಎಚ್ಚರಿಕೆಯ ಬಲಕ್ಕೆ ಹೆಚ್ಚುವರಿ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು .closeಬಟನ್ ಅನ್ನು ಇರಿಸುತ್ತದೆ.
ವಜಾಗೊಳಿಸುವ ಬಟನ್ನಲ್ಲಿ, data-dismiss="alert"ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ, ಇದು JavaScript ಕಾರ್ಯವನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. <button>ಎಲ್ಲಾ ಸಾಧನಗಳಲ್ಲಿ ಸರಿಯಾದ ನಡವಳಿಕೆಗಾಗಿ ಅದರೊಂದಿಗೆ ಅಂಶವನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ .
ಅವುಗಳನ್ನು ವಜಾಗೊಳಿಸುವಾಗ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು, .fadeಮತ್ತು .showತರಗತಿಗಳನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ.
ಲೈವ್ ಡೆಮೊದೊಂದಿಗೆ ನೀವು ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಬಹುದು:
ಪವಿತ್ರ ಗ್ವಾಕಮೋಲ್! ಕೆಳಗಿನ ಕೆಲವು ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ನೀವು ಪರಿಶೀಲಿಸಬೇಕು.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಡವಳಿಕೆ
ಪ್ರಚೋದಿಸುತ್ತದೆ
JavaScript ಮೂಲಕ ಎಚ್ಚರಿಕೆಯ ವಜಾಗೊಳಿಸುವಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:
ಅಥವಾ ಮೇಲೆ ಪ್ರದರ್ಶಿಸಿದಂತೆ ಎಚ್ಚರಿಕೆಯೊಳಗಿನdata ಬಟನ್ನಲ್ಲಿ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ :
ಎಚ್ಚರಿಕೆಯನ್ನು ಮುಚ್ಚುವುದರಿಂದ ಅದನ್ನು DOM ನಿಂದ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
ವಿಧಾನಗಳು
ವಿಧಾನ
ವಿವರಣೆ
$().alert()
data-dismiss="alert"ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಸಂತತಿ ಅಂಶಗಳ ಮೇಲಿನ ಕ್ಲಿಕ್ ಈವೆಂಟ್ಗಳಿಗೆ ಎಚ್ಚರಿಕೆಯನ್ನು ಆಲಿಸುವಂತೆ ಮಾಡುತ್ತದೆ . (ಡೇಟಾ-ಎಪಿಐನ ಸ್ವಯಂ-ಪ್ರಾರಂಭವನ್ನು ಬಳಸುವಾಗ ಅಗತ್ಯವಿಲ್ಲ.)
$().alert('close')
DOM ನಿಂದ ಅದನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ಎಚ್ಚರಿಕೆಯನ್ನು ಮುಚ್ಚುತ್ತದೆ. .fadeಅಂಶದ ಮೇಲೆ ಮತ್ತು ತರಗತಿಗಳು ಇದ್ದರೆ, .showಅದನ್ನು ತೆಗೆದುಹಾಕುವ ಮೊದಲು ಎಚ್ಚರಿಕೆಯು ಮಸುಕಾಗುತ್ತದೆ.
$().alert('dispose')
ಅಂಶದ ಎಚ್ಚರಿಕೆಯನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ.
ಕಾರ್ಯಕ್ರಮಗಳು
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಎಚ್ಚರಿಕೆಯ ಪ್ಲಗಿನ್ ಎಚ್ಚರಿಕೆಯ ಕಾರ್ಯಚಟುವಟಿಕೆಗೆ ಕೊಂಡಿಯಾಗಿರಲು ಕೆಲವು ಘಟನೆಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.
ಈವೆಂಟ್
ವಿವರಣೆ
close.bs.alert
closeನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
closed.bs.alert
ಎಚ್ಚರಿಕೆಯನ್ನು ಮುಚ್ಚಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).