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
- $ ( '#el meu-modal' ). modal ( opcions )
Nom | tipus | per defecte | descripció |
---|---|---|---|
teló de fons | booleà | fals | Inclou un element de fons modal |
teclat | booleà | fals | Tanca el modal quan es prem la tecla d'escapament |
espectacle | booleà | fals | Obre el modal a la inicialització de classe |
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-modal
atribut 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 = "true" > Llança el modal </a>
Avís Si voleu que el vostre modal s'animi dins i fora, només cal que afegiu una .fade
classe al vostre .modal
element (consulteu la demostració per veure-ho en acció).
Activa el teu contingut com a modal. Accepta opcions opcionals object
.
- $ ( '#el meu-modal' ). modal ({
- closeOnEscape : cert
- })
Commuta manualment un modal.
- $ ( '#el meu-modal' ). modal ( 'alternar' )
Obre manualment un modal.
- $ ( '#el meu-modal' ). modal ( 'mostrar' )
Amaga manualment un modal.
- $ ( '#el meu-modal' ). modal ( 'amagar' )
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')
.
La classe modal de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat modal.
Esdeveniment | Descripció |
---|---|
espectacle | Aquest esdeveniment s'activa immediatament quan show es 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 hide s'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 ...
- })
Aquest connector serveix per afegir interacció desplegable a la barra superior d'arrencada o a les navegacions amb pestanyes.
descarregar
- $ ( '#barra superior' ). desplegable ()
Per afegir ràpidament una funcionalitat desplegable a qualsevol element de navegació, utilitzeu l' data-dropdown
atribut. 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-dropdown
atribut a un element contenidor més significatiu com .tabs
o .topbar
.
Una API programàtica per activar menús per a una barra superior determinada o navegació per pestanyes.
Aquest connector serveix per afegir la interacció scrollspy (nav d'actualització automàtica) a la barra superior d'arrencada.
descarregar
- $ ( '#barra superior' ). desplegable ()
Per afegir fàcilment un comportament scrollspy al vostre navegador, només heu d'afegir l' data-scrollspy
atribut al fitxer .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
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>
.
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' )
Consulteu la navegació de la barra superior d'aquesta pàgina.
Aquest connector afegeix una pestanya ràpida i dinàmica i una funcionalitat de pastilles.
descarregar
- $ ( '.tabs' ). pestanyes ()
Podeu activar una navegació de pestanyes o píndoles sense escriure cap JavaScript simplement donant-los un data-tabs
o un data-pills
atribut.
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
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>
- </ul>
- <script>
- $ ( funció () {
- $ ( '.tabs' ). pestanyes ()
- })
- </script>
Denim cru, probablement no has sentit parlar d'ells, Austin. Nesciunt tofu stumptown aliqua, neteja mestre de sintetitzadors retro. Mustache cliche tempor, williamsburg carles vegan helvetica. Rerehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.
Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.
Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.
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
- $ ( '#exemple' ). twipsy ( 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 |
Adjunta un controlador twipsy a una col·lecció d'elements.
Revela un elements twipsy.
- $ ( '#element' ). twipsy ( 'espectacle' )
Amaga un element twipsy.
- $ ( '#element' ). twipsy ( 'amagar' )
Retorna una instància de classe d'elements twipsy.
- $ ( '#element' ). twipsy ( veritat )
Avís Com a alternativa, es pot recuperar amb $().data('twipsy')
.
Pantalons ajustats keffiyeh del següent nivell , probablement no n'hagueu sentit a parlar. Photo Booth barba denim cru tipografia bossa de missatgeria vegana stumptown. Seitan de granja a taula, la roba americana de quinoa sostenible de 8 bits fixie de mcsweeney té un cambray de vinil terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodièsel williamsburg marfa, quatre loko mcsweeney's cleanse vegan chambray. Un artesà realment irònic , sigui quin sigui el keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafè d'origen únic viral.
El connector popover proporciona una interfície senzilla per afegir popovers a la vostra aplicació. Estén el connector boostrap-twipsy.js , així que assegureu-vos d'agafar aquest fitxer també quan inclogueu popovers al vostre projecte.
descarregar
- $ ( '#exemple' ). popover ( 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' | atribut o mètode per recuperar el text del contingut |
disparador | corda | 'planar' | com s'activa la informació sobre eines - passa el cursor | focus | manual |
Inicialitza les finestres emergents per a una col·lecció d'elements.
Revela un popover d'elements.
- $ ( '#element' ). popover ( 'mostrar' )
Amaga una finestra emergent d'elements.
- $ ( '#element' ). popover ( 'amagar' )
El connector d'alerta és una classe molt petita per afegir una funcionalitat propera a les alertes.
descarregar
- $ ( ".missatge-alerta" ). alerta ()
Només cal que afegiu un data-alert
atribut als vostres missatges d'alerta per oferir-los automàticament una funcionalitat propera.
Embolcalla totes les alertes amb una funcionalitat propera. Perquè les vostres alertes s'animin quan estiguin tancades, assegureu-vos que ja tenen la classe .fade
i .in
aplicada.
Tanca una alerta.
- $ ( ".missatge-alerta" ). alerta ( 'tancar' )