باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
Check
in English

جاڤاسکڕێپت

بە پێوەکراوەکانی جاڤاسکڕێپتی ئیختیاریمان Bootstrap بە ژیان بهێنە. دەربارەی هەر پێوەکراوێک، داتا و هەڵبژاردەکانی API بەرنامەیی و زۆر شتی تر بزانە.

لەم پەیجەدا

تاکەکەسی یان کۆکراوە

دەتوانرێت پێوەکراوەکان بە تاک (بە بەکارهێنانی تاکەکەسی Bootstrap js/dist/*.js) جێگیر بکرێن، یان هەموویان بە یەکجار بە بەکارهێنانی bootstrap.jsیان بچووککراو bootstrap.min.js(هەردووکیان لەخۆ مەگرن).

ئەگەر باندلەرێک بەکاربهێنیت (Webpack, Parcel, Vite...)، دەتوانیت ئەو /js/dist/*.jsفایلانە بەکاربهێنیت کە UMD ئامادەن.

بەکارهێنان لەگەڵ چوارچێوەی جاڤاسکڕێپت

لە کاتێکدا دەتوانرێت Bootstrap CSS لەگەڵ هەر چوارچێوەیەک بەکاربهێنرێت، جاڤاسکڕێپتی Bootstrap بە تەواوی لەگەڵ چوارچێوەکانی جاڤاسکڕێپت وەک React، Vue، و Angular کە زانیاری تەواو لەسەر DOM گریمانە دەکەن ناگونجێت. هەردوو Bootstrap و framework لەوانەیە هەوڵی گۆڕینی هەمان توخمەکەی DOM بدەن، لە ئەنجامدا هەڵەی وەکو دابەزینەکان دروست دەبن کە لە شوێنی "کراوە"دا گیر دەبن.

بەدیلێکی باشتر بۆ ئەوانەی ئەم جۆرە چوارچێوە بەکاردەهێنن ئەوەیە کە پاکێجێکی تایبەت بە چوارچێوە بەکاربهێنن لەبری جاڤاسکڕێپتی Bootstrap. لێرەدا هەندێک لە بژاردە بەناوبانگەکان دەخەینەڕوو:

بەکارهێنانی Bootstrap وەک مۆدیولێک

خۆت تاقی بکەرەوە! کۆدی سەرچاوە و دیمۆی کارکردن بۆ بەکارهێنانی Bootstrap وەک مۆدیۆلی ES لە کۆگای twbs/examples دابەزێنە . هەروەها دەتوانیت نموونەکە لە StackBlitz بکەیتەوە .

ئێمە وەشانی Bootstrap دابین دەکەین کە وەک ESM( bootstrap.esm.jsو bootstrap.esm.min.js) دروستکراوە کە ڕێگەت پێدەدات Bootstrap وەک مۆدیولێک لە وێبگەڕەکەدا بەکاربهێنیت، ئەگەر وێبگەڕە ئامانجدارەکانت پشتگیری بکەن .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

بە بەراورد لەگەڵ باندلەری JS، بەکارهێنانی ESM لە وێبگەڕەکەدا پێویستە ڕێڕەوی تەواو و ناوی پەڕگە بەکاربهێنیت لەبری ناوی مۆدیولەکە. زیاتر بخوێنەرەوە دەربارەی مۆدیولەکانی JS لە وێبگەڕەکەدا. هەر بۆیە ئێمە 'bootstrap.esm.min.js'لەبری 'bootstrap'سەرەوە بەکاری دەهێنین. بەڵام ئەمە زیاتر ئاڵۆزتر دەبێت بەهۆی وابەستەیی پۆپەرمانەوە، کە پۆپەر بەم شێوەیە هاوردە دەکات بۆ ناو جاڤاسکڕێپتەکەمان:

import * as Popper from "@popperjs/core"

ئەگەر ئەمە وەک خۆی تاقی بکەیتەوە، هەڵەیەک لە کۆنسۆڵەکەدا دەبینیت وەک ئەمانەی خوارەوە:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

بۆ چارەسەرکردنی ئەمە دەتوانیت an بەکاربهێنیت importmapبۆ چارەسەرکردنی ناوی مۆدیولەکانی ئارەزوومەندانە بۆ تەواوکردنی ڕێڕەوەکان. ئەگەر وێبگەڕە ئامانجدارەکانت پشتگیری لە ، ناکەن importmap، پێویستە پڕۆژەی es-module-shims بەکاربهێنیت . لێرەدا چۆن کاردەکات بۆ Bootstrap و Popper:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

وابەستەییەکان

هەندێک لە پێوەکراوەکان و پێکهاتەکانی CSS پشت بە پێوەکراوەکانی تر دەبەستن. ئەگەر پێوەکراوەکان بە تاک بە تاک جێگیر دەکەیت، دڵنیابە لە پشکنینی ئەم وابەستەییانە لە دۆکیومێنتەکاندا.

هەروەها دابەزینەکانمان، پۆپۆڤەرەکان، و ئامرازەکانمان پشت بە پۆپەر دەبەستن .

تایبەتمەندیەکانی داتا

نزیکەی هەموو پێوەکراوەکانی Bootstrap دەتوانرێت چالاک بکرێت و ڕێکبخرێت تەنها لە ڕێگەی HTML بە تایبەتمەندی داتا (شێوازی پەسەندکراوی ئێمە بۆ بەکارهێنانی کارایی جاڤاسکڕێپت). دڵنیابە کە تەنها یەک کۆمەڵە تایبەتمەندی داتا لەسەر یەک توخم بەکاردەهێنیت (بۆ نموونە، ناتوانیت ئامۆژگاری و مۆداڵی لە هەمان دوگمەوە دەستپێبکەیت.)

بەو پێیەی دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت، دەتوانیت ناوی هەڵبژاردنێک زیاد بکەیت بۆ data-bs-, وەک لە data-bs-animation="{value}". دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە “ camelCase ” بۆ “ kebab-case ” لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە data-bs-custom-class="beautifier"لەبری data-bs-customClass="beautifier".

لە Bootstrap 5.2.0 ەوە، هەموو پێکهاتەکان پشتگیری لە تایبەتمەندییەکی داتا یەدەگی تاقیکاریdata-bs-config دەکەن کە دەتوانێت ڕێکخستنی پێکهاتەی سادە وەک ڕستەیەکی JSON لەخۆبگرێت. کاتێک توخمێک تایبەتمەندی data-bs-config='{"delay":0, "title":123}'و data-bs-title="456"تایبەتمەندیەکانی هەیە، بەهای کۆتایی titleدەبێتە 456و تایبەتمەندییە جیاوازەکانی داتا بەهاکان دەگۆڕن کە لە data-bs-config. سەرەڕای ئەوە، تایبەتمەندییە داتاکانی ئێستا توانای ئەوەیان هەیە بەهاکانی JSON وەک data-bs-delay='{"show":0,"hide":150}'.

هەڵبژێرەران

ئێمە ڕەسەن querySelectorو querySelectorAllشێوازەکان بەکاردەهێنین بۆ پرسیارکردن لە توخمەکانی DOM بە هۆکاری کارایی، بۆیە دەبێت هەڵبژێرەری دروست بەکاربهێنیت . ئەگەر هەڵبژێرەری تایبەت وەک collapse:Example, بەکاردەهێنیت، دڵنیابە لەوەی لێیان ڕزگارت دەبێت.

ڕووداوەکان

Bootstrap ڕووداوە تایبەتەکان بۆ زۆربەی کردارە ناوازەکانی پێوەکراوەکان دابین دەکات. بەگشتی، ئەمانە بە شێوەی بێکۆتایی و بەشێکی ڕابردوو دێن - کە بێکۆتایی (ex. show) لە سەرەتای ڕووداوێکدا دەستپێدەکات، و فۆڕمی بەشە ڕابردووەکەی (ex. shown) لە کاتی تەواوبوونی کردارێکدا دەستپێدەکات.

هەموو ڕووداوە بێکۆتاییەکان preventDefault()کارایی دابین دەکەن. ئەمەش توانای وەستاندنی جێبەجێکردنی کردارێک پێش دەستپێکردنی دەدات. هەروەها گەڕانەوەی false لە مامەڵەکاری ڕووداوەکانەوە بە شێوەیەکی ئۆتۆماتیکی بانگ preventDefault()دەکات .

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

API بەرنامەیی

هەموو بنیاتنانەکان شتێکی هەڵبژاردەی هەڵبژاردە وەرئەگرن یان هیچ (کە پێوەکراوێک بە هەڵسوکەوتی پێشوەختەی خۆی دەستپێدەکات):

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

ئەگەر بتەوێت نموونەیەکی تایبەتی پێوەکراو بەدەست بهێنیت، هەر پێوەکراوێک getInstanceڕێگەیەک ئاشکرا دەکات. بۆ نموونە بۆ وەرگرتنەوەی نموونەیەک ڕاستەوخۆ لە توخمێکەوە:

bootstrap.Popover.getInstance(myPopoverEl)

ئەم شێوازە دەگەڕێتەوە nullئەگەر نموونەیەک لەسەر توخمە داواکراوەکە دەستپێنەکرێت.

یان getOrCreateInstanceدەتوانرێت بەکاربهێنرێت بۆ بەدەستهێنانی نموونەکە کە پەیوەندی بە توخمێکی DOMەوە هەیە، یان یەکێکی نوێ دروست بکرێت لە ئەگەری دەستپێنەکردندا.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

لە ئەگەری ئەوەی نموونەیەک سەرەتایی نەکرابێت، لەوانەیە شتێکی ڕێکخستنی هەڵبژاردە وەک ئارگومێنتی دووەم قبوڵ بکات و بەکاری بهێنێت.

هەڵبژێرەری CSS لە بنیاتنانەکاندا

جگە لە شێوازەکانی getInstanceو getOrCreateInstance، هەموو بنیاتنانەکانی پێوەکراوەکان دەتوانن توخمێکی DOM یان هەڵبژێرەری CSS ی دروست وەک یەکەم ئارگومێنت قبوڵ بکەن. توخمەکانی پێوەکراوەکان لەگەڵ شێوازەکەدا دەدۆزرێتەوە querySelectorلەبەرئەوەی پێوەکراوەکانمان تەنها پشتگیری لە یەک توخم دەکەن.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

ئەرک و گواستنەوە ناهاوسەنگەکان

هەموو شێوازەکانی API بەرنامەیی ناهاوسەنگن و دەگەڕێنەوە بۆ بانگکەر کاتێک گواستنەوەکە دەستی پێکرد، بەڵام پێش ئەوەی کۆتایی بێت . بۆ ئەوەی کردارێک جێبەجێ بکەیت کاتێک گواستنەوەکە تەواو بوو، دەتوانیت گوێ لە ڕووداوی گونجاو بگرێت.

const myCollapseEl = document.querySelector('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', event => {
  // Action to execute once the collapsible area is expanded
})

سەرەڕای ئەوە، بانگەوازێکی میتۆد لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', event => {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

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

disposeڕێگا

disposeلە کاتێکدا ڕەنگە بەکارهێنانی ڕێگاکە ڕاستەوخۆ دوای , ڕاست دەرکەوێت hide()، بەڵام دەبێتە هۆی ئەنجامە هەڵە. لێرەدا نموونەیەک لە بەکارهێنانی کێشەکە دەخەینەڕوو:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

ڕێکخستنە پێشوەختەکان

دەتوانیت ڕێکخستنە پێشوەختەکان بۆ پێوەکراوێک بگۆڕیت بە دەستکاریکردنی Constructor.Defaultشتەکەی پێوەکراوەکە:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

شێواز و تایبەتمەندییەکانی

هەموو پێوەکراوەکانی Bootstrap ئەم شێواز و تایبەتمەندییە ئیستاتیکیانەی خوارەوە ئاشکرا دەکات.

ڕێگا وەسف
dispose مۆداڵی توخمێک لەناو دەبات. (زانیاری هەڵگیراو لەسەر توخمەکەی DOM لا دەبات)
getInstance شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی مۆداڵی پەیوەست بە توخمێکی DOM بەدەستبهێنیت.
getOrCreateInstance شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی مۆداڵی پەیوەست بە توخمێکی DOM بەدەستبهێنیت، یان یەکێکی نوێ دروست بکەیت لە ئەگەری دەستپێنەکردندا.
تایبەتمەندی ئیستاتیک وەسف
NAME ناوی پێوەکراوەکە دەگەڕێنێتەوە. (نموونە: bootstrap.Tooltip.NAME)
VERSION دەتوانرێت لە ڕێگەی VERSIONتایبەتمەندی بنیاتنەری پێوەکراوەکەوە دەستت بگات بە وەشانی هەریەک لە پێوەکراوەکانی Bootstrap (نموونە: bootstrap.Tooltip.VERSION)

پاککەرەوە

Tooltips و Popovers پاککەرەوەی ناوەکیمان بەکاردەهێنن بۆ پاککردنەوەی بژاردەکان کە HTML وەرئەگرن.

allowListبەهای پێشوەختە بەم شێوەیەی خوارەوەیە:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const DefaultAllowlist = {
  // 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: []
}

ئەگەر بتەوێت بەهای نوێ زیاد بکەیت بۆ ئەم پێشوەختە allowListدەتوانیت ئەم کارانەی خوارەوە بکەیت:

const myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

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

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

ئەگەر دەتەوێت پاککەرەوەکەمان بەدەر بکەیت چونکە پێت باشە کتێبخانەی تایبەت بەکاربهێنیت، بۆ نموونە DOMPurify , پێویستە ئەم کارانەی خوارەوە بکەیت:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

بە ئیختیاری بەکارهێنانی jQuery

لە Bootstrap 5 پێویستت بە jQuery نییە ، بەڵام هێشتا دەتوانرێت پێکهاتەکانمان بەکاربهێنیت لەگەڵ jQuery. ئەگەر Bootstrap jQueryلە windowئۆبجێکتیەکەدا دەستنیشان بکات، ئەوا هەموو پێکهاتەکانمان لە سیستەمی پێوەکراوەکانی jQuery زیاد دەکات. ئەمەش ڕێگەت پێدەدات ئەم کارانەی خوارەوە ئەنجام بدەیت:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

هەروەها بۆ پێکهاتەکانی تریشمان.

هیچ ململانێیەک نییە

هەندێک جار پێویستە پێوەکراوەکانی Bootstrap لەگەڵ چوارچێوەی UI ی تر بەکاربهێنرێت. لەم بارودۆخانەدا، ناوبەناو دەتوانێت پێکدادانی ناوچەی ناوەکان ڕووبدات. ئەگەر ئەمە ڕوویدا، دەتوانیت بانگی .noConflictئەو پێوەکراوە بکەیت کە دەتەوێت بەهاکەی بگەڕێنیتەوە.

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

بووتستراپ بە فەرمی پشتگیری لە کتێبخانەکانی جاڤاسکڕێپتی لایەنی سێیەم وەک Prototype یان jQuery UI ناکات. سەرەڕای .noConflictڕووداوەکان و ناوەکان، لەوانەیە کێشەی گونجان هەبن کە پێویستە لەسەر خۆت چارەسەریان بکەیت.

ڕووداوەکانی jQuery

Bootstrap jQuery دەدۆزێتەوە ئەگەر jQueryلە windowئۆبجێکتیەکەدا هەبێت و هیچ data-bs-no-jqueryتایبەتمەندییەک لەسەر <body>. ئەگەر jQuery بدۆزرێتەوە، Bootstrap ڕووداوەکان دەردەدات بەهۆی سیستەمی ڕووداوەکانی jQuery. بۆیە ئەگەر بتەوێت گوێ لە ڕووداوەکانی Bootstrap بگرێت، دەبێت لەبری , شێوازەکانی jQuery ( .on, ) بەکاربهێنیت ..oneaddEventListener

$('#myTab a').on('shown.bs.tab', () => {
  // do something...
})

جاڤاسکڕێپت لەکارخراوە

پێوەکراوەکانی بووتستراپ هیچ فاڵباکێکی تایبەتیان نییە کاتێک جاڤاسکڕێپت لەکاردەخرێت. ئەگەر لەم حاڵەتەدا گرنگی بە ئەزموونی بەکارهێنەر دەدەیت، بەکاری بهێنە <noscript>بۆ ڕوونکردنەوەی دۆخەکە (و چۆن جاڤاسکڕێپت چالاک بکەیتەوە) بۆ بەکارهێنەرانت، و/یان زیادکردنی پاشەکشەی تایبەت بە خۆت.