Hoe werkt het attribuut voor data-traag? (Wat is de API?)

Bootstrap maakt gebruik van een aangepast attribuut genaamd data-toggle. Hoe gedraagt ​​deze functie zich? Heeft het gebruik van het JavaScript-bibliotheek van Bootstrap? Ook, welke gegevens-traagopties zijn beschikbaar. Tot nu toe tellen ik

• Collapse
• tab
• modal
• Dropdown

Wat doen elk van deze?

TLDR; Wat is de API voor de aangepaste data-toggle-attribuut?

Antwoord 1, Autoriteit 100%

Ik denk dat u een beetje in de war bent met het doel van aangepaste gegevensattributen. Van de W3-specificatie

Aantaalgegevenskenmerken zijn bedoeld om aangepaste gegevens privé op te slaan op de pagina of de toepassing, waarvoor geen passendere kenmerken of elementen zijn.

Vanzelf een attribuut van data-toggle=valueis eigenlijk een sleutelwaardepaar, waarin de toets “Data-toggle” is en de waarde “waarde” is.

In de context van Bootstrap zijn de aangepaste gegevens in het kenmerk bijna nutteloos zonder de context dat hun JavaScript-bibliotheek voor de gegevens omvat. Als u kijkt naar de niet-gedimipeerde versie van bootstrap.js dan kunt u een zoektocht naar “data-toggle” en vinden hoe deze wordt gebruikt.

Hier is een voorbeeld van Bootstrap JavaScript-code die ik rechtstreeks van het bestand heb gekopieerd met betrekking tot het gebruik van “Data-Toggle”.

• knop schakelen

  Button.prototype.toggle = function () {
    var changed = true
    var $parent = this.$element.closest('[data-toggle="buttons"]')
    if ($parent.length) {
      var $input = this.$element.find('input')
      if ($input.prop('type') == 'radio') {
        if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
        else $parent.find('.active').removeClass('active')
      }
      if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
    } else {
      this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
    }
    if (changed) this.$element.toggleClass('active')
  }
  

De context die de code biedt, laat zien dat Bootstrap het kenmerk data-togglegebruikt als een aangepaste queryselector om het specifieke element te verwerken.

Van wat ik zie, zijn dit de opties voor het wisselen van gegevens:

• samenvouwen
• vervolgkeuzelijst
• modaal
• tabblad
• pil
• knop(pen)

Misschien wil je de Bootstrap JavaScript-documentatiebekijken voor meer informatie over wat ze allemaal doen, maar eigenlijk het attribuut data-toggleschakelt het element in of niet.

Antwoord 2, autoriteit 8%

De data-*-attributen worden gebruikt om aangepaste gegevens privé op te slaan voor de pagina of applicatie

Dus Bootstrap gebruikt deze attributen voor het opslaan van toestanden van objecten

W3School data-* beschrijving

Antwoord 3

Het attribuut data-toggle vertelt Bootstrap eenvoudig wat het precies moet doen door het de naam te geven van de toggle-actie die het op het punt staat uit te voeren op een doelelement. Als u samenvouwen opgeeft. Dit betekent dat bootstrap het element waarnaar wordt verwezen door het gegevensdoel van de actie waarop u hebt geklikt, zal in- of uitklappen.

Opmerking: het doelelement moet de juiste klasse voor bootstrap hebben om de actie uit te voeren

bronactie:
Data-Toggle = Collapse // Type toggle
Data-doel = #mydiv

doel:
Klasse = Collapse // I Can Collapse
id = mydiv

Dit is hetzelfde voor ander type toggle-acties zoals tab, modal, vervolgkeuzelijst