Yanıtlar:
Öğeyi otomatik olarak widget'ın türüne bağlayan bir Bootstrap veri özniteliğidir. Veri- *, html5 spesifikasyonunun bir parçasıdır ve veri geçişi Bootstrap'a özgüdür.
Bazı örnekler:
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"Üzerinden gidin Önyükleme JavaScript dokümanlar ve veri geçiş için arama ve bunun kod örneklerde kullanılan göreceksiniz.
Çalışan bir örnek:
<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>data-İle başlayan herhangi bir özellik, belirli bir amaç için kullanılan özel özelliklerin önekidir (bu amaç uygulamaya bağlıdır). İnsanların relorijinal amaçlarından başka amaçlar için yoğun kullanımlarına ve diğer özelliklerine anlamsal bir çözüm olarak eklendi ( relgenellikle gelişmiş araç ipuçları gibi şeyler için veri tutmak için kullanıldı).
Bootstrap durumunda, iç çalışmalarına aşina değilim, ancak isminden yola çıkarak, bağlı olduğu öğenin görünürlüğünü veya belki de bir modunu değiştirmeye izin veren bir kanca olduğunu tahmin ediyorum (katlanabilir yan çubuk Octopress.org üzerinde ).
html5doctor veri özniteliği hakkında iyi bir makaleye sahiptir .
Döngü 2, data özelliğinin kapsamlı kullanımının başka bir örneğidir .
Örneğin, tarifleri listelemek ve görüntülemek için bir web uygulaması oluşturduğunuzu varsayalım. Müşterilerinizin listeyi sıralamasını, tariflerin özelliklerini görüntülemesini vb. Açacakları tarifi seçmeden önce isteyebilirsiniz. Bunu yapmak için yemek tarifleri için liste öğelerinin içinde pişirme süresi, birincil bileşen, yemek pozisyonu vb.
<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>Bu bilgiyi sayfaya almak için birçok farklı şey yapabilirsiniz. Her bir LI öğesine yorum ekleyebilir, liste öğelerine rel öznitelikleri ekleyebilir, tüm tarifleri zaman, yemek ve içerik (yani) temelinde ayrı klasörlere yerleştirebilirsiniz. Çoğu geliştiricinin aldığı çözüm, geçerli öğe hakkında bilgi depolamak için sınıf niteliklerini kullanmaktı. Bunun birkaç avantajı vardır:
Ancak bu yöntemin bazı dezavantajları vardır:
Önerdiğim diğer tüm yöntemlerin yanı sıra diğerleri de bu sorunları vardı. Ancak, verileri hızlı ve kolay bir şekilde dahil etmenin tek yolu olduğundan, bunu yaptık. Kurtarmaya HTML5 Veri Öznitelikleri
HTML5, herhangi bir öğeye (özel veri öğesi (veri- *)) yeni bir özellik türü ekledi. Bunlar, istediğiniz herhangi bir veri türünü tanımlamak için HTML öğelerinize ekleyebileceğiniz özel (* ile gösterilir) özelliklerdir. İki bölümden oluşurlar:
Özellik Adı Bu, özelliğin adıdır. En az bir küçük harf olmalı ve veri önekine sahip olmalıdır. Örneğin: veri-ana bileşen, veri pişirme süresi, veri-yemek. Bu, verilerinizin adıdır.
Özellik Vaule Diğer tüm HTML özellikleri gibi, verilerin kendisini de eşittir işaretiyle ayrılmış tırnak işaretleri arasına dahil edersiniz. Bu veriler bir web sayfasında geçerli olan herhangi bir dize olabilir. Örneğin: veri-ana bileşen = "çikolata".
Daha sonra bu veri özelliklerini istediğiniz herhangi bir HTML öğesine uygulayabilirsiniz. Örneğin, yukarıdaki örnek listede bilgileri tanımlayabilirsiniz:
<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'nizde bu bilgilere sahip olduktan sonra, JavaScript'e erişebilir ve sayfayı bu verilere dayanarak değiştirebilirsiniz.
Gönderen Bootstrap Dokümanlar:
<!--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>Çok fazla cevap verildi, ama konuya gelmiyorlar. Bunu düzeltelim.
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
Noktaya
data-hiçbir özellik HTML5 ayrıştırıcısı tarafından ayrıştırılmaz.data-toggledaraltma işlevselliği oluşturmak için özniteliği kullanır .Nasıl kullanılır : Sadece 2 Adım
class="collapse"öğeye ekleyin #A.data-target="#A"ve data-toggle="collapse".Amaç: data-toggleöznitelik, divBootstrap kullanırsak bir (bloğu) daraltmak / genişletmek için bir kontrol oluşturmamıza izin verir .
Bu veri özelliğinin varlığı, Bootstrap'e kullanıcı etkileşimi üzerindeki başka bir öğenin görsel veya mantıksal durumları arasında geçiş yapmasını söyler.
Bir mod düğmesi, sekme içeriği, araç ipuçları ve popover menülerini göstermek ve bir açma / kapatma düğmesi için basılı bir durum ayarlamak için kullanılır. Net bir dokümantasyon olmaksızın birçok şekilde kullanılır.
Bootstrap'te veri geçişinin amacı, belirli bir türdeki tüm etiketleri bulmak için jQuery'yi kullanabilmenizdir. Örneğin, tüm popover etiketlerine data-toggle = "popover" koyarsınız ve ardından tüm bu etiketleri bulmak için bir JQuery seçici kullanabilir ve bunları başlatmak için popover () işlevini çalıştırabilirsiniz. Etikete class = "myPopover" yazıp aynı şeyi yapmak için .myPopover seçicisini kullanabilirsiniz. Belgeler kafa karıştırıcı, çünkü bu özellikte özel bir şeylerin devam ettiğini gösteriyor.
Bu
<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>gayet iyi çalışıyor.
Bootstrap, javascript içinde DOM öğesi özelliklerine kolayca erişmek için HTML5 standartlarından yararlanır.
Özel veri öznitelikleri adı verilen ve HTML ile komut dosyaları tarafından kullanılabilecek DOM temsili arasında bilgi alışverişi yapılmasına izin veren bir öznitelik sınıfı oluşturur. Bu tür tüm özel veriler, özelliğin ayarlandığı öğenin HTMLElement arabirimi aracılığıyla kullanılabilir. HTMLElement.dataset özelliği bunlara erişim sağlar.