Latest web development tutorials

Bootstrap Przegląd wtyczek

W poprzedniej części omówionoukład elementów do montażu to tylko początek.Bootstrap dostarczana jest z 12 rodzajów jQuery plugin rozszerza funkcjonalność może być dodana do serwisu bardziej interaktywnym. Nawet jeśli nie jesteś zaawansowanym programistą JavaScript, można również rozpocząć, aby dowiedzieć się Bootstrap JavaScript wtyczek. Wykorzystanie danych API Bootstrap (Bootstrap danych API), w większości plug-in może być uruchamiany bez konieczności pisania kodu.

Site Referencje wtyczkę Bootstrap na dwa sposoby:

  • Cytat sama: użyć osobnego* .jspliki startowej.Niektóre wtyczki i CSS składnik zależy od innych wtyczek. Jeśli podłączyć oddzielny odniesienie, upewnij się, że rozumieją zależności między wtyczek.
  • Kompilowania (równocześnie) Cytat: Wpiszbootstrap.jslub skompresowanej wersjibootstrap.min.js.
    Nie staraj się cytować te dwa pliki, a ponieważ bootstrap.jsbootstrap.min.js zawierają wszystkie wtyczki.
Wszystkie wtyczki polegać na jQuery. Musisz być określany w pliku wtyczki przed jQuery. Odwiedź bower.json zobaczyć Bootstrap aktualnie obsługiwanych wersji jQuery.

dane nieruchomości

  • Możesz być w stanie wykorzystać wszystkie dane atrybutów Bootstrap wtyczki API, bez pisania nawet jednej linii kodu JavaScript tylko. Jest to pierwsza klasa Bootstrap API, powinien być preferowany sposób.
  • Potem znowu, w niektórych przypadkach może być konieczne, aby wyłączyć tę funkcję. Dlatego oferujemy zamknięty metody API atrybutu danych, a mianowicie do zniesienia nazw danych APIi wiążące wydarzenia dokumentów. Takich jak: 
    $ (Document) .off ( '. Danych API)
  • Aby zamknąć konkretnej wtyczki, tuż przed nazw danych api plus nazwa widget jako nazw, jak pokazano poniżej: 
    $ (Document) .off ( '. Alert.data-API)

programowe API

Zapewniamy drogę do czystej API JavaScript dla wszystkich wtyczek startowej. Wszystkie publiczne wywołania API są obsługiwane indywidualnie lub tryb przykuty i zwraca zestaw elementów prowadzi działalność (Uwaga: formularz i powołać umowę jQuery). Na przykład: 

$ ( ". Btn.danger"). Przycisk ( "przełącznik"). AddClass ( "tłuszcz")

Wszystkie metody mogą brać opcjonalne parametry obiektu jako parametr, lub ciąg reprezentujący konkretny sposób lub bez parametrów (w tym przypadku będzie to zainicjować plug-in dla domyślnego zachowania), w następujący sposób: 

// Przygotowanej do domyślnego zachowania $ ( "# myModal"). Modalna ()    
 // Inicjalizacja klawiatura nie obsługuje $ ( "# myModal") modalna ({klawiatury: false}).  
// Inicjowanie i natychmiast wezwać show
$ ( "# MyModal"). Modalna ( "Show")

Każdy plug-in na własnośćConstructor naraża także swój pierwotnykonstruktora:$ .fn.popover.Constructor.Jeśli chcesz uzyskać wystąpienie określonego widget można uzyskać bezpośrednio poprzez elementy strony: 

 $ ( '[Rel = popover] "). Dane (" popover ").

Uniknąć kolizji przestrzeni nazw

Czasami Bootstrap wtyczek może trzeba być stosowany z innymi ram UI. W takim przypadku może wystąpić kolizje nazw. Niestety, jeśli tak się stanie, można przywrócić jego pierwotną wartość poprzez wywołanie metody widget.noConflict.

// Zwraca $ .fn.button przed przypisaną wartość var ​​bootstrapButton = $ .fn.button.noConflict () 
// Dla $ (). Funkcje BootstrapBtn powierza Bootstrap					       
$ .fn.bootstrapBtn = BootstrapButton

wydarzenie

Bootstrap zapewnia zdarzenia niestandardowego jako unikalny zachowanie większości wtyczek. Ogólnie rzecz biorąc, te wydarzenia są w dwóch formach:

  • Bezokolicznik: Cel ten zostanie uruchomiony, gdy zaczyna się impreza.Takich jaknp: show.Bezokolicznik wydarzeniem zapewnia funkcjępreventDefault.To sprawia, że ​​możliwe, aby zatrzymać pracę przed rozpoczęciem imprezy. 
    $ ( '# MyModal "). Na (' show.bs.modal ', function (e) {
Zapobieganie jest wyświetlane okno modalne // if (dane!) powrót e.preventDefault () 
})
  • Przeszłość forma imiesłowu: To będzie uruchamiany po zakończeniu operacji.Takich jaknp: pokazany.