Gure Modal plugina modal js plugin tradizionalaren oso argala da, arreta berezia jarriz hemen twitter-en behar dugun funtzionalitate hutsa bakarrik sartzeko.

Deskargatu

Bootstrap-modal erabiliz

$ ( '#nire-modala' ). modala ( aukerak )

Aukerak

Izena	mota	lehenetsia	deskribapena
atzealdea	boolearra	faltsua	Atzeko plano-elementu modala dakar
teklatua	boolearra	faltsua	Ihes tekla sakatzen denean modala ixten du
erakutsi	boolearra	faltsua	Klasearen hasierako modala irekitzen du

Markatzea

Modalak zure orrialdean erraz aktibatu ditzakezu javascript lerro bakar bat idatzi beharrik gabe. Besterik gabe, eman elementu bati elementu data-controls-modalmodalaren ID bati dagokion atributua, eta klikatzean, zure modala abiaraziko du. Aukera modalak gehitzeko, sartu datu-atributu gisa ere.

<a class = "btn" data-controls-modal = "nire-modala" data-backdrop = "true" > Abiarazi modala </a>    

Oharra Zure modala sartu eta kanpora animatzea nahi baduzu, gehitu .fadeklase bat zure .modalelementuari (ikusi demoa hau martxan ikusteko).

Metodoak

.modala(aukerak)

Zure edukia modal gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

$ ( '#nire-modala' ). modala ({
  closeOnEscape : egia 
})

.modal('toggle')

Modal bat eskuz aldatzen du.

$ ( '#nire-modala' ). modala ( 'aldatu' )

.modal('erakutsi')

Eskuz modal bat irekitzen du.

$ ( '#nire-modala' ). modala ( 'erakutsi' )

.modal('ezkutatu')

Eskuz ezkutatzen du modal bat.

$ ( '#nire-modala' ). modala ( 'ezkutatu' )

.modala(egia)

Elementuen klase modalaren instantzia bat ematen du.

$ ( '#nire-modala' ). modala ( egia )

Oharra Bestela, hau erabiliz berreskura daiteke $().data('modal').

Gertaerak

Bootstrap-en klase modalak funtzionalitate modalean konektatzeko gertaera batzuk erakusten ditu.

Gertaera	Deskribapena
erakutsi	Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
erakusten	Gertaera hau modua erabiltzailearentzat ikusgai jarri denean abiarazten da (css trantsizioak amaitu arte itxarongo da).
ezkutatu	Gertaera hau berehala abiarazten da hideinstantzia-metodoa deitzen denean.
ezkutuan	Gertaera hau modua erabiltzaileari ezkutatzen amaitzen denean abiarazten da (css trantsizioak amaitu arte itxarongo da).

$ ( '#nire-modala' ). lotu ( 'ezkutatuta' , funtzioa () {   
  // Zerbait egin ...
})

Demo

Abiarazi Modala

Plugin hau goitibeherako interakzioa gehitzeko da bootstrap goiko barran edo fitxen nabigazioetan.

Deskargatu

Boostrap-dropdown.js erabiliz

$ ( '#goi barra' ). goitibeherako zerrenda ()

Markatzea

Nabigazio-elementuari goitibeherako funtzionalitateak azkar gehitzeko, erabili data-dropdownatributua. Baliozko edozein bootstrap goitibehitza automatikoki aktibatuko da.

<ul class = "fitxak" > 
  <li class = "active" ><a href = "#" > Hasiera </a></li>  
  <li class = "dropdown" data-dropdown = "gopdown" >   
    <a href = "#" class = "dropdown-toggle" > Goitibehera </a>  
    <ul class = "menua goitibeherako" > 
      <li><a href = "#" > Bigarren mailako esteka </a></li> 
      <li><a href = "#" > Hemen beste zerbait </a></li> 
      <li class = "banatzailea" ></li> 
      <li><a href = "#" > Beste esteka bat </a></li> 
    </ul>
  </li>
</ul>

Oharra Zure interfazeak hainbat goitibeherako badituzu, kontuan hartu atributua gehitzea edo data-dropdownbezalako edukiontzi-elementu esanguratsuago bati ..tabs.topbar

Metodoak

$(). dropdown()

Goiko barra edo fitxen nabigazio jakin baterako menuak aktibatzeko API programatikoa.

Demo

Plugin hau scrollspy (auto-eguneratzea nav) interakzioa bootstrap goiko barrara gehitzeko da.

Deskargatu

Boostrap-scrollspy.js erabiliz

$ ( '#goi barra' ). goitibeherako zerrenda ()

Markatzea

Scrollspy portaera erraz gehitzeko zure nabigazioan, gehitu data-scrollspyatributua .topbar.

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

Metodoak

$().scrollspy()

Erabiltzaileen desplazamendu-posizioaren arabera nabigazio-botoiak automatikoki aktibatzen ditu.

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

Kontuan izan Topbar-eko aingura-etiketek id-helburu konpongarriak izan behar dituztela. Adibidez, <a href="#home">home</a>must bat dom bezalako zerbaiti dagokio <div id="home"></div>.

.scrollspy('freskatu')

Scrollspy-k nabigazio-botoiak eta ataleko koordenatuak gordetzen ditu errendimendurako. Cache hau eguneratu behar baduzu (baliteke eduki dinamikoa baduzu), deitu freskatze metodo honetara. Zure scrollspy definitzeko datu-atributua erabili baduzu, deitu gorputzean freskatu.

$ ( 'gorputza' ). scrollspy ( 'freskatu' )

Demo

Begiratu orrialde honetako goiko barrako nabigazioa.

Plugin honek fitxa azkarra eta dinamikoa eta pilulen funtzionaltasuna gehitzen ditu.

Deskargatu

Boostrap-tabs.js erabiliz

$ ( '.tabs' ). fitxak ()

Markatzea

Fitxa edo pilulen nabigazioa aktiba dezakezu javascriptik idatzi gabe, bat data-tabsedo data-pillsatributua emanez.

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

Metodoak

$().tabs edo $().pilulak

Ontzi jakin baterako fitxa eta pilularen funtzionaltasuna aktibatzen du. Fitxa estekek dokumentuko ID-ak erreferentzia egin behar dituzte.

<ul class = "fitxak" > 
  <li class = "active" ><a href = "#home" > Hasiera </a></li>  
  <li><a href = "#profile" > Profila </a></li> 
  <li><a href = "#messages" > Mezuak </a></li> 
  <li><a href = "#settings" > Ezarpenak </a></li> 
</ul>
 
<div class = "pilula-edukia" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profila" > ... </div> 
  <div id = "mezuak" > ... </div> 
  <div id = "ezarpenak" > ... </div> 
</ul>
 
<gidoia>
  $ ( funtzioa () {  
    $ ( '.tabs' ). fitxak ()
  })
</script>

Demo

• Hasiera
• Profila
• Mezuak
• Ezarpenak

Jason Frame-k idatzitako jQuery.tipsy plugin bikainan oinarrituta; twipsy bertsio eguneratua da, irudietan oinarritzen ez dena, animazioetarako css3 erabiltzen duena eta tituluak gordetzeko datu-atributuak!

Deskargatu

Bootstrap-twipsy.js erabiliz

$ ( '#adibidea' ). twipsy ( aukerak )

Aukerak

Izena	mota	lehenetsia	deskribapena
animatu	boolearra	egia	aplikatu css fade trantsizioa tresna-informazioari
atzerapenaIn	zenbakia	0	tresna-informazioa erakutsi aurretik atzerapena (ms)
delayOut	zenbakia	0	tresna-informazioa ezkutatu aurretik atzerapena (ms)
erori	katea	''	tresna-aholkuaren izenbururik ez dagoenean erabiltzeko testua
Kokapen	katea	'goian'	nola kokatu tresna-informazioa - goian | azpian | ezkerra | eskubidea
html	boolearra	faltsua	html edukia ahalbidetzen du tooltip barruan
bizi	boolearra	faltsua	erabili gertaeren ordezkaritza banakako gertaeren kudeatzaileen ordez
desplazamendu	zenbakia	0	tresna-informazioaren pixel-desplazamendua xede-elementutik
Izenburua	katea | funtzioa	'Izenburua'	tituluaren testua berreskuratzeko atributua edo metodoa
trigger	katea	'pasatu'	nola abiarazten den tresna-informazioa - pasa ezazu | fokua | eskuliburua

Metodoak

$().twipsy(aukerak)

Elementu bilduma bati Twipsy kudeatzailea eransten dio.

.twipsy('erakutsi')

Elementu twipsy bat erakusten du.

$ ( '#elementua' ). twipsy ( 'erakustaldia' )

.twipsy('ezkutatu')

Elementu twipsy bat ezkutatzen du.

$ ( '#elementua' ). twipsy ( 'ezkutatu' )

.twipsy(egia)

Elementu twipsy klasearen instantzia bat ematen du.

$ ( '#elementua' ). twipsy ( egia )

Oharra Bestela, hau erabiliz berreskura daiteke $().data('twipsy').

Demo

Popover pluginak interfaze sinple bat eskaintzen du zure aplikazioan popovers gehitzeko. Boostrap-twipsy.js plugina hedatzen du , beraz, ziurtatu fitxategi hori ere hartzen duzula zure proiektuan popovers sartzen dituzunean!

Deskargatu

Boostrap-popover.js erabiliz

$ ( '#adibidea' ). popover ( aukerak )

Aukerak

Izena	mota	lehenetsia	deskribapena
animatu	boolearra	egia	aplikatu css fade trantsizioa tresna-informazioari
atzerapenaIn	zenbakia	0	tresna-informazioa erakutsi aurretik atzerapena (ms)
delayOut	zenbakia	0	tresna-informazioa ezkutatu aurretik atzerapena (ms)
erori	katea	''	tresna-aholkuaren izenbururik ez dagoenean erabiltzeko testua
Kokapen	katea	'zuzen'	nola kokatu tresna-informazioa - goian | azpian | ezkerra | eskubidea
html	boolearra	faltsua	html edukia ahalbidetzen du tooltip barruan
bizi	boolearra	faltsua	erabili gertaeren ordezkaritza banakako gertaeren kudeatzaileen ordez
desplazamendu	zenbakia	0	tresna-informazioaren pixel-desplazamendua xede-elementutik
Izenburua	katea | funtzioa	'Izenburua'	tituluaren testua berreskuratzeko atributua edo metodoa
edukia	katea | funtzioa	'datu-edukia'	edukiaren testua berreskuratzeko atributua edo metodoa
trigger	katea	'pasatu'	nola abiarazten den tresna-informazioa - pasa ezazu | fokua | eskuliburua

Metodoak

$().popover(aukerak)

Elementu bilduma baterako popover-ak hasieratzen ditu.

.popover('erakutsi')

Elementu popover bat erakusten du.

$ ( '#elementua' ). popover ( 'erakutsi' )

.popover('ezkutatu')

Elementuen popover bat ezkutatzen du.

$ ( '#elementua' ). popover ( 'ezkutatu' )

Demo

pasa ezazu popoverrako

Alerta plugina abisuei funtzionaltasun hurbilak gehitzeko klase oso txikia da.

Deskargatu

Bootstrap-alerts.js erabiliz

$ ( ".alerta-mezua" ). alerta ()

Markatzea

Gehitu besterik ez duzu data-alertatributu bat zure alerta-mezuetan automatikoki hurbileko funtzionaltasuna emateko.

Metodoak

$().alerta()

Alerta guztiak funtzionaltasun estuarekin biltzen ditu. Itxitakoan alertak animatzeko, ziurtatu .fadeeta .inklasea dagoeneko aplikatuta daukatela.

.alert('itxi')

Alerta bat ixten du.

$ ( ".alerta-mezua" ). alerta ( 'itxi' )

Demo