ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

ಈಗ 12 ಕಸ್ಟಮ್ jQuery ಪ್ಲಗಿನ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಘಟಕಗಳನ್ನು ಜೀವಕ್ಕೆ ತನ್ನಿ .

ಮಾದರಿಗಳು

ಸುವ್ಯವಸ್ಥಿತ, ಆದರೆ ಹೊಂದಿಕೊಳ್ಳುವ, ಸಾಂಪ್ರದಾಯಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡಲ್ ಪ್ಲಗಿನ್ ಅನ್ನು ಕನಿಷ್ಠ ಅಗತ್ಯವಿರುವ ಕ್ರಿಯಾತ್ಮಕತೆ ಮತ್ತು ಸ್ಮಾರ್ಟ್ ಡಿಫಾಲ್ಟ್‌ಗಳೊಂದಿಗೆ ತೆಗೆದುಕೊಳ್ಳಿ.

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಈ ಸರಳ ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಸುಮಾರು ಯಾವುದಕ್ಕೂ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳನ್ನು ಸೇರಿಸಿ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನ್ಯಾವ್‌ಬಾರ್, ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಮಾತ್ರೆಗಳಲ್ಲಿ ಪೂರ್ಣ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ.

Scrollspy

ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಪ್ರಸ್ತುತ ಸಕ್ರಿಯ ಲಿಂಕ್ ಅನ್ನು ತೋರಿಸಲು ನಿಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿರುವ ಲಿಂಕ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಲು scrollspy ಬಳಸಿ.

ಟಾಗಲ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳು

ಸ್ಥಳೀಯ ವಿಷಯದ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಫಲಕಗಳ ಮೂಲಕ ಟಾಗಲ್ ಮಾಡಲು ಅನುಮತಿಸುವ ಮೂಲಕ ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಮಾತ್ರೆಗಳನ್ನು ಹೆಚ್ಚು ಉಪಯುಕ್ತವಾಗಿಸಲು ಈ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿ.

ಸಾಧನಸಲಹೆಗಳು

jQuery Tipsy ಪ್ಲಗಿನ್‌ನಲ್ಲಿ ಹೊಸ ಟೇಕ್, ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಚಿತ್ರಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿಲ್ಲ-ಅವು ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ CSS3 ಮತ್ತು ಸ್ಥಳೀಯ ಶೀರ್ಷಿಕೆ ಸಂಗ್ರಹಣೆಗಾಗಿ ಡೇಟಾ-ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುತ್ತವೆ.

ಪಾಪೋವರ್ಸ್ *

ವಸತಿ ದ್ವಿತೀಯ ಮಾಹಿತಿಗಾಗಿ ಯಾವುದೇ ಅಂಶಕ್ಕೆ iPad ನಲ್ಲಿರುವಂತಹ ವಿಷಯದ ಸಣ್ಣ ಮೇಲ್ಪದರಗಳನ್ನು ಸೇರಿಸಿ.

* ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ

ಎಚ್ಚರಿಕೆ ಸಂದೇಶಗಳು

ಎಚ್ಚರಿಕೆಯ ಪ್ಲಗಿನ್ ಎಚ್ಚರಿಕೆಗಳಿಗೆ ನಿಕಟ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಲು ಒಂದು ಚಿಕ್ಕ ವರ್ಗವಾಗಿದೆ.

ಗುಂಡಿಗಳು

ಬಟನ್‌ಗಳೊಂದಿಗೆ ಹೆಚ್ಚಿನದನ್ನು ಮಾಡಿ. ಟೂಲ್‌ಬಾರ್‌ಗಳಂತಹ ಹೆಚ್ಚಿನ ಘಟಕಗಳಿಗಾಗಿ ನಿಯಂತ್ರಣ ಬಟನ್ ಹೇಳುತ್ತದೆ ಅಥವಾ ಬಟನ್‌ಗಳ ಗುಂಪುಗಳನ್ನು ರಚಿಸಿ.

ಕುಗ್ಗಿಸು

ಅಕಾರ್ಡಿಯನ್ಸ್ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್‌ನಂತಹ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಘಟಕಗಳಿಗೆ ಮೂಲ ಶೈಲಿಗಳು ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಬೆಂಬಲವನ್ನು ಪಡೆಯಿರಿ.

ಏರಿಳಿಕೆ

ವಿಷಯದ ಸಂವಾದಾತ್ಮಕ ಸ್ಲೈಡ್‌ಶೋ ಒದಗಿಸಲು ನೀವು ಬಯಸುವ ಯಾವುದೇ ವಿಷಯದ ಮೆರ್ರಿ-ಗೋ-ರೌಂಡ್ ಅನ್ನು ರಚಿಸಿ.

ಟೈಪ್‌ಹೆಡ್

ಯಾವುದೇ ಫಾರ್ಮ್ ಪಠ್ಯ ಇನ್‌ಪುಟ್‌ನೊಂದಿಗೆ ಸೊಗಸಾದ ಟೈಪ್‌ಹೆಡ್‌ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಲು ಮೂಲಭೂತ, ಸುಲಭವಾಗಿ ವಿಸ್ತರಿಸಲಾದ ಪ್ಲಗಿನ್.

ಪರಿವರ್ತನೆಗಳು *

ಸರಳ ಪರಿವರ್ತನೆಯ ಪರಿಣಾಮಗಳಿಗಾಗಿ, ಮೋಡಲ್‌ಗಳಲ್ಲಿ ಸ್ಲೈಡ್ ಮಾಡಲು ಅಥವಾ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಮಸುಕಾಗಿಸಲು ಒಮ್ಮೆ bootstrap-transition.js ಅನ್ನು ಸೇರಿಸಿ.

* ಪ್ಲಗಿನ್‌ಗಳಲ್ಲಿ ಅನಿಮೇಷನ್‌ಗೆ ಅಗತ್ಯವಿದೆ

ತಲೆ ಎತ್ತಿ! ಎಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ಗಳಿಗೆ jQuery ನ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯ ಅಗತ್ಯವಿದೆ.

ಮಾದರಿಗಳ ಬಗ್ಗೆ

ಸುವ್ಯವಸ್ಥಿತ, ಆದರೆ ಹೊಂದಿಕೊಳ್ಳುವ, ಸಾಂಪ್ರದಾಯಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡಲ್ ಪ್ಲಗಿನ್ ಅನ್ನು ಕನಿಷ್ಠ ಅಗತ್ಯವಿರುವ ಕ್ರಿಯಾತ್ಮಕತೆ ಮತ್ತು ಸ್ಮಾರ್ಟ್ ಡಿಫಾಲ್ಟ್‌ಗಳೊಂದಿಗೆ ತೆಗೆದುಕೊಳ್ಳಿ.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಸ್ಥಿರ ಉದಾಹರಣೆ

ಕೆಳಗೆ ಸ್ಥಿರವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾದ ಮಾದರಿಯಾಗಿದೆ.

ಲೈವ್ ಡೆಮೊ

ಕೆಳಗಿನ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ javascript ಮೂಲಕ ಮಾದರಿಯನ್ನು ಟಾಗಲ್ ಮಾಡಿ. ಇದು ಕೆಳಗೆ ಸ್ಲೈಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಪುಟದ ಮೇಲ್ಭಾಗದಿಂದ ಮಸುಕಾಗುತ್ತದೆ.

ಡೆಮೊ ಮಾದರಿಯನ್ನು ಪ್ರಾರಂಭಿಸಿ

ಬೂಟ್‌ಸ್ಟ್ರಾಪ್-ಮೋಡಲ್ ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಮಾದರಿಗೆ ಕರೆ ಮಾಡಿ:

  1. $ ( '#myModal' ). ಮಾದರಿ ( ಆಯ್ಕೆಗಳು )

ಆಯ್ಕೆಗಳು

ಹೆಸರು ಮಾದರಿ ಪೂರ್ವನಿಯೋಜಿತ ವಿವರಣೆ
ಹಿನ್ನೆಲೆ ಬೂಲಿಯನ್ ನಿಜ ಮಾದರಿ-ಬ್ಯಾಕ್‌ಡ್ರಾಪ್ ಅಂಶವನ್ನು ಒಳಗೊಂಡಿದೆ. ಪರ್ಯಾಯವಾಗಿ, staticಕ್ಲಿಕ್‌ನಲ್ಲಿ ಮಾದರಿಯನ್ನು ಮುಚ್ಚದ ಹಿನ್ನೆಲೆಗಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿ.
ಕೀಬೋರ್ಡ್ ಬೂಲಿಯನ್ ನಿಜ ಎಸ್ಕೇಪ್ ಕೀಲಿಯನ್ನು ಒತ್ತಿದಾಗ ಮೋಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ
ತೋರಿಸು ಬೂಲಿಯನ್ ನಿಜ ಪ್ರಾರಂಭಿಸಿದಾಗ ಮಾದರಿಯನ್ನು ತೋರಿಸುತ್ತದೆ.

ಮಾರ್ಕ್ಅಪ್

ಒಂದೇ ಸಾಲಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯದೆಯೇ ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ನೀವು ಸುಲಭವಾಗಿ ಮಾದರಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು. data-toggle="modal"ಒಂದು ನಿಯಂತ್ರಕ ಅಂಶದ ಮೇಲೆ ಹೊಂದಿಸಿ data-target="#foo"ಅಥವಾ href="#foo"ಇದು ಮಾದರಿ ಅಂಶ ಐಡಿಗೆ ಅನುರೂಪವಾಗಿದೆ ಮತ್ತು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಅದು ನಿಮ್ಮ ಮಾದರಿಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.

ಅಲ್ಲದೆ, ನಿಮ್ಮ ಮಾದರಿ ನಿದರ್ಶನಕ್ಕೆ ಆಯ್ಕೆಗಳನ್ನು ಸೇರಿಸಲು, ಅವುಗಳನ್ನು ನಿಯಂತ್ರಣ ಅಂಶ ಅಥವಾ ಮೋಡಲ್ ಮಾರ್ಕ್ಅಪ್‌ನಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಾಗಿ ಸೇರಿಸಿ.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > ಲಾಂಚ್ ಮಾಡಲ್ </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> ಮಾದರಿ ಹೆಡರ್ </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> ಒಂದು ಉತ್ತಮ ದೇಹ... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > ಮುಚ್ಚು </a>
  11. <a href = "#" class = "btn btn-primary" > ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸಿ </a>
  12. </div>
  13. </div>
ತಲೆ ಎತ್ತಿ! ನಿಮ್ಮ ಮಾದರಿಯನ್ನು ಒಳಗೆ ಮತ್ತು ಹೊರಗೆ ಅನಿಮೇಟ್ ಮಾಡಲು ನೀವು ಬಯಸಿದರೆ .fade, ಅಂಶಕ್ಕೆ ವರ್ಗವನ್ನು ಸೇರಿಸಿ .modal(ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಲು ಡೆಮೊವನ್ನು ನೋಡಿ) ಮತ್ತು bootstrap-transition.js ಅನ್ನು ಸೇರಿಸಿ.

ವಿಧಾನಗಳು

.modal(ಆಯ್ಕೆಗಳು)

ನಿಮ್ಮ ವಿಷಯವನ್ನು ಮಾದರಿಯಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ object.

  1. $ ( '#myModal' ). ಮಾದರಿ ({
  2. ಕೀಬೋರ್ಡ್ : ತಪ್ಪು
  3. })

.modal('ಟಾಗಲ್')

ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

  1. $ ( '#myModal' ). ಮಾದರಿ ( 'ಟಾಗಲ್' )

.modal('ಶೋ')

ಹಸ್ತಚಾಲಿತವಾಗಿ ಒಂದು ಮಾದರಿಯನ್ನು ತೆರೆಯುತ್ತದೆ.

  1. $ ( '#myModal' ). ಮಾದರಿ ( 'ಶೋ' )

.modal('ಮರೆಮಾಡು')

ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮರೆಮಾಡುತ್ತದೆ.

  1. $ ( '#myModal' ). ಮಾದರಿ ( 'ಮರೆಮಾಡು' )

ಕಾರ್ಯಕ್ರಮಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮಾದರಿ ವರ್ಗವು ಮೋಡಲ್ ಕಾರ್ಯನಿರ್ವಹಣೆಗೆ ಕೊಂಡಿಯಾಗಿರಲು ಕೆಲವು ಘಟನೆಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

ಈವೆಂಟ್ ವಿವರಣೆ
ತೋರಿಸು showನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ತೋರಿಸಲಾಗಿದೆ ಮೋಡಲ್ ಅನ್ನು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
ಮರೆಮಾಡಿ hideನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆ ಮಾಡಿದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಮರೆಮಾಡಲಾಗಿದೆ ಬಳಕೆದಾರರಿಂದ ಮೋಡಲ್ ಅನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
  1. $ ( '#myModal' ). ಆನ್ ( 'ಗುಪ್ತ' , ಕಾರ್ಯ () {
  2. //ಏನಾದರೂ ಮಾಡು...
  3. })

ScrollSpy ಪ್ಲಗಿನ್ ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ NAV ಗುರಿಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸುತ್ತದೆ.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

scrollspy ಜೊತೆಗೆ ಉದಾಹರಣೆ navbar

ಕೆಳಗಿನ ಪ್ರದೇಶವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್ ನವೀಕರಣವನ್ನು ವೀಕ್ಷಿಸಿ. ಡ್ರಾಪ್‌ಡೌನ್ ಉಪ ಐಟಂಗಳನ್ನು ಹಾಗೆಯೇ ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ. ಪ್ರಯತ್ನಪಡು!

@ಕೊಬ್ಬು

ಜಾಹೀರಾತು ಲೆಗ್ಗಿಂಗ್ಸ್ ಕೀಟಾರ್, ಬ್ರಂಚ್ ಐಡಿ ಆರ್ಟ್ ಪಾರ್ಟಿ ಡೋಲರ್ ಲೇಬರ್. ಪಿಚ್‌ಫೋರ್ಕ್ yr enim lo-fi ಅವರು ಕ್ವಿಯನ್ನು ಮಾರಾಟ ಮಾಡುವ ಮೊದಲು. Tumblr ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್ ಬೈಸಿಕಲ್ ಹಕ್ಕುಗಳು ಏನೇ ಇರಲಿ. ಆನಿಮ್ ಕೆಫಿಯೆ ಕಾರ್ಲೆಸ್ ಕಾರ್ಡಿಜನ್. ವೆಲಿಟ್ ಸೀಟನ್ ಮೆಕ್ಸ್ವೀನಿ ಅವರ ಫೋಟೋ ಬೂತ್ 3 ತೋಳ ಚಂದ್ರ ಇರುರೆ. ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ ಲೋಮೋ ಜೀನ್ ಶಾರ್ಟ್ಸ್, ವಿಲಿಯಮ್ಸ್ಬರ್ಗ್ ಹೂಡಿ ಮಿನಿಮ್ ಕ್ವಿ ನೀವು ಬಹುಶಃ ಅವರ ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ ಮತ್ತು ಕಾರ್ಡಿಗನ್ ಟ್ರಸ್ಟ್ ಫಂಡ್ ಕಲ್ಪಾ ಬಯೋಡೀಸೆಲ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಸೌಂದರ್ಯ. ನಿಹಿಲ್ ಟ್ಯಾಟೂಡ್ ಆಕ್ಸಾಮಸ್, ಕ್ರೆಡ್ ಐರನಿ ಬಯೋಡೀಸೆಲ್ ಕೆಫಿಯೆಹ್ ಕುಶಲಕರ್ಮಿ ಉಲ್ಲಮ್ಕೊ ಪರಿಣಾಮ.

@mdo

ವೆನಿಯಮ್ ಮಾರ್ಫಾ ಮೀಸೆ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್, ಅಡಿಪಿಸಿಸಿಂಗ್ ಫ್ಯೂಜಿಯಾಟ್ ವೆಲಿಟ್ ಪಿಚ್‌ಫೋರ್ಕ್ ಗಡ್ಡ. ಫ್ರೀಗನ್ ಗಡ್ಡ ಅಲಿಕ್ವಾ ಕ್ಯುಪಿಡಾಟಟ್ ಮೆಕ್ಸ್ವೀನಿಸ್ ವೆರೋ. ಕ್ಯುಪಿಡಾಟತ್ ನಾಲ್ಕು ಲೋಕೊ ನಿಸಿ, ಈ ಹೆಲ್ವೆಟಿಕಾ ನುಲ್ಲಾ ಕಾರ್ಲೆಸ್. ಟ್ಯಾಟೂಡ್ ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ ಫುಡ್ ಟ್ರಕ್, ಮೆಕ್ಸ್ವೀನಿಯ ಕ್ವಿಸ್ ನಾನ್ ಫ್ರೀಗಾನ್ ವಿನೈಲ್. ಲೋ-ಫೈ ವೆಸ್ ಆಂಡರ್ಸನ್ +1 ಸಾರ್ಟೋರಿಯಲ್. ಕಾರ್ಲೆಸ್ ನಾನ್ ಎಸ್ತಟಿಕ್ ಎಕ್ಸರ್ಸಿಟೇಶನ್ ಕ್ವಿಸ್ ಜೆಂಟ್ರಿಫೈ. ಬ್ರೂಕ್ಲಿನ್ ಅಡಿಪಿಸಿಸಿಂಗ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ವೈಸ್ ಕೀಟಾರ್ ಡೆಸೆರಂಟ್.

ಒಂದು

ಒಕೆಕಾಟ್ ಕಮೊಡೊ ಅಲಿಕ್ವಾ ಡೆಲೆಕ್ಟಸ್. ಫ್ಯಾಪ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಡೆಸರ್ಂಟ್ ಸ್ಕೇಟ್ಬೋರ್ಡ್ ಇಎ. ಲೋಮೋ ಬೈಸಿಕಲ್ ರೈಟ್ಸ್ ಅಡಿಪಿಸಿಸಿಂಗ್ ಬಾನ್ ಮೈ, ವೆಲಿಟ್ ಇಎ ಸುಂಟ್ ನೆಕ್ಸ್ಟ್ ಲೆವೆಲ್ ಲೊಕಾವೋರ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ಇನ್ ಮ್ಯಾಗ್ನಾ ವೆನಿಯಮ್. ಹೈ ಲೈಫ್ ಐಡಿ ವಿನೈಲ್, ಎಕೋ ಪಾರ್ಕ್ ಕಾನ್ಸಿಕ್ವಾಟ್ ಕ್ವಿಸ್ ಅಲಿಕ್ವಿಪ್ ಬ್ಯಾನ್ ಮೈ ಪಿಚ್‌ಫೋರ್ಕ್. Vero VHS ಉತ್ತಮವಾಗಿದೆ. Consectetur Nisi 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.

three

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.

ಕೀಟಾರ್ ಟ್ವೀ ಬ್ಲಾಗ್, ಕಲ್ಪಾ ಮೆಸೆಂಜರ್ ಬ್ಯಾಗ್ ಮಾರ್ಫಾ ಯಾವುದೇ ಡೆಲೆಕ್ಟಸ್ ಫುಡ್ ಟ್ರಕ್. ಸಪಿಯೆಂಟೆ ಸಿಂಥ್ ಐಡಿ ಅಸ್ಸುಮೆಂಡಾ. ಲೊಕಾವೋರ್ ಸೆಡ್ ಹೆಲ್ವೆಟಿಕಾ ಕ್ಲೀಷೆ ಐರನಿ, ಥಂಡರ್‌ಕ್ಯಾಟ್ಸ್‌ಗಳನ್ನು ನೀವು ಬಹುಶಃ ಅವರ ಬಗ್ಗೆ ಕೇಳಿರದೇ ಇರುವ ಕಾರಣ ಹೂಡಿ ಗ್ಲುಟನ್-ಫ್ರೀ ಲೊ-ಫೈ ಫ್ಯಾಪ್ ಅಲಿಕ್ವಿಪ್. ಅವರು ಮಾರಾಟವಾಗುವ ಮೊದಲು ಲೇಬರ್ ಎಲಿಟ್ ಪ್ಲೇಸ್ಯಾಟ್, ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಪ್ರೊಡೆಂಟ್ ಬ್ರಂಚ್ ನೆಸ್ಸಿಯುಂಟ್ ಕ್ವಿಸ್ ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ ಪ್ಯಾರಿಯಾಟರ್ ಕೆಫಿಯೆಹ್ ಯುಟ್ ಹೆಲ್ವೆಟಿಕಾ ಆರ್ಟಿಸನ್. ಕಾರ್ಡಿಜನ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಸೀಟನ್ ರೆಡಿಮೇಡ್ ವೆಲಿಟ್. VHS ಚೇಂಬ್ರೆ ಲೇಬರ್ ಟೆಂಪೋರ್ ವೆನಿಯಮ್. ಆನಿಂ ಮೊಲ್ಲಿತ್ ಮಿನಿಮ್ ಕೊಮೊಡೊ ಉಲ್ಲಮ್ಕೊ ಥಂಡರ್‌ಕ್ಯಾಟ್ಸ್.


bootstrap-scrollspy.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ scrollspy ಗೆ ಕರೆ ಮಾಡಿ:

  1. $ ( '#navbar' ). scrollspy ()

ಮಾರ್ಕ್ಅಪ್

ನಿಮ್ಮ ಟಾಪ್‌ಬಾರ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ಸ್ಕ್ರಾಲ್‌ಸ್ಪಿ ನಡವಳಿಕೆಯನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಲು, data-spy="scroll"ನೀವು ಕಣ್ಣಿಡಲು ಬಯಸುವ ಅಂಶಕ್ಕೆ ಸೇರಿಸಿ (ಹೆಚ್ಚು ಸಾಮಾನ್ಯವಾಗಿ ಇದು ದೇಹವಾಗಿರುತ್ತದೆ).

  1. <body data-spy = "ಸ್ಕ್ರೋಲ್" > ... </body>
ತಲೆ ಎತ್ತಿ! Navbar ಲಿಂಕ್‌ಗಳು ಪರಿಹರಿಸಬಹುದಾದ ಐಡಿ ಗುರಿಗಳನ್ನು ಹೊಂದಿರಬೇಕು. ಉದಾಹರಣೆಗೆ, <a href="#home">home</a>ಡೊಮ್‌ನಲ್ಲಿರುವ ಯಾವುದನ್ನಾದರೂ ಹೊಂದಿರಬೇಕು <div id="home"></div>.

ವಿಧಾನಗಳು

.scrollspy('refresh')

DOM ನಿಂದ ಅಂಶಗಳನ್ನು ಸೇರಿಸುವ ಅಥವಾ ತೆಗೆದುಹಾಕುವುದರೊಂದಿಗೆ scrollspy ಅನ್ನು ಬಳಸುವಾಗ, ನೀವು ರಿಫ್ರೆಶ್ ವಿಧಾನವನ್ನು ಹೀಗೆ ಕರೆಯಬೇಕಾಗುತ್ತದೆ:

  1. $ ( '[data-spy="scroll"]' ). ಪ್ರತಿ ( ಕಾರ್ಯ () {
  2. var $spy = $ ( ಇದು ). scrollspy ( 'ರಿಫ್ರೆಶ್' )
  3. });

ಆಯ್ಕೆಗಳು

ಹೆಸರು ಮಾದರಿ ಪೂರ್ವನಿಯೋಜಿತ ವಿವರಣೆ
ಆಫ್ಸೆಟ್ ಸಂಖ್ಯೆ 10 ಸ್ಕ್ರಾಲ್‌ನ ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವಾಗ ಮೇಲಿನಿಂದ ಆಫ್‌ಸೆಟ್ ಮಾಡಲು ಪಿಕ್ಸೆಲ್‌ಗಳು.

ಕಾರ್ಯಕ್ರಮಗಳು

ಈವೆಂಟ್ ವಿವರಣೆ
ಸಕ್ರಿಯಗೊಳಿಸಿ ಸ್ಕ್ರೋಲ್‌ಸ್ಪೈ ಮೂಲಕ ಹೊಸ ಐಟಂ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗಲೆಲ್ಲಾ ಈ ಈವೆಂಟ್ ಫೈರ್ ಆಗುತ್ತದೆ.

ಈ ಪ್ಲಗಿನ್ ಸ್ಥಳೀಯ ವಿಷಯದ ಮೂಲಕ ಪರಿವರ್ತನೆಗಾಗಿ ತ್ವರಿತ, ಕ್ರಿಯಾತ್ಮಕ ಟ್ಯಾಬ್ ಮತ್ತು ಮಾತ್ರೆ ಕಾರ್ಯವನ್ನು ಸೇರಿಸುತ್ತದೆ.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಟ್ಯಾಬ್‌ಗಳು

ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳ ಮೂಲಕವೂ ಗುಪ್ತ ಫಲಕಗಳ ನಡುವೆ ಟಾಗಲ್ ಮಾಡಲು ಕೆಳಗಿನ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.

ರಾ ಡೆನಿಮ್ ಜೀನ್ ಶಾರ್ಟ್ಸ್ ಆಸ್ಟಿನ್ ಬಗ್ಗೆ ನೀವು ಬಹುಶಃ ಕೇಳಿಲ್ಲ. ನೆಸ್ಸಿಯುಂಟ್ ತೋಫು ಸ್ಟಂಪ್‌ಟೌನ್ ಅಲಿಕ್ವಾ, ರೆಟ್ರೊ ಸಿಂಥ್ ಮಾಸ್ಟರ್ ಕ್ಲೆನ್ಸ್. ಮೀಸೆ ಕ್ಲೀಚೆ ಟೆಂಪರ್, ವಿಲಿಯಮ್ಸ್ಬರ್ಗ್ ಕಾರ್ಲೆಸ್ ಸಸ್ಯಾಹಾರಿ ಹೆಲ್ವೆಟಿಕಾ. ರೆಪ್ರೆಹೆಂಡರಿಟ್ ಕಟುಕ ರೆಟ್ರೊ ಕೆಫಿಯೆಹ್ ಡ್ರೀಮ್‌ಕ್ಯಾಚರ್ ಸಿಂಥ್. ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ eu banh mi, qui irure ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಎಕ್ಸ್ ಸ್ಕ್ವಿಡ್. ಸಾಲ್ವಿಯಾ ಸಿಲಮ್ ಐಫೋನ್ ಅನ್ನು ಅಲಿಕ್ವಿಪ್ ಮಾಡಿ. ಸೀಟಾನ್ ಅಲಿಕ್ವಿಪ್ ಕ್ವಿಸ್ ಕಾರ್ಡಿಗನ್ ಅಮೇರಿಕನ್ ಉಡುಪು, ಬುತ್ಚೆರ್ ವೋಲ್ಪ್ಟೇಟ್ ನಿಸಿ ಕ್ವಿ.

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.


bootstrap-tab.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ (ಪ್ರತಿ ಟ್ಯಾಬ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುವ ಅಗತ್ಯವಿದೆ):

  1. $ ( '#myTab a' ). ಕ್ಲಿಕ್ ಮಾಡಿ ( ಕಾರ್ಯ ( ) {
  2. . ತಡೆಗಟ್ಟುವಿಕೆ ಡೀಫಾಲ್ಟ್ ();
  3. $ ( ಇದು ). ಟ್ಯಾಬ್ ( 'ಶೋ' );
  4. })

ನೀವು ಪ್ರತ್ಯೇಕ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಹಲವಾರು ರೀತಿಯಲ್ಲಿ ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು:

  1. $ ( '#myTab a[href="#profile"]' ). ಟ್ಯಾಬ್ ( 'ಶೋ' ); // ಹೆಸರಿನ ಮೂಲಕ ಟ್ಯಾಬ್ ಆಯ್ಕೆಮಾಡಿ
  2. $ ( '#myTab a:first' ). ಟ್ಯಾಬ್ ( 'ಶೋ' ); // ಮೊದಲ ಟ್ಯಾಬ್ ಆಯ್ಕೆಮಾಡಿ
  3. $ ( '#myTab a:last' ). ಟ್ಯಾಬ್ ( 'ಶೋ' ); // ಕೊನೆಯ ಟ್ಯಾಬ್ ಆಯ್ಕೆಮಾಡಿ
  4. $ ( '#myTab li:eq(2) a' ). ಟ್ಯಾಬ್ ( 'ಶೋ' ); // ಮೂರನೇ ಟ್ಯಾಬ್ ಆಯ್ಕೆಮಾಡಿ (0-ಸೂಚ್ಯಂಕ)

ಮಾರ್ಕ್ಅಪ್

data-toggle="tab"ಸರಳವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ ಅಥವಾ data-toggle="pill"ಅಂಶದ ಮೇಲೆ ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯದೆಯೇ ನೀವು ಟ್ಯಾಬ್ ಅಥವಾ ಮಾತ್ರೆ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು . navಟ್ಯಾಬ್‌ಗೆ ಮತ್ತು nav-tabsತರಗತಿಗಳನ್ನು ಸೇರಿಸುವುದರಿಂದ ulಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟ್ಯಾಬ್ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > ಮುಖಪುಟ </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > ಪ್ರೊಫೈಲ್ </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > ಸಂದೇಶಗಳು </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > ಸೆಟ್ಟಿಂಗ್‌ಗಳು </a></li>
  6. </ul>

ವಿಧಾನಗಳು

$().ಟ್ಯಾಬ್

ಟ್ಯಾಬ್ ಅಂಶ ಮತ್ತು ವಿಷಯ ಧಾರಕವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಟ್ಯಾಬ್ DOM ನಲ್ಲಿ ಕಂಟೈನರ್ ನೋಡ್ ಅನ್ನು ಗುರಿಯಾಗಿಸುವ data-targetಅಥವಾ ಹೊಂದಿರಬೇಕು.href

  1. <ul class = "nav nav- tabs" id = "myTab" >
  2. <li class = "ಸಕ್ರಿಯ" ><a href = "#ಮನೆ" > ಮನೆ </a></li>
  3. <li><a href = "#profile" > ಪ್ರೊಫೈಲ್ </a></li>
  4. <li><a href = "#messages" > ಸಂದೇಶಗಳು </a></li>
  5. <li><a href = "#settings" > ಸೆಟ್ಟಿಂಗ್‌ಗಳು </a></li>
  6. </ul>
  7.  
  8. <div class = "ಟ್ಯಾಬ್-ವಿಷಯ" >
  9. <div class = "tab-pane active" id = "ಹೋಮ್" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <ಸ್ಕ್ರಿಪ್ಟ್>
  16. $ ( ಕಾರ್ಯ () {
  17. $ ( '#myTab a:last' ). ಟ್ಯಾಬ್ ( 'ಶೋ' );
  18. })
  19. </script>

ಕಾರ್ಯಕ್ರಮಗಳು

ಈವೆಂಟ್ ವಿವರಣೆ
ತೋರಿಸು ಈ ಈವೆಂಟ್ ಟ್ಯಾಬ್ ಶೋನಲ್ಲಿ ಫೈರ್ ಆಗುತ್ತದೆ, ಆದರೆ ಹೊಸ ಟ್ಯಾಬ್ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು. ಕ್ರಮವಾಗಿ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಮತ್ತು ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ (ಲಭ್ಯವಿದ್ದಲ್ಲಿ) ಅನ್ನು ಬಳಸಿ event.targetಮತ್ತು ಗುರಿಪಡಿಸಲು.event.relatedTarget
ತೋರಿಸಲಾಗಿದೆ ಟ್ಯಾಬ್ ತೋರಿಸಿದ ನಂತರ ಈ ಈವೆಂಟ್ ಟ್ಯಾಬ್ ಶೋನಲ್ಲಿ ಫೈರ್ ಆಗುತ್ತದೆ. ಕ್ರಮವಾಗಿ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಮತ್ತು ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ (ಲಭ್ಯವಿದ್ದಲ್ಲಿ) ಅನ್ನು ಬಳಸಿ event.targetಮತ್ತು ಗುರಿಪಡಿಸಲು.event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). ಮೇಲೆ ( 'ತೋರಿಸಲಾಗಿದೆ' , ಕಾರ್ಯ ( ​​) {
  2. . ಗುರಿ // ಸಕ್ರಿಯ ಟ್ಯಾಬ್
  3. . ಸಂಬಂಧಿಸಿದ ಗುರಿ // ಹಿಂದಿನ ಟ್ಯಾಬ್
  4. })

ಟೂಲ್ಟಿಪ್ಸ್ ಬಗ್ಗೆ

ಜೇಸನ್ ಫ್ರೇಮ್ ಬರೆದ ಅತ್ಯುತ್ತಮ jQuery.tipsy ಪ್ಲಗಿನ್‌ನಿಂದ ಸ್ಫೂರ್ತಿ; ಟೂಲ್‌ಟಿಪ್‌ಗಳು ನವೀಕರಿಸಿದ ಆವೃತ್ತಿಯಾಗಿದ್ದು, ಇದು ಚಿತ್ರಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿಲ್ಲ, ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ css3 ಮತ್ತು ಸ್ಥಳೀಯ ಶೀರ್ಷಿಕೆ ಸಂಗ್ರಹಣೆಗಾಗಿ ಡೇಟಾ-ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುತ್ತದೆ.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಟೂಲ್ಟಿಪ್ಸ್ನ ಉದಾಹರಣೆ ಬಳಕೆ

ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ನೋಡಲು ಕೆಳಗಿನ ಲಿಂಕ್‌ಗಳ ಮೇಲೆ ಸುಳಿದಾಡಿ:

ಟೈಟ್ ಪ್ಯಾಂಟ್ ಮುಂದಿನ ಹಂತದ ಕೆಫಿಯೆಹ್ ನೀವು ಬಹುಶಃ ಅವರ ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ. ಫೋಟೋ ಬೂತ್ ಗಡ್ಡದ ಕಚ್ಚಾ ಡೆನಿಮ್ ಲೆಟರ್‌ಪ್ರೆಸ್ ಸಸ್ಯಾಹಾರಿ ಮೆಸೆಂಜರ್ ಬ್ಯಾಗ್ ಸ್ಟಂಪ್‌ಟೌನ್. ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್ ಸೀಟನ್, ಮೆಕ್ಸ್‌ವೀನಿಯ ಫಿಕ್ಸೀ ಸಮರ್ಥನೀಯ ಕ್ವಿನೋವಾ 8-ಬಿಟ್ ಅಮೇರಿಕನ್ ಉಡುಪುಗಳು ಟೆರ್ರಿ ರಿಚರ್ಡ್‌ಸನ್ ವಿನೈಲ್ ಚೇಂಬ್ರೇ ಅನ್ನು ಹೊಂದಿವೆ . ಬಿಯರ್ಡ್ ಸ್ಟಂಪ್‌ಟೌನ್, ಕಾರ್ಡಿಗನ್ಸ್ ಬಾನ್ ಮಿ ಲೊಮೊ ಥಂಡರ್‌ಕ್ಯಾಟ್ಸ್. ತೋಫು ಬಯೋಡೀಸೆಲ್ ವಿಲಿಯಮ್ಸ್‌ಬರ್ಗ್ ಮಾರ್ಫಾ, ಫೋರ್ ಲೋಕೋ ಮೆಕ್ಸ್‌ವೀನಿಯ ಕ್ಲೆನ್ಸ್ ಸಸ್ಯಾಹಾರಿ ಚಂಬ್ರೇ. ನಿಜವಾಗಿಯೂ ವ್ಯಂಗ್ಯಾತ್ಮಕ ಕುಶಲಕರ್ಮಿ ಯಾವುದೇ ಕೀಟಾರ್ , ಸೀನ್‌ಸ್ಟರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್ ಬ್ಯಾಂಕ್ಸಿ ಆಸ್ಟಿನ್ ಟ್ವಿಟರ್ ಹ್ಯಾಂಡಲ್ ಫ್ರೀಗಾನ್ ಕ್ರೆಡ್ ಕಚ್ಚಾ ಡೆನಿಮ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ವೈರಲ್.


bootstrap-tooltip.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಟ್ರಿಗರ್ ಮಾಡಿ:

  1. $ ( '#ಉದಾಹರಣೆ' ). ಟೂಲ್ಟಿಪ್ ( ಆಯ್ಕೆಗಳು )

ಆಯ್ಕೆಗಳು

ಹೆಸರು ಮಾದರಿ ಪೂರ್ವನಿಯೋಜಿತ ವಿವರಣೆ
ಅನಿಮೇಷನ್ ಬೂಲಿಯನ್ ನಿಜ ಟೂಲ್‌ಟಿಪ್‌ಗೆ css ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ
ನಿಯೋಜನೆ ಸ್ಟ್ರಿಂಗ್|ಕಾರ್ಯ 'ಟಾಪ್' ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೇಗೆ ಇರಿಸುವುದು - ಟಾಪ್ | ಕೆಳಗೆ | ಬಿಟ್ಟು | ಬಲ
ಆಯ್ಕೆಗಾರ ಸ್ಟ್ರಿಂಗ್ ಸುಳ್ಳು ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಒದಗಿಸಿದರೆ, ಟೂಲ್‌ಟಿಪ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಗುರಿಗಳಿಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ.
ಶೀರ್ಷಿಕೆ ದಾರ | ಕಾರ್ಯ '' `ಶೀರ್ಷಿಕೆ` ಟ್ಯಾಗ್ ಇಲ್ಲದಿದ್ದಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಶೀರ್ಷಿಕೆ ಮೌಲ್ಯ
ಪ್ರಚೋದಕ ಸ್ಟ್ರಿಂಗ್ 'ಹಾರಾಡುತ್ತಿರು' ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೇಗೆ ಟ್ರಿಗರ್ ಮಾಡಲಾಗಿದೆ - ಹೋವರ್ | ಗಮನ | ಕೈಪಿಡಿ
ವಿಳಂಬ ಸಂಖ್ಯೆ | ವಸ್ತು 0

ಟೂಲ್ಟಿಪ್ (ms) ಅನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ವಿಳಂಬ - ಹಸ್ತಚಾಲಿತ ಪ್ರಚೋದಕ ಪ್ರಕಾರಕ್ಕೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ

ಸಂಖ್ಯೆಯನ್ನು ಒದಗಿಸಿದರೆ, ಮರೆಮಾಡು/ತೋರಿಕೆ ಎರಡಕ್ಕೂ ವಿಳಂಬವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ

ವಸ್ತುವಿನ ರಚನೆ ಹೀಗಿದೆ:delay: { show: 500, hide: 100 }

ತಲೆ ಎತ್ತಿ! ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಬಳಕೆಯ ಮೂಲಕ ವೈಯಕ್ತಿಕ ಟೂಲ್‌ಟಿಪ್‌ಗಳ ಆಯ್ಕೆಗಳನ್ನು ಪರ್ಯಾಯವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ಮಾರ್ಕ್ಅಪ್

ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ, Tooltip ಮತ್ತು Popover ಡೇಟಾ-apis ಆಯ್ಕೆಮಾಡಲಾಗಿದೆ. ನೀವು ಅವುಗಳನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಕೇವಲ ಆಯ್ಕೆ ಆಯ್ಕೆಯನ್ನು ಸೂಚಿಸಿ.

  1. <a href = "#" rel = "tooltip" title = "ಮೊದಲ ಟೂಲ್‌ಟಿಪ್" > ನನ್ನ ಮೇಲೆ ಸುಳಿದಾಡಿ </a>

ವಿಧಾನಗಳು

$().ಟೂಲ್ಟಿಪ್(ಆಯ್ಕೆಗಳು)

ಎಲಿಮೆಂಟ್ ಸಂಗ್ರಹಕ್ಕೆ ಟೂಲ್‌ಟಿಪ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ.

.ಟೂಲ್ಟಿಪ್('ಶೋ')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

  1. $ ( '#ಅಂಶ' ). ಟೂಲ್ಟಿಪ್ ( 'ಶೋ' )

.ಟೂಲ್ಟಿಪ್('ಮರೆಮಾಡು')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ.

  1. $ ( '#ಅಂಶ' ). ಟೂಲ್ಟಿಪ್ ( 'ಮರೆಮಾಡು' )

.ಟೂಲ್ಟಿಪ್('ಟಾಗಲ್')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

  1. $ ( '#ಅಂಶ' ). ಟೂಲ್ಟಿಪ್ ( 'ಟಾಗಲ್' )

ಪಾಪೋವರ್ಸ್ ಬಗ್ಗೆ

ವಸತಿ ದ್ವಿತೀಯ ಮಾಹಿತಿಗಾಗಿ ಯಾವುದೇ ಅಂಶಕ್ಕೆ iPad ನಲ್ಲಿರುವಂತಹ ವಿಷಯದ ಸಣ್ಣ ಮೇಲ್ಪದರಗಳನ್ನು ಸೇರಿಸಿ.

* ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಹೋವರ್ ಪಾಪೋವರ್

ಪಾಪೋವರ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲು ಬಟನ್ ಮೇಲೆ ಸುಳಿದಾಡಿ.


bootstrap-popover.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಪಾಪೋವರ್ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

  1. $ ( '#ಉದಾಹರಣೆ' ). ಪಾಪೋವರ್ ( ಆಯ್ಕೆಗಳು )

ಆಯ್ಕೆಗಳು

ಹೆಸರು ಮಾದರಿ ಪೂರ್ವನಿಯೋಜಿತ ವಿವರಣೆ
ಅನಿಮೇಷನ್ ಬೂಲಿಯನ್ ನಿಜ ಟೂಲ್‌ಟಿಪ್‌ಗೆ css ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ
ನಿಯೋಜನೆ ಸ್ಟ್ರಿಂಗ್|ಕಾರ್ಯ 'ಬಲ' ಪಾಪೋವರ್ ಅನ್ನು ಹೇಗೆ ಇರಿಸುವುದು - ಟಾಪ್ | ಕೆಳಗೆ | ಬಿಟ್ಟು | ಬಲ
ಆಯ್ಕೆಗಾರ ಸ್ಟ್ರಿಂಗ್ ಸುಳ್ಳು ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಒದಗಿಸಿದರೆ, ಟೂಲ್‌ಟಿಪ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಗುರಿಗಳಿಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ
ಪ್ರಚೋದಕ ಸ್ಟ್ರಿಂಗ್ 'ಹಾರಾಡುತ್ತಿರು' ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೇಗೆ ಟ್ರಿಗರ್ ಮಾಡಲಾಗಿದೆ - ಹೋವರ್ | ಗಮನ | ಕೈಪಿಡಿ
ಶೀರ್ಷಿಕೆ ದಾರ | ಕಾರ್ಯ '' `ಶೀರ್ಷಿಕೆ` ಗುಣಲಕ್ಷಣವು ಇಲ್ಲದಿದ್ದಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಶೀರ್ಷಿಕೆ ಮೌಲ್ಯ
ವಿಷಯ ದಾರ | ಕಾರ್ಯ '' `ಡೇಟಾ-ಕಂಟೆಂಟ್` ಗುಣಲಕ್ಷಣ ಇಲ್ಲದಿದ್ದರೆ ಡಿಫಾಲ್ಟ್ ವಿಷಯ ಮೌಲ್ಯ
ವಿಳಂಬ ಸಂಖ್ಯೆ | ವಸ್ತು 0

popover (ms) ಅನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ವಿಳಂಬ - ಹಸ್ತಚಾಲಿತ ಪ್ರಚೋದಕ ಪ್ರಕಾರಕ್ಕೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ

ಸಂಖ್ಯೆಯನ್ನು ಒದಗಿಸಿದರೆ, ಮರೆಮಾಡು/ತೋರಿಕೆ ಎರಡಕ್ಕೂ ವಿಳಂಬವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ

ವಸ್ತುವಿನ ರಚನೆ ಹೀಗಿದೆ:delay: { show: 500, hide: 100 }

ತಲೆ ಎತ್ತಿ! ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಬಳಕೆಯ ಮೂಲಕ ವೈಯಕ್ತಿಕ ಪಾಪೋವರ್‌ಗಳ ಆಯ್ಕೆಗಳನ್ನು ಪರ್ಯಾಯವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ಮಾರ್ಕ್ಅಪ್

ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ, Tooltip ಮತ್ತು Popover ಡೇಟಾ-apis ಆಯ್ಕೆಮಾಡಲಾಗಿದೆ. ನೀವು ಅವುಗಳನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಕೇವಲ ಆಯ್ಕೆ ಆಯ್ಕೆಯನ್ನು ಸೂಚಿಸಿ.

ವಿಧಾನಗಳು

$().popover(ಆಯ್ಕೆಗಳು)

ಅಂಶ ಸಂಗ್ರಹಕ್ಕಾಗಿ ಪಾಪೋವರ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.

.popover('ಶೋ')

ಪಾಪೋವರ್ ಅಂಶಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

  1. $ ( '#ಅಂಶ' ). ಪಾಪೋವರ್ ( 'ಶೋ' )

.popover('ಮರೆಮಾಡು')

ಅಂಶಗಳ ಪಾಪೋವರ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ.

  1. $ ( '#ಅಂಶ' ). ಪಾಪೋವರ್ ( 'ಮರೆಮಾಡು' )

.popover('ಟಾಗಲ್')

ಅಂಶಗಳ ಪಾಪೋವರ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

  1. $ ( '#ಅಂಶ' ). ಪಾಪೋವರ್ ( 'ಟಾಗಲ್' )

ಎಚ್ಚರಿಕೆಗಳ ಬಗ್ಗೆ

ಎಚ್ಚರಿಕೆಯ ಪ್ಲಗಿನ್ ಎಚ್ಚರಿಕೆಗಳಿಗೆ ನಿಕಟ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಲು ಒಂದು ಚಿಕ್ಕ ವರ್ಗವಾಗಿದೆ.

ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಎಚ್ಚರಿಕೆಗಳು

ಎಚ್ಚರಿಕೆಗಳ ಪ್ಲಗಿನ್ ಸಾಮಾನ್ಯ ಎಚ್ಚರಿಕೆ ಸಂದೇಶಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಸಂದೇಶಗಳನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ.

ಪವಿತ್ರ ಗ್ವಾಕಮೋಲ್! ನೀವೇ ಪರಿಶೀಲಿಸಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ.

ಓಹ್ ಸ್ನ್ಯಾಪ್! ನೀವು ದೋಷವನ್ನು ಹೊಂದಿದ್ದೀರಿ!

ಇದನ್ನು ಮತ್ತು ಅದನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಿ. ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ಈಸ್ಟ್ ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ, ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್. ಕ್ರಾಸ್ ಮ್ಯಾಟಿಸ್ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಪುರುಸ್ ಸಿಟ್ ಅಮೆಟ್ ಫರ್ಮೆಂಟಮ್.

ಈ ಕ್ರಮ ಕೈಗೊಳ್ಳಿ ಅಥವಾ ಇದನ್ನು ಮಾಡಿ


bootstrap-alert.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಎಚ್ಚರಿಕೆಯ ವಜಾಗೊಳಿಸುವಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

  1. $ ( ".ಎಚ್ಚರಿಕೆ" ). ಎಚ್ಚರಿಕೆ ()

ಮಾರ್ಕ್ಅಪ್

data-dismiss="alert"ಎಚ್ಚರಿಕೆಯ ನಿಕಟ ಕಾರ್ಯವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನೀಡಲು ನಿಮ್ಮ ಕ್ಲೋಸ್ ಬಟನ್‌ಗೆ ಸೇರಿಸಿ .

  1. <a class = "close" data-dismiss = "ಎಚ್ಚರಿಕೆ" href = "#" > × </a>

ವಿಧಾನಗಳು

$().ಎಚ್ಚರಿಕೆ()

ನಿಕಟ ಕಾರ್ಯನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಎಲ್ಲಾ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಸುತ್ತುತ್ತದೆ. ಮುಚ್ಚಿದಾಗ ನಿಮ್ಮ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು, ಅವುಗಳಿಗೆ ಈಗಾಗಲೇ ಅನ್ವಯಿಸಲಾಗಿದೆ .fadeಮತ್ತು ವರ್ಗವನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ..in

ಎಚ್ಚರಿಕೆ ('ಮುಚ್ಚಿ')

ಎಚ್ಚರಿಕೆಯನ್ನು ಮುಚ್ಚುತ್ತದೆ.

  1. $ ( ".ಎಚ್ಚರಿಕೆ" ). ಎಚ್ಚರಿಕೆ ( 'ಮುಚ್ಚಿ' )

ಕಾರ್ಯಕ್ರಮಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಎಚ್ಚರಿಕೆಯ ವರ್ಗವು ಎಚ್ಚರಿಕೆಯ ಕಾರ್ಯಚಟುವಟಿಕೆಗೆ ಕೊಂಡಿಯಾಗಿರಲು ಕೆಲವು ಘಟನೆಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

ಈವೆಂಟ್ ವಿವರಣೆ
ಮುಚ್ಚಿ closeನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ಮುಚ್ಚಲಾಗಿದೆ ಎಚ್ಚರಿಕೆಯನ್ನು ಮುಚ್ಚಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
  1. $ ( '#ನನ್ನ-ಎಚ್ಚರಿಕೆ' ). ಬೈಂಡ್ ( 'ಮುಚ್ಚಿದ' , ಕಾರ್ಯ () {
  2. //ಏನಾದರೂ ಮಾಡು...
  3. })

ಬಗ್ಗೆ

ಬಟನ್‌ಗಳೊಂದಿಗೆ ಹೆಚ್ಚಿನದನ್ನು ಮಾಡಿ. ಟೂಲ್‌ಬಾರ್‌ಗಳಂತಹ ಹೆಚ್ಚಿನ ಘಟಕಗಳಿಗಾಗಿ ನಿಯಂತ್ರಣ ಬಟನ್ ಹೇಳುತ್ತದೆ ಅಥವಾ ಬಟನ್‌ಗಳ ಗುಂಪುಗಳನ್ನು ರಚಿಸಿ.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಬಳಕೆಗಳು

ರಾಜ್ಯಗಳು ಮತ್ತು ಟಾಗಲ್‌ಗಳಿಗಾಗಿ ಬಟನ್‌ಗಳ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿ.

ರಾಜ್ಯಪೂರ್ಣ
ಏಕ ಟಾಗಲ್
ಚೆಕ್ಬಾಕ್ಸ್
ರೇಡಿಯೋ

bootstrap-button.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಗುಂಡಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

  1. $ ( '.nav-tabs' ). ಬಟನ್ ()

ಮಾರ್ಕ್ಅಪ್

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಬಟನ್ ಪ್ಲಗಿನ್‌ಗೆ ಅವಿಭಾಜ್ಯವಾಗಿವೆ. ವಿವಿಧ ಮಾರ್ಕ್ಅಪ್ ಪ್ರಕಾರಗಳಿಗಾಗಿ ಕೆಳಗಿನ ಉದಾಹರಣೆ ಕೋಡ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ.

  1. <!-- ಒಂದೇ ಬಟನ್‌ನಲ್ಲಿ ಟಾಗಲ್ ಮಾಡುವುದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಡೇಟಾ-ಟಾಗಲ್ = "ಬಟನ್" ಸೇರಿಸಿ -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- btn-group --> ನಲ್ಲಿ ಚೆಕ್‌ಬಾಕ್ಸ್ ಶೈಲಿ ಟಾಗಲ್ ಮಾಡಲು ಡೇಟಾ-ಟಾಗಲ್ = "buttons-checkbox" ಸೇರಿಸಿ
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > ಎಡಕ್ಕೆ </button>
  7. <button class = "btn" > ಮಧ್ಯಮ </button>
  8. <button class = "btn" > ಬಲ </button>
  9. </div>
  10.  
  11. <!-- btn-group --> ನಲ್ಲಿ ರೇಡಿಯೋ ಶೈಲಿ ಟಾಗಲ್ ಮಾಡಲು ಡೇಟಾ-ಟಾಗಲ್ = "buttons-radio" ಸೇರಿಸಿ
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > ಎಡಕ್ಕೆ </button>
  14. <button class = "btn" > ಮಧ್ಯಮ </button>
  15. <button class = "btn" > ಬಲ </button>
  16. </div>

ವಿಧಾನಗಳು

$().ಬಟನ್('ಟಾಗಲ್')

ತಳ್ಳುವ ಸ್ಥಿತಿಯನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಬಟನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದ ನೋಟವನ್ನು ನೀಡುತ್ತದೆ.

ತಲೆ ಎತ್ತಿ! data-toggleಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಬಟನ್‌ನ ಸ್ವಯಂ ಟಾಗಲ್ ಮಾಡುವಿಕೆಯನ್ನು ನೀವು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು .
  1. <button class = "btn" data-toggle = "button" > </button>

$().ಬಟನ್('ಲೋಡ್ ಆಗುತ್ತಿದೆ')

ಬಟನ್ ಸ್ಥಿತಿಯನ್ನು ಲೋಡ್ ಮಾಡಲು ಹೊಂದಿಸುತ್ತದೆ - ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಪಠ್ಯವನ್ನು ಲೋಡ್ ಮಾಡಲು ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಬಟನ್ ಅಂಶದ ಮೇಲೆ ಪಠ್ಯವನ್ನು ಲೋಡ್ ಮಾಡುವುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು data-loading-text.

  1. <button class = "btn" data-loading-text = "ಸಾಮಾನುಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ..." > ... </button>
ತಲೆ ಎತ್ತಿ! ಫೈರ್‌ಫಾಕ್ಸ್ ಪುಟದ ಲೋಡ್‌ಗಳಾದ್ಯಂತ ನಿಷ್ಕ್ರಿಯಗೊಂಡ ಸ್ಥಿತಿಯನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ . ಇದಕ್ಕಾಗಿ ಒಂದು ಪರಿಹಾರವನ್ನು ಬಳಸುವುದು autocomplete="off".

$().ಬಟನ್('ರೀಸೆಟ್')

ಬಟನ್ ಸ್ಥಿತಿಯನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ - ಪಠ್ಯವನ್ನು ಮೂಲ ಪಠ್ಯಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ.

$().ಬಟನ್(ಸ್ಟ್ರಿಂಗ್)

ಬಟನ್ ಸ್ಥಿತಿಯನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ - ಯಾವುದೇ ಡೇಟಾ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಪಠ್ಯ ಸ್ಥಿತಿಗೆ ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.

  1. <button class = "btn" data-complete-text = "ಮುಗಿದಿದೆ!" > ... </button>
  2. <ಸ್ಕ್ರಿಪ್ಟ್>
  3. $ ( '.btn' ). ಬಟನ್ ( 'ಸಂಪೂರ್ಣ' )
  4. </script>

ಬಗ್ಗೆ

ಅಕಾರ್ಡಿಯನ್ಸ್ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್‌ನಂತಹ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಘಟಕಗಳಿಗೆ ಮೂಲ ಶೈಲಿಗಳು ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಬೆಂಬಲವನ್ನು ಪಡೆಯಿರಿ.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

* ಪರಿವರ್ತನೆಗಳ ಪ್ಲಗಿನ್ ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ.

ಉದಾಹರಣೆ ಅಕಾರ್ಡಿಯನ್

ಕುಸಿತದ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು, ನಾವು ಸರಳವಾದ ಅಕಾರ್ಡಿಯನ್ ಶೈಲಿಯ ವಿಜೆಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇವೆ:

ಅನಿಮ್ ಪ್ಯಾರಿಯಾಟುರ್ ಕ್ಲೀಷೆ ರಿಪ್ರೆಹೆಂಡರಿಟ್, ಎನಿಮ್ ಐಯುಸ್ಮೋಡ್ ಹೈ ಲೈಫ್ ಆಕ್ಯುಸಾಮಸ್ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಆಡ್ ಸ್ಕ್ವಿಡ್. 3 ವುಲ್ಫ್ ಮೂನ್ ಅಫಿಷಿಯಾ ಆಟಿ, ನಾನ್ ಕ್ಯುಪಿಡಾಟ್ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್ ಡೋಲರ್ ಬ್ರಂಚ್. ಫುಡ್ ಟ್ರಕ್ ಕ್ವಿನೋವಾ ನೆಸ್ಸಿಯಂಟ್ ಲೇಬರ್ ಐಯುಸ್ಮೋಡ್. ಬ್ರಂಚ್ 3 ವುಲ್ಫ್ ಮೂನ್ ಟೆಂಪೋರ್, ಸನ್ಟ್ ಅಲಿಕ್ವಾ ಅದರ ಮೇಲೆ ಪಕ್ಷಿಯನ್ನು ಹಾಕಿದೆ ಸ್ಕ್ವಿಡ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ನುಲ್ಲಾ ಅಸ್ಸುಮೆಂಡಾ ಶೋರೆಡಿಚ್ ಎಟ್. ನಿಹಿಲ್ ಅನಿಮ್ ಕೆಫಿಯೆಹ್ ಹೆಲ್ವೆಟಿಕಾ, ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಲೇಬರ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಕ್ರೆಡ್ ನೆಸ್ಸಿಯುಂಟ್ ಸಪಿಯೆಂಟೆ ಇಎ ಪ್ರೊಡೆಂಟ್. ಜಾಹೀರಾತು ಸಸ್ಯಾಹಾರಿ ಎಕ್ಸೆಪ್ಯೂರ್ ಬುತ್ಚೆರ್ ವೈಸ್ ಲೊಮೊ. ಲೆಗ್ಗಿಂಗ್ಸ್ occaecat ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್, ಕಚ್ಚಾ ಡೆನಿಮ್ ಸೌಂದರ್ಯದ ಸಿಂಥ್ ನೆಸ್ಸಿಯಂಟ್ ನೀವು ಬಹುಶಃ ಅವುಗಳನ್ನು ಆಕ್ಯುಸಾಮಸ್ ಲೇಬರ್ ಸುಸ್ಥಿರ VHS ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ.
ಅನಿಮ್ ಪ್ಯಾರಿಯಾಟುರ್ ಕ್ಲೀಷೆ ರಿಪ್ರೆಹೆಂಡರಿಟ್, ಎನಿಮ್ ಐಯುಸ್ಮೋಡ್ ಹೈ ಲೈಫ್ ಆಕ್ಯುಸಾಮಸ್ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಆಡ್ ಸ್ಕ್ವಿಡ್. 3 ವುಲ್ಫ್ ಮೂನ್ ಅಫಿಷಿಯಾ ಆಟಿ, ನಾನ್ ಕ್ಯುಪಿಡಾಟ್ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್ ಡೋಲರ್ ಬ್ರಂಚ್. ಫುಡ್ ಟ್ರಕ್ ಕ್ವಿನೋವಾ ನೆಸ್ಸಿಯಂಟ್ ಲೇಬರ್ ಐಯುಸ್ಮೋಡ್. ಬ್ರಂಚ್ 3 ವುಲ್ಫ್ ಮೂನ್ ಟೆಂಪೋರ್, ಸನ್ಟ್ ಅಲಿಕ್ವಾ ಅದರ ಮೇಲೆ ಪಕ್ಷಿಯನ್ನು ಹಾಕಿದೆ ಸ್ಕ್ವಿಡ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ನುಲ್ಲಾ ಅಸ್ಸುಮೆಂಡಾ ಶೋರೆಡಿಚ್ ಎಟ್. ನಿಹಿಲ್ ಅನಿಮ್ ಕೆಫಿಯೆಹ್ ಹೆಲ್ವೆಟಿಕಾ, ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಲೇಬರ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಕ್ರೆಡ್ ನೆಸ್ಸಿಯುಂಟ್ ಸಪಿಯೆಂಟೆ ಇಎ ಪ್ರೊಡೆಂಟ್. ಜಾಹೀರಾತು ಸಸ್ಯಾಹಾರಿ ಎಕ್ಸೆಪ್ಯೂರ್ ಬುತ್ಚೆರ್ ವೈಸ್ ಲೊಮೊ. ಲೆಗ್ಗಿಂಗ್ಸ್ occaecat ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್, ಕಚ್ಚಾ ಡೆನಿಮ್ ಸೌಂದರ್ಯದ ಸಿಂಥ್ ನೆಸ್ಸಿಯಂಟ್ ನೀವು ಬಹುಶಃ ಅವುಗಳನ್ನು ಆಕ್ಯುಸಾಮಸ್ ಲೇಬರ್ ಸುಸ್ಥಿರ VHS ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ.
ಅನಿಮ್ ಪ್ಯಾರಿಯಾಟುರ್ ಕ್ಲೀಷೆ ರಿಪ್ರೆಹೆಂಡರಿಟ್, ಎನಿಮ್ ಐಯುಸ್ಮೋಡ್ ಹೈ ಲೈಫ್ ಆಕ್ಯುಸಾಮಸ್ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಆಡ್ ಸ್ಕ್ವಿಡ್. 3 ವುಲ್ಫ್ ಮೂನ್ ಅಫಿಷಿಯಾ ಆಟಿ, ನಾನ್ ಕ್ಯುಪಿಡಾಟ್ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್ ಡೋಲರ್ ಬ್ರಂಚ್. ಫುಡ್ ಟ್ರಕ್ ಕ್ವಿನೋವಾ ನೆಸ್ಸಿಯಂಟ್ ಲೇಬರ್ ಐಯುಸ್ಮೋಡ್. ಬ್ರಂಚ್ 3 ವುಲ್ಫ್ ಮೂನ್ ಟೆಂಪೋರ್, ಸನ್ಟ್ ಅಲಿಕ್ವಾ ಅದರ ಮೇಲೆ ಪಕ್ಷಿಯನ್ನು ಹಾಕಿದೆ ಸ್ಕ್ವಿಡ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ನುಲ್ಲಾ ಅಸ್ಸುಮೆಂಡಾ ಶೋರೆಡಿಚ್ ಎಟ್. ನಿಹಿಲ್ ಅನಿಮ್ ಕೆಫಿಯೆಹ್ ಹೆಲ್ವೆಟಿಕಾ, ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಲೇಬರ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಕ್ರೆಡ್ ನೆಸ್ಸಿಯುಂಟ್ ಸಪಿಯೆಂಟೆ ಇಎ ಪ್ರೊಡೆಂಟ್. ಜಾಹೀರಾತು ಸಸ್ಯಾಹಾರಿ ಎಕ್ಸೆಪ್ಯೂರ್ ಬುತ್ಚೆರ್ ವೈಸ್ ಲೊಮೊ. ಲೆಗ್ಗಿಂಗ್ಸ್ occaecat ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್, ಕಚ್ಚಾ ಡೆನಿಮ್ ಸೌಂದರ್ಯದ ಸಿಂಥ್ ನೆಸ್ಸಿಯಂಟ್ ನೀವು ಬಹುಶಃ ಅವುಗಳನ್ನು ಆಕ್ಯುಸಾಮಸ್ ಲೇಬರ್ ಸುಸ್ಥಿರ VHS ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ.

bootstrap-collapse.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಸಕ್ರಿಯಗೊಳಿಸಿ:

  1. $ ( ".ಕುಸಿತ" ). ಕುಸಿತ ()

ಆಯ್ಕೆಗಳು

ಹೆಸರು ಮಾದರಿ ಪೂರ್ವನಿಯೋಜಿತ ವಿವರಣೆ
ಪೋಷಕ ಆಯ್ಕೆಗಾರ ಸುಳ್ಳು ಸೆಲೆಕ್ಟರ್ ಆಗಿದ್ದರೆ, ಈ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಐಟಂ ಅನ್ನು ತೋರಿಸಿದಾಗ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಪೋಷಕರ ಅಡಿಯಲ್ಲಿ ಎಲ್ಲಾ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶಗಳನ್ನು ಮುಚ್ಚಲಾಗುತ್ತದೆ. (ಸಾಂಪ್ರದಾಯಿಕ ಅಕಾರ್ಡಿಯನ್ ನಡವಳಿಕೆಯನ್ನು ಹೋಲುತ್ತದೆ)
ಟಾಗಲ್ ಬೂಲಿಯನ್ ನಿಜ ಆಹ್ವಾನದಲ್ಲಿ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ

ಮಾರ್ಕ್ಅಪ್

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶದ ನಿಯಂತ್ರಣವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿಯೋಜಿಸಲು ಕೇವಲ ಸೇರಿಸಿ data-toggle="collapse"ಮತ್ತು ಅಂಶಕ್ಕೆ ಎ. ಕುಸಿತವನ್ನು ಅನ್ವಯಿಸಲು ಗುಣಲಕ್ಷಣವು css ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ data-target. ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶಕ್ಕೆ data-targetವರ್ಗವನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ . collapseನೀವು ಅದನ್ನು ಡಿಫಾಲ್ಟ್ ಆಗಿ ತೆರೆಯಲು ಬಯಸಿದರೆ, ಹೆಚ್ಚುವರಿ ವರ್ಗವನ್ನು ಸೇರಿಸಿ in.

  1. <button class = "btn btn-danger" data- toggle = "collapse" data-target = "#demo" >
  2. ಸರಳ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
ತಲೆ ಎತ್ತಿ! ಅಕಾರ್ಡಿಯನ್ ತರಹದ ಗುಂಪು ನಿರ್ವಹಣೆಯನ್ನು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ನಿಯಂತ್ರಣಕ್ಕೆ ಸೇರಿಸಲು, ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ data-parent="#selector". ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಲು ಡೆಮೊವನ್ನು ನೋಡಿ.

ವಿಧಾನಗಳು

.collapse(ಆಯ್ಕೆಗಳು)

ನಿಮ್ಮ ವಿಷಯವನ್ನು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ object.

  1. $ ( '#myCollapsible' ). ಕುಸಿಯಲು ({
  2. ಟಾಗಲ್ : ಸುಳ್ಳು
  3. })

.collapse('ಟಾಗಲ್')

ತೋರಿಸಲು ಅಥವಾ ಮರೆಮಾಡಲು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

.collapse('ಶೋ')

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ತೋರಿಸುತ್ತದೆ.

.collapse('ಮರೆಮಾಡು')

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಮರೆಮಾಡುತ್ತದೆ.

ಕಾರ್ಯಕ್ರಮಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕುಸಿತದ ವರ್ಗವು ಕುಸಿತದ ಕಾರ್ಯಚಟುವಟಿಕೆಗೆ ಕೊಂಡಿಯಾಗಿರುವುದಕ್ಕಾಗಿ ಕೆಲವು ಘಟನೆಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

ಈವೆಂಟ್ ವಿವರಣೆ
ತೋರಿಸು showನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ತೋರಿಸಲಾಗಿದೆ ಕುಸಿತದ ಅಂಶವು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
ಮರೆಮಾಡಿ hideವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಮರೆಮಾಡಲಾಗಿದೆ ಬಳಕೆದಾರರಿಂದ ಕುಸಿತದ ಅಂಶವನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
  1. $ ( '#myCollapsible' ). ಆನ್ ( 'ಗುಪ್ತ' , ಕಾರ್ಯ () {
  2. //ಏನಾದರೂ ಮಾಡು...
  3. })

ಬಗ್ಗೆ

ಯಾವುದೇ ಫಾರ್ಮ್ ಪಠ್ಯ ಇನ್‌ಪುಟ್‌ನೊಂದಿಗೆ ಸೊಗಸಾದ ಟೈಪ್‌ಹೆಡ್‌ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಲು ಮೂಲಭೂತ, ಸುಲಭವಾಗಿ ವಿಸ್ತರಿಸಲಾದ ಪ್ಲಗಿನ್.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ

ಟೈಪ್‌ಹೆಡ್ ಫಲಿತಾಂಶಗಳನ್ನು ತೋರಿಸಲು ಕೆಳಗಿನ ಕ್ಷೇತ್ರದಲ್ಲಿ ಟೈಪ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿ.


bootstrap-typeahead.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಟೈಪ್‌ಹೆಡ್‌ಗೆ ಕರೆ ಮಾಡಿ:

  1. $ ( '.typeahead' ). ಟೈಪ್‌ಹೆಡ್ ()

ಆಯ್ಕೆಗಳು

ಹೆಸರು ಮಾದರಿ ಪೂರ್ವನಿಯೋಜಿತ ವಿವರಣೆ
ಮೂಲ ಶ್ರೇಣಿ [ ] ಪ್ರಶ್ನಿಸಲು ಡೇಟಾ ಮೂಲ.
ವಸ್ತುಗಳು ಸಂಖ್ಯೆ 8 ಡ್ರಾಪ್‌ಡೌನ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಗರಿಷ್ಠ ಸಂಖ್ಯೆಯ ಐಟಂಗಳು.
ಹೊಂದಾಣಿಕೆಗಾರ ಕಾರ್ಯ ಕೇಸ್ ಸೂಕ್ಷ್ಮವಲ್ಲದ ಪ್ರಶ್ನೆಯು ಐಟಂಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು ಬಳಸುವ ವಿಧಾನ. ಒಂದೇ ವಾದವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ, ಅದರ itemವಿರುದ್ಧ ಪ್ರಶ್ನೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು. ಇದರೊಂದಿಗೆ ಪ್ರಸ್ತುತ ಪ್ರಶ್ನೆಯನ್ನು ಪ್ರವೇಶಿಸಿ this.query. trueಪ್ರಶ್ನೆಯು ಹೊಂದಾಣಿಕೆಯಾಗಿದ್ದರೆ ಬೂಲಿಯನ್ ಹಿಂತಿರುಗಿ .
ವಿಂಗಡಿಸುವ ಕಾರ್ಯ ನಿಖರ ಹೊಂದಾಣಿಕೆ,
ಕೇಸ್ ಸೆನ್ಸಿಟಿವ್, ಕೇಸ್
ಸೆನ್ಸಿಟಿವ್
ಸ್ವಯಂಪೂರ್ಣ ಫಲಿತಾಂಶಗಳನ್ನು ವಿಂಗಡಿಸಲು ಬಳಸುವ ವಿಧಾನ. ಒಂದೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ itemsಮತ್ತು ಟೈಪ್‌ಹೆಡ್ ನಿದರ್ಶನದ ವ್ಯಾಪ್ತಿಯನ್ನು ಹೊಂದಿದೆ. ನೊಂದಿಗೆ ಪ್ರಸ್ತುತ ಪ್ರಶ್ನೆಯನ್ನು ಉಲ್ಲೇಖಿಸಿ this.query.
ಹೈಲೈಟರ್ ಕಾರ್ಯ ಎಲ್ಲಾ ಡೀಫಾಲ್ಟ್ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ ಸ್ವಯಂಪೂರ್ಣತೆಯ ಫಲಿತಾಂಶಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಬಳಸುವ ವಿಧಾನ. ಒಂದೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ itemಮತ್ತು ಟೈಪ್‌ಹೆಡ್ ನಿದರ್ಶನದ ವ್ಯಾಪ್ತಿಯನ್ನು ಹೊಂದಿದೆ. html ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು.

ಮಾರ್ಕ್ಅಪ್

ಟೈಪ್‌ಹೆಡ್ ಕಾರ್ಯನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಅಂಶವನ್ನು ನೋಂದಾಯಿಸಲು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೇರಿಸಿ.

  1. <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ಡೇಟಾ- provide = "ಟೈಪ್ಹೆಡ್" >

ವಿಧಾನಗಳು

.typeahead(ಆಯ್ಕೆಗಳು)

ಟೈಪ್‌ಹೆಡ್‌ನೊಂದಿಗೆ ಇನ್‌ಪುಟ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.