El nostre connector Modal és una versió molt fina del connector modal js tradicional, tenint especial cura d'incloure només la funcionalitat pura que necessitem aquí a Twitter.

descarregar

Utilitzant bootstrap-modal

$ ( '#el meu-modal' ). modal ( opcions )

Opcions

Nom	tipus	per defecte	descripció
teló de fons	booleà, cadena	fals	Inclou un element de fons modal. Estableix el teló de fons a "static"si no vols que el modal es tanqui quan es faci clic al fons.
teclat	booleà	fals	Tanca el modal quan es prem la tecla d'escapament
espectacle	booleà	fals	Obre el modal a la inicialització de classe

Marcatge

Podeu activar els modals a la vostra pàgina fàcilment sense haver d'escriure una sola línia de javascript. Només cal que doneu a un element un data-controls-modalatribut que correspongui a un identificador d'element modal i, quan feu clic, llançarà el vostre modal. Per afegir opcions modals, només cal incloure-les també com a atributs de dades.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Llança el modal </a>    

Avís Si voleu que el vostre modal s'animi dins i fora, només cal que afegiu una .fadeclasse al vostre .modalelement (consulteu la demostració per veure-ho en acció).

Mètodes

.modal (opcions)

Activa el teu contingut com a modal. Accepta opcions opcionals object.

$ ( '#el meu-modal' ). modal ({
  teclat : cert 
})

.modal('canviar')

Commuta manualment un modal.

$ ( '#el meu-modal' ). modal ( 'alternar' )

.modal('mostrar')

Obre manualment un modal.

$ ( '#el meu-modal' ). modal ( 'mostrar' )

.modal('amagar')

Amaga manualment un modal.

$ ( '#el meu-modal' ). modal ( 'amagar' )

.modal (true)

Retorna una instància de classe modal d'elements.

$ ( '#el meu-modal' ). modal ( veritat )

Avís Com a alternativa, es pot recuperar amb $().data('modal').

Esdeveniments

La classe modal de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat modal.

Esdeveniment	Descripció
espectacle	Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
mostrat	Aquest esdeveniment s'activa quan el modal s'ha fet visible per a l'usuari (esperarà que es completin les transicions CSS).
amagar	Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode d'instància.
amagat	Aquest esdeveniment s'activa quan el modal s'ha acabat d'ocultar a l'usuari (esperarà que es completin les transicions CSS).

$ ( '#el meu-modal' ). bind ( 'amagat' , funció () {   
  // fer quelcom ...
})

Demostració

Llançament Modal

Aquest connector serveix per afegir interacció desplegable a la barra superior d'arrencada o a les navegacions amb pestanyes.

descarregar

Utilitzant bootstrap-dropdown.js

$ ( '#barra superior' ). desplegable ()

Marcatge

Per afegir ràpidament una funcionalitat desplegable a qualsevol element de navegació, utilitzeu l' data-dropdownatribut. Qualsevol menú desplegable d'arrencada vàlid s'activarà automàticament.

<ul class = "pestanyes" > 
  <li class = "active" ><a href = "#" > Inici </a></li>  
  <li class = "menjador desplegable" data-dropdown = "menú desplegable" >   
    <a href = "#" class = "dropdown-toggle" > Menú desplegable </a>  
    <ul class = "menú desplegable" > 
      <li><a href = "#" > Enllaç secundari </a></li> 
      <li><a href = "#" > Alguna cosa més aquí </a></li> 
      <li class = "divisor" ></li> 
      <li><a href = "#" > Un altre enllaç </a></li> 
    </ul>
  </li>
</ul>

Avís Si la vostra interfície d'usuari té diversos menús desplegables, penseu a afegir l' data-dropdownatribut a un element contenidor més significatiu com .tabso .topbar.

Mètodes

$().menjador desplegable()

Una API programàtica per activar menús per a una barra superior determinada o navegació per pestanyes.

Demostració

Aquest connector serveix per afegir la interacció scrollspy (nav d'actualització automàtica) a la barra superior d'arrencada.

descarregar

Utilitzant bootstrap-scrollspy.js

$ ( '#barra superior' ). scrollSpy ()

Marcatge

Per afegir fàcilment un comportament scrollspy al vostre navegador, només heu d'afegir l' data-scrollspyatribut al fitxer .topbar.

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

Mètodes

$().scrollSpy()

Activa automàticament els botons de navegació per la posició de desplaçament dels usuaris.

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

Tingueu en compte que les etiquetes d'ancoratge de la barra superior han de tenir objectius d'identificació resolubles. Per exemple, un <a href="#home">home</a>ha de correspondre a alguna cosa del dom com <div id="home"></div>.

.scrollSpy('actualitzar')

El scrollspy guarda a la memòria cau els botons de navegació i les coordenades de secció per al rendiment. Si necessiteu actualitzar aquesta memòria cau (probablement si teniu contingut dinàmic), només heu de trucar a aquest mètode d'actualització. Si heu utilitzat l'atribut de dades per definir el vostre scrollspy, només cal que truqueu a refresh al cos.

$ ( 'cos' ). scrollSpy ( 'actualitzar' )

Demostració

Consulteu la navegació de la barra superior d'aquesta pàgina.

Aquest connector ofereix una funcionalitat addicional per gestionar l'estat dels botons.

descarregar

Utilitzant bootstrap-buttons.js

$ ( '.tabs' ). botó ()

Mètodes

$().button('canviar')

Commuta l'estat push. Dóna a btn l'aspecte que s'ha activat.

Avís Podeu activar la commutació automàtica d'un botó mitjançant l' data-toggleatribut.

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

$().button('carregant')

Estableix l'estat del botó a la càrrega: desactiva el botó i canvia el text al text de càrrega. El text de càrrega s'ha de definir a l'element botó mitjançant l'atribut de dades data-loading-text.

<button class = "btn" data-loading-text = "carregant coses..." > ... </button>   

$().button('restableix')

Restableix l'estat del botó: canvia el text pel text original.

$().button(cadena)

Restableix l'estat del botó: canvia el text a qualsevol estat de text definit amb dades.

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

Demostració

Carregant la demostració Commuta Demo

Aquest connector afegeix una pestanya ràpida i dinàmica i una funcionalitat de pastilles.

descarregar

Utilitzant bootstrap-tabs.js

$ ( '.tabs' ). pestanyes ()

Marcatge

Podeu activar una navegació de pestanyes o píndoles sense escriure cap JavaScript simplement donant-los un data-tabso un data-pillsatribut.

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

Mètodes

$().tabs o $().pills

Activa la funció de pestanya i píndola per a un recipient determinat. Els enllaços de pestanyes haurien de fer referència als identificadors del document.

<ul class = "pestanyes" > 
  <li class = "active" ><a href = "#home" > Inici </a></li>  
  <li><a href = "#profile" > Perfil </a></li> 
  <li><a href = "#messages" > Missatges </a></li> 
  <li><a href = "#settings" > Configuració </a></li> 
</ul>
 
<div class = "contingut de la píndola" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "perfil" > ... </div> 
  <div id = "missatges" > ... </div> 
  <div id = "configuració" > ... </div> 
</div>
 
<script>
  $ ( funció () {  
    $ ( '.tabs' ). pestanyes ()
  })
</script>

Esdeveniments

Esdeveniment	Descripció
canvi	Aquest esdeveniment s'activa amb el canvi de pestanya. Utilitzeu event.targeti event.relatedTargetper orientar la pestanya activa i la pestanya activa anterior respectivament.

$ ( '#.pestanyes' ). bind ( 'canviar' , funció ( e ) {   
  e . target // pestanya activada
  e . relatedTarget // pestanya anterior
})

Demostració

• Casa
• Perfil
• Missatges
• Configuració
• Menú desplegable
  • @greix
  • @mdo

Basat en l'excel·lent connector jQuery.tipsy escrit per Jason Frame; twipsy és una versió actualitzada, que no es basa en imatges, utilitza css3 per a animacions i atributs de dades per emmagatzemar títols!

descarregar

Utilitzant bootstrap-twipsy.js

$ ( '#exemple' ). twipsy ( opcions )

Opcions

Nom	tipus	per defecte	descripció
animar	booleà	veritat	apliqueu una transició d'esvaïment CSS a la informació sobre eines
retard en	nombre	0	retard abans de mostrar la informació sobre eines (ms)
delayOut	nombre	0	retard abans d'ocultar la informació sobre eines (ms)
retrocedir	corda	''	text que s'ha d'utilitzar quan no hi ha cap títol d'informació eines
col·locació	corda	'a dalt'	com posicionar la informació sobre eines - a sobre | sota | esquerra | dret
html	booleà	fals	permet contingut html dins de tooltip
viu	booleà	fals	utilitzeu la delegació d'esdeveniments en lloc dels controladors d'esdeveniments individuals
compensació	nombre	0	desplaçament de píxels de la informació sobre eines de l'element objectiu
títol	cadena, funció	'títol'	atribut o mètode per recuperar el text del títol
disparador	corda	'planar'	com s'activa la informació sobre eines - passa el cursor | focus | manual
plantilla	corda	[marcatge predeterminat]	La plantilla html utilitzada per representar un twipsy.

Avís Les opcions d'instància twipsy individuals es poden especificar alternativament mitjançant l'ús d'atributs de dades.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Algun text del títol' > text </a>    

Mètodes

$().twipsy(opcions)

Adjunta un controlador twipsy a una col·lecció d'elements.

.twipsy('mostrar')

Revela un elements twipsy.

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

.twipsy('amagar')

Amaga un element twipsy.

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

.twipsy (cert)

Retorna una instància de classe d'elements twipsy.

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

Avís Com a alternativa, es pot recuperar amb $().data('twipsy').

Demostració

El connector popover proporciona una interfície senzilla per afegir popovers a la vostra aplicació. Estén el connector bootstrap-twipsy.js , així que assegureu-vos d'agafar aquest fitxer també quan inclogueu popovers al vostre projecte.

Avís Heu d'incloure el fitxer bootstrap-twipsy.js abans de bootstrap-popover.js.

descarregar

Utilitzant bootstrap-popover.js

$ ( '#exemple' ). popover ( opcions )

Opcions

Nom	tipus	per defecte	descripció
animar	booleà	veritat	apliqueu una transició d'esvaïment CSS a la informació sobre eines
retard en	nombre	0	retard abans de mostrar la informació sobre eines (ms)
delayOut	nombre	0	retard abans d'ocultar la informació sobre eines (ms)
retrocedir	corda	''	text que s'ha d'utilitzar quan no hi ha cap títol d'informació eines
col·locació	corda	'dret'	com posicionar la informació sobre eines - a sobre | sota | esquerra | dret
html	booleà	fals	permet contingut html dins de tooltip
viu	booleà	fals	utilitzeu la delegació d'esdeveniments en lloc dels controladors d'esdeveniments individuals
compensació	nombre	0	desplaçament de píxels de la informació sobre eines de l'element objectiu
títol	cadena, funció	'títol'	atribut o mètode per recuperar el text del títol
contingut	cadena, funció	'contingut de dades'	una cadena o mètode per recuperar el text del contingut. si no se'n proporciona cap, el contingut s'obtindrà d'un atribut de contingut de dades.
disparador	corda	'planar'	com s'activa la informació sobre eines - passa el cursor | focus | manual
plantilla	corda	[marcatge predeterminat]	La plantilla html utilitzada per representar un popover.

Avís Les opcions d'instàncies emergents individuals es poden especificar alternativament mitjançant l'ús d'atributs de dades.

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

Mètodes

$().popover(opcions)

Inicialitza les finestres emergents per a una col·lecció d'elements.

.popover('mostra')

Revela un popover d'elements.

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

.popover('amagar')

Amaga una finestra emergent d'elements.

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

Demostració

passa el cursor per popover

El connector d'alerta és una classe molt petita per afegir una funcionalitat propera a les alertes.

descarregar

Utilitzant bootstrap-alerts.js

$ ( ".missatge-alerta" ). alerta ()

Marcatge

Només cal que afegiu un data-alertatribut als vostres missatges d'alerta per oferir-los automàticament una funcionalitat propera.

Opcions

Nom	tipus	per defecte	descripció
selector	corda	'.Tanca'	Quin selector s'ha d'orientar per tancar una alerta.

Mètodes

$().alert()

Embolcalla totes les alertes amb una funcionalitat propera. Perquè les vostres alertes s'animin quan estiguin tancades, assegureu-vos que ja tenen la classe .fadei .inaplicada.

.alert('tancar')

Tanca una alerta.

$ ( ".missatge-alerta" ). alerta ( 'tancar' )

Demostració