web-dev-qa-db-fra.com

Comment fonctionne l'attribut data-toggle? (Quelle est son API?)

Bootstrap utilise un attribut personnalisé nommé data-toggle. Comment se comporte cette fonctionnalité? Son utilisation nécessite-t-elle la bibliothèque JavaScript de Bootstrap? En outre, quelles options de bascule de données sont disponibles. Jusqu'ici, je compte

  • effondrer
  • languette
  • modal
  • menu déroulant

Que font chacun de ceux-ci?

TLDR; Qu'est-ce que l'API pour custom _ de bootstrap data-toggle attribut?

javascriptcsshtml5twitter-bootstrap
44
jpaugh

Je pense que vous êtes un peu confus quant à l'objectif des attributs de données personnalisés. De la w3 spec

Les attributs de données personnalisés sont destinés à stocker des données personnalisées privées de la page ou de l'application, pour lesquelles il n'existe plus d'attributs ou d'éléments appropriés.

En soi, un attribut de data-toggle=value Est fondamentalement une paire clé-valeur, dans laquelle la clé est "data-toggle" et la valeur est "value".

Dans le contexte de Bootstrap, les données personnalisées de l'attribut sont presque inutiles sans le contexte que leur bibliothèque JavaScript inclut pour les données. Si vous regardez la version non minifiée de bootstrap.js , alors vous pourrez faire une recherche sur "data-toggle" et trouver comment elle est utilisée.

Voici un exemple de Bootstrap) code JavaScript que j'ai copié directement du fichier concernant l'utilisation de "data-toggle".

  • Bouton bascule

    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')

    }

Le contexte fourni par le code montre que Bootstrap utilise l'attribut data-toggle Comme sélecteur de requête personnalisé pour traiter l'élément en question.

D'après ce que je vois, voici les options de basculement de données:

  • effondrer
  • menu déroulant
  • modal
  • languette
  • pilule
  • boutons)

Vous voudrez peut-être consulter le documentation JavaScript sur Bootstrap pour obtenir plus de détails sur ce que chacun fait, mais en gros l'attribut data-toggle Bascule l'élément en actif ou non.

38
rogergarrison

Les attributs data- * sont utilisés pour stocker des données personnalisées privées sur la page ou l'application.

Donc Bootstrap utilise ces attributs pour sauvegarder les états des objets

données W3School- * description

4
Microshine