web-dev-qa-db-ja.com

Twitter Bootstrapのデータトグル属性

Twitter Bootstrapのdata-toggle属性は何をするのですか？ Bootstrap APIに答えが見つかりませんでした。

私は以前に同様の質問を見たことがあります、 link 。しかし、それは私にとってあまり役に立ちませんでした。

javascriptjqueryhtml5twitter-bootstrap
266
user1765876

これは、要素をウィジェットの種類に自動的に関連付けるHTML 5データ属性です。

いくつかの例：

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

JavaScript docs を調べてdata-toggleを検索すると、コード例で使用されていることがわかります。

1つの実用的な例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>
198
epascarello

data-で始まる属性はすべて、特定の目的に使用されるカスタム属性の接頭辞です（その目的はアプリケーションによって異なります）。本来の意図した目的以外の目的でrelや他の属性を多用することに対する意味的な救済策として追加されました（relは高度なツールチップのようなもののためのデータを保持するためにしばしば使用されました）。

Bootstrapの場合、その内部の動作には慣れていませんが、その名前から判断すると、可視性の切り替えや要素のモード（折りたたみ式など）の切り替えを可能にするフックになると思います。サイドバー Octopress.orgでは ）。

html5doctorにはデータ属性 に関する良い記事があります。

サイクル2は、データ属性 の広範な使用例です。

71
Shauna

たとえば、レシピをリスト表示するWebアプリケーションを作成しているとします。開封するレシピを選択する前に、顧客にリストのソート、レシピの機能の表示などができるようにしたい場合があります。これを行うには、調理時間、主な材料、食事の位置などのことをレシピのリスト要素のすぐ内側に関連付ける必要があります。

<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>

その情報をページに取り込むためには、さまざまなことができます。各LI要素にコメントを追加したり、リスト項目にrel属性を追加したり、時間、食事、および材料に基づいてすべてのレシピを別々のフォルダに配置したりできます。ほとんどの開発者が採用した解決策は、現在の要素に関する情報を格納するためにクラス属性を使用することでした。これにはいくつかの利点があります。

  • 1つの要素に複数のクラスを保存できます
  • クラス名は人間が読むことができる
  • JavaScript（className）を使ってクラスにアクセスするのは簡単です
  • クラスは、それが属している要素に関連付けられています

しかし、この方法にはいくつかの大きな欠点があります。

  • あなたはクラスが何をするのか覚えておく必要があります。忘れたり、新しい開発者がプロ​​ジェクトを引き継いだりすると、それがアプリケーションの実行に影響することに気付かずにクラスが削除または変更される可能性があります。
  • クラスはCSSでのスタイル設定にも使用されます。誤ってCSSクラスをデータクラスと重複させて、ライブページのスタイルが変わってしまうことがあります。
  • 複数のデータ要素を追加することはより困難です。複数のデータ要素がある場合は、クラス名またはクラスリスト内の位置のいずれかを使用して、JavaScriptで何らかの方法でそれらにアクセスする必要があります。しかし、めちゃくちゃにするのは簡単です。

私が提案した他のすべての方法は他のものと同様にこれらの問題を抱えていました。しかし、データをすばやく簡単に含めるにはこれが唯一の方法なので、それが私たちのやり方です。 HTML5データを救済するための属性

HTML 5では、任意の要素、つまりカスタムデータ要素（data- *）に新しいタイプの属性が追加されました。これらは、（*で示される）カスタム属性です。これをHTML要素に追加して、必要なタイプのデータを定義できます。それらは2つの部分で構成されています。

属性名これは属性の名前です。最低1文字の小文字で、接頭辞data-が必要です。例：データ主成分、データ調理時間、データ食事。これはあなたのデータの名前です。

属性値他のHTML属性と同様に、データ自体を等号で区切って引用符で囲みます。このデータは、Webページで有効な任意の文字列です。例えば、data-main-materials = "chocolate"などです。

その後、これらのデータ属性を任意のHTML要素に適用できます。たとえば、上記の例のリストに情報を定義できます。

<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>

HTMLにその情報があれば、JavaScriptでその情報にアクセスし、そのデータに基づいてページを操作することができます。

30
shikarii

ブートストラップドキュメントから：

<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a 
controller element, like a button, along with a data-target="#foo" or href="#foo" 
to target a specific modal to toggle.-->

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
23
Dan

このデータ属性が存在すると、Bootstrapはユーザーとの対話で他の要素の表示状態または論理状態を切り替えるように指示されます。

モーダル、タブコンテンツ、ツールチップ、ポップオーバーメニューを表示したり、トグルボタンの押下状態を設定するために使用されます。それは明確なドキュメンテーションなしで複数の方法で使用されます。

5
Gregor

これはブートストラップ定義のHTML5データ属性です。ボタンをイベントにバインドします。

4
Amrendra

ブートストラップでのデータトグルの目的は、jQueryを使用して特定の種類のすべてのタグを見つけることができるようにすることです。例えば、data-toggle = "popover"をすべてのpopoverタグに入れてから、JQueryセレクターを使用してそれらすべてのタグを検索し、popover（）関数を実行してそれらを初期化できます。同様に、class = "myPopover"をタグに付けて、.myPopoverセレクタを使って同じことをすることもできます。その属性に関して何か特別なことが起こっているように見えるので、ドキュメンテーションは紛らわしいです。

この

<div class="container">
    <h3>Popover Example</h3>
    <a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
    <a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>

<script>
    $(document).ready(function(){
        $('.myPop').popover();   
    });
</script>

うまく動作します。

4
shawnlg

非常に多くの答えが与えられていますが、それらは要点に達しません。これを修正しましょう。

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

ポイントへ

  1. data-で始まる属性はHTML5パーサーによって解析されません。
  2. ブートストラップはdata-toggle属性を使用して折りたたみ機能を作成します。

使い方：わずか2ステップ

  1. 折りたたむ要素class="collapse"に#Aを追加します。
  2. data-target="#A"とdata-toggle="collapse"を追加してください。

目的：Bootstrapを使用する場合、data-toggle属性を使用すると、div（block）を折りたたむ/展開するためのコントロールを作成できます。

3
Akshay Vijay Jain

ブートストラップは、JavaScript内でDOM要素の属性に簡単にアクセスするためにHTML 5標準を利用します。

データ-*

カスタムデータ属性と呼ばれる属性のクラスを形成します。これにより、HTMLとスクリプトで使用されるDOM表現との間で独自の情報を交換できます。このようなカスタムデータはすべて、属性が設定されている要素のHTMLElementインターフェイスを介して利用できます。 HTMLElement.datasetプロパティからアクセスできます。

参照

2
Rel

ここdata-toggleが代入することができる値のより多くの例を見つけることができます。ページにアクセスしてからCTRL+Fを検索し、data-toggleを検索してください。

2
pebox11