Ohun itanna Modal wa jẹ imudani tẹẹrẹ pupọ lori ohun itanna modal js ibile, ni abojuto pataki lati pẹlu iṣẹ ṣiṣe igboro nikan ti a nilo nibi ni twitter.

Gba lati ayelujara

Lilo bootstrap-modal

$ ( '#my-modal' ). modal ( awọn aṣayan )

Awọn aṣayan

Oruko	iru	aiyipada	apejuwe
sile	boolian, okun	eke	Pẹlu a modal-backdrop ano. Ṣeto backdrop si "static"ti o ko ba fẹ ki modal tiipa nigbati o ba tẹ ẹhin.
keyboard	boolian	eke	Tilekun modal nigbati o ba tẹ bọtini ona abayo
ifihan	boolian	eke	Ṣiṣi modal lori ibẹrẹ kilasi

Siṣamisi

O le mu awọn modals ṣiṣẹ lori oju-iwe rẹ ni irọrun laisi nini lati kọ laini kan ti JavaScript. Kan fun ohun kan ni abuda kan data-controls-modaleyiti o ni ibamu si id ano modal, ati nigbati o ba tẹ, yoo ṣe ifilọlẹ modal rẹ. Lati ṣafikun awọn aṣayan modal, kan ṣafikun wọn gẹgẹbi awọn abuda data bi daradara.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Ilana ifilọlẹ </a>    

Akiyesi Ti o ba fẹ ki modal rẹ ṣiṣẹ ni ati ita, kan ṣafikun .fadekilasi kan si .modalipin rẹ (tọkasi demo lati rii eyi ni iṣe).

Awọn ọna

.modal(awọn aṣayan)

Mu akoonu rẹ ṣiṣẹ bi modal. Gba awọn aṣayan iyan object.

$ ( '#my-modal' ). modal ({
  keyboard : otitọ 
})

.modal('yí')

Pẹlu ọwọ yipada modal kan.

$ ( '#my-modal' ). modal ( 'bayi' )

.modal('ifihan')

Pẹlu ọwọ ṣii modal kan.

$ ( '#my-modal' ). modal ( 'ifihan' )

.modal('tọju')

Pẹlu ọwọ hides a modal.

$ ( '#my-modal' ). modal ( 'tọju' )

.modal(otitọ)

Pada ohun eroja modal kilasi apeere.

$ ( '#my-modal' ). modal ( otitọ )

Akiyesi Ni omiiran, eyi le ṣe gba pada pẹlu $().data('modal').

Awọn iṣẹlẹ

Kilasi modal Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe modal.

Iṣẹlẹ	Apejuwe
ifihan	Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
han	Iṣẹlẹ yii jẹ ina nigbati modal ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada css lati pari).
tọju	Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
farasin	Iṣẹlẹ yii jẹ ina nigbati modal naa ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada css lati pari).

$ ( '#my-modal' ). dè ( 'farasin' , iṣẹ () {   
  // se nkan ...
})

Ririnkiri

Ifilọlẹ Modal

Ohun itanna yii jẹ fun fifi ibaraenisepo silẹ silẹ si oke igi bootstrap tabi awọn lilọ kiri taabu.

Gba lati ayelujara

Lilo bootstrap-dropdown.js

$ ( '#topbar' ). silẹ ()

Siṣamisi

Lati ni kiakia fi dropdown iṣẹ-si eyikeyi nav ano, lo awọn data-dropdownabuda. Eyikeyi silẹ bootstrap to wulo yoo muu ṣiṣẹ laifọwọyi.

<ul kilasi = "awọn taabu" > 
  <li class = "lọwọ" ><a href = "#" > Ile </a></li>  
  <li class = "idasilẹ silẹ" data-dropdown = "silẹ silẹ" >   
    <a href = "#" kilasi = "dropdown-toggle" > Sisilẹ </a>  
    <ul kilasi = "akojọ-silẹ silẹ" > 
      <li><a href = "#" > Asopọmọra Atẹle </a></li> 
      <li><a href = "#" > Nkankan miran nibi </a></li> 
      <li kilasi = "olupin" </li> 
      <li><a href = "#" > Ọna asopọ miiran </a></li> 
    </ul>
  </li>
</ul>

Akiyesi Ti ui rẹ ba ni awọn isọ silẹ pupọ, ronu fifi data-dropdownẹda naa kun si ipin ohun elo ti o ṣe pataki diẹ sii bi .tabstabi .topbar.

Awọn ọna

$() silẹ()

Api eto kan fun ṣiṣiṣẹ awọn akojọ aṣayan fun a fi fun topbar tabi lilọ kiri tabbed.

Ririnkiri

Ohun itanna yii jẹ fun fifi scrollspy (nav imudojuiwọn adaṣe laifọwọyi) ibaraenisepo si topbar bootstrap.

Gba lati ayelujara

Lilo bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Siṣamisi

Lati ni irọrun ṣafikun ihuwasi scrollspy si nav rẹ, kan ṣafikun ikasi si data-scrollspyfaili .topbar.

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

Awọn ọna

$().scrollSpy()

Aifọwọyi mu awọn bọtini lilọ kiri ṣiṣẹ nipasẹ awọn olumulo yi lọ si ipo.

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

Akiyesi Topbar oran afi gbọdọ ni awọn ibi-afẹde id ti o yanju. Fun apẹẹrẹ, a <a href="#home">home</a>gbọdọ ba nkan ṣe ni dom bi <div id="home"></div>.

.scrollSpy('itura')

The scrollspy caches nav bọtini ati ki o apakan ipoidojuko fun išẹ. Ti o ba nilo lati ṣe imudojuiwọn kaṣe yii (o ṣeeṣe ti o ba ni akoonu ti o ni agbara) kan pe ọna isọdọtun yii. Ti o ba lo awọn abuda data lati setumo rẹ scrollspy, o kan pe Sọ lori ara.

$ ( 'ara' ). scrollSpy ( 'itura' )

Ririnkiri

Ṣayẹwo awọn topbar lilọ lori iwe yi.

Ohun itanna yii nfunni ni iṣẹ ṣiṣe afikun fun ṣiṣakoso ipo bọtini.

Gba lati ayelujara

Lilo bootstrap-buttons.js

$ ( '. awọn taabu' ). bọtini ()

Awọn ọna

$()bọtini ('yipo')

Toggles titari ipinle. O fun btn ni oju ti o ti muu ṣiṣẹ.

Akiyesi O le mu yiyi pada laifọwọyi ti bọtini kan nipa lilo data-toggleabuda naa.

<bọtini kilasi = "btn" data-toggle = "yipada" > ... </button>   

$().bọtini('ikojọpọ')

Ṣeto ipo bọtini si ikojọpọ - mu bọtini ṣiṣẹ ati yi ọrọ pada si ọrọ ikojọpọ. Ọrọ ikojọpọ yẹ ki o ṣalaye lori bọtini bọtini ni lilo abuda data data-loading-text.

<button class = "btn" data-loading-text = "ikojọpọ nkan..." > ... </button>   

$().bọtini('tunto')

Tun ipo bọtini atunto - yi ọrọ pada si ọrọ atilẹba.

$().bọtini (okun)

Tun ipo bọtini atunto - yi ọrọ pada si eyikeyi ipo ọrọ asọye data.

<button class = "btn" data-complete-text = "pari!" > ... </bọtini>   
<akosile>
  $('.btn').bọtini ('pari')
</scrip>

Ririnkiri

Ririnkiri ikojọpọ Yi Ririnkiri

Ohun itanna yii ṣe afikun iyara, taabu agbara ati iṣẹ ṣiṣe egbogi.

Gba lati ayelujara

Lilo bootstrap-tabs.js

$ ( '. awọn taabu' ). awọn taabu ()

Siṣamisi

O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa fifun wọn ni lasan data-tabstabi data-pillsikalara.

 <ul class = "awọn taabu" data-tabs = "awọn taabu" > ... </ul>   

Awọn ọna

$ () awọn taabu tabi $ () . ìşọmọbí

Mu taabu ṣiṣẹ ati iṣẹ ṣiṣe egbogi fun eiyan ti a fun. Awọn ọna asopọ taabu yẹ ki o tọka id's ninu iwe-ipamọ naa.

<ul kilasi = "awọn taabu" > 
  <li class = "lọwọ" ><a href = "#ile" > Ile </a></li>  
  <li > <a href = "#profaili"> Profaili </a></li> 
  <li><a href = "#messages" > Awọn ifiranṣẹ </a></li> 
  <li><a href = "#eto" > Eto </a></li> 
</ul>
 
<div class = "akoonu-pill" > 
  <div class = "lọwọ" id = "ile" > ... </div>  
  <div id = "profaili" > ... </div> 
  <div id = "awọn ifiranṣẹ" > ... </div> 
  <div id = "awọn eto" > ... </div> 
</div>
 
<akosile>
  $ ( iṣẹ () {  
    $ ( '. awọn taabu' ). awọn taabu ()
  })
</script>

Awọn iṣẹlẹ

Iṣẹlẹ	Apejuwe
yipada	Iṣẹlẹ yi ina lori iyipada taabu. Lo event.targetati event.relatedTargetlati dojukọ taabu ti nṣiṣe lọwọ ati taabu iṣẹ iṣaaju tẹlẹ lẹsẹsẹ.

$ ( '#. awọn taabu' ). dè ( 'iyipada' , iṣẹ ( e ) {   
  e . afojusun // mu ṣiṣẹ taabu
  e . jẹmọTarget // ti tẹlẹ taabu
})

Ririnkiri

• Ile
• Profaili
• Awọn ifiranṣẹ
• Ètò
• Faa silẹ
  • @sanra
  • @mdo

Da lori ohun itanna jQuery.tipsy ti o dara julọ ti Jason Frame kọ; twipsy jẹ ẹya imudojuiwọn, eyiti ko gbẹkẹle awọn aworan, nlo css3 fun awọn ohun idanilaraya, ati awọn abuda data fun ibi ipamọ akọle!

Gba lati ayelujara

Lilo bootstrap-twipsy.js

$ ( '#apẹẹrẹ' ). twipsy ( awọn aṣayan )

Awọn aṣayan

Oruko	iru	aiyipada	apejuwe
iwara	boolian	ooto	lo iyipada css ipare si ọpa irinṣẹ
idaduroIn	nọmba	0	idaduro ṣaaju ki o to ṣe afihan ọpa irinṣẹ (ms)
idaduroJade	nọmba	0	idaduro ṣaaju ki o to tọju awọn ohun elo irinṣẹ (ms)
isubu	okun	''	ọrọ lati lo nigbati ko si akọle irinṣẹ
ipo	okun	'loke'	bi o si ipo awọn Tooltip - loke | ni isalẹ | osi | ọtun
html	boolian	eke	faye gba akoonu html laarin ọpa irinṣẹ
gbe	boolian	eke	lo aṣoju iṣẹlẹ dipo awọn olutọju iṣẹlẹ kọọkan
aiṣedeede	nọmba	0	piksẹli aiṣedeede ti ọpa irinṣẹ lati ibi-afẹde
akọle	okun, iṣẹ	'akọle'	abuda tabi ọna fun gbigba ọrọ akọle pada
okunfa	okun	'rababa'	bi o ti wa ni jeki irinṣẹ - rababa | idojukọ | Afowoyi
awoṣe	okun	[iṣamisi aiyipada]	Awoṣe HTML ti a lo fun ṣiṣe twipsy kan.

Akiyesi Awọn aṣayan apẹẹrẹ twipsy kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data.

<a href = "#" data-placement = "isalẹ" rel = 'twipsy' akọle = 'Awọn ọrọ akọle diẹ' > ọrọ </a>    

Awọn ọna

$().twipsy(awọn aṣayan)

So oluṣakoso twipsy kan si ikojọpọ eroja.

.twipsy('ifihan')

Ṣe afihan awọn eroja twipsy kan.

$ ( '# ano' ). twipsy ( 'ifihan' )

.twipsy('tọju')

Ìbòmọlẹ ohun eroja twipsy.

$ ( '# ano' ). twipsy ( 'tọju' )

.twipsy(otitọ)

Pada ohun eroja twipsy kilasi apeere.

$ ( '# ano' ). twipsy ( otitọ )

Akiyesi Ni omiiran, eyi le ṣe gba pada pẹlu $().data('twipsy').

Ririnkiri

Ohun itanna agbejade n pese wiwo ti o rọrun fun fifi awọn agbejade kun si ohun elo rẹ. O ṣe afikun ohun itanna bootstrap-twipsy.js , nitorinaa rii daju pe o gba faili yẹn daradara nigbati o ba pẹlu awọn agbejade ninu iṣẹ akanṣe rẹ!

Akiyesi O gbọdọ ni faili bootstrap-twipsy.js ṣaaju bootstrap-popover.js.

Gba lati ayelujara

Lilo bootstrap-popover.js

$ ( '#apẹẹrẹ' ). popover ( awọn aṣayan )

Awọn aṣayan

Oruko	iru	aiyipada	apejuwe
iwara	boolian	ooto	lo iyipada css ipare si ọpa irinṣẹ
idaduroIn	nọmba	0	idaduro ṣaaju ki o to ṣe afihan ọpa irinṣẹ (ms)
idaduroJade	nọmba	0	idaduro ṣaaju ki o to tọju awọn ohun elo irinṣẹ (ms)
isubu	okun	''	ọrọ lati lo nigbati ko si akọle irinṣẹ
ipo	okun	'ọtun'	bi o si ipo awọn Tooltip - loke | ni isalẹ | osi | ọtun
html	boolian	eke	faye gba akoonu html laarin ọpa irinṣẹ
gbe	boolian	eke	lo aṣoju iṣẹlẹ dipo awọn olutọju iṣẹlẹ kọọkan
aiṣedeede	nọmba	0	piksẹli aiṣedeede ti ọpa irinṣẹ lati ibi-afẹde
akọle	okun, iṣẹ	'akọle'	abuda tabi ọna fun gbigba ọrọ akọle pada
akoonu	okun, iṣẹ	'data-akoonu'	okun tabi ọna fun gbigba ọrọ akoonu pada. ti ko ba si ọkan ti a pese, akoonu yoo jẹ orisun lati ẹya-ara akoonu data kan.
okunfa	okun	'rababa'	bi o ti wa ni jeki irinṣẹ - rababa | idojukọ | Afowoyi
awoṣe	okun	[iṣamisi aiyipada]	Awoṣe HTML ti a lo fun ṣiṣe agbejade kan.

Akiyesi Awọn aṣayan apẹẹrẹ popover kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data.

<a data-placement = "isalẹ" href = "#" kilasi = "btn danger" rel = "popover" > ọrọ </a>    

Awọn ọna

$().popover(awọn aṣayan)

Initializes popovers fun ohun akojọpọ eroja.

.popover('ifihan')

Ṣe afihan awọn eroja popover.

$ ( '# ano' ). popover ( 'ifihan' )

.popover('tọju')

Ìbòmọlẹ ohun eroja popover.

$ ( '# ano' ). popover ( 'tọju' )

Ririnkiri

rababa fun popover

Ohun itanna gbigbọn jẹ kilasi kekere ti o ga julọ fun fifi iṣẹ ṣiṣe sunmọ si awọn titaniji.

Gba lati ayelujara

Lilo bootstrap-alerts.js

$ ( ". Ifiranṣẹ-itaniji " ). gbigbọn ()

Siṣamisi

Kan ṣafikun data-alertẹda kan si awọn ifiranṣẹ itaniji rẹ lati fun wọn ni iṣẹ ṣiṣe isunmọ laifọwọyi.

Awọn aṣayan

Oruko	iru	aiyipada	apejuwe
yiyan	okun	'.sunmọ'	Ohun ti o yan lati fojusi fun pipade itaniji.

Awọn ọna

$() titaniji()

Murasilẹ gbogbo awọn titaniji pẹlu iṣẹ ṣiṣe to sunmọ. Lati jẹ ki awọn titaniji rẹ gbe jade nigba pipade, rii daju pe wọn ni .fadeati .inkilasi ti lo tẹlẹ si wọn.

.titaniji('sunmọ')

Tilekun itaniji.

$ ( ". Ifiranṣẹ-itaniji " ). gbigbọn ( 'sunmọ' )

Ririnkiri