Bootstrap 3 tarafından kullanılan data-target
özelliğinin arkasındaki sistemin veya davranışın ne olduğunu söyleyebilir misiniz?
Data-toggle'ın grafik işlevselliği Bootstrap'in API JavaScript'ini hedeflemek için kullanıldığını biliyorum.
bootstrap tarafından hayatınızı kolaylaştırmak için data-target
kullanılır. Önceden hazırlanmış JavaScript bileşenlerini kullanmak için (çoğunlukla) tek bir Javascript satırı yazmanıza gerek yoktur.
Data-target` niteliği, değiştirilecek HTML Öğesine işaret eden bir CSS seçici içermelidir.
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
[...]
</div>
Bu örnekte, düğme data-target="#myModal"
özelliğine sahiptir, üzerine tıklarsanız, <div id="myModal">...</div>
değiştirilecektir (bu durumda soluklaştırılacaktır).
Bunun nedeni CSS seçicilerindeki #myModal
öğesinin myModal
değerine sahip bir id
niteliğine sahip öğeleri işaret etmesidir.
HTML5 "data-" niteliği hakkında daha fazla bilgi: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes