Bootstrapのdata属性に深く入り込む

Bootrapを学んでしばらく経って、突然1つの問題を思い出して、dataの属性についてあります.
気になる人は、Bootstrapの多くの効果にはclass=」が実現されていることに気づきますが、このdata属性はここでは特別に見えます.
まず、ここのdata属性は何ですか?Bootstrapに属していますか?dataプロパティは何に使いますか?
ここでのdata属性はHTML 5で開発者が自由にラベルに属性を追加できるようにしたもので、このカスタム属性は一般的に「data」で始まる.
data-*の定義と使い方について:
Data-*プロパティは、ページまたはアプリケーションのプライベートカスタムデータを格納するために使用されます.data-*属性は、すべてのHTML要素にカスタムdata属性を埋め込む能力を与えます.保存された(カスタマイズされた)データは、ページのJavaScriptによって利用され、Ajax呼び出しやサーバ側データベースクエリを行わないより良いユーザ体験を作成することができます.
data-*プロパティには、次の2つのセクションがあります.

プロパティ名には大文字は含まれず、接頭辞「data」の後に少なくとも1つの文字が必要です.

属性値は、任意の文字列

であることができる.
したがって、ここのdata属性はBootstrapに属さず、HTML 5に属する.ここではBootstrap開発者がカスタマイズしたカスタム属性にすぎず、ユーザーが呼び出すのに便利である.
Bootstrap apiがdata属性の役割をどのように説明しているかを見てみましょう.
JavaScriptコードを1行書く必要がなく、dataプロパティAPIだけですべてのBootstrapプラグインを使用できます.これはBootstrapの一等APIであり、あなたの第一選択の方法でもあるはずです.
また、この機能をオフにする必要がある場合があります.したがって、dataプロパティAPIを閉じる方法、すなわち、ドキュメントネーミングスペースにバインドされたすべてのイベントdata-apiを解除する方法も提供される.次のようにします.

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

また、特定のプラグインの場合、data-apiの前にそのプラグインの名前をネーミングスペースとして追加するだけで、以下のようになります.

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

まとめますと、bootstrapのdata-apiはbootstrapを呼び出すのに便利です.jsにはJQueryが含まれていますjsを含む豊富なプラグイン.
JQueryプラグインはBootstrapのコンポーネントに「生命」を与えていることに注意してください.すべてのプラグインを簡単に一度に導入したり、ページに単独で導入したりすることができます.プラグインの単一参照(Bootstrapで提供される単一*.jsファイルを使用)、または一度にすべて導入します(bootstrap.jsまたは圧縮版のbootstrap.min.jsを使用します).
一般的なBootstrapのdata属性をまとめます.
(1)、data-toggle
Data-toggleは主にラベルセレクタに用いられ、bootstrapを参照する.cssの一部のソースコード:

[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

例:

  
  

    ...
  

ここでdata-toggle="dropdown"はaのプロパティに設定され、ドロップダウンメニューを切り替えます.
Data-toggleはよく使われ、ドロップダウンメニューがあり、data-targetと一緒に使用されます.Data-toggleは、JavaScriptがボタンに何をする必要があるかを示すために使用されます.Data-targetは、どの要素に切り替えるかを示します.
(2)、data-target
Data-targetは主にdata-toggleと組み合わせて使用され、モードウィンドウ、マルチキャストマップでよく使用され、ロードおよび切り替えのターゲットを指定します.
モダリティウィンドウでdata-toggleと組み合わせて使用します.
ボタンやリンクなどのコントローラ要素に属性data-toggle=「modal」を設定し、data-target=「#identifier」またはhref=「#identifier」を設定して、切り替える特定のモードボックス(id=「identifier」を含む)を指定します.bootstrap.jsのdata-toggleとdata-targetに関する一部のソースコード:

var Collapse = function (element, options) {
    this.$element      = $(element)
    this.options       = $.extend({}, Collapse.DEFAULTS, options)
    this.$trigger      = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
                           '[data-toggle="collapse"][data-target="#' + element.id + '"]')
this.transitioning = null

ドロップダウン・メニューの例:

  ドロップダウンメニュー(Dropdown)
  

    ...
  

モードウィンドウの例:

例:

  
    

        

        …
    
  
 
 

 

(3)、data-dismiss
一般的には、モードウィンドウでモードウィンドウdata-dismiss=「modal」を閉じるために使用されます.
(4)、data-slide-to、data-slide、data-ride
data-slide-to、data-slide、data-rideは、マルチキャストチャートcarouselに使用されます.

プロパティdata-slideは、現在の位置に対するスライドの位置を変更するためにキーワードprevまたはnextを受け入れます.

はdata-slide-toを使用して元のスライドインデックスをマルチキャストに渡し、data-slide-to="2"はスライダを特定のインデックスに移動し、インデックスは0からカウントされます.

data-ride=「carousel」属性は、ページロード時にアニメーション再生を開始することをマークするために使用されます.
bootstrapでjsのdata-slide-to、data-slide、data-rideに関する一部のソースコード:

// CAROUSEL DATA-API
// =================

  var clickHandler = function (e) {
    var href
    var $this   = $(this)
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
    if (!$target.hasClass('carousel')) return
    var options = $.extend({}, $target.data(), $this.data())
    var slideIndex = $this.attr('data-slide-to')
    if (slideIndex) options.interval = false

    Plugin.call($target, options)

    if (slideIndex) {
      $target.data('bs.carousel').to(slideIndex)
    }

    e.preventDefault()
  }

  $(document)
    .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
    .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)

  $(window).on('load', function () {
    $('[data-ride="carousel"]').each(function () {
      var $carousel = $(this)
      Plugin.call($carousel, $carousel.data())
    })
  })

}(jQuery);