ጃቫስክሪፕት

በ jQuery ላይ በተገነቡት የጃቫ ስክሪፕት ፕለጊኖቻችን Bootstrapን ህያው አድርገው። ስለ እያንዳንዱ ተሰኪ፣ የእኛ ውሂብ እና ፕሮግራማዊ ኤፒአይ አማራጮች እና ተጨማሪ ይወቁ።

የግለሰብ ወይም የተጠናቀረ

ተሰኪዎች በተናጥል ሊካተቱ ይችላሉ (የ Bootstrapን ግለሰብ በመጠቀም js/dist/*.js) ወይም ሁሉንም በአንድ ጊዜ በመጠቀም bootstrap.jsወይም የተቀነሰው bootstrap.min.js(ሁለቱንም አያካትቱ)።

ጥቅል (Webpack፣ Rollup…) የሚጠቀሙ ከሆነ /js/dist/*.jsUMD ዝግጁ የሆኑ ፋይሎችን መጠቀም ይችላሉ።

ጥገኛዎች

አንዳንድ ተሰኪዎች እና የሲኤስኤስ ክፍሎች በሌሎች ተሰኪዎች ላይ ይወሰናሉ። ፕለጊኖችን ለየብቻ ካካተትክ፣ እነዚህን ጥገኞች በሰነዶቹ ውስጥ ማረጋገጥህን አረጋግጥ። እንዲሁም ሁሉም ተሰኪዎች በ jQuery ላይ የተመሰረቱ መሆናቸውን ልብ ይበሉ (ይህ ማለት jQuery ከፕለጊን ፋይሎች በፊት መካተት አለበት )። የትኞቹ የ jQuery ስሪቶች እንደሚደገፉ ለማየት የእኛን ያማክሩ ።package.json

የእኛ ተቆልቋይ፣ ብቅ -ባይ እና የመሳሪያ ምክሮች በ Popper.js ላይም ይወሰናሉ ።

የውሂብ ባህሪያት

ከሞላ ጎደል ሁሉም የ Bootstrap ፕለጊኖች በኤችቲኤምኤል በኩል ብቻ በመረጃ ባህሪያት (የእኛ ተመራጭ የጃቫስክሪፕት ተግባር የምንጠቀምበት መንገድ) ሊነቁ እና ሊዋቀሩ ይችላሉ። በአንድ ኤለመንት ላይ አንድ የውሂብ ባህሪያትን ስብስብ ብቻ መጠቀምዎን ያረጋግጡ (ለምሳሌ፣ ከተመሳሳይ አዝራር የመሳሪያ ጥቆማ እና ሞዳል ማስነሳት አይችሉም።)

ሆኖም፣ በአንዳንድ ሁኔታዎች ይህንን ተግባር ማሰናከል ሊፈለግ ይችላል። የውሂብ አይነታ ኤፒአይን ለማሰናከል በሰነዱ ላይ ያሉ ሁሉንም ክስተቶች በስም የተከፋፈሉትን ያንቀሉ data-api፡-

$(document).off('.data-api')

በአማራጭ፣ አንድን የተወሰነ ፕለጊን ዒላማ ለማድረግ፣ የተሰኪውን ስም እንደ የስም ቦታ ብቻ ከዳታ-api የስም ቦታ ጋር እንደዚህ ያካትቱ።

$(document).off('.alert.data-api')

ክስተቶች

Bootstrap ለአብዛኛዎቹ ተሰኪዎች ልዩ ድርጊቶች ብጁ ክስተቶችን ያቀርባል። በጥቅሉ፣ እነዚህ ወደ ፍጻሜ የለሽ እና ያለፈ ተካፋይ መልክ ይመጣሉ - መጨረሻው (ለምሳሌ show) በክስተቱ መጀመሪያ ላይ የሚቀሰቀስበት እና ያለፈው አካል ቅርፅ (ለምሳሌ shown) የሚቀሰቀሰው ድርጊት ሲጠናቀቅ ነው።

ሁሉም ማለቂያ የሌላቸው ክስተቶች preventDefault()ተግባራዊነት ይሰጣሉ. ይህ እርምጃ ከመጀመሩ በፊት አፈፃፀምን የማቆም ችሎታ ይሰጣል። ከክስተት ተቆጣጣሪ የውሸት መመለስ እንዲሁ በቀጥታ ይደውላል preventDefault()።

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

ፕሮግራማዊ ኤፒአይ

እንዲሁም ሁሉንም የBootstrap ፕለጊኖች በጃቫስክሪፕት ኤፒአይ ብቻ መጠቀም መቻል እንዳለቦት እናምናለን። ሁሉም ይፋዊ ኤፒአይዎች ነጠላ፣ በሰንሰለት ሊታለፉ የሚችሉ ዘዴዎች ናቸው፣ እና የተግባርን ስብስብ ይመለሳሉ።

$('.btn.danger').button('toggle').addClass('fat')

ሁሉም ዘዴዎች የአማራጭ አማራጮች ነገርን፣ አንድን የተወሰነ ዘዴ የሚያነጣጥር ሕብረቁምፊ ወይም ምንም (ነባሪ ባህሪ ያለው ተሰኪን የሚያስጀምር) መቀበል አለባቸው።

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Constructorእያንዳንዱ ተሰኪ በንብረቱ ላይ ያለውን ጥሬ ገንቢ ያጋልጣል $.fn.popover.Constructor፡. አንድ የተወሰነ ፕለጊን ለምሳሌ ማግኘት ከፈለጉ፣ በቀጥታ ከአንድ አካል ያውጡት $('[rel="popover"]').data('popover')፡.

ያልተመሳሰሉ ተግባራት እና ሽግግሮች

ሁሉም የፕሮግራም ኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግሩ ከተጀመረ በኋላ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ።

ሽግግሩ ከተጠናቀቀ በኋላ አንድን ድርጊት ለመፈጸም፣ ተጓዳኙን ክስተት ማዳመጥ ይችላሉ።

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

በተጨማሪም የሽግግር አካል ላይ ዘዴ ጥሪ ችላ ይባላል .

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

ነባሪ ቅንብሮች

የተሰኪውን ነገር በማስተካከል የፕለጊን ነባሪ ቅንብሮችን መቀየር ይችላሉ Constructor.Default፡-

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

ግጭት የለም።

አንዳንድ ጊዜ የ Bootstrap ፕለጊኖችን ከሌሎች የUI ማዕቀፎች ጋር መጠቀም አስፈላጊ ነው። በነዚህ ሁኔታዎች፣ የስም ቦታ ግጭቶች አልፎ አልፎ ሊከሰቱ ይችላሉ። ይህ ከተከሰተ .noConflictእሴቱን ለመመለስ የሚፈልጉትን ፕለጊን መደወል ይችላሉ።

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

የስሪት ቁጥሮች

VERSIONየእያንዳንዱ የBootstrap jQuery ፕለጊኖች ስሪት በተሰኪው ገንቢ ንብረት በኩል ሊደረስበት ይችላል ። ለምሳሌ፣ ለመሳሪያ ምክር ተሰኪ፡-

$.fn.tooltip.Constructor.VERSION // => "4.1.3"

ጃቫ ስክሪፕት ሲሰናከል ምንም ልዩ ውድቀት የለም።

ጃቫ ስክሪፕት ሲሰናከል የቡትስትራፕ ተሰኪዎች በጸጋ ወደ ኋላ አይመለሱም። በዚህ ጉዳይ ላይ ስለተጠቃሚው ተሞክሮ የሚጨነቁ ከሆነ፣ <noscript>ሁኔታውን (እና ጃቫ ስክሪፕትን እንዴት እንደገና ማንቃት እንደሚችሉ) ለተጠቃሚዎችዎ ለማስረዳት ይጠቀሙ እና/ወይም የራስዎን ብጁ ውድቀት ያክሉ።

መገልገያ

ሁሉም የ Bootstrap ጃቫ ስክሪፕት ፋይሎች የሚወሰኑት util.jsእና ከሌሎች የጃቫ ስክሪፕት ፋይሎች ጋር መካተት አለበት። የተቀናበረውን (ወይም የተቀነሰውን) እየተጠቀሙ ከሆነ bootstrap.js፣ ይህንን ማካተት አያስፈልግም—ቀድሞውኑ አለ።

util.jsየመገልገያ ተግባራትን እና ለክስተቶች መሰረታዊ ረዳትን transitionEndእንዲሁም የሲኤስኤስ ሽግግር ኢምፔርን ያካትታል። የCSS ሽግግር ድጋፍን ለመፈተሽ እና የተንጠለጠሉ ሽግግሮችን ለመያዝ በሌሎች ተሰኪዎች ጥቅም ላይ ይውላል።