Onze Modal-plug-in is een superslanke versie van de traditionele modale js-plug-in, waarbij we er speciaal voor zorgen dat alleen de kale functionaliteit wordt opgenomen die we hier op Twitter nodig hebben.

Downloaden

Bootstrap-modal gebruiken

$ ( '#mijn-modal' ). modaal ( opties )

Opties

Naam	type	standaard	Omschrijving
achtergrond	booleaans	vals	Bevat een modaal-achtergrondelement
toetsenbord	booleaans	vals	Sluit de modal wanneer de escape-toets wordt ingedrukt
show	booleaans	vals	Opent modaal bij klasse-initialisatie

Markup

U kunt eenvoudig modals op uw pagina activeren zonder een enkele regel javascript te hoeven schrijven. Geef een element gewoon een data-controls-modalattribuut dat overeenkomt met een modaal element-ID, en wanneer erop wordt geklikt, wordt uw modaal gestart. Om modale opties toe te voegen, hoeft u deze ook gewoon als gegevensattributen op te nemen.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Modal starten </a>    

Opmerking Als u wilt dat uw modal in en uit animeert, voegt u gewoon een .fadeklasse toe aan uw .modalelement (raadpleeg de demo om dit in actie te zien).

Methoden:

.modaal(opties)

Activeert uw inhoud als modaal. Accepteert een optionele optie object.

$ ( '#mijn-modal' ). modaal ({
  closeOnEscape : true 
})

.modal('toggle')

Schakelt handmatig een modaal in.

$ ( '#mijn-modal' ). modaal ( 'toggle' )

.modal('toon')

Opent handmatig een modaal.

$ ( '#mijn-modal' ). modaal ( 'toon' )

.modal('verbergen')

Verbergt handmatig een modaal.

$ ( '#mijn-modal' ). modaal ( 'verbergen' )

.modaal (waar)

Retourneert een instantie van een modale klasse van elementen.

$ ( '#mijn-modal' ). modaal ( waar )

Opmerking Als alternatief kan dit worden opgehaald met $().data('modal').

Evenementen

De modale klasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op modale functionaliteit.

Evenement	Beschrijving
show	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode wordt aangeroepen.
getoond	Deze gebeurtenis wordt geactiveerd wanneer de modal zichtbaar is gemaakt voor de gebruiker (wacht tot de css-overgangen zijn voltooid).
verbergen	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hideinstantiemethode is aangeroepen.
verborgen	Deze gebeurtenis wordt geactiveerd wanneer de modal klaar is met verborgen zijn voor de gebruiker (wacht tot de css-overgangen zijn voltooid).

$ ( '#mijn-modal' ). bind ( 'verborgen' , functie () {   
  // doe iets ...
})

Demo

Modaal starten

Deze plug-in is voor het toevoegen van dropdown-interactie aan de bootstrap-bovenbalk of navigatie met tabbladen.

Downloaden

Boostrap-dropdown.js gebruiken

$ ( '#topbalk' ). vervolgkeuzelijst ()

Markup

Gebruik het data-dropdownattribuut om snel dropdown-functionaliteit toe te voegen aan een navigatie-element. Elke geldige bootstrap-dropdown wordt automatisch geactiveerd.

<ul class = "tabbladen" > 
  <li class = "actief" ><a href = "#" > Startpagina </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "vervolgkeuzemenu" > 
      <li><a href = "#" > Secundaire link </a></li> 
      <li><a href = "#" > Hier nog iets </a></li> 
      <li class = "verdeler" ></li> 
      <li><a href = "#" > Nog een link </a></li> 
    </ul>
  </li>
</ul>

Opmerking Als uw gebruikersinterface meerdere vervolgkeuzemenu's heeft, kunt u overwegen het data-dropdownkenmerk toe te voegen aan een belangrijker containerelement zoals .tabsof .topbar.

Methoden:

$().dropdown()

Een programmatische api voor het activeren van menu's voor een bepaalde bovenbalk of navigatie met tabbladen.

Demo

Deze plug-in is voor het toevoegen van de scrollspy-interactie (nav automatisch bijwerken) aan de bootstrap-bovenbalk.

Downloaden

Boostrap-scrollspy.js gebruiken

$ ( '#topbalk' ). vervolgkeuzelijst ()

Markup

Om eenvoudig scrollspy-gedrag aan uw navigatiesysteem toe te voegen, voegt u het data-scrollspykenmerk toe aan het .topbar.

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

Methoden:

$().scrollspy()

Auto activeert navigatieknoppen door gebruikers scroll positie.

$ ( 'lichaam > .topbalk' ). scrollSpy ()

Let op Topbar-ankertags moeten oplosbare id-doelen hebben. Een <a href="#home">home</a>moet bijvoorbeeld overeenkomen met iets in de dom zoals <div id="home"></div>.

.scrollspy('vernieuwen')

De scrollspy slaat navigatieknoppen en sectiecoördinaten op voor prestaties. Als u deze cache moet bijwerken (waarschijnlijk als u dynamische inhoud heeft), roept u deze vernieuwingsmethode aan. Als je het data-attribuut hebt gebruikt om je scrollspy te definiëren, roep dan refresh op de body aan.

$ ( 'lichaam' ). scrollspy ( 'vernieuwen' )

Demo

Bekijk de navigatie in de bovenste balk op deze pagina.

Deze plug-in voegt snelle, dynamische tab- en pilfunctionaliteit toe.

Downloaden

Boostrap-tabs.js gebruiken

$ ( '.tabbladen' ). tabbladen ()

Markup

U kunt een tab- of pill-navigatie activeren zonder javascript te schrijven door ze simpelweg een data-tabsof data-pillsattribuut te geven.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Methoden:

$().tabs of $().pillen

Activeert tab- en pilfunctionaliteit voor een bepaalde container. Tablinks moeten verwijzen naar id's in het document.

<ul class = "tabbladen" > 
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profiel </a></li> 
  <li><a href = "#messages" > Berichten </a></li> 
  <li><a href = "#settings" > Instellingen </a></li> 
</ul>
 
<div class = "pil-inhoud" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profiel" > ... </div> 
  <div id = "berichten" > ... </div> 
  <div id = "instellingen" > ... </div> 
</ul>
 
<script>
  $ ( functie () {  
    $ ( '.tabbladen' ). tabbladen ()
  })
</script>

Demo

• Huis
• Profiel
• Berichten
• Instellingen

Gebaseerd op de uitstekende jQuery.tipsy-plug-in geschreven door Jason Frame; twipsy is een bijgewerkte versie, die niet afhankelijk is van afbeeldingen, css3 gebruikt voor animaties en data-attributen voor titelopslag!

Downloaden

Bootstrap-twipsy.js gebruiken

$ ( '#voorbeeld' ). twipsy ( opties )

Opties

Naam	type	standaard	Omschrijving
animeren	booleaans	WAAR	pas een css fade-overgang toe op de tooltip
vertragingIn	nummer	0	vertraging voordat knopinfo wordt weergegeven (ms)
vertraging uit	nummer	0	vertraging voordat knopinfo wordt verborgen (ms)
terugvallen	snaar	''	tekst om te gebruiken als er geen knopinfo-titel aanwezig is
plaatsing	snaar	'bovenstaande'	hoe de tooltip te plaatsen - hierboven | hieronder | links | Rechtsaf
html	booleaans	vals	staat html-inhoud toe in knopinfo
live	booleaans	vals	gebruik gebeurtenisdelegatie in plaats van individuele gebeurtenishandlers
offset	nummer	0	pixelverschuiving van knopinfo van doelelement
titel	tekenreeks | functie	'titel'	attribuut of methode voor het ophalen van titeltekst
trekker	snaar	'zweven'	hoe knopinfo wordt geactiveerd - hover | focus | handleiding

Methoden:

$().twipsy(opties)

Koppelt een twipsy-handler aan een elementenverzameling.

.twipsy('toon')

Onthult een elementen-twipsy.

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

.twipsy('verbergen')

Verbergt een elementen-twipsy.

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

.twipsy (waar)

Retourneert een instantie van een twipsy-klasse van elementen.

$ ( '#element' ). dubbelzinnig ( waar )

Opmerking Als alternatief kan dit worden opgehaald met $().data('twipsy').

Demo

De popover-plug-in biedt een eenvoudige interface voor het toevoegen van popovers aan uw toepassing. Het breidt de boostrap-twipsy.js- plug-in uit, dus zorg ervoor dat u dat bestand ook pakt wanneer u popovers in uw project opneemt!

Downloaden

Boostrap-popover.js gebruiken

$ ( '#voorbeeld' ). popover ( opties )

Opties

Naam	type	standaard	Omschrijving
animeren	booleaans	WAAR	pas een css fade-overgang toe op de tooltip
vertragingIn	nummer	0	vertraging voordat knopinfo wordt weergegeven (ms)
vertraging uit	nummer	0	vertraging voordat knopinfo wordt verborgen (ms)
terugvallen	snaar	''	tekst om te gebruiken als er geen knopinfo-titel aanwezig is
plaatsing	snaar	'Rechtsaf'	hoe de tooltip te plaatsen - hierboven | hieronder | links | Rechtsaf
html	booleaans	vals	staat html-inhoud toe in knopinfo
live	booleaans	vals	gebruik gebeurtenisdelegatie in plaats van individuele gebeurtenishandlers
offset	nummer	0	pixelverschuiving van knopinfo van doelelement
titel	tekenreeks | functie	'titel'	attribuut of methode voor het ophalen van titeltekst
inhoud	tekenreeks | functie	'data-inhoud'	attribuut of methode voor het ophalen van inhoudstekst
trekker	snaar	'zweven'	hoe knopinfo wordt geactiveerd - hover | focus | handleiding

Methoden:

$().popover(opties)

Initialiseert popovers voor een elementverzameling.

.popover('toon')

Onthult een pop-over voor elementen.

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

.popover('verbergen')

Verbergt een pop-over voor elementen.

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

Demo

zweven voor popover

De waarschuwingsplug-in is een superkleine klasse voor het toevoegen van close-functionaliteit aan waarschuwingen.

Downloaden

Bootstrap-alerts.js gebruiken

$ ( ".alert-bericht" ). waarschuwing ()

Markup

Voeg gewoon een data-alertattribuut toe aan uw waarschuwingsberichten om ze automatisch close-functionaliteit te geven.

Methoden:

$().waarschuwing()

Omhult alle waarschuwingen met sluitfunctionaliteit. Om ervoor te zorgen dat uw waarschuwingen worden geanimeerd wanneer ze zijn gesloten, moet u ervoor zorgen dat de klasse .fadeen .inal op hen is toegepast.

.alert('sluiten')

Sluit een waarschuwing.

$ ( ".alert-bericht" ). waarschuwing ( 'sluiten' )

Demo