Nasza wtyczka modalna jest bardzo smukłą wersją tradycyjnej wtyczki modalnej js, zwracając szczególną uwagę na to, aby zawierała tylko te same funkcje, których potrzebujemy tutaj na twitterze.

Ściągnij

Korzystanie z bootstrap-modalu

$ ( '#my-modal' ). modalne ( opcje )

Opcje

Nazwa	rodzaj	domyślna	opis
zasłona	wartość logiczna, ciąg	fałszywy	Zawiera modalny element tła. Ustaw tło na "static", jeśli nie chcesz, aby modalny był zamykany po kliknięciu tła.
klawiatura	logiczne	fałszywy	Zamyka modalne po naciśnięciu klawisza Escape
pokazać	logiczne	fałszywy	Otwiera modalny przy inicjalizacji klasy

Narzut

Możesz łatwo aktywować mods na swojej stronie bez konieczności pisania ani jednej linii kodu javascript. Po prostu nadaj elementowi data-controls-modalatrybut, który odpowiada identyfikatorowi elementu modalnego, a po kliknięciu uruchomi on Twój modalny. Aby dodać opcje modalne, po prostu uwzględnij je również jako atrybuty danych.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static"> Uruchom modalne </a>    

Uwaga Jeśli chcesz, aby twój modalny był animowany, po prostu dodaj .fadeklasę do swojego .modalelementu (zobacz demo, aby zobaczyć to w akcji).

Metody

.modal(opcje)

Aktywuje treść jako modalną. Akceptuje opcjonalne opcje object.

$ ( '#my-modal' ). modalny ({
  klawiatura : prawda 
})

.modal('przełącz')

Ręcznie przełącza modalny.

$ ( '#my-modal' ). modalny ( 'przełącz' )

.modal('pokaż')

Ręcznie otwiera mod.

$ ( '#my-modal' ). modalne ( 'pokaż' )

.modal('ukryj')

Ręcznie ukrywa modalny.

$ ( '#my-modal' ). modalne ( 'ukryj' )

.modal(prawda)

Zwraca instancję klasy modalnej elementów.

$ ( '#my-modal' ). modalne ( prawda )

Uwaga Alternatywnie można to pobrać za pomocą $().data('modal').

Wydarzenia

Klasa modalna Bootstrap udostępnia kilka zdarzeń do podłączenia do funkcji modalnej.

Wydarzenie	Opis
pokazać	To zdarzenie jest wyzwalane natychmiast po showwywołaniu metody wystąpienia.
pokazane	To zdarzenie jest wywoływane, gdy modalny został udostępniony użytkownikowi (będzie czekał na zakończenie przejść css).
ukryć	To zdarzenie jest wywoływane natychmiast po hidewywołaniu metody wystąpienia.
ukryty	To zdarzenie jest wywoływane, gdy modalne zakończy się ukrywanie przed użytkownikiem (poczeka na zakończenie przejść css).

$ ( '#my-modal' ). bind ( 'ukryty' , funkcja () {   
  // Zrób coś ...
})

Próbny

Uruchom modalne

Ta wtyczka służy do dodawania interakcji rozwijanej do górnego paska ładowania początkowego lub nawigacji na kartach.

Ściągnij

Korzystanie z bootstrap-dropdown.js

$ ( '#topbar' ). menu rozwijane ()

Narzut

Aby szybko dodać funkcję rozwijaną do dowolnego elementu nawigacji, użyj data-dropdownatrybutu. Każde prawidłowe rozwijane menu ładowania początkowego zostanie automatycznie aktywowane.

<ul class = "tabulatory" > 
  <li class = "active" ><a href = "#"> Strona główna </a> </li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle"> Menu rozwijane </a>  
    <ul class = "menu rozwijane" > 
      <li><a href = "#"> Link dodatkowy </a></li> 
      <li><a href = "#"> Coś jeszcze tutaj </a></li> 
      <li klasa = "dzielnik" ></li> 
      <li><a href = "#"> Kolejny link </a></li> 
    </ul>
  </li>
</ul>

Uwaga Jeśli Twój interfejs użytkownika ma kilka list rozwijanych, rozważ dodanie data-dropdownatrybutu do bardziej znaczącego elementu kontenera, takiego jak .tabslub .topbar.

Metody

$().dropdown()

Programowe API do aktywacji menu dla danego górnego paska lub nawigacji w kartach.

Próbny

Ta wtyczka służy do dodawania interakcji scrollspy (automatycznej aktualizacji nawigacji) do górnego paska ładowania początkowego.

Ściągnij

Korzystanie z pliku bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Narzut

Aby łatwo dodać zachowanie scrollspy do swojej nawigacji, po prostu dodaj data-scrollspyatrybut do .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Metody

$().scrollSpy()

Auto aktywuje przyciski nawigacyjne według pozycji przewijania użytkownika.

$ ( 'ciało > .topbar' ). scrollSpy ()

Zwróć uwagę, że tagi zakotwiczenia paska górnego muszą mieć rozpoznawalne cele id. Na przykład a <a href="#home">home</a>musi odpowiadać czemuś w dom jak <div id="home"></div>.

.scrollSpy('odśwież')

Scrollspy buforuje przyciski nawigacyjne i współrzędne sekcji pod kątem wydajności. Jeśli potrzebujesz zaktualizować tę pamięć podręczną (prawdopodobnie, jeśli masz zawartość dynamiczną), po prostu wywołaj tę metodę odświeżania. Jeśli użyłeś atrybutu data do zdefiniowania swojego scrollspy, po prostu wywołaj refresh na ciele.

$ ( 'ciało' ). scrollSpy ( 'odśwież' )

Próbny

Sprawdź nawigację w górnym pasku na tej stronie.

Ta wtyczka oferuje dodatkowe funkcje do zarządzania stanem przycisków.

Ściągnij

Korzystanie z bootstrap-buttons.js

$ ( '.tab' ). przycisk ()

Metody

$().button('przełącz')

Przełącza stan wypychania. Nadaje btn wygląd, który został aktywowany.

Uwaga Możesz włączyć automatyczne przełączanie przycisku za pomocą data-toggleatrybutu.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('ładowanie')

Ustawia stan przycisku na ładowanie - wyłącza przycisk i zamienia tekst na tekst wczytujący. Ładowanie tekstu należy zdefiniować na elemencie przycisku za pomocą atrybutu data data-loading-text.

<button class = "btn" data-loading-text = "ładowanie rzeczy..." > ... </button>   

$().button('reset')

Resetuje stan przycisku — zamienia tekst na tekst oryginalny.

$().button(ciąg)

Resetuje stan przycisku — zamienia tekst na dowolny stan tekstowy zdefiniowany w danych.

<button class = "btn" data-complete-text = "zakończono!" > ... </button>   
<skrypt>
  $('.btn').button('zakończ')
</scrip>

Próbny

Wczytuję demo Przełącz demo

Ta wtyczka dodaje szybką, dynamiczną funkcjonalność zakładek i pigułek.

Ściągnij

Korzystanie z pliku bootstrap-tabs.js

$ ( '.tab' ). zakładki ()

Narzut

Możesz aktywować nawigację po karcie lub pigułce bez pisania jakiegokolwiek skryptu java, po prostu nadając im atrybut data-tabslub .data-pills

 <ul class = „tabs” data-tabs = „tabs” > ... </ul>   

Metody

$().tabs lub $().pills

Aktywuje funkcjonalność zakładek i pigułek dla danego pojemnika. Łącza kart powinny odwoływać się do identyfikatorów w dokumencie.

<ul class = "tabulatory" > 
  <li class = "active" ><a href = "#home"> Strona główna </a> </li>  
  <li><a href = "#profile"> Profil </a> </li> 
  <li><a href = "#messages"> Wiadomości </a> </li> 
  <li><a href = "#settings"> Ustawienia </a> </li> 
</ul>
 
<div class = "zawartość pigułki" > 
  <div class = „active” id = „home” > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "wiadomości" > ... </div> 
  <div id = "ustawienia" > ... </div> 
</div>
 
<skrypt>
  $ ( funkcja () {  
    $ ( '.tab' ). zakładki ()
  })
</script>

Wydarzenia

Wydarzenie	Opis
zmiana	To zdarzenie jest uruchamiane przy zmianie karty. Użyj event.targeti event.relatedTarget, aby wybrać odpowiednio aktywną kartę i poprzednią aktywną kartę.

$ ( '#.tab' ). bind ( 'zmiana' , funkcja ( e ) {   
  mi . cel // aktywowana karta
  mi . relatedTarget // poprzednia karta
})

Próbny

• Dom
• Profil
• Wiadomości
• Ustawienia
• Upuścić
  • @tłuszcz
  • @mdo

Oparty na doskonałej wtyczce jQuery.tipsy napisanej przez Jason Frame; twipsy to zaktualizowana wersja, która nie opiera się na obrazach, używa CSS3 do animacji i atrybutów danych do przechowywania tytułów!

Ściągnij

Korzystanie z bootstrap-twipsy.js

$ ( '#przykład' ). twisty ( opcje )

Opcje

Nazwa	rodzaj	domyślna	opis
animować	logiczne	PRAWDA	zastosować do podpowiedzi przejścia zanikania CSS
opóźnienie w	numer	0	opóźnienie przed wyświetleniem podpowiedzi (ms)
delayOut	numer	0	opóźnienie przed ukryciem podpowiedzi (ms)
awaryjny	strunowy	''	tekst do użycia, gdy nie ma tytułu podpowiedzi
umieszczenie	strunowy	'nad'	jak ustawić podpowiedź - powyżej | poniżej | lewo | prawo
html	logiczne	fałszywy	zezwala na zawartość html w podpowiedzi
relacja na żywo	logiczne	fałszywy	użyj delegowania zdarzeń zamiast indywidualnych programów obsługi zdarzeń
zrównoważyć	numer	0	przesunięcie piksela podpowiedzi od elementu docelowego
tytuł	ciąg, funkcja	'tytuł'	atrybut lub metoda pobierania tekstu tytułu
cyngiel	strunowy	'unosić się'	jak wywoływana jest podpowiedź - najedź | skupić | podręcznik
szablon	strunowy	[domyślny znacznik]	Szablon html używany do renderowania Twipsy.

Uwaga Poszczególne opcje instancji twipsy można alternatywnie określić za pomocą atrybutów danych.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Some title text' > text </a>    

Metody

$().twipsy(opcje)

Dołącza program obsługi Twipsy do kolekcji elementów.

.twipsy('pokaż')

Odsłania elementy twipsy.

$ ( '#element' ). twipsy ( 'pokaż' )

.twipsy('ukryj')

Ukrywa elementy twipsy.

$ ( '#element' ). twipsy ( 'ukryj' )

.twipsy(prawda)

Zwraca instancję klasy elementów twipsy.

$ ( '#element' ). twisty ( prawda )

Uwaga Alternatywnie można to pobrać za pomocą $().data('twipsy').

Próbny

Wtyczka popover zapewnia prosty interfejs do dodawania popoverów do Twojej aplikacji. Rozszerza wtyczkę bootstrap-twipsy.js , więc pamiętaj, aby pobrać również ten plik, gdy dołączasz popovery do swojego projektu!

Uwaga Musisz dołączyć plik bootstrap-twipsy.js przed bootstrap-popover.js.

Ściągnij

Korzystanie z pliku bootstrap-popover.js

$ ( '#przykład' ). popover ( opcje )

Opcje

Nazwa	rodzaj	domyślna	opis
animować	logiczne	PRAWDA	zastosować do podpowiedzi przejścia zanikania CSS
opóźnienie w	numer	0	opóźnienie przed wyświetleniem podpowiedzi (ms)
delayOut	numer	0	opóźnienie przed ukryciem podpowiedzi (ms)
awaryjny	strunowy	''	tekst do użycia, gdy nie ma tytułu podpowiedzi
umieszczenie	strunowy	'prawo'	jak ustawić podpowiedź - powyżej | poniżej | lewo | prawo
html	logiczne	fałszywy	zezwala na zawartość html w podpowiedzi
relacja na żywo	logiczne	fałszywy	użyj delegowania zdarzeń zamiast indywidualnych programów obsługi zdarzeń
zrównoważyć	numer	0	przesunięcie piksela podpowiedzi od elementu docelowego
tytuł	ciąg, funkcja	'tytuł'	atrybut lub metoda pobierania tekstu tytułu
zawartość	ciąg, funkcja	„zawartość danych”	ciąg lub metoda pobierania tekstu treści. jeśli nie zostaną podane, treść będzie pochodzić z atrybutu data-content.
cyngiel	strunowy	'unosić się'	jak wywoływana jest podpowiedź - najedź | skupić | podręcznik
szablon	strunowy	[domyślny znacznik]	Szablon html używany do renderowania popovera.

Uwaga Poszczególne opcje instancji popover można alternatywnie określić za pomocą atrybutów danych.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > tekst </a>    

Metody

$().popover(opcje)

Inicjuje popovery dla kolekcji elementów.

.popover('pokaż')

Odsłania okienko z elementami.

$ ( '#element' ). popover ( 'pokaż' )

.popover('ukryj')

Ukrywa okienko z elementami.

$ ( '#element' ). popover ( 'ukryj' )

Próbny

najedź na popover

Wtyczka alertów to bardzo mała klasa do dodawania bliskiej funkcjonalności do alertów.

Ściągnij

Korzystanie z bootstrap-alerts.js

$ ( ". komunikat-alert" ). ostrzeżenie ()

Narzut

Po prostu dodaj data-alertatrybut do wiadomości alertów, aby automatycznie nadać im pełną funkcjonalność.

Opcje

Nazwa	rodzaj	domyślna	opis
selektor	strunowy	'.blisko'	Jaki selektor kierować do zamknięcia alertu.

Metody

$().alert()

Zawija wszystkie alerty z bliską funkcjonalnością. Aby Twoje alerty były animowane po zamknięciu, upewnij się, że mają już do nich przypisane klasy .fadei ..in

.alert('zamknij')

Zamyka alert.

$ ( ". komunikat-alert" ). alert ( 'zamknij' )

Próbny