JavaScript

Keen Bootstrap nolosha iyada oo la adeegsanayo furayaashayada JavaScript ee ikhtiyaarka ah ee lagu dhisay jQuery. Baro plugin kasta, xogtayada iyo barnaamijyada API ikhtiyaarka ah, iyo in ka badan.

Shakhsi ama la ururiyey

Plugins si gaar ah ayaa loogu dari karaa (iyadoo la adeegsanayo shakhsi Bootstrap js/dist/*.js), ama dhammaan hal mar la isticmaalayo bootstrap.jsama la dhimay bootstrap.min.js(ha ku darin labadaba).

Haddii aad isticmaasho xidhmo (Webpack, Rollup…), waxaad isticmaali kartaa /js/dist/*.jsfaylasha UMD diyaar ah.

Ku-tiirsanaanta

Qaybaha qaar iyo qaybaha CSS waxay ku xidhan yihiin plugins kale. Haddii aad si gaar ah ugu darto plugins, hubi inaad hubiso waxyaalahan ku-tiirsanaanta dukumentiyada. Sidoo kale ogow in dhammaan pluginsku ay ku xiran yihiin jQuery (taasi waxay ka dhigan tahay jQuery waa in lagu daraa ka hor faylasha plugin). Kala tashopackage.json si aad u aragto noocyada jQuery ee la taageeray.

Hoos-u-dhacyadayada , popovers iyo qalabyada qalabku waxay sidoo kale ku xiran yihiin Popper.js .

Sifooyinka xogta

Ku dhawaad ​​​​dhammaan bootstrap plugins waa la awoodsiin karaa oo lagu habeyn karaa HTML oo keliya oo leh sifooyinka xogta (habka aan doorbideyno ee isticmaalka shaqeynta JavaScript). Hubi inaad isticmaasho hal sifo oo xogta ah oo keliya hal shay (tusaale, ma kicin kartid qalab iyo qaab isla badhanka.)

Si kastaba ha ahaatee, xaaladaha qaarkood waxa laga yaabaa in la jeclaysto in la joojiyo shaqadan. Si loo baabi'iyo sifada xogta API, ka saar dhammaan dhacdooyinka dukumeentiga u dhexeeyo data-apisidan:

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

Haddii kale, si loo beegsado plugin gaar ah, kaliya ku dar magaca plugin-ka oo ah meel magac ah oo ay la socoto xogta-api namespace sidan oo kale:

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

Dhacdooyinka

Bootstrap waxay siisaa dhacdooyin caado u ah inta badan ficilada gaarka ah ee plugins. Guud ahaan, kuwani waxay ku yimaadaan qaab aan dhammaad lahayn oo hore uga qayb-qaatay-halkaas oo aan dhammaad lahayn (tusaale ahaan show) uu kiciyo bilawga dhacdada, iyo qaabkeedii hore ee ka qaybqaadashada (tus. shown) uu kiciyo marka ficilku dhammeeyo.

Dhammaan dhacdooyinka aan dhamaadka lahayn waxay bixiyaan preventDefault()shaqeyn Tani waxay siinaysaa awoodda lagu joojinayo fulinta ficilka ka hor inta uusan bilaaban. Ka soo noqoshada beenta maamulaha dhacdada ayaa sidoo kale si toos ah u soo wici doona preventDefault().

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

API Programmatic

Waxaan sidoo kale aaminsanahay inaad awood u leedahay inaad isticmaasho dhammaan Bootstrap plugins iyada oo keliya JavaScript API. Dhammaan API-yada dadwaynaha waa hal, habab la silsiladi karo, oo soo celi ururinta lagu dhaqmay.

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

Dhammaan hababka waa in ay aqbalaan shay ikhtiyaari ikhtiyaari ah, xadhig bartilmaameed u ah hab gaar ah, ama waxba (kaas oo bilaabaya plugin leh dabeecad aan caadi ahayn):

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

Plugin kasta waxa kale oo uu soo bandhigaa dhisaha ceeriin ee Constructorguriga: $.fn.popover.Constructor. Haddii aad jeclaan lahayd inaad hesho tusaale plugin gaar ah, si toos ah uga soo celi curiyaha: $('[rel="popover"]').data('popover').

Hawlaha iyo kala-guurka asynchronous

Dhammaan hababka API-ga ee barnaamijku waa isku mid oo ku soo noqda qofka soo wacaya marka kala guurka la bilaabo laakiin ka hor inta uusan dhammaan .

Si loo fuliyo ficil marka kala guurka la dhammeeyo, waxaad dhagaysan kartaa dhacdada u dhiganta.

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

Intaa waxa dheer hab ku baaqaya qayb ka-wareejineed waa la iska indhatiraa .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#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 !!

Dejinta asalka ah

Waxaad ka beddeli kartaa habaynta caadiga ah ee plugin adiga oo wax ka beddelaya Constructor.Defaultshayga plugin:

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

Khilaaf ma jiro

Mararka qaarkood waa lagama maarmaan in la isticmaalo bootstrap plugins oo leh qaabab kale oo UI ah. Duruufahaan, isku dhacyada meel magac ayaa marmar dhici kara. Haddii tani dhacdo, waxaad wici .noConflictkartaa plugin-ka aad rabto inaad dib u soo celiso qiimaha.

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

Nambarada nooca

Nooca mid kasta oo ka mid ah Bootstrap's jQuery plugins waxaa laga geli karaa VERSIONhantida dhisaha plugin. Tusaale ahaan, plugin tip-ka ah:

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

Ma jiro dib-u-dhac gaar ah marka JavaScript naafo yahay

Bootstrap's plugins si gaar ah dib uguma soo noqdaan marka JavaScript naafo yahay. Haddii aad danaynayso khibrada isticmaalaha kiiskan, isticmaal <noscript>si aad u sharaxdo xaalada (iyo sida dib loogu soo celiyo JavaScript) isticmaalayaashaada, iyo/ama ku darso dib-u-dhacyadaada caadada ah.

Util

Dhammaan faylasha Bootstrap's JavaScript waxay ku xiran yihiin util.jsoo waa in lagu daro faylalka kale ee JavaScript. Haddii aad isticmaalayso kuwa la soo ururiyey (ama la yareeyey) bootstrap.js, looma baahna in lagu daro tan-horay ayay u jirtaa.

util.jswaxaa ka mid ah hawlaha utility iyo caawiyaha aasaasiga ah ee transitionEnddhacdooyinka iyo sidoo kale ku dayashada kala guurka CSS. Waxa isticmaala plugins-yada kale si ay u hubiyaan taageerada kala-guurka ee CSS iyo inay qabtaan kala-guurka ka laadlaadda.

Nadiifiye

Aaladaha iyo Popovers waxay isticmaalaan nadiifiyaha ku dhex dhisan si ay u nadiifiyaan xulashooyinka aqbalaya HTML.

Qiimaha caadiga whiteListah waa kan soo socda:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Haddii aad rabto inaad ku darto qiyam cusub default this whiteListwaxaad samayn kartaa kuwan soo socda:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Haddii aad rabto inaad dhaafto nadaafaddayada sababtoo ah waxaad doorbideysaa inaad isticmaasho maktabad gaar ah, tusaale ahaan DOMPurify , waa inaad sameyso waxyaabaha soo socda:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})