Co to jest atrybut „data-target” w Bootstrap 3?

95

Czy możesz mi powiedzieć, jaki system lub zachowanie kryje się za data-targetatrybutem używanym przez Bootstrap 3?

Wiem, że przełącznik danych służył do kierowania JavaScript w API Bootstrap do funkcji graficznych.

twitter-bootstrap-3

— darkomen
źródło

115

data-targetjest używany przez bootstrap, aby ułatwić Ci życie. W większości przypadków nie musisz pisać ani jednej linii kodu JavaScript, aby korzystać z gotowych komponentów JavaScript .

Plik data-targetAtrybut powinien zawierać selektora CSS że punkty do elementu HTML, który zostanie zmieniony.

Modalny kod przykładu z BS3 :

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

W tym przykładzie przycisk ma data-target="#myModal", jeśli go klikniesz, <div id="myModal">...</div>zostanie zmodyfikowany (w tym przypadku wyblakły). Dzieje się tak, ponieważ #myModalselektory CSS wskazują na elementy, które mają idatrybut z myModalwartością.

Więcej informacji na temat atrybutu „data-” HTML5: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

— Pascalmh
źródło

1

to jest jak selektor silnika CSS i nic innego?

— darkomen

1

@miltone - dokładnie, nie tak. data-targetakceptuje selektor CSS wskazujący na odpowiedni element.

— PhistucK

20

Przełącznik mówi Bootstrapowi, co ma zrobić, a cel mówi Bootstrapowi, który element zostanie otwarty. Dlatego za każdym razem, gdy zostanie kliknięty taki link, pojawi się modal z identyfikatorem „basicModal”.

— user3098847
źródło