Breng de componenten van Bootstrap tot leven - nu met 12 aangepaste jQuery -plug- ins.
Een gestroomlijnde, maar flexibele versie van de traditionele modale javascript-plug-in met alleen de minimaal vereiste functionaliteit en slimme standaardinstellingen.
Download bestandHieronder is een statisch weergegeven modaal.
Een fijn lichaam…
Schakel een modaal via javascript door op de onderstaande knop te klikken. Het schuift naar beneden en verdwijnt in beeld vanaf de bovenkant van de pagina.
Demo-modaal startenBel de modal via javascript:
- $ ( '#myModal' ). modaal ( opties )
Naam | type | standaard | Omschrijving |
---|---|---|---|
achtergrond | booleaans | WAAR | Bevat een modaal-achtergrondelement |
toetsenbord | booleaans | WAAR | Sluit de modal wanneer de escape-toets wordt ingedrukt |
show | booleaans | WAAR | Toont de modal wanneer geïnitialiseerd. |
U kunt modals op uw pagina eenvoudig activeren zonder een enkele regel javascript te hoeven schrijven. Stel gewoon data-toggle="modal"
een controllerelement in met een data-target="#foo"
of href="#foo"
die overeenkomt met een modaal element-ID, en wanneer erop wordt geklikt, wordt uw modal gestart.
Om opties toe te voegen aan uw modale instantie, voegt u ze ook toe als extra gegevensattributen op het besturingselement of de modale opmaak zelf.
- <a class = "btn" data-toggle = "modal" href = "#myModal" > Modal starten </a>
- <div class = "modal" id = "myModal" >
- <div class = "modal-header" >
- <a class = "close" data-dismiss = "modal" > × </a>
- <h3> Modale kop </h3>
- </div>
- <div class = "modal-body" >
- <p> Een fijn lichaam… </p>
- </div>
- <div class = "modal-footer" >
- <a href = "#" class = "btn btn-primary" > Wijzigingen opslaan </a>
- <a href = "#" class = "btn" > Sluiten </a>
- </div>
- </div>
.fade
klasse toe aan het
.modal
element (raadpleeg de demo om dit in actie te zien) en voeg bootstrap-transition.js toe.
Activeert uw inhoud als modaal. Accepteert een optionele optie object
.
- $ ( '#myModal' ). modaal ({
- toetsenbord : false
- })
Schakelt handmatig een modaal in.
- $ ( '#myModal' ). modaal ( 'toggle' )
Opent handmatig een modaal.
- $ ( '#myModal' ). modaal ( 'toon' )
Verbergt handmatig een modaal.
- $ ( '#myModal' ). modaal ( 'verbergen' )
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 show instantiemethode 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 hide instantiemethode 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). |
- $ ( '#myModal' ). aan ( 'verborgen' , functie () {
- // doe iets…
- })
Voeg vervolgkeuzemenu's toe aan bijna alles in Bootstrap met deze eenvoudige plug-in. Bootstrap biedt volledige ondersteuning voor vervolgkeuzemenu's in de navigatiebalk, tabbladen en pillen.
Download bestandKlik op de dropdown-navigatielinks in de navigatiebalk en pillen hieronder om dropdowns te testen.
Bel de dropdowns via javascript:
- $ ( '.dropdown-toggle' ). vervolgkeuzelijst ()
Om snel dropdown-functionaliteit aan elk element toe te voegen, hoeft u alleen maar toe te voegen data-toggle="dropdown"
en elke geldige bootstrap-dropdown wordt automatisch geactiveerd.
data-target="#fat"
of
te gebruiken href="#fat"
.
- <ul class = "nav-pillen" >
- <li class = "actief" ><a href = "#" > Reguliere link </a></li>
- <li class = "dropdown" id = "menu1" >
- <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >
- Laten vallen
- <b class = "caret" ></b>
- </a>
- <ul class = "vervolgkeuzemenu" >
- <li><a href = "#" > Actie </a></li>
- <li><a href = "#" > Nog een actie </a></li>
- <li><a href = "#" > Hier nog iets </a></li>
- <li class = "verdeler" ></li>
- <li><a href = "#" > Aparte link </a></li>
- </ul>
- </li>
- ...
- </ul>
Een programmatische api voor het activeren van menu's voor een bepaalde navigatiebalk of navigatie met tabbladen.
De ScrollSpy-plug-in is bedoeld voor het automatisch bijwerken van navigatiedoelen op basis van de schuifpositie.
Download bestandScroll door het gebied hieronder en bekijk de navigatie-update. De dropdown-subitems worden ook gemarkeerd. Probeer het!
Ad legging keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi voordat ze uitverkocht waren. Tumblr fietsrechten van boer tot bord. Anim keffiyeh carles vest. Velit seitan mcsweeney's fotohokje 3 wolf moon irure. Cosby sweater lomo jeansshort, williamsburg hoodie minim qui je hebt er waarschijnlijk nog nooit van gehoord et cardigan trust fund culpa biodiesel wes anderson esthetiek. Nihil getatoeëerde accusamus, cred ironie biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa snor skateboard, adipisicing fugiat velit hooivork baard. Freegan baard aliqua cupidatat mcsweeney's vero. Cupidatat vier loko nisi, ea helvetica nulla carles. Getatoeëerde cosby sweater foodtruck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 kleermaker. Carles niet-esthetische inspanning quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo fietsrechten adipisicing banh mi, velit ea sunt next level locavore single-origin koffie in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, duurzame delectus consectetur heuptasje iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa wat dan ook delectus foodtruck. Sapiente synth id veronderstelnda. Locavore sed helvetica cliché ironie, donderkatten waarvan je waarschijnlijk nog nooit hebt gehoord, consequat hoodie glutenvrije lo-fi fap aliquip. Labore elit placeat voordat ze uitverkocht waren, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Vest ambachtelijk bier seitan kant en klare velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Bel de scrollspy via javascript:
- $ ( '#navigatiebalk' ). scrollspion ()
Om eenvoudig scrollspy-gedrag toe te voegen aan uw navigatie op de bovenste balk, voegt u gewoon toe data-spy="scroll"
aan het element dat u wilt bespioneren (meestal is dit de body).
- <body data-spy = "scroll" > ... </body>
<a href="#home">home</a>
moet bijvoorbeeld overeenkomen met iets in de dom zoals
<div id="home"></div>
.
Naam | type | standaard | Omschrijving |
---|---|---|---|
offset | nummer | 10 | Pixels die vanaf de bovenkant moeten worden verschoven bij het berekenen van de scrollpositie. |
Deze plug-in voegt snelle, dynamische tab- en pilfunctionaliteit toe voor het overstappen door lokale inhoud.
Download bestandKlik op de onderstaande tabbladen om te schakelen tussen verborgen vensters, zelfs via vervolgkeuzemenu's.
Raw denim, je hebt waarschijnlijk nog nooit van die jeansshort Austin gehoord. Nesciunt tofu stomptown aliqua, retro synth master cleanse. Snor cliche tempor, williamsburg carles veganistische helvetica. Reprehenderit slager retro keffiyeh dromenvanger synth. Cosby trui eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis vest amerikaanse kleding, slager voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trustfonds seitan letterpress, keytar raw denim keffiyeh etsy art party voordat ze uitverkocht waren master cleanse glutenvrije inktvis scenester freegan cosby sweater. Heuptasje portland seitan DIY, kunstfeest locavore wolf cliché high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi voordat ze van boer tot bord VHS virale locavore cosby sweater uitverkocht waren. Lomo wolf viral, snor kant en klare thundercats keffiyeh ambachtelijk bier marfa ethisch. Wolf salvia freegan, kleermakers keffiyeh echo park vegan.
Tabbladen met tabbladen inschakelen via javascript:
- $ ( '#mijnTabblad' ). tabblad ( 'toon' )
U kunt een tab- of pill-navigatie activeren zonder javascript te schrijven door simpelweg data-toggle="tab"
of data-toggle="pill"
op een element te specificeren.
- <ul class = "nav nav-tabbladen" >
- <li><a href = "#home" data-toggle = "tab" > Startpagina </a></li>
- <li><a href = "#profile" data-toggle = "tab" > Profiel </a></li>
- <li><a href = "#messages" data-toggle = "tab" > Berichten </a></li>
- <li><a href = "#settings" data-toggle = "tab" > Instellingen </a></li>
- </ul>
Activeert een tabelement en inhoudcontainer. Tab moet een 'data-target' of een 'href' hebben die is gericht op een containerknooppunt in de dom.
- <ul class = "nav nav-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 = "tab-inhoud" >
- <div class = "tabvenster actief" id = "home" > ... </div>
- <div class = "tab-pane" id = "profile" > ... </div>
- <div class = "tab-paneel" id = "berichten" > ... </div>
- <div class = "tab-paneel" id = "instellingen" > ... </div>
- </div>
- <script>
- $ ( functie () {
- $ ( '.tabs a:laatste' ). tabblad ( 'toon' )
- })
- </script>
Evenement | Beschrijving |
---|---|
show | Deze gebeurtenis wordt geactiveerd bij tabshow, maar voordat het nieuwe tabblad is weergegeven. Gebruik event.target en event.relatedTarget om respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten. |
getoond | Deze gebeurtenis wordt geactiveerd bij tabshow nadat een tabblad is weergegeven. Gebruik event.target en event.relatedTarget om respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten. |
- $ ( 'a[data-toggle="tab"]' ). aan ( 'getoond' , functie ( e ) {
- e . doel // geactiveerd tabblad
- e . gerelateerdTarget // vorig tabblad
- })
Geïnspireerd door de uitstekende jQuery.tipsy-plug-in geschreven door Jason Frame; Tooltips zijn een bijgewerkte versie, die niet afhankelijk zijn van afbeeldingen, css3 gebruiken voor animaties en data-attributen voor lokale titelopslag.
Download bestandPlaats de muisaanwijzer op de onderstaande links om tooltips te zien:
Strakke broeken van het volgende niveau keffiyeh , je hebt er waarschijnlijk nog nooit van gehoord. Photo booth baard raw denim boekdruk veganistische messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duurzame quinoa 8-bit amerikaanse kleding heeft een terry richardson vinyl chambray. Baardstumptown, vesten banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, vier loko mcsweeney's cleanse veganistische chambray. Een echt ironische ambachtsman welke keytar dan ook, scenester farm-to-table banksy Austin twitter behandelt freegan cred raw denim single-origin coffee viral.
Activeer de tooltip via javascript:
- $ ( '#voorbeeld' ). knopinfo ( opties )
Naam | type | standaard | Omschrijving |
---|---|---|---|
animatie | booleaans | WAAR | pas een css fade-overgang toe op de tooltip |
plaatsing | tekenreeks|functie | 'bovenkant' | hoe de tooltip te positioneren - top | onderaan | links | Rechtsaf |
selector | snaar | vals | Als er een selector is, worden knopinfo-objecten gedelegeerd aan de opgegeven doelen. |
titel | tekenreeks | functie | '' | standaard titelwaarde als de tag 'title' niet aanwezig is |
trekker | snaar | 'zweven' | hoe knopinfo wordt geactiveerd - hover | focus | handleiding |
vertraging | nummer | object | 0 | vertraging tonen en verbergen van de knopinfo (ms) Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven Objectstructuur is: |
Om prestatieredenen zijn de Tooltip en Popover data-api's aangemeld. Als u ze wilt gebruiken, geeft u gewoon een selectoroptie op.
- <a href = "#" rel = "tooltip" title = "first tooltip" > beweeg over mij </a>
Koppelt een tooltip-handler aan een elementverzameling.
Onthult een tooltip voor elementen.
- $ ( '#element' ). knopinfo ( 'toon' )
Verbergt knopinfo voor elementen.
- $ ( '#element' ). knopinfo ( 'verbergen' )
Schakelt knopinfo voor elementen in.
- $ ( '#element' ). knopinfo ( 'toggle' )
Voeg kleine overlays van inhoud, zoals die op de iPad, toe aan elk element voor het onderbrengen van secundaire informatie.
* Vereist Tooltip om te worden opgenomen
Download bestandBeweeg over de knop om de popover te activeren.
Popovers inschakelen via javascript:
- $ ( '#voorbeeld' ). popover ( opties )
Naam | type | standaard | Omschrijving |
---|---|---|---|
animatie | booleaans | WAAR | pas een css fade-overgang toe op de tooltip |
plaatsing | tekenreeks|functie | 'Rechtsaf' | hoe de popover te plaatsen - top | onderaan | links | Rechtsaf |
selector | snaar | vals | als er een selector is, worden knopinfo-objecten gedelegeerd aan de opgegeven doelen |
trekker | snaar | 'zweven' | hoe knopinfo wordt geactiveerd - hover | focus | handleiding |
titel | tekenreeks | functie | '' | standaard titelwaarde als het kenmerk 'titel' niet aanwezig is |
inhoud | tekenreeks | functie | '' | standaard inhoudswaarde als het kenmerk 'data-content' niet aanwezig is |
vertraging | nummer | object | 0 | vertraging tonen en verbergen van de popover (ms) Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven Objectstructuur is: |
Om prestatieredenen zijn de Tooltip en Popover data-api's aangemeld. Als u ze wilt gebruiken, geeft u gewoon de selector-optie op.
Initialiseert popovers voor een elementverzameling.
Onthult een pop-over voor elementen.
- $ ( '#element' ). popover ( 'toon' )
Verbergt een pop-over voor elementen.
- $ ( '#element' ). popover ( 'verbergen' )
Schakelt een pop-over voor elementen in.
- $ ( '#element' ). popover ( 'toggle' )
De waarschuwingsplug-in is een kleine klasse voor het toevoegen van close-functionaliteit aan waarschuwingen.
DownloadenDe plug-in voor waarschuwingen werkt op reguliere waarschuwingsberichten en blokkeert berichten.
Verander dit en dat en probeer het opnieuw. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Afwijzing van een waarschuwing via javascript inschakelen:
- $ ( ".waarschuwing" ). waarschuwing ()
Voeg gewoon toe data-dismiss="alert"
aan uw sluitknop om automatisch een waarschuwingsfunctie voor sluiten te geven.
- <a class = "close" data-dismiss = "alert" href = "#" > × </a>
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 .fade
en .in
al op hen is toegepast.
Sluit een waarschuwing.
- $ ( ".waarschuwing" ). waarschuwing ( 'sluiten' )
De waarschuwingsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de waarschuwingsfunctionaliteit.
Evenement | Beschrijving |
---|---|
dichtbij | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de close instantiemethode wordt aangeroepen. |
gesloten | Deze gebeurtenis wordt geactiveerd wanneer de waarschuwing is gesloten (wacht tot de CSS-overgangen zijn voltooid). |
- $ ( '#mijn-waarschuwing' ). bind ( 'gesloten' , functie () {
- // doe iets…
- })
Krijg basisstijlen en flexibele ondersteuning voor opvouwbare componenten zoals accordeons en navigatie.
Download bestandMet behulp van de inklapplug-in hebben we een eenvoudige widget in accordeonstijl gebouwd:
Inschakelen via javascript:
- $ ( ".collapse" ). instorten ()
Naam | type | standaard | Omschrijving |
---|---|---|---|
ouder | selector | vals | Indien selector dan worden alle samenvouwbare elementen onder de gespecificeerde ouder gesloten wanneer dit samenvouwbare item wordt getoond. (vergelijkbaar met traditioneel accordeongedrag) |
schakelaar | booleaans | WAAR | Schakelt het opvouwbare element in bij aanroepen |
Voeg gewoon data-toggle="collapse"
en een data-target
aan element toe om automatisch de besturing van een opvouwbaar element toe te wijzen. Het data-target
attribuut accepteert een CSS-selector om het samenvouwen op toe te passen. Zorg ervoor dat u de klasse toevoegt collapse
aan het opvouwbare element. Als u wilt dat deze standaard wordt geopend, voegt u de extra klasse toe in
.
- <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
- eenvoudig opvouwbaar
- </knop>
- <div id = "demo" class = "collapse in" > … </div>
data-parent="#selector"
. Raadpleeg de demo om dit in actie te zien.
Activeert uw inhoud als een opvouwbaar element. Accepteert een optionele optie object
.
- $ ( '#mijnInklapbaar' ). instorten ({
- toggle : false
- })
Schakelt een samenvouwbaar element om naar weergegeven of verborgen.
Toont een opvouwbaar element.
Verbergt een opvouwbaar element.
De collapsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de ineenstortingsfunctionaliteit.
Evenement | Beschrijving |
---|---|
show | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de show instantiemethode wordt aangeroepen. |
getoond | Deze gebeurtenis wordt geactiveerd wanneer een samenvouwelement zichtbaar is gemaakt voor de gebruiker (wacht tot css-overgangen zijn voltooid). |
verbergen | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hide methode is aangeroepen. |
verborgen | Deze gebeurtenis wordt geactiveerd wanneer een samengevouwen element is verborgen voor de gebruiker (wacht tot de css-overgangen zijn voltooid). |
- $ ( '#mijnInklapbaar' ). aan ( 'verborgen' , functie () {
- // doe iets…
- })
Bekijk de diavoorstelling hieronder.
Bel via javascript:
- $ ( '.carrousel' ). carrousel ()
Naam | type | standaard | Omschrijving |
---|---|---|---|
interval | nummer | 5000 | De hoeveelheid tijd die verstrijkt tussen het automatisch wisselen van een item. |
Gegevensattributen zijn een integraal onderdeel van de carrouselplug-in. Bekijk de voorbeeldcode hieronder voor de verschillende opmaaktypen.
- <div id = "myCarousel" class = "carrousel" >
- <!-- Carrouselitems -->
- <div class = "carrousel-innerlijke" >
- <div class = "actief item" > … </div>
- <div class = "item" > … </div>
- <div class = "item" > … </div>
- </div>
- <!-- Carrouselnavigatie -->
- <a class = "carrousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>
- <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>
- </div>
Initialiseert de carrousel met optionele opties object
en begint door items te bladeren.
- $ ( '.mijnCarrousel' ). carrousel ({
- interval : 2000
- })
Doorloopt de carrouselitems van links naar rechts.
Voorkomt dat de carrousel door items fietst.
Fietst de carrousel naar een bepaald frame (gebaseerd op 0, vergelijkbaar met een array).
Hiermee gaat u naar het vorige item.
Gaat naar het volgende item.
De modale klasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op modale functionaliteit.
Evenement | Beschrijving |
---|---|
dia | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de slide instantiemethode wordt aangeroepen. |
gleed | Deze gebeurtenis wordt geactiveerd wanneer de carrousel de dia-overgang heeft voltooid. |
Een eenvoudige, gemakkelijk uitgebreide plug-in voor het snel maken van elegante typeaheads met tekstinvoer in elk formulier.
Download bestandBegin met typen in het onderstaande veld om de typeahead-resultaten weer te geven.
Bel het typeahead via javascript:
- $ ( '.typeahead' ). vooruit typen ()
Naam | type | standaard | Omschrijving |
---|---|---|---|
bron | reeks | [ ] | De gegevensbron waartegen een query moet worden uitgevoerd. |
artikelen | nummer | 8 | Het maximale aantal items dat in de vervolgkeuzelijst moet worden weergegeven. |
matcher | functie | niet hoofdlettergevoelig | De methode die wordt gebruikt om te bepalen of een zoekopdracht overeenkomt met een item. Accepteert een enkel argument, item waartegen de query moet worden getest. Open de huidige query met this.query . Retourneer een boolean true als de zoekopdracht een overeenkomst is. |
sorteerder | functie | exacte overeenkomst, hoofdlettergevoelig, niet hoofdlettergevoelig |
Methode die wordt gebruikt om resultaten voor automatisch aanvullen te sorteren. Accepteert één argument items en heeft het bereik van de typeahead-instantie. Verwijs naar de huidige query met this.query . |
markeerstift | functie | markeert alle standaardovereenkomsten | Methode die wordt gebruikt om resultaten voor automatisch aanvullen te markeren. Accepteert één argument item en heeft het bereik van de typeahead-instantie. Zou html moeten retourneren. |
Voeg gegevensattributen toe om een element met typeahead-functionaliteit te registreren.
- <input type = "text" data-provide = "typeahead" >
Initialiseert een invoer met een typeahead.