web-dev-qa-db-ja.com

データ切り替え属性はどのように機能しますか？ （そのAPIは何ですか？）

ブートストラップは、data-toggleという名前のカスタム属性を使用します。この機能はどのように動作しますか？これを使用するには、BootstrapのJavaScriptライブラリが必要ですか？また、どのデータ切り替えオプションが利用可能です。これまでのところ、私は数えます

  • 崩壊
  • タブ
  • モーダル
  • 落ちる

これらはそれぞれ何をしますか？

TLDR;ブートストラップのカスタムdata-toggle属性のAPIとは何ですか？

javascriptcsshtml5twitter-bootstrap
44
jpaugh

カスタムデータ属性の目的について少し混乱していると思います。 w3 spec から

カスタムデータ属性は、ページまたはアプリケーション専用のカスタムデータを格納することを目的としており、適切な属性または要素はありません。

それ自体では、data-toggle=valueの属性は基本的にキーと値のペアであり、キーは「データ切り替え」であり、値は「値」です。

Bootstrapのコンテキストでは、属性内のカスタムデータは、JavaScriptライブラリがデータ用に含むコンテキストなしではほとんど役に立ちません。 bootstrap.js の縮小されていないバージョンを見ると、「data-toggle」を検索して、その使用方法を見つけることができます。

「データトグル」の使用に関してファイルから直接コピーしたBootstrap JavaScriptコードの例を次に示します。

  • ボタンの切り替え

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

    }

コードが提供するコンテキストは、Bootstrapがdata-toggle属性をカスタムクエリセレクターとして使用して特定の要素を処理していることを示しています。

私が見るものから、これらはデータ切り替えオプションです：

  • 崩壊
  • 落ちる
  • モーダル
  • タブ
  • ピル
  • ボタン

Bootstrap JavaScript documentation を参照して、それぞれの詳細を確認することもできますが、基本的にdata-toggle属性は要素をアクティブまたは非アクティブに切り替えます。

38
rogergarrison

Data- *属性は、ページまたはアプリケーションにプライベートなカスタムデータを保存するために使用されます

Bootstrapはオブジェクトの状態を保存するためにこれらの属性を使用します

W3Schoolデータ-*説明

4
Microshine