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, katea	faltsua	Atzeko plano-elementu modala dakar. Ezarri atzeko planoa "static"atzeko planoan klik egiten denean modala itxi nahi ez baduzu.
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 = "estatikoa" > 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 ({
  teklatua : 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

Bootstrap-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

Bootstrap-scrollspy.js erabiliz

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

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 botoien egoera kudeatzeko funtzionalitate gehigarriak eskaintzen ditu.

Deskargatu

Bootstrap-buttons.js erabiliz

$ ( '.tabs' ). botoia ()

Metodoak

$().button('toggle')

Bultza-egoera aktibatzen du. Btn-i aktibatuta dagoen itxura ematen dio.

Oharra Botoi baten aldakuntza automatikoa gaitu dezakezu data-toggleatributua erabiliz.

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

$().button('kargatzen')

Botoiaren egoera kargatzeko ezartzen du - botoia desgaitzen du eta testua kargatzeko testuarekin aldatzen du. Testua kargatzeko botoiaren elementuan definitu behar da datu-atributua erabiliz data-loading-text.

<button class = "btn" data-loading-text = "gauzak kargatzen..." > ... </button>   

$().button('berrezarri')

Botoiaren egoera berrezartzen du - testua jatorrizko testuarekin aldatzen du.

$().button(katea)

Botoiaren egoera berrezartzen du - testua definitutako edozein testu-egoera aldatzen du.

<button class = "btn" data-complete-text = "amaitu!" > ... </button>   
<gidoia>
  $('.btn').button('osatu')
</scrip>

Demo

Demo kargatzen Aktibatu/desaktibatu Demo

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

Deskargatu

Bootstrap-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> 
</div>
 
<gidoia>
  $ ( funtzioa () {  
    $ ( '.tabs' ). fitxak ()
  })
</script>

Gertaerak

Gertaera	Deskribapena
aldatu	Gertaera hau fitxa aldatzean abiarazten da. Erabili event.targeteta event.relatedTargetfitxa aktibora eta aurreko fitxa aktibora bideratzeko.

$ ( '#.fitx' ). lotu ( 'aldaketa' , funtzioa ( e ) {   
  e . xede // fitxa aktibatuta
  e . relatedTarget // aurreko fitxa
})

Demo

• Hasiera
• Profila
• Mezuak
• Ezarpenak
• Goitibehera
  • @potolo
  • @mdo

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
txantiloia	katea	[markaketa lehenetsia]	Twipsy bat errendatzeko erabiltzen den html txantiloia.

Oharra twipsy instantzia-aukera indibidualak bestela zehaztu daitezke datu-atributuak erabiliz.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Izenburuko testuren bat' > testua </a>    

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. Bootstrap-twipsy.js plugina hedatzen du , beraz, ziurtatu fitxategi hori ere hartzen duzula zure proiektuan popovers sartzen dituzunean!

Oharra bootstrap-twipsy.js fitxategia sartu behar duzu bootstrap-popover.js aurretik .

Deskargatu

Bootstrap-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 kate edo metodo bat. bat ere ematen ez bada, edukia data-content atributu batetik aterako da.
trigger	katea	'pasatu'	nola abiarazten den tresna-informazioa - pasa ezazu | fokua | eskuliburua
txantiloia	katea	[markaketa lehenetsia]	Popover bat errendatzeko erabiltzen den html txantiloia.

Ohartu Popover instantzia indibidualaren aukerak bestela zehaztu daitezke datu-atributuak erabiliz.

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

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.

Aukerak

Izena	mota	lehenetsia	deskribapena
hautatzailea	katea	'.itxi'	Alerta bat ixteko zein hautatzaile bideratu.

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