Modal rehegua

Peteĩ aerodinámico, ha katu iflexible, ogueraha pe plugin modal javascript ymaite guive orekóva funcionalidad mínima oñeikotevẽva añoite ha umi por defecto inteligente.

Ejemplo estático rehegua

Iguýpe oĩ peteĩ modal ojejapóva estáticamente.

Demostración en vivo rehegua

Embohasa peteĩ modal javascript rupive eitykuévo pe botón oĩva iguýpe. Oguejýta ha oñedesvanece vaʼerã pe páhina yvate guive.

Oipurúvo bootstrap-modal rehegua

Ehenói modal-pe javascript rupive:

$ ( '#cheModal' ). modal ( opciones ) rehegua .

Opciones rehegua

Marcado rehegua

Ikatu emomba’apo umi modal nde página-pe ndahasýiramo rehai’ỹre peteĩ línea javascript rehegua. Oñemohenda mante data-toggle="modal"peteĩ elemento controlador rehegua orekóva peteĩ data-target="#foo"térã href="#foo"okorrespondéva peteĩ id elemento modal-pe, ha ojepyso jave, omoñepyrũta ne modal.

Avei, emoĩ hag̃ua opción nde instancia modal-pe, emoinge mante umíva atributo de datos adicional ramo tahaꞌe elemento control rehegua térã marcado modal-pe voi.

<a clase = "btn" data-toggle = "modal" href = "#cheModal" > Ñepyrũrã Modal </a>    

<div clase = "modal" id = "cheModal" >  
  <div clase = "modal-akãrapu'ã" > 
    <a clase = "omboty" data-dismiss = "modal" > × </a>  
    <h3> Modal iñakãrapu’ãva </h3>
  </div> rehegua
  <div clase = "cuerpo-modal" > rehegua 
    <p> Peteĩ tete porã... </p>
  </div> rehegua
  <div clase = "modal-py rehegua" > 
    <a href = "#" clase = "btn" > Oñemboty </a>  
    <a href = "#" clase = "btn btn-primary" > Eñongatu ñemoambue </a>  
  </div> rehegua
</div> rehegua

Método-kuéra rehegua

.modal(opciones) rehegua .

Omomba’apo ne contenido modal ramo. Omoneĩ peteĩ opción opcional object.

$ ( '#cheModal' ). modal rehegua ({
  teclado : japu 
}) Ñe’ẽpoty ha purahéi .

.modal('ombohasa') .

Ombohasa manualmente peteĩ modal.

$ ( '#cheModal' ). modal ( 'toggle' ) Ñe'ẽpoty ha purahéi .

.modal('ehechauka') .

Oipe’a manualmente peteĩ modal.

$ ( '#cheModal' ). modal ( 'ehechauka' ) .

.modal('oñomi') .

Oñomi manualmente peteĩ modal.

$ ( '#cheModal' ). modal ( 'oñomi' ) .

Umi mba’e oikóva

Bootstrap clase modal ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad modal-pe.

$ ( '#cheModal' ). on ( 'oñomi' , función () {   
  // ejapo peteĩ mba'e...
}) Ñe’ẽpoty ha purahéi .

Umi desplegable rehegua

Emoĩ menú desplegable haimete oimeraẽ mba’épe Bootstrap-pe ko plugin isãsóva rupive. Bootstrap oguereko menú desplegable pytyvõ henyhẽva on navbar, fichas ha pastilla-pe.

Tembiecharã

Emboguejy umi enlace nav desplegable oĩva navbar-pe ha umi pastilla iguýpe eproba hag̃ua umi desplegable.

• Enlace regular rehegua
• Ñemboguejyha
  • Action
  • Another action
  • Something else here
  • Separated link
• Ñemboguejyha 2.1
  • Action
  • Another action
  • Something else here
  • Separated link
• Ñemboguejyha 3.1
  • Action
  • Another action
  • Something else here
  • Separated link

Oipurúvo bootstrap-dropdown.js

Ehenói umi desplegable javascript rupive:

$ ( '.mboguejy-mbojere' ). desplegable () rehegua .

Marcado rehegua

Oñemoĩ pyaꞌe hag̃ua funcionalidad desplegable oimeraẽ elemento-pe emoĩnte data-toggle="dropdown"ha oimeraẽva bootstrap desplegable añetegua oñemboguatáva ijeheguiete.

<ul clase = "nav nav-píldoras" > 
  <li class = "activo" ><a href = "#" > Ñe’ẽmondo jepivegua </a></li>  
  <li clase = "desplegable" id = "menú1" >  
    <a clase = "mboguejýva" data-toggle = "mboguejýva" href = "#menú1" >   
      Ñemboguejyha
      <b clase = "caret" ></b> rehegua 
    </a> rehegua
    <ul clase = "menú desplegable" > 
      <li><a href = "#" > Tembiaporã </a></li> 
      <li><a href = "#" > Ambue tembiaporã </a></li> 
      <li><a href = "#" > Ambue mba’e ko’ápe </a></li> 
      <li clase = "mboja'o" </li> 
      <li><a href = "#" > Ñe’ẽmondo ojeipe’áva </a></li> 
    </ul> rehegua
  </li> rehegua
  ...
</ul> rehegua

Método-kuéra rehegua

$().mboguejýva () .

Peteĩ api programatico oñemboguata hag̃ua menú peteĩ navbar térã navegación ficha oñemeꞌevaꞌekuépe g̃uarã.

Pe ScrollSpy plugin ha’e oñembopyahu hag̃ua ijeheguiete umi nav destino oñemopyendáva desplazamiento ñemohenda rehe.

Techapyrã navbar orekóva scrollspy

Emoinge pe área oĩva iguýpe ha ehecha pe actualización de navegación. Umi sub elemento desplegable ojehechaukáta avei. ¡Eñeha'ã eñeha'ã!

Oipurúvo bootstrap-scrollspy.js

Ehenói scrollspy-pe javascript rupive:

$ ( '#navbar' ). scrollspy rehegua () .

Marcado rehegua

Oñemoĩ hag̃ua scrollspy jeiko pya’e nde barra yvategua jeguatarãme, emoĩnte data-spy="scroll"pe elemento reespiaasévape (jepiveguaichavéva kóva ha’éta hete).

<body data-spy = "desplazamiento" > ... </body> rehegua  

Opciones rehegua

Ko plugin omoĩ pya’e, dinámica ficha ha pastilla funcionalidad oñembohasa hag̃ua contenido local rupive.

Tembiecharã fichakuéra

Emboguejy umi ficha oĩva iguýpe embohasa hag̃ua umi vore kañymby apytépe, jepe umi menú desplegable rupive.

• Óga
• Yke
• Ñemboguejyha
  • @fat
  • @mdo

Oipurúvo bootstrap-tab.js

Emboguata umi vore’i javascript rupive:

$ ( '#cheTab' ). tab ( 'ehechauka' ) .

Marcado rehegua

Ikatu emomba’apo peteĩ ficha térã pastilla jeguata ehai’ỹre mba’eveichagua javascript emombe’úvo data-toggle="tab"térã data-toggle="pill"peteĩ elemento ári.

<ul clase = "nav nav-pestañas" > 
  <li><a href = "#óga" data-toggle = "pestaña" > Óga </a></li>  
  <li><a href = "#perfil" data-toggle = "pestaña" > Perfil </a></li>  
  <li><a href = "#marandukuéra" data-toggle = "ficha" > Marandukuéra </a></li>  
  <li><a href = "#mboheko" data-toggle = "ficha" > Ñemboheko </a></li>  
</ul> rehegua

Método-kuéra rehegua

$().tab rehegua

Omombaꞌapo peteĩ elemento ficha ha contenido mbaꞌeryru. Tab oguerekovaꞌerã peteĩ `data-target` térã peteĩ `href` ojepytasóva peteĩ nodo mbaꞌerepy rehegua dom-pe.

<ul clase = "nav nav-pestañas" > 
  <li clase = "activo" ><a href = "#óga" > Óga </a></li>  
  <li><a href = "#perfil" > Ñe’ẽmondo </a></li> 
  <li><a href = "#marandukuéra" > Marandukuéra </a></li> 
  <li><a href = "#mboheko" > Ñemboheko </a></li> 
</ul> rehegua
 
<div clase = "pestaña-contenido" > 
  <div clase = "ficha-pane activa" id = "óga" > ... </div>  
  <div clase = "ficha-pane" id = "perfil" > ... </div>  
  <div clase = "ficha-panel" id = "marandukuéra" > ... </div>  
  <div clase = "ficha-pane" id = "mboheko" > ... </div>  
</div> rehegua
 
<guión> rehegua
  $ ( tembiaporã () { .  
    $ ( '.tabs peteĩ:paha' ). tab ( 'ehechauka' ) .
  }) Ñe’ẽpoty ha purahéi .
</script> rehegua

Umi mba’e oikóva

$ ( 'a[datos-toggle="ficha"]' ). on ( 'ojehechauka' , función ( e ) {   
  e . target // ficha activada rehegua
  e . relatedTarget // pestaña mboyvegua
}) Ñe’ẽpoty ha purahéi .

Tembipururã Ñe’ẽñemi rehegua

Oñeinspiráva pe plugin iporãitereíva jQuery.tipsy ohaiva’ekue Jason Frame; Tembipuru’i ñe’ẽmondo ha’e peteĩ versión oñembopyahúva, ndojeroviapáiva ta’ãngamýire, oipuru css3 taꞌãngamýime g̃uarã ha data-attributo título ñeñongaturã tendápe g̃uarã.

Techapyrã jepuru Tembipururã Ñe’ẽmondo rehegua

Emoĩ nde po umi enlace oĩva ko’ápe rehecha hag̃ua tembipuru’i ñe’ẽmondo:

Oipurúvo bootstrap-tooltip.js

Emoñepyrũ tembipuru’i ñe’ẽmondo javascript rupive:

$ ( '#techapyrã' ). tembipururã ñe’ẽmondo ( opciones ) .

Opciones rehegua

Marcado rehegua

Mba’éichapa omba’apo, Tooltip ha Popover data-apis oĩ opt in. Eipuruséramo emombe’únte peteĩ opción selector.

<a href = "#" rel = "tembipuru’i ñe’ẽñemi" title = "tembipuru’i peteĩha" > emoĩ che ári </a>   

Método-kuéra rehegua

$().tembipuru’i(opciones) .

Ombojoaju peteĩ tembipuru’i ñemboguataha peteĩ elemento ñembyaty rehe.

.tembipuru'i('ehechauka')

Oikuaauka peteĩ elemento tembipururã ñe’ẽmondo.

$ ( '#elemento' ). tembipuru'i ñe'ẽmondo ( 'ehechauka' ) .

.tembipuru'i('oñomi')

Oñomi peteĩ elemento tembipuru’i ñe’ẽmondo.

$ ( '#elemento' ). tembipuru'i ñe'ẽmondo ( 'oñomi' ) .

.tembipuru'i ñe'ẽmondo('toggle')

Ombohasa peteĩ elemento tembipuru’i ñe’ẽmondo.

$ ( '#elemento' ). tembipuru'i ñe'ẽmondo ( 'toggle' ) .

Popovers rehegua

Oñemoĩ umi superposición michĩva contenido rehegua, umi oĩva iPad-peguáicha, oimeraẽ elemento-pe oñemohenda hag̃ua marandu secundaria.

* Oikotevê Tooltip oike haguã

Techapyrã hover popover rehegua

Emoĩ nde po pe botón ári emoñepyrũ hag̃ua pe popover.

Oipurúvo bootstrap-popover.js

Emboguata popovers javascript rupive:

$ ( '#techapyrã' ). popover ( opciones ) rehegua .

Opciones rehegua

Marcado rehegua

Mba’éichapa omba’apo, Tooltip ha Popover data-apis oĩ opt in. Eipuruséramo emombe’únte peteĩ opción selector rehegua.

Método-kuéra rehegua

$().popover(opciones) rehegua .

Omoñepyrũ umi popover peteĩ elemento ñembyatyrã.

.popover('ehechauka')

Oikuaauka peteî elementos popover.

$ ( '#elemento' ). popover ( 'ehechauka' ) .

.popover('oñomi') .

Oñomi peteĩ elementos popover.

$ ( '#elemento' ). popover ( 'oñomi' ) .

.popover('ombohasa') .

Ombohasa peteĩ elementos popover.

$ ( '#elemento' ). popover ( 'mbojere' ) .

Umi alerta rehegua

Pe plugin alerta rehegua ha’e peteĩ mbo’esyry michĩmi oñembojoapy hag̃ua funcionalidad hi’aguĩva umi alerta-pe.

Umi alerta techapyrãva

Pe plugin alertas rehegua omba’apo marandu alerta rehegua jepiveguápe, ha marandu omboty.

Oipurúvo bootstrap-alert.js

Emboguata peteĩ ñe’ẽmondo ñemboyke javascript rupive:

$ ( ".alerta" ). alerta rehegua () .

Marcado rehegua

Emoĩnte data-dismiss="alert"nde botón ñemboty rehegua ome’ẽ hag̃ua ijeheguiete peteĩ alerta ñemboty funcionalidad.

<a clase = "omboty" data-dismiss = "alerta" href = "#" > × </a> rehegua   

Método-kuéra rehegua

$ ().alerta () Ñe'ẽ guarani.

Ombojere opaite alerta funcionalidad hi’aguĩva reheve. Ikatu hag̃uáicha ne alertakuéra oñemokyre’ỹ oñembotývo, eñangareko oguerekoha hikuái pe .fadeha .inclase ojeaplikamava’ekue hesekuéra.

.alert('mboty') .

Omboty peteĩ alerta.

$ ( ".alerta" ). alerta ( 'mboty' ) .

Umi mba’e oikóva

Bootstrap clase de alerta ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad alerta rehegua.

$ ( '#che-alerta' ). encuadernación ( 'oñemboty' ,  función () {  
  // ejapo peteĩ mba'e...
}) Ñe’ẽpoty ha purahéi .

Upéva rehegua

Ejapo hetave mba’e umi botón reheve. Control botón heꞌi térã omoheñói botón aty hetave componente-pe g̃uarã tembipururã ryru-icha.

Tembiecharã jeporu

Eipuru umi botón plugin estado ha toggles-pe g̃uarã.

Oipurúvo bootstrap-button.js

Emboguata umi botón javascript rupive:

$ ( '.pestañas' ). botón () rehegua .

Marcado rehegua

Umi atributo dato rehegua haꞌehína integral pe botón plugin-pe. Ehecháke kódigo techapyrãva iguýpe opaichagua marcado tipo rehegua.

<!-- Emoĩve data-toggle="botón" emombaꞌapo hag̃ua ñembohasa peteĩ mboajepyrévape -->
<botón clase = "btn" data-toggle = "botón" > Ñemboguapy peteĩva </botón>  
 
<!-- Emoĩve data-toggle="buttons-checkbox" ñembohasa estilo jesarekorã rehegua btn-group -->-pe
<div clase = "btn-grupo" dato-kuéra ñembohasa = "botón-kuéra jesarekoha" >  
  <botón clase = "btn" > Izquierda </botón> 
  <botón clase = "btn" > Mbytegua </botón> 
  <botón clase = "btn" > Oike </botón> 
</div> rehegua
 
<!-- Emoĩve data-toggle="buttons-radio" oñembohasávo estilo radio rehegua btn-group-pe -->
<div clase = "btn-grupo" dato-toggle = "botón-radio" >  
  <botón clase = "btn" > Izquierda </botón> 
  <botón clase = "btn" > Mbytegua </botón> 
  <botón clase = "btn" > Oike </botón> 
</div> rehegua

Método-kuéra rehegua

$().botón('ombohasa') .

Ombohasa estado empuje rehegua. Ome’ẽ pe botón-pe ojehechaháicha oñemboguata hague.

<botón clase = "btn" data-toggle = "botón" > ... </botón> rehegua   

$().botón('oñekarga') .

Omohenda botón estado ojekarga hag̃ua - omboyke botón ha ombohasa jehaipyre ojekarga hag̃ua jehaipyre. Ojekarga hag̃ua jehaipyre oñembohekovaꞌerã elemento botón rehegua ojeporúvo atributo dato rehegua data-loading-text.

<botón clase = "btn" data-loading-text = "ojekarga mba’e..." > ... </botón>   

$().botón ('ñemoĩjey') .

Omoĩjey botón estado - ombohasa jehaipyre jehaipyre ypykuépe.

$().botón(cadena) rehegua .

Omohendajey botón estado - ombohasa jehaipyre oimeraẽva datokuéra jehaipyre estado oñembohekopyrévape.

<botón clase = "btn" dato-completo-texto = "oñemohu'ã!" > ... </botón> rehegua   
<guión> rehegua
  $ ( '.btn' rehegua ). botón ( 'oñemohu'ã' ) .
</script> rehegua

Upéva rehegua

Ojehupyty estilo base ha pytyvõ flexible umi componente plegable-pe g̃uarã haꞌeháicha acordeón ha navegación.

Techapyrã acordeón rehegua

Oipurúvo pe plugin colapso, romopu’ã peteĩ widget estilo acordeón simple:

Oipurúvo bootstrap-collapse.js

Emboguata javascript rupive:

$ ( ".oñemboguejy" ). ñembyai () .

Opciones rehegua

Marcado rehegua

Oñemoĩnte data-toggle="collapse"ha peteĩ data-targetelemento-pe oñemeꞌe hag̃ua ijeheguiete control peteĩ elemento oñembotýva rehegua. Pe data-targetatributo omoneĩ peteĩ css jeporavoha omoĩ hag̃ua pe ñemboguejy. Ejesareko porãke emoĩ hag̃ua pe mboꞌepy collapsepe elemento oñembotývape. Oipotáramo ojepe’a por defecto, emoĩve pe clase adicional in.

<botón clase = "btn btn-peligro" dato-toggle = "collapso" dato-target = "#demo" >   
  simple plegable rehegua
</botón> rehegua
 
<div id = "demo" clase = "oñemboguejy" > ... </div>  

Método-kuéra rehegua

.collapse(opciones) rehegua .

Omomba’apo ne contenido peteĩ elemento oñemboguejýva ramo. Omoneĩ peteĩ opción opcional object.

$ ( '#cheCollapsible' ). ho'a haguã ({
  toggle : japu 
}) Ñe’ẽpoty ha purahéi .

.collapse('ombohasa') .

Ombohasa peteĩ elemento oñembotykuaáva ojehechauka térã oñeñomi hag̃ua.

.collapse('ehechauka') .

Ohechauka peteĩ elemento oñembotykuaáva.

.collapse('oñomi') .

Oñomi peteĩ elemento oñembotykuaáva.

Umi mba’e oikóva

Bootstrap clase de colapso ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad colapso-pe.

$ ( '#cheCollapsible' ). on ( 'oñomi' , función () {   
  // ejapo peteĩ mba'e...
}) Ñe’ẽpoty ha purahéi .

Upéva rehegua

Peteĩ plugin genérico ojejapo hag̃ua ciclo umi elemento rupive. Peteĩ vy’apavẽ.

Techapyrã carrusel rehegua

Ehecha pe diapositiva jehechauka oĩva koʼápe.

Primera Etiqueta de Miniatura rehegua

Cras justo odio, dapibus ac facilisis en, egestas eget quam rehegua. Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

Mokõiha Etiqueta Miniatura rehegua

Cras justo odio, dapibus ac facilisis en, egestas eget quam rehegua. Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

Mbohapyha Etiqueta de Miniatura rehegua

Cras justo odio, dapibus ac facilisis en, egestas eget quam rehegua. Donec id elit ndaha'éiva mi porta gravida eget metus-pe. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

‹ Ñemby . › Ñe’ẽpoty ha purahéi

Oipurúvo bootstrap-carousel.js

Ehenói javascript rupive:

$ ( '.carrusel' ). carrusel rehegua () .

Opciones rehegua

Marcado rehegua

Umi atributo dato rehegua ojepuru umi conrol mboyvegua ha oúvape g̃uarã. Ehecháke pe techapyrã marcado iguýpe.

<div id = "che Carrusel" clase = "carrusel" >  
  <!-- Artículos de carrusel -->
  <div clase = "carrusel-pypegua" > 
    <div clase = "mba’e’apopyrã” > ... </div> 
    <div clase = "artículo" > ... </div> rehegua 
    <div clase = "artículo" > ... </div> rehegua 
  </div> rehegua
  <!-- Carrusel nav --> rehegua
  <a clase = "carrusel-control izquierdo" href = "#checarrusel" data-slide = "ymavegua" > ‹ </a> rehegua   
  <a clase = "carrusel-control derecho" href = "#checarrusel" data-slide = "oúva" > › </a> rehegua   
</div> rehegua

Método-kuéra rehegua

.carrusel(opciones) rehegua .

Omoñepyrü carrusel orekóva opciones opcionales objectha oñepyrü bicicleta umi artículo rupive.

$ ( '.carrusel' ). carrusel rehegua ({
  intervalo : ary 2000-pe 
}) Ñe’ẽpoty ha purahéi .

.carrusel('ciclo') rehegua.

Ojapo ciclo umi mba e carrusel rehegua rupive izquierda guive derecha peve.

.carrusel('pausa') .

Ojoko carrusel ani haguã ohóva bicicleta rehe umi artículo rupive.

.carrusel(papapy) .

Ombojere carrusel peteĩ marco particular-pe (0 oñemopyendáva, ojoguáva peteĩ matriz-pe).

.carrusel('yva'ekue') .

Ombohasa ciclo pe elemento ohasava’ekuépe.

.carrusel('oúva') .

Ombojere pe mba’e oúvape.

Umi mba’e oikóva

Bootstrap clase carrusel oikuaauka mokõi evento ojeengancha haguã funcionalidad carrusel-pe.

Upéva rehegua

Peteĩ plugin básico, oñembotuicháva ndahasýiva ojejapo pyaꞌe hag̃ua umi typeahead elegante oimeraẽva formulario jeike jehaipyre reheve.

Tembiecharã

Eñepyrũ ehai pe tenda oĩva iguýpe ehechauka hag̃ua umi mba’ekuaarã ojehai mboyve.

Oipurúvo bootstrap-typeahead.js

Ehenói typeahead-pe javascript rupive:

$ ( '.ehai tenonde' ). ehai tenondegua () .

Opciones rehegua

Marcado rehegua

Oñemoĩve umi atributo dato rehegua ojeregistra hag̃ua peteĩ elemento orekóva funcionalidad typeahead.

< type de entrada = "jehaipyre" data-provide = "typeahead" >  

Método-kuéra rehegua

.typeahead(opciones) rehegua .

Omoñepyrũ peteĩ jeike peteĩ typeahead reheve.