Atribut data-toggle di Twitter Bootstrap

Apa yang dilakukan data-toggleatribut di Twitter Bootstrap? Saya tidak dapat menemukan jawaban di Bootstrap API.

Saya telah melihat pertanyaan serupa sebelumnya, tautan . Tapi itu tidak banyak membantu saya.

Ini adalah atribut data Bootstrap yang secara otomatis menghubungkan elemen ke jenis widgetnya. Data- * adalah bagian dari spec html5, dan data-toggle khusus untuk Bootstrap.

Beberapa contoh:

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

Buka dokumen Bootstrap JavaScript dan cari data-toggle dan Anda akan melihatnya digunakan dalam contoh kode.

Satu contoh kerja:

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

Atribut apa pun yang dimulai dengan data-adalah awalan untuk atribut khusus yang digunakan untuk beberapa tujuan tertentu (tujuan itu tergantung pada aplikasi). Itu ditambahkan sebagai obat semantik untuk penggunaan banyak orang reldan atribut lainnya untuk tujuan selain tujuan semula yang dimaksudkan ( relsering digunakan untuk menyimpan data untuk hal-hal seperti tooltips canggih).

Dalam hal Bootstrap, saya tidak terbiasa dengan cara kerja bagian dalamnya, tetapi jika dilihat dari namanya, saya kira itu adalah pengait yang memungkinkan pengalih pandang dari visibilitas atau mungkin mode elemen yang dilampirkannya (seperti yang dapat dilipat) bilah samping di Octopress.org ).

html5doctor memiliki artikel bagus tentang atribut data .

Siklus 2 adalah contoh lain dari penggunaan atribut data yang ekstensif .

Misalnya, Anda membuat aplikasi web untuk membuat daftar dan menampilkan resep. Anda mungkin ingin pelanggan Anda dapat mengurutkan daftar, menampilkan fitur resep, dan sebagainya sebelum mereka memilih resep untuk dibuka. Untuk melakukan ini, Anda perlu mengasosiasikan hal-hal seperti waktu memasak, bahan utama, posisi makan, dan sebagainya tepat di dalam elemen daftar untuk resep.

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

Untuk memasukkan informasi itu ke halaman, Anda dapat melakukan banyak hal berbeda. Anda dapat menambahkan komentar ke setiap elemen LI, Anda dapat menambahkan atribut rel ke item daftar, Anda dapat menempatkan semua resep dalam folder terpisah berdasarkan waktu, makan, dan bahan (yaitu). Solusi yang diambil sebagian besar pengembang adalah menggunakan atribut kelas untuk menyimpan informasi tentang elemen saat ini. Ini memiliki beberapa keunggulan:

• Anda dapat menyimpan beberapa kelas pada suatu elemen
• Nama-nama kelas dapat dibaca manusia
• Mudah mengakses kelas dengan JavaScript (className)
• Kelas dikaitkan dengan elemen yang aktif

Tetapi ada beberapa kelemahan utama dari metode ini:

• Anda harus ingat apa yang dilakukan kelas. Jika Anda lupa atau pengembang baru mengambil alih proyek, kelas mungkin dihapus atau diubah tanpa menyadarinya yang memengaruhi cara aplikasi berjalan.
• Kelas juga digunakan untuk penataan gaya dengan CSS, dan Anda dapat menduplikasi kelas CSS dengan kelas data karena kesalahan, berakhir dengan gaya aneh di laman langsung Anda.
• Lebih sulit untuk menambahkan beberapa elemen data. Jika Anda memiliki beberapa elemen data, Anda perlu mengaksesnya dengan JavaScript dengan cara tertentu, baik dengan nama kelas atau posisi dalam daftar kelas. Tetapi mudah untuk dikacaukan.

Semua metode lain yang saya sarankan memiliki masalah ini dan juga yang lain. Tetapi karena itu adalah satu-satunya cara untuk memasukkan data dengan cepat dan mudah, itulah yang kami lakukan. Atribut Data HTML5 untuk Penyelamatan

HTML5 menambahkan tipe atribut baru ke elemen apa pun — elemen data khusus (data- *). Ini adalah atribut khusus (dilambangkan dengan *) yang dapat Anda tambahkan ke elemen HTML Anda untuk menentukan jenis data apa pun yang Anda inginkan. Mereka terdiri dari dua bagian:

Nama Atribut Ini adalah nama atribut. Itu harus setidaknya satu karakter huruf kecil dan memiliki data awalan-. Misalnya: data-bahan utama, data waktu memasak, data-makan. Ini adalah nama data Anda.

Atribut Vaule Seperti atribut HTML lainnya, Anda memasukkan data itu sendiri dalam tanda kutip yang dipisahkan oleh tanda sama dengan. Data ini dapat berupa string apa pun yang valid pada halaman web. Misalnya: data-main-ingredient = "chocolate".

Anda kemudian dapat menerapkan atribut data ini ke elemen HTML apa pun yang Anda inginkan. Misalnya, Anda dapat menentukan informasi dalam daftar contoh di atas:

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

Setelah Anda memiliki informasi itu dalam HTML Anda, Anda akan dapat mengaksesnya dengan JavaScript dan memanipulasi halaman berdasarkan data itu.

Dari Bootstrap Docs:

<!--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>

Begitu banyak jawaban telah diberikan, tetapi mereka tidak sampai pada intinya. Mari kita perbaiki ini.

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

Langsung ke intinya

1. Atribut apa pun yang dimulai dengan data-tidak diuraikan oleh parser HTML5.
2. Bootstrap menggunakan data-toggleatribut untuk membuat fungsionalitas runtuh.

Cara menggunakan : Hanya 2 Langkah

1. Tambahkan class="collapse"ke elemen #Ayang ingin Anda hancurkan.
2. Tambah data-target="#A"dan data-toggle="collapse".

Tujuan: data-toggleatribut memungkinkan kita untuk membuat kontrol untuk menutup / memperluas div(blok) jika kita menggunakan Bootstrap.

Kehadiran atribut-data ini memberitahu Bootstrap untuk beralih antara kondisi visual atau logis elemen lain pada interaksi pengguna.

Ini digunakan untuk menampilkan modals, konten tab, tooltips dan menu popover serta mengatur keadaan yang ditekan untuk tombol toggle. Ini digunakan dalam berbagai cara tanpa dokumentasi yang jelas.

Tujuan dari toggle data di bootstrap adalah agar Anda dapat menggunakan jQuery untuk menemukan semua tag dari jenis tertentu. Misalnya, Anda meletakkan data-toggle = "popover" di semua tag popover dan kemudian Anda dapat menggunakan pemilih JQuery untuk menemukan semua tag tersebut dan menjalankan fungsi popover () untuk menginisialisasi mereka. Anda juga bisa memasukkan class = "myPopover" pada tag dan menggunakan pemilih .myPopover untuk melakukan hal yang sama. Dokumentasinya membingungkan, karena membuatnya tampak bahwa sesuatu yang istimewa sedang terjadi dengan atribut itu.

Ini

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

berfungsi dengan baik.

Ini adalah atribut data HTML5 Bootstrap yang ditentukan. Itu mengikat tombol ke suatu acara.

Di sini Anda juga dapat menemukan lebih banyak contoh untuk nilai yang data-toggledapat ditugaskan. Cukup kunjungi halaman dan kemudian CTRL+Funtuk mencari data-toggle.

Bootstrap memanfaatkan standar HTML5 untuk mengakses atribut elemen DOM dengan mudah dalam javascript.

data-*

Membentuk kelas atribut, yang disebut atribut data khusus, yang memungkinkan informasi hak milik untuk dipertukarkan antara HTML dan representasi DOM-nya yang dapat digunakan oleh skrip. Semua data khusus tersebut tersedia melalui antarmuka HTMLElement dari elemen yang diset atribut. Properti HTMLElement.dataset memberikan akses kepada mereka.

Referensi