ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

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

ವೈಯಕ್ತಿಕ ಅಥವಾ ಸಂಕಲನ

ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸೇರಿಸಿಕೊಳ್ಳಬಹುದು (ಕೆಲವು ಅವಲಂಬನೆಗಳನ್ನು ಹೊಂದಿದ್ದರೂ), ಅಥವಾ ಎಲ್ಲವನ್ನೂ ಒಂದೇ ಬಾರಿಗೆ ಸೇರಿಸಬಹುದು. bootstrap.js ಮತ್ತು bootstrap.min.js ಎರಡೂ ಒಂದೇ ಫೈಲ್‌ನಲ್ಲಿ ಎಲ್ಲಾ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಒಂದೇ ಸಾಲನ್ನು ಬರೆಯದೆಯೇ ನೀವು ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಮಾರ್ಕ್‌ಅಪ್ API ಮೂಲಕ ಸಂಪೂರ್ಣವಾಗಿ ಬಳಸಬಹುದು. ಇದು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೊದಲ ದರ್ಜೆಯ API ಆಗಿದೆ ಮತ್ತು ಪ್ಲಗಿನ್ ಬಳಸುವಾಗ ನಿಮ್ಮ ಮೊದಲ ಪರಿಗಣನೆಯಾಗಿರಬೇಕು.

ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಈ ಕಾರ್ಯವನ್ನು ಆಫ್ ಮಾಡಲು ಅಪೇಕ್ಷಣೀಯವಾಗಬಹುದು ಎಂದು ಅದು ಹೇಳಿದೆ. ಆದ್ದರಿಂದ, `'data-api'` ನೊಂದಿಗೆ ದೇಹದ ಹೆಸರಿನಲ್ಲಿರುವ ಎಲ್ಲಾ ಈವೆಂಟ್‌ಗಳನ್ನು ಅನ್‌ಬೈಂಡ್ ಮಾಡುವ ಮೂಲಕ ಡೇಟಾ ಗುಣಲಕ್ಷಣ API ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ನಾವು ಒದಗಿಸುತ್ತೇವೆ. ಇದು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

  1. $ ( 'ದೇಹ' ). ಆಫ್ ( '.data-api' )

ಪರ್ಯಾಯವಾಗಿ, ನಿರ್ದಿಷ್ಟ ಪ್ಲಗಿನ್ ಅನ್ನು ಗುರಿಯಾಗಿಸಲು, ಈ ರೀತಿಯ ಡೇಟಾ-ಎಪಿಐ ನೇಮ್‌ಸ್ಪೇಸ್ ಜೊತೆಗೆ ಪ್ಲಗಿನ್‌ನ ಹೆಸರನ್ನು ನೇಮ್‌ಸ್ಪೇಸ್‌ನಂತೆ ಸೇರಿಸಿ:

  1. $ ( 'ದೇಹ' ). ಆಫ್ ( '.alert.data-api' )

ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ API

JavaScript API ಮೂಲಕ ನೀವು ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬಳಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಎಂದು ನಾವು ನಂಬುತ್ತೇವೆ. ಎಲ್ಲಾ ಸಾರ್ವಜನಿಕ API ಗಳು ಏಕ, ಚೈನ್ ಮಾಡಬಹುದಾದ ವಿಧಾನಗಳು ಮತ್ತು ಕ್ರಿಯೆಯ ಮೇಲೆ ಸಂಗ್ರಹಣೆಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

  1. $ ( ".btn.danger" ). ಬಟನ್ ( "ಟಾಗಲ್" ). addClass ( "ಕೊಬ್ಬು" )

ಎಲ್ಲಾ ವಿಧಾನಗಳು ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸಬೇಕು, ನಿರ್ದಿಷ್ಟ ವಿಧಾನವನ್ನು ಗುರಿಯಾಗಿಸುವ ಸ್ಟ್ರಿಂಗ್ ಅಥವಾ ಯಾವುದನ್ನೂ (ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯೊಂದಿಗೆ ಪ್ಲಗಿನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ):

  1. $ ( "#myModal" ). ಮಾದರಿ () // ಡೀಫಾಲ್ಟ್‌ಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲಾಗಿದೆ
  2. $ ( "#myModal" ). ಮಾದರಿ ({ ಕೀಬೋರ್ಡ್ : ತಪ್ಪು }) // ಯಾವುದೇ ಕೀಬೋರ್ಡ್ ಇಲ್ಲದೆ ಪ್ರಾರಂಭಿಸಲಾಗಿದೆ
  3. $ ( "#myModal" ). ಮೋಡಲ್ ( 'ಶೋ' ) // ಪ್ರದರ್ಶನವನ್ನು ತಕ್ಷಣವೇ ಪ್ರಾರಂಭಿಸುತ್ತದೆ ಮತ್ತು ಆಹ್ವಾನಿಸುತ್ತದೆ

ಪ್ರತಿಯೊಂದು ಪ್ಲಗಿನ್ ತನ್ನ ಕಚ್ಚಾ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್ ಅನ್ನು `ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್' ಆಸ್ತಿಯಲ್ಲಿ ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ: $.fn.popover.Constructor. ನೀವು ನಿರ್ದಿಷ್ಟ ಪ್ಲಗಿನ್ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ಬಯಸಿದರೆ, ಅದನ್ನು ನೇರವಾಗಿ ಅಂಶದಿಂದ ಹಿಂಪಡೆಯಿರಿ: $('[rel=popover]').data('popover').

ಸಂಘರ್ಷವಿಲ್ಲ

ಕೆಲವೊಮ್ಮೆ ಇತರ UI ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಬಳಸುವುದು ಅಗತ್ಯವಾಗಿರುತ್ತದೆ. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೇಮ್‌ಸ್ಪೇಸ್ ಘರ್ಷಣೆಗಳು ಸಾಂದರ್ಭಿಕವಾಗಿ ಸಂಭವಿಸಬಹುದು. ಇದು ಸಂಭವಿಸಿದಲ್ಲಿ, ನೀವು .noConflictಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಲು ಬಯಸುವ ಪ್ಲಗಿನ್‌ಗೆ ನೀವು ಕರೆ ಮಾಡಬಹುದು.

  1. var bootstrapButton = $ . ಎಫ್ಎನ್ _ ಬಟನ್ . noConflict () // ಹಿಂದೆ ನಿಗದಿಪಡಿಸಿದ ಮೌಲ್ಯಕ್ಕೆ $.fn.button ಹಿಂತಿರುಗಿ
  2. $ _ ಎಫ್ಎನ್ _ bootstrapBtn = bootstrapButton // $().bootstrapBtn ಬೂಟ್‌ಸ್ಟ್ರಾಪ್ ಕಾರ್ಯವನ್ನು ನೀಡಿ

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಹೆಚ್ಚಿನ ಪ್ಲಗಿನ್‌ನ ವಿಶಿಷ್ಟ ಕ್ರಿಯೆಗಳಿಗೆ ಕಸ್ಟಮ್ ಈವೆಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯವಾಗಿ, ಇವುಗಳು ಇನ್ಫಿನಿಟಿವ್ ಮತ್ತು ಪಾಸ್ಟ್ ಪಾರ್ಟಿಸಿಪಲ್ ರೂಪದಲ್ಲಿ ಬರುತ್ತವೆ - ಅಲ್ಲಿ ಇನ್ಫಿನಿಟಿವ್ (ಉದಾ. show) ಈವೆಂಟ್‌ನ ಪ್ರಾರಂಭದಲ್ಲಿ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತದೆ ಮತ್ತು ಅದರ ಭೂತಕಾಲದ ರೂಪ (ಉದಾ. shown) ಕ್ರಿಯೆಯ ಪೂರ್ಣಗೊಂಡ ಮೇಲೆ ಪ್ರಚೋದಕವಾಗಿರುತ್ತದೆ.

ಎಲ್ಲಾ ಇನ್ಫಿನಿಟಿವ್ ಈವೆಂಟ್‌ಗಳು ಡೀಫಾಲ್ಟ್ ಕಾರ್ಯವನ್ನು ತಡೆಗಟ್ಟುತ್ತವೆ. ಇದು ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು ಕ್ರಿಯೆಯ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆಯನ್ನು ನಿಲ್ಲಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ.

  1. $ ( '#myModal' ). ರಂದು ( 'ಶೋ' , ಕಾರ್ಯ ( ​​) {
  2. ವೇಳೆ (! ಡೇಟಾ ) ಹಿಂತಿರುಗಿ . ತಡೆಗಟ್ಟುವ ಡೀಫಾಲ್ಟ್ () // ಮಾದರಿಯನ್ನು ತೋರಿಸುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ
  3. })

ಪರಿವರ್ತನೆಗಳ ಬಗ್ಗೆ

ಸರಳ ಪರಿವರ್ತನೆಯ ಪರಿಣಾಮಗಳಿಗಾಗಿ, ಇತರ JS ಫೈಲ್‌ಗಳ ಜೊತೆಗೆ ಒಮ್ಮೆ bootstrap-transition.js ಅನ್ನು ಸೇರಿಸಿ. ನೀವು ಕಂಪೈಲ್ ಮಾಡಿದ (ಅಥವಾ minified) bootstrap.js ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ , ಇದನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ-ಇದು ಈಗಾಗಲೇ ಇದೆ.

ಪ್ರಕರಣಗಳನ್ನು ಬಳಸಿ

ಪರಿವರ್ತನೆ ಪ್ಲಗಿನ್‌ನ ಕೆಲವು ಉದಾಹರಣೆಗಳು:

  • ಮಾದರಿಗಳಲ್ಲಿ ಸ್ಲೈಡಿಂಗ್ ಅಥವಾ ಮರೆಯಾಗುವುದು
  • ಟ್ಯಾಬ್‌ಗಳು ಮರೆಯಾಗುತ್ತಿವೆ
  • ಮರೆಯಾಗುತ್ತಿರುವ ಎಚ್ಚರಿಕೆಗಳು
  • ಸ್ಲೈಡಿಂಗ್ ಏರಿಳಿಕೆ ಫಲಕಗಳು

ಉದಾಹರಣೆಗಳು

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

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

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

  1. <div class = "ಮೋಡಲ್ ಹೈಡ್ ಫೇಡ್" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </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" > ಮುಚ್ಚು </a>
  11. <a href = "#" class = "btn btn-primary" > ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸಿ </a>
  12. </div>
  13. </div>

ಲೈವ್ ಡೆಮೊ

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

  1. <!-- ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸಲು ಬಟನ್ -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > ಡೆಮೊ ಮಾದರಿಯನ್ನು ಪ್ರಾರಂಭಿಸಿ </a>
  3.  
  4. <!-- ಮಾದರಿ -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > ಮೋಡಲ್ ಹೆಡರ್ </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> ಒಂದು ಉತ್ತಮ ದೇಹ... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > ಮುಚ್ಚು </button>
  15. <button class = "btn btn-primary" > ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸಿ </button>
  16. </div>
  17. </div>

ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

JavaScript ಬರೆಯದೆಯೇ ಮಾದರಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ. data-toggle="modal"ಒಂದು ಬಟನ್‌ನಂತಹ ನಿಯಂತ್ರಕ ಅಂಶದ ಮೇಲೆ ಹೊಂದಿಸಿ data-target="#foo"ಅಥವಾ href="#foo"ಟಾಗಲ್ ಮಾಡಲು ನಿರ್ದಿಷ್ಟ ಮಾದರಿಯನ್ನು ಗುರಿಯಾಗಿಸಲು.

  1. <button type = "button" data- toggle = "modal" data-target = "#myModal" > ಲಾಂಚ್ ಮಾಡಲ್ </button>

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

myModalಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಒಂದೇ ಸಾಲಿನ ಐಡಿಯೊಂದಿಗೆ ಮಾದರಿಗೆ ಕರೆ ಮಾಡಿ :

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-backdrop="".

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

loadರಿಮೋಟ್ url ಅನ್ನು ಒದಗಿಸಿದರೆ, jQuery ವಿಧಾನದ ಮೂಲಕ ವಿಷಯವನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಗೆ ಇಂಜೆಕ್ಟ್ ಮಾಡಲಾಗುತ್ತದೆ .modal-body. ನೀವು ಡೇಟಾ API ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, hrefರಿಮೋಟ್ ಮೂಲವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನೀವು ಪರ್ಯಾಯವಾಗಿ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಬಹುದು. ಇದರ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ತೋರಿಸಲಾಗಿದೆ:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

ವಿಧಾನಗಳು

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

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

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

.modal('ಟಾಗಲ್')

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

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

.modal('ಶೋ')

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

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

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

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

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

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

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

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

navbar ನಲ್ಲಿ ಉದಾಹರಣೆ

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

@ಕೊಬ್ಬು

ಜಾಹೀರಾತು ಲೆಗ್ಗಿಂಗ್ಸ್ ಕೀಟಾರ್, ಬ್ರಂಚ್ ಐಡಿ ಆರ್ಟ್ ಪಾರ್ಟಿ ಡೋಲರ್ ಲೇಬರ್. ಪಿಚ್‌ಫೋರ್ಕ್ 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 ಚೇಂಬ್ರೆ ಲೇಬರ್ ಟೆಂಪೋರ್ ವೆನಿಯಮ್. ಆನಿಂ ಮೊಲ್ಲಿತ್ ಮಿನಿಮ್ ಕೊಮೊಡೊ ಉಲ್ಲಮ್ಕೊ ಥಂಡರ್‌ಕ್ಯಾಟ್ಸ್.


ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

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

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

JavaScript ಮೂಲಕ scrollspy ಗೆ ಕರೆ ಮಾಡಿ:

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

ವಿಧಾನಗಳು

.scrollspy('refresh')

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

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-offset="".

ಹೆಸರು ಮಾದರಿ ಪೂರ್ವನಿಯೋಜಿತ ವಿವರಣೆ
ಆಫ್ಸೆಟ್ ಸಂಖ್ಯೆ 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.


ಬಳಕೆ

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

  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"ಅಂಶದ ಮೇಲೆ ಯಾವುದೇ JavaScript ಅನ್ನು ಬರೆಯದೆಯೇ ನೀವು ಟ್ಯಾಬ್ ಅಥವಾ ಮಾತ್ರೆ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು . 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-ಬಿಟ್ ಅಮೇರಿಕನ್ ಉಡುಪುಗಳು ಟೆರ್ರಿ ರಿಚರ್ಡ್‌ಸನ್ ವಿನೈಲ್ ಚೇಂಬ್ರೇ ಅನ್ನು ಹೊಂದಿವೆ . ಬಿಯರ್ಡ್ ಸ್ಟಂಪ್‌ಟೌನ್, ಕಾರ್ಡಿಗನ್ಸ್ ಬಾನ್ ಮಿ ಲೊಮೊ ಥಂಡರ್‌ಕ್ಯಾಟ್ಸ್. ತೋಫು ಬಯೋಡೀಸೆಲ್ ವಿಲಿಯಮ್ಸ್‌ಬರ್ಗ್ ಮಾರ್ಫಾ, ಫೋರ್ ಲೋಕೋ ಮೆಕ್ಸ್‌ವೀನಿಯ ಕ್ಲೆನ್ಸ್ ಸಸ್ಯಾಹಾರಿ ಚಂಬ್ರೇ. ನಿಜವಾಗಿಯೂ ವ್ಯಂಗ್ಯಾತ್ಮಕ ಕುಶಲಕರ್ಮಿ ಯಾವುದೇ ಕೀಟಾರ್ , ಸೀನ್‌ಸ್ಟರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್ ಬ್ಯಾಂಕ್ಸಿ ಆಸ್ಟಿನ್ ಟ್ವಿಟರ್ ಹ್ಯಾಂಡಲ್ ಫ್ರೀಗಾನ್ ಕ್ರೆಡ್ ಕಚ್ಚಾ ಡೆನಿಮ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ವೈರಲ್.

ನಾಲ್ಕು ದಿಕ್ಕುಗಳು

ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳಲ್ಲಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳೊಂದಿಗೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪೋವರ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, containerಅನಗತ್ಯ ಅಡ್ಡ ಪರಿಣಾಮಗಳನ್ನು ತಪ್ಪಿಸಲು ನೀವು (ಕೆಳಗೆ ದಾಖಲಿಸಲಾಗಿದೆ) ಆಯ್ಕೆಯನ್ನು ಹೊಂದಿಸಬೇಕಾಗುತ್ತದೆ.


ಬಳಕೆ

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

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-animation="".

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

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

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

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

ಕಂಟೇನರ್ ದಾರ | ಸುಳ್ಳು ಸುಳ್ಳು

ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆcontainer: 'body'

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

ಮಾರ್ಕ್ಅಪ್

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

ವಿಧಾನಗಳು

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

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

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

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

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

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

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

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

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

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

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

.ಟೂಲ್ಟಿಪ್('ನಾಶ')

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

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

ಉದಾಹರಣೆಗಳು

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

ಸ್ಥಿರ ಪಾಪ್ಓವರ್

ನಾಲ್ಕು ಆಯ್ಕೆಗಳು ಲಭ್ಯವಿದೆ: ಮೇಲಿನ, ಬಲ, ಕೆಳಗೆ ಮತ್ತು ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ.

ಪಾಪೋವರ್ ಟಾಪ್

ಲೊಬೋರ್ಟಿಸ್‌ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ. ಏನಿಯನ್ ಇಯು ಲಿಯೋ ಕ್ವಾಮ್. ಪೆಲ್ಲೆಂಟೆಸ್ಕ್ ಆರ್ನಾರೆ ಸೆಮ್ ಲ್ಯಾಸಿನಿಯಾ ಕ್ವಾಮ್ ವೆನೆನಾಟಿಸ್ ವೆಸ್ಟಿಬುಲಮ್.

ಪಾಪೋವರ್ ಬಲ

ಲೊಬೋರ್ಟಿಸ್‌ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ. ಏನಿಯನ್ ಇಯು ಲಿಯೋ ಕ್ವಾಮ್. ಪೆಲ್ಲೆಂಟೆಸ್ಕ್ ಆರ್ನಾರೆ ಸೆಮ್ ಲ್ಯಾಸಿನಿಯಾ ಕ್ವಾಮ್ ವೆನೆನಾಟಿಸ್ ವೆಸ್ಟಿಬುಲಮ್.

ಪಾಪೋವರ್ ಕೆಳಭಾಗ

ಲೊಬೋರ್ಟಿಸ್‌ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ. ಏನಿಯನ್ ಇಯು ಲಿಯೋ ಕ್ವಾಮ್. ಪೆಲ್ಲೆಂಟೆಸ್ಕ್ ಆರ್ನಾರೆ ಸೆಮ್ ಲ್ಯಾಸಿನಿಯಾ ಕ್ವಾಮ್ ವೆನೆನಾಟಿಸ್ ವೆಸ್ಟಿಬುಲಮ್.

ಪಾಪೋವರ್ ಬಿಟ್ಟಿದೆ

ಲೊಬೋರ್ಟಿಸ್‌ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ. ಏನಿಯನ್ ಇಯು ಲಿಯೋ ಕ್ವಾಮ್. ಪೆಲ್ಲೆಂಟೆಸ್ಕ್ ಆರ್ನಾರೆ ಸೆಮ್ ಲ್ಯಾಸಿನಿಯಾ ಕ್ವಾಮ್ ವೆನೆನಾಟಿಸ್ ವೆಸ್ಟಿಬುಲಮ್.

dataಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಗುಣಲಕ್ಷಣದೊಳಗಿನ ವಿಷಯದಿಂದ ಪಾಪೋವರ್‌ಗಳಂತೆ ಯಾವುದೇ ಮಾರ್ಕ್‌ಅಪ್ ಅನ್ನು ತೋರಿಸಲಾಗಿಲ್ಲ .

ಲೈವ್ ಡೆಮೊ

ನಾಲ್ಕು ದಿಕ್ಕುಗಳು


ಬಳಕೆ

JavaScript ಮೂಲಕ popovers ಸಕ್ರಿಯಗೊಳಿಸಿ:

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-animation="".

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

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

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

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

ಕಂಟೇನರ್ ದಾರ | ಸುಳ್ಳು ಸುಳ್ಳು

ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಪಾಪೋವರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆcontainer: 'body'

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

ಮಾರ್ಕ್ಅಪ್

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

ವಿಧಾನಗಳು

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

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

.popover('ಶೋ')

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

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

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

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

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

.popover('ಟಾಗಲ್')

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

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

.popover('ನಾಶ')

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

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

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

ಈ ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಎಲ್ಲಾ ಎಚ್ಚರಿಕೆ ಸಂದೇಶಗಳಿಗೆ ವಜಾಗೊಳಿಸುವ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಿ.

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

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

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

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


ಬಳಕೆ

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

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

ಮಾರ್ಕ್ಅಪ್

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

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

ವಿಧಾನಗಳು

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

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

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

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

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

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

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

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

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

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

ರಾಜ್ಯಪೂರ್ಣ

data-loading-text="Loading..."ಬಟನ್‌ನಲ್ಲಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಬಳಸಲು ಸೇರಿಸಿ .

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "ಲೋಡ್ ಆಗುತ್ತಿದೆ..." > ಲೋಡ್ ಆಗುತ್ತಿರುವ ಸ್ಥಿತಿ </button>

ಏಕ ಟಾಗಲ್

data-toggle="button"ಒಂದೇ ಬಟನ್‌ನಲ್ಲಿ ಟಾಗಲ್ ಮಾಡುವುದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಸೇರಿಸಿ .

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>

ಚೆಕ್ಬಾಕ್ಸ್

data-toggle="buttons-checkbox"btn-group ನಲ್ಲಿ ಚೆಕ್‌ಬಾಕ್ಸ್ ಶೈಲಿಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಸೇರಿಸಿ .

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > ಎಡ </button>
  3. <button type = "button" class = "btn btn-primary" > ಮಧ್ಯಮ </button>
  4. <button type = "button" class = "btn btn-primary" > ಬಲ </button>
  5. </div>

ರೇಡಿಯೋ

data-toggle="buttons-radio"btn-ಗುಂಪಿನಲ್ಲಿ ರೇಡಿಯೋ ಶೈಲಿಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಸೇರಿಸಿ .

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > ಎಡ </button>
  3. <button type = "button" class = "btn btn-primary" > ಮಧ್ಯಮ </button>
  4. <button type = "button" class = "btn btn-primary" > ಬಲ </button>
  5. </div>

ಬಳಕೆ

JavaScript ಮೂಲಕ ಬಟನ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

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

ಮಾರ್ಕ್ಅಪ್

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

ಆಯ್ಕೆಗಳು

ಯಾವುದೂ

ವಿಧಾನಗಳು

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

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

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

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

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

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

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

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

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

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

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

ಬಗ್ಗೆ

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

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

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

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

ಅನಿಮ್ ಪ್ಯಾರಿಯಾಟುರ್ ಕ್ಲೀಷೆ ರಿಪ್ರೆಹೆಂಡರಿಟ್, ಎನಿಮ್ ಐಯುಸ್ಮೋಡ್ ಹೈ ಲೈಫ್ ಆಕ್ಯುಸಾಮಸ್ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಆಡ್ ಸ್ಕ್ವಿಡ್. 3 ವುಲ್ಫ್ ಮೂನ್ ಅಫಿಷಿಯಾ ಆಟಿ, ನಾನ್ ಕ್ಯುಪಿಡಾಟ್ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್ ಡೋಲರ್ ಬ್ರಂಚ್. ಫುಡ್ ಟ್ರಕ್ ಕ್ವಿನೋವಾ ನೆಸ್ಸಿಯಂಟ್ ಲೇಬರ್ ಐಯುಸ್ಮೋಡ್. ಬ್ರಂಚ್ 3 ವುಲ್ಫ್ ಮೂನ್ ಟೆಂಪೋರ್, ಸನ್ಟ್ ಅಲಿಕ್ವಾ ಅದರ ಮೇಲೆ ಪಕ್ಷಿಯನ್ನು ಹಾಕಿದೆ ಸ್ಕ್ವಿಡ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ನುಲ್ಲಾ ಅಸ್ಸುಮೆಂಡಾ ಶೋರೆಡಿಚ್ ಎಟ್. ನಿಹಿಲ್ ಅನಿಮ್ ಕೆಫಿಯೆಹ್ ಹೆಲ್ವೆಟಿಕಾ, ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಲೇಬರ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಕ್ರೆಡ್ ನೆಸ್ಸಿಯುಂಟ್ ಸಪಿಯೆಂಟೆ ಇಎ ಪ್ರೊಡೆಂಟ್. ಜಾಹೀರಾತು ಸಸ್ಯಾಹಾರಿ ಎಕ್ಸೆಪ್ಯೂರ್ ಬುತ್ಚೆರ್ ವೈಸ್ ಲೊಮೊ. ಲೆಗ್ಗಿಂಗ್ಸ್ occaecat ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್, ಕಚ್ಚಾ ಡೆನಿಮ್ ಸೌಂದರ್ಯದ ಸಿಂಥ್ ನೆಸ್ಸಿಯಂಟ್ ನೀವು ಬಹುಶಃ ಅವುಗಳನ್ನು ಆಕ್ಯುಸಾಮಸ್ ಲೇಬರ್ ಸುಸ್ಥಿರ VHS ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ.
ಅನಿಮ್ ಪ್ಯಾರಿಯಾಟುರ್ ಕ್ಲೀಷೆ ರಿಪ್ರೆಹೆಂಡರಿಟ್, ಎನಿಮ್ ಐಯುಸ್ಮೋಡ್ ಹೈ ಲೈಫ್ ಆಕ್ಯುಸಾಮಸ್ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಆಡ್ ಸ್ಕ್ವಿಡ್. 3 ವುಲ್ಫ್ ಮೂನ್ ಅಫಿಷಿಯಾ ಆಟಿ, ನಾನ್ ಕ್ಯುಪಿಡಾಟ್ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್ ಡೋಲರ್ ಬ್ರಂಚ್. ಫುಡ್ ಟ್ರಕ್ ಕ್ವಿನೋವಾ ನೆಸ್ಸಿಯಂಟ್ ಲೇಬರ್ ಐಯುಸ್ಮೋಡ್. ಬ್ರಂಚ್ 3 ವುಲ್ಫ್ ಮೂನ್ ಟೆಂಪೋರ್, ಸನ್ಟ್ ಅಲಿಕ್ವಾ ಅದರ ಮೇಲೆ ಪಕ್ಷಿಯನ್ನು ಹಾಕಿದೆ ಸ್ಕ್ವಿಡ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ನುಲ್ಲಾ ಅಸ್ಸುಮೆಂಡಾ ಶೋರೆಡಿಚ್ ಎಟ್. ನಿಹಿಲ್ ಅನಿಮ್ ಕೆಫಿಯೆಹ್ ಹೆಲ್ವೆಟಿಕಾ, ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಲೇಬರ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಕ್ರೆಡ್ ನೆಸ್ಸಿಯುಂಟ್ ಸಪಿಯೆಂಟೆ ಇಎ ಪ್ರೊಡೆಂಟ್. ಜಾಹೀರಾತು ಸಸ್ಯಾಹಾರಿ ಎಕ್ಸೆಪ್ಯೂರ್ ಬುತ್ಚೆರ್ ವೈಸ್ ಲೊಮೊ. ಲೆಗ್ಗಿಂಗ್ಸ್ occaecat ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್, ಕಚ್ಚಾ ಡೆನಿಮ್ ಸೌಂದರ್ಯದ ಸಿಂಥ್ ನೆಸ್ಸಿಯಂಟ್ ನೀವು ಬಹುಶಃ ಅವುಗಳನ್ನು ಆಕ್ಯುಸಾಮಸ್ ಲೇಬರ್ ಸುಸ್ಥಿರ VHS ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ.
ಅನಿಮ್ ಪ್ಯಾರಿಯಾಟುರ್ ಕ್ಲೀಷೆ ರಿಪ್ರೆಹೆಂಡರಿಟ್, ಎನಿಮ್ ಐಯುಸ್ಮೋಡ್ ಹೈ ಲೈಫ್ ಆಕ್ಯುಸಾಮಸ್ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಆಡ್ ಸ್ಕ್ವಿಡ್. 3 ವುಲ್ಫ್ ಮೂನ್ ಅಫಿಷಿಯಾ ಆಟಿ, ನಾನ್ ಕ್ಯುಪಿಡಾಟ್ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್ ಡೋಲರ್ ಬ್ರಂಚ್. ಫುಡ್ ಟ್ರಕ್ ಕ್ವಿನೋವಾ ನೆಸ್ಸಿಯಂಟ್ ಲೇಬರ್ ಐಯುಸ್ಮೋಡ್. ಬ್ರಂಚ್ 3 ವುಲ್ಫ್ ಮೂನ್ ಟೆಂಪೋರ್, ಸನ್ಟ್ ಅಲಿಕ್ವಾ ಅದರ ಮೇಲೆ ಪಕ್ಷಿಯನ್ನು ಹಾಕಿದೆ ಸ್ಕ್ವಿಡ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ನುಲ್ಲಾ ಅಸ್ಸುಮೆಂಡಾ ಶೋರೆಡಿಚ್ ಎಟ್. ನಿಹಿಲ್ ಅನಿಮ್ ಕೆಫಿಯೆಹ್ ಹೆಲ್ವೆಟಿಕಾ, ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಲೇಬರ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಕ್ರೆಡ್ ನೆಸ್ಸಿಯುಂಟ್ ಸಪಿಯೆಂಟೆ ಇಎ ಪ್ರೊಡೆಂಟ್. ಜಾಹೀರಾತು ಸಸ್ಯಾಹಾರಿ ಎಕ್ಸೆಪ್ಯೂರ್ ಬುತ್ಚೆರ್ ವೈಸ್ ಲೊಮೊ. ಲೆಗ್ಗಿಂಗ್ಸ್ occaecat ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್, ಕಚ್ಚಾ ಡೆನಿಮ್ ಸೌಂದರ್ಯದ ಸಿಂಥ್ ನೆಸ್ಸಿಯಂಟ್ ನೀವು ಬಹುಶಃ ಅವುಗಳನ್ನು ಆಕ್ಯುಸಾಮಸ್ ಲೇಬರ್ ಸುಸ್ಥಿರ VHS ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div ವರ್ಗ = "ಅಕಾರ್ಡಿಯನ್-ಹೆಡಿಂಗ್" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body compound in" >
  9. <div class = "accordion-inner" >
  10. ಆನಿಂ ಪರಿಯತುರ್ ಕ್ಲೀಚೆ...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div ವರ್ಗ = "ಅಕಾರ್ಡಿಯನ್-ಹೆಡಿಂಗ್" >
  16. <a class = "ಅಕಾರ್ಡಿಯನ್-ಟಾಗಲ್" ಡೇಟಾ-ಟಾಗಲ್ = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #2
  18. </a>
  19. </div>
  20. <ಡಿವಿ ಐಡಿ = "collapseTwo" class = "ಅಕಾರ್ಡಿಯನ್-ಬಾಡಿ ಕುಸಿತ" >
  21. <div class = "accordion-inner" >
  22. ಆನಿಂ ಪರಿಯತುರ್ ಕ್ಲೀಚೆ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

ನೀವು ಅಕಾರ್ಡಿಯನ್ ಮಾರ್ಕ್ಅಪ್ ಇಲ್ಲದೆ ಪ್ಲಗಿನ್ ಅನ್ನು ಸಹ ಬಳಸಬಹುದು. ಮತ್ತೊಂದು ಅಂಶದ ವಿಸ್ತರಣೆ ಮತ್ತು ಕುಸಿತವನ್ನು ಟಾಗಲ್ ಮಾಡಿ.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. ಸರಳ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

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

ಅಕಾರ್ಡಿಯನ್ ತರಹದ ಗುಂಪು ನಿರ್ವಹಣೆಯನ್ನು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ನಿಯಂತ್ರಣಕ್ಕೆ ಸೇರಿಸಲು, ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿdata-parent="#selector" . ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಲು ಡೆಮೊವನ್ನು ನೋಡಿ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

ಇದರೊಂದಿಗೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಿ:

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-parent="".

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

ವಿಧಾನಗಳು

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

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

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

.collapse('ಟಾಗಲ್')

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

.collapse('ಶೋ')

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

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

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

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

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

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

ಉದಾಹರಣೆ

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

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

autocomplete="off"ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟೈಪ್‌ಹೆಡ್ ಡ್ರಾಪ್‌ಡೌನ್‌ನಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ಮೆನುಗಳು ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ತಡೆಯಲು ನೀವು ಹೊಂದಿಸಲು ಬಯಸುತ್ತೀರಿ .


ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

ಇದರೊಂದಿಗೆ ಟೈಪ್‌ಹೆಡ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಕರೆ ಮಾಡಿ:

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-source="".

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

ವಿಧಾನಗಳು

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

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

ಉದಾಹರಣೆ

ಎಡಭಾಗದಲ್ಲಿರುವ ಉಪನ್ಯಾವಿಗೇಶನ್ ಅಫಿಕ್ಸ್ ಪ್ಲಗಿನ್‌ನ ಲೈವ್ ಡೆಮೊ ಆಗಿದೆ.


ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಅಫಿಕ್ಸ್ ನಡವಳಿಕೆಯನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಲು, data-spy="affix"ನೀವು ಕಣ್ಣಿಡಲು ಬಯಸುವ ಅಂಶಕ್ಕೆ ಸೇರಿಸಿ. ನಂತರ ಅಂಶದ ಪಿನ್ನಿಂಗ್ ಅನ್ನು ಯಾವಾಗ ಆನ್ ಮತ್ತು ಆಫ್ ಮಾಡಬೇಕು ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಆಫ್‌ಸೆಟ್‌ಗಳನ್ನು ಬಳಸಿ.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
ತಲೆ ಎತ್ತಿ! ಪಿನ್ ಮಾಡಲಾದ ಅಂಶದ ಸ್ಥಾನ ಮತ್ತು ಅದರ ತಕ್ಷಣದ ಪೋಷಕರ ನಡವಳಿಕೆಯನ್ನು ನೀವು ನಿರ್ವಹಿಸಬೇಕು. ಸ್ಥಾನವನ್ನು ನಿಯಂತ್ರಿಸಲಾಗುತ್ತದೆ affix, affix-topಮತ್ತು affix-bottom . ಪುಟದ ಸಾಮಾನ್ಯ ಹರಿವಿನಿಂದ ವಿಷಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತಿರುವಾಗ ಅಫಿಕ್ಸ್ ಕಿಕ್ ಮಾಡಿದಾಗ ಸಂಭಾವ್ಯವಾಗಿ ಕುಸಿದ ಪೋಷಕರನ್ನು ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

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

  1. $ ( '#navbar' ). ಅಂಟಿಸು ()

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-offset-top="200".

ಹೆಸರು ಮಾದರಿ ಪೂರ್ವನಿಯೋಜಿತ ವಿವರಣೆ
��ಫ್ಸೆಟ್ ಸಂಖ್ಯೆ | ಕಾರ್ಯ | ವಸ್ತು 10 ಸ್ಕ್ರಾಲ್‌ನ ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವಾಗ ಪರದೆಯಿಂದ ಆಫ್‌ಸೆಟ್ ಮಾಡಲು ಪಿಕ್ಸೆಲ್‌ಗಳು. ಒಂದೇ ಸಂಖ್ಯೆಯನ್ನು ಒದಗಿಸಿದರೆ, ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಮೇಲಿನ ಮತ್ತು ಎಡ ಎರಡೂ ದಿಕ್ಕುಗಳಲ್ಲಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಒಂದೇ ನಿರ್ದೇಶನ ಅಥವಾ ಬಹು ಅನನ್ಯ ಆಫ್‌ಸೆಟ್‌ಗಳನ್ನು ಕೇಳಲು, ಕೇವಲ ಒಂದು ವಸ್ತುವನ್ನು ಒದಗಿಸಿ offset: { x: 10 }. ನೀವು ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಒದಗಿಸಬೇಕಾದಾಗ ಕಾರ್ಯವನ್ನು ಬಳಸಿ (ಕೆಲವು ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ).