Modal-laajennuksemme on erittäin ohut perinteinen modaalinen js-laajennus, joka on erityisen huolellinen sisällyttämään vain ne paljaat toiminnot, joita tarvitsemme täällä Twitterissä.

ladata

Bootstrap-modalin käyttö

$ ( '#my-modal' ). modaali ( vaihtoehdot )

Vaihtoehdot

Nimi	tyyppi	oletuksena	kuvaus
taustalla	boolen, merkkijono	väärä	Sisältää modaalitaustaelementin. Aseta taustaksi, "static"jos et halua, että modaali suljetaan, kun taustaa napsautetaan.
näppäimistö	boolean	väärä	Sulkee modaalin, kun Esc-näppäintä painetaan
näytä	boolean	väärä	Avaa modaalin luokan alustuksessa

Merkintä

Voit aktivoida modaalit sivullasi helposti ilman, että sinun tarvitsee kirjoittaa yhtään JavaScript-riviä. Anna elementille data-controls-modalattribuutti, joka vastaa modaalielementin tunnusta, ja kun sitä napsautetaan, se käynnistää modaalisi. Jos haluat lisätä modaalivaihtoehtoja, sisällytä ne myös tietomääritteiksi.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Käynnistä Modal </a>    

Huomautus Jos haluat, että modaalisi animoituu sisään ja ulos, lisää vain .fadeluokka .modalelementtiisi (katso esittely nähdäksesi tämän toiminnassa).

menetelmät

.modal(optiot)

Aktivoi sisältösi modaalina. Hyväksyy valinnaiset vaihtoehdot object.

$ ( '#my-modal' ). modaalinen ({
  näppäimistö : totta 
})

.modal('toggle')

Vaihtaa modaalin manuaalisesti.

$ ( '#my-modal' ). modaalinen ( 'toggle' )

.modal('show')

Avaa modaalin manuaalisesti.

$ ( '#my-modal' ). modaalinen ( 'show' )

.modal('piilota')

Piilottaa modaalin manuaalisesti.

$ ( '#my-modal' ). modaalinen ( 'piilota' )

.modal(true)

Palauttaa elementtien modaaliluokan ilmentymän.

$ ( '#my-modal' ). modaalinen ( tosi )

Huomautus Vaihtoehtoisesti voit hakea tämän komennolla $().data('modal').

Tapahtumat

Bootstrapin modaaliluokka paljastaa muutamia tapahtumia modaalitoimintoihin kytkeytymistä varten.

Tapahtuma	Kuvaus
näytä	Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
esitetty	Tämä tapahtuma käynnistyy, kun modaali on asetettu käyttäjän näkyväksi (odottaa css-siirtymien valmistumista).
piilottaa	Tämä tapahtuma käynnistyy välittömästi, kun hideinstanssimenetelmää on kutsuttu.
piilotettu	Tämä tapahtuma käynnistyy, kun modaali on piilotettu käyttäjältä (odottaa css-siirtymien valmistumista).

$ ( '#my-modal' ). bind ( 'hidden' , function () {   
  // tee jotain ...
})

Demo

Käynnistä Modal

Tämä laajennus on tarkoitettu pudotusvalikon vuorovaikutuksen lisäämiseen bootstrapin yläpalkkiin tai välilehtien navigointiin.

ladata

Bootstrap-dropdown.js:n käyttö

$ ( '#yläpalkki' ). pudotusvalikko ()

Merkintä

Voit lisätä nopeasti avattavan valikon toimintoja mihin tahansa nav-elementtiin käyttämällä data-dropdownattribuuttia. Mikä tahansa kelvollinen bootstrap-pudotusvalikko aktivoituu automaattisesti.

<ul class = "välilehdet" > 
  <li class = "aktiivinen" ><a href = "#" > Etusivu </a></li>  
  <li class = "dropdown" data-dropdown = "pudotusvalikko" >   
    <a href = "#" class = "dropdown-toggle" > Avattava valikko </a>  
    <ul class = "pudotusvalikko" > 
      <li><a href = "#" > Toissijainen linkki </a></li> 
      <li><a href = "#" > Jotain muuta tässä </a></li> 
      <li class = "jakaja" ></li> 
      <li><a href = "#" > Toinen linkki </a></li> 
    </ul>
  </li>
</ul>

Huomautus Jos käyttöliittymässäsi on useita avattavia valikoita, harkitse data-dropdownattribuutin lisäämistä tärkeämpään säilöelementtiin, kuten .tabstai .topbar.

menetelmät

$().dropdown()

Ohjelmoitu sovellusliittymä valikoiden aktivoimiseen tietylle yläpalkin tai välilehdillä varustetulle navigoinnille.

Demo

Tämä laajennus on tarkoitettu scrollspy (automaattinen päivitysnavigointi) -vuorovaikutuksen lisäämiseen bootstrapin yläpalkkiin.

ladata

Bootstrap-scrollspy.js:n käyttö

$ ( '#yläpalkki' ). scrollSpy ()

Merkintä

Voit helposti lisätä scrollspy-käyttäytymistä navigointiisi lisäämällä data-scrollspyattribuutin .topbar.

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

menetelmät

$().scrollSpy()

Automaattinen aktivoi navigointipainikkeet käyttäjien vieritysasennon mukaan.

$ ( 'body > .topbar' ). scrollSpy ()

Huomaa Topbar-ankkuritunnisteilla on oltava selvitettävät id-kohteet. Esimerkiksi, <a href="#home">home</a>täytyy vastata jotain domissa, kuten <div id="home"></div>.

.scrollSpy('refresh')

Scrollspy-välimuistissa on navigointipainikkeet ja osiokoordinaatit suorituskykyä varten. Jos sinun on päivitettävä tämä välimuisti (todennäköisesti, jos sinulla on dynaamista sisältöä), kutsu tämä päivitysmenetelmä. Jos käytit data-attribuuttia scrollspyn määrittämiseen, kutsu vain runkoon refresh.

$ ( 'body' ). scrollSpy ( 'päivitä' )

Demo

Tutustu tämän sivun yläpalkin navigointiin.

Tämä laajennus tarjoaa lisätoimintoja painikkeen tilan hallintaan.

ladata

Bootstrap-buttons.js:n käyttö

$ ( '.tabs' ). painike ()

menetelmät

$().button('toggle')

Vaihtaa työntötilan. Antaa btn:lle ilmeen, että se on aktivoitu.

Huomautus Voit ottaa painikkeen automaattisen vaihtamisen käyttöön data-togglemääritteen avulla.

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

$().button('lataus')

Asettaa painikkeen tilan lataustilaan - poistaa painikkeen käytöstä ja vaihtaa tekstin lataustekstiin. Ladattava teksti tulee määrittää painikeelementissä data-attribuutin avulla data-loading-text.

<button class = "btn" data-loading-text = "ladataan tavaraa..." > ... </button>   

$().button('reset')

Palauttaa painikkeen tilan - vaihtaa tekstin alkuperäiseksi.

$().painike(merkkijono)

Nollaa painikkeen tilan - vaihtaa tekstin mihin tahansa datamääritelmään tekstitilaan.

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

Demo

Ladataan demoa Vaihda demo

Tämä laajennus lisää nopean, dynaamisen välilehden ja pilleritoiminnon.

ladata

Bootstrap-tabs.js:n käyttö

$ ( '.tabs' ). välilehdet ()

Merkintä

Voit aktivoida välilehden tai pillerinavigoinnin kirjoittamatta JavaScriptiä antamalla niille attribuutin data-tabstai data-pillsattribuutin.

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

menetelmät

$().tabs tai $().pills

Aktivoi välilehti- ja pilleritoiminnot tietylle säiliölle. Välilehtilinkkien tulee viitata asiakirjan tunnuksiin.

<ul class = "välilehdet" > 
  <li class = "aktiivinen" ><a href = "#home" > Etusivu </a></li>  
  <li><a href = "#profile" > Profiili </a></li> 
  <li><a href = "#messages" > Viestit </a></li> 
  <li><a href = "#settings" > Asetukset </a></li> 
</ul>
 
<div class = "pillerin sisältö" > 
  <div class = "active" id = "koti" > ... </div>  
  <div id = "profiili" > ... </div> 
  <div id = "viestit" > ... </div> 
  <div id = "asetukset" > ... </div> 
</div>
 
<script>
  $ ( funktio () {  
    $ ( '.tabs' ). välilehdet ()
  })
</script>

Tapahtumat

Tapahtuma	Kuvaus
muuttaa	Tämä tapahtuma käynnistyy välilehden vaihdon yhteydessä. Käytä event.targetja event.relatedTargetkohdistaaksesi aktiiviseen välilehteen ja edelliseen aktiiviseen välilehteen.

$ ( '#.tabs' ). bind ( 'change' , function ( e ) {   
  e . kohde // aktivoitu välilehti
  e . relatedTarget // edellinen välilehti
})

Demo

• Koti
• Profiili
• Viestit
• asetukset
• Pudota alas
  • @rasva
  • @mdo

Perustuu erinomaiseen jQuery.tipsy-laajennukseen, jonka on kirjoittanut Jason Frame; twipsy on päivitetty versio, joka ei ole riippuvainen kuvista, käyttää css3:a animaatioihin ja data-attribuutteja otsikon tallentamiseen!

ladata

Bootstrap-twipsy.js:n käyttö

$ ( '#esimerkki' ). twipsy ( vaihtoehdot )

Vaihtoehdot

Nimi	tyyppi	oletuksena	kuvaus
animoida	boolean	totta	käytä css-häivytystä työkaluvihjeessä
viive	määrä	0	viive ennen työkaluvihjeen näyttämistä (ms)
viive Out	määrä	0	viive ennen työkaluvihjeen piilottamista (ms)
perääntyä	merkkijono	''	teksti, jota käytetään, kun työkaluvihjeen otsikkoa ei ole
sijoitus	merkkijono	'edellä'	työkaluvihjeen sijoittaminen - yläpuolelle | alla | vasemmalle | oikein
html	boolean	väärä	sallii html-sisällön työkaluvihjeessä
elää	boolean	väärä	käytä tapahtuman delegointia yksittäisten tapahtumakäsittelijöiden sijaan
offset	määrä	0	työkaluvihjeen pikselipoikkeama kohdeelementistä
otsikko	merkkijono, funktio	'titteli'	attribuutti tai menetelmä otsikkotekstin hakemiseen
laukaista	merkkijono	'hover'	kuinka työkaluvihje käynnistetään - vie hiiri | keskittyä | manuaalinen
sapluuna	merkkijono	[oletusmerkintä]	html-malli, jota käytetään twipsyn hahmontamiseen.

Huomautus Yksittäiset twipsy-instanssivaihtoehdot voidaan vaihtoehtoisesti määrittää käyttämällä dataattribuutteja.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Jotkin otsikkotekstiä' > tekstiä </a>    

menetelmät

$().twipsy(vaihtoehdot)

Kiinnittää twipsy-käsittelijän elementtikokoelmaan.

.twipsy('show')

Paljastaa elementtejä twipsy.

$ ( '#elementti' ). twipsy ( 'show' )

.twipsy('piilota')

Piilottaa elementtejä twipsy.

$ ( '#elementti' ). twipsy ( 'piilota' )

.twipsy(true)

Palauttaa elementtien twipsy-luokan ilmentymän.

$ ( '#elementti' ). twipsy ( tosi )

Huomautus Vaihtoehtoisesti voit hakea tämän komennolla $().data('twipsy').

Demo

Popover-laajennus tarjoaa yksinkertaisen käyttöliittymän ponnahdusikkunoiden lisäämiseen sovellukseesi. Se laajentaa bootstrap-twipsy.js- laajennusta, joten muista napata myös tämä tiedosto, kun sisällytät ponnahdusikkunat projektiisi!

Huomautus Sinun on sisällytettävä tiedosto bootstrap-twipsy.js ennen bootstrap-popover.js-tiedostoa.

ladata

Bootstrap-popover.js:n käyttö

$ ( '#esimerkki' ). ponnahdusikkuna ( vaihtoehdot )

Vaihtoehdot

Nimi	tyyppi	oletuksena	kuvaus
animoida	boolean	totta	käytä css-häivytystä työkaluvihjeessä
viive	määrä	0	viive ennen työkaluvihjeen näyttämistä (ms)
viive Out	määrä	0	viive ennen työkaluvihjeen piilottamista (ms)
perääntyä	merkkijono	''	teksti, jota käytetään, kun työkaluvihjeen otsikkoa ei ole
sijoitus	merkkijono	'oikein'	työkaluvihjeen sijoittaminen - yläpuolelle | alla | vasemmalle | oikein
html	boolean	väärä	sallii html-sisällön työkaluvihjeessä
elää	boolean	väärä	käytä tapahtuman delegointia yksittäisten tapahtumakäsittelijöiden sijaan
offset	määrä	0	työkaluvihjeen pikselipoikkeama kohdeelementistä
otsikko	merkkijono, funktio	'titteli'	attribuutti tai menetelmä otsikkotekstin hakemiseen
sisältö	merkkijono, funktio	'data-sisältö'	merkkijono tai menetelmä sisältötekstin hakemiseen. jos sellaisia ​​ei ole, sisältö lähtee data-content-attribuutista.
laukaista	merkkijono	'hover'	kuinka työkaluvihje käynnistetään - vie hiiri | keskittyä | manuaalinen
sapluuna	merkkijono	[oletusmerkintä]	Ponnahdusikkunan hahmontamiseen käytetty html-malli.

Huomautus Yksittäiset popover-instanssivaihtoehdot voidaan vaihtoehtoisesti määrittää käyttämällä dataattribuutteja.

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

menetelmät

$().popover(vaihtoehdot)

Alustaa elementtikokoelman ponnahdusikkunat.

.popover('show')

Paljastaa elementtien popoverin.

$ ( '#elementti' ). popover ( 'show' )

.popover('piilota')

Piilottaa elementtien ponnahdusikkunan.

$ ( '#elementti' ). popover ( 'piilota' )

Demo

vie hiiri ponnahdusikkunaan

Alert-laajennus on erittäin pieni luokka, joka lisää läheisiä toimintoja hälytyksiin.

ladata

Bootstrap-alerts.js:n käyttö

$ ( ".alert-message" ). hälytys ()

Merkintä

Lisää vain data-alertattribuutti hälytysviesteihisi, jotta ne toimivat automaattisesti.

Vaihtoehdot

Nimi	tyyppi	oletuksena	kuvaus
valitsin	merkkijono	'.kiinni'	Mihin valitsimeen kohdistaa hälytyksen sulkeminen.

menetelmät

$().alert()

Kääri kaikki hälytykset läheisiin toimintoihin. Jos haluat, että hälytykset näkyvät suljettuina, varmista, että niihin on jo sovellettu - .fadeja -luokka..in

.alert('close')

Sulkee hälytyksen.

$ ( ".alert-message" ). hälytys ( 'sulje' )

Demo