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, string	vals	Bevat een modaal-achtergrondelement. Stel backdrop in op "static"als je niet wilt dat de modal wordt gesloten wanneer op de backdrop wordt geklikt.
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 = "static" > 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 ({
  toetsenbord : waar 
})

.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

Bootstrap-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-topbalk.

Downloaden

Bootstrap-scrollspy.js gebruiken

$ ( '#topbalk' ). scrollSpy ()

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 biedt extra functionaliteit voor het beheren van de knopstatus.

Downloaden

Bootstrap-buttons.js gebruiken

$ ( '.tabbladen' ). knop ()

Methoden:

$().button('toggle')

Schakelt de push-status in. Geeft btn de uitstraling dat het geactiveerd is.

Opmerking U kunt automatisch wisselen van een knop inschakelen door het data-toggleattribuut te gebruiken.

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

$().button('bezig met laden')

Stelt knopstatus in op laden - schakelt knop uit en wisselt tekst naar laadtekst. Laadtekst moet worden gedefinieerd op het knopelement met behulp van het data-attribuut data-loading-text.

<button class = "btn" data-loading-text = "dingen laden..." > ... </button>   

$().button('reset')

Reset knopstatus - wisselt tekst naar originele tekst.

$().knop(tekenreeks)

Stelt de knopstatus opnieuw in - verwisselt tekst naar een door gegevens gedefinieerde tekststatus.

<button class = "btn" data-complete-text = "voltooid!" > ... </knop>   
<script>
  $('.btn').button('complete')
</script>

Demo

Demo laden Toggle Demo

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

Downloaden

Bootstrap-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> 
</div>
 
<script>
  $ ( functie () {  
    $ ( '.tabbladen' ). tabbladen ()
  })
</script>

Evenementen

Evenement	Beschrijving
Wijzigen	Deze gebeurtenis wordt geactiveerd bij wijziging van tabblad. Gebruik event.targeten event.relatedTargetom respectievelijk het actieve tabblad en het vorige actieve tabblad te targeten.

$ ( '#.tabbladen' ). bind ( 'wijzig' , functie ( e ) {   
  e . doel // geactiveerd tabblad
  e . gerelateerdTarget // vorig tabblad
})

Demo

• Huis
• Profiel
• Berichten
• Instellingen
• Laten vallen
  • @dik
  • @mdo

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
sjabloon	snaar	[standaard opmaak]	De html-sjabloon die wordt gebruikt voor het renderen van een twipsy.

Opmerking Individuele twipsy-instantie-opties kunnen ook worden gespecificeerd door het gebruik van gegevensattributen.

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

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 bootstrap-twipsy.js- plug-in uit, dus zorg ervoor dat u dat bestand ook pakt wanneer u popovers in uw project opneemt!

Opmerking U moet het bestand bootstrap-twipsy.js vóór bootstrap-popover.js opnemen.

Downloaden

Bootstrap-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'	een tekenreeks of methode voor het ophalen van inhoudstekst. als er geen is, wordt de inhoud afkomstig van een data-content-attribuut.
trekker	snaar	'zweven'	hoe knopinfo wordt geactiveerd - hover | focus | handleiding
sjabloon	snaar	[standaard opmaak]	De html-sjabloon die wordt gebruikt voor het renderen van een popover.

Opmerking Afzonderlijke opties voor popover-instanties kunnen ook worden gespecificeerd door het gebruik van gegevensattributen.

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

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.

Opties

Naam	type	standaard	Omschrijving
selector	snaar	'.dichtbij'	Welke selector moet worden getarget voor het sluiten van een waarschuwing.

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