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	eke	Pẹlu a modal-backdrop ano
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 = "otitọ" > 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 ({
  closeOnEscape : 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 boostrap-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 boostrap-scrollspy.js

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

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 ṣe afikun iyara, taabu agbara ati iṣẹ ṣiṣe egbogi.

Gba lati ayelujara

Lilo boostrap-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> 
</ul>
 
<akosile>
  $ ( iṣẹ () {  
    $ ( '. awọn taabu' ). awọn taabu ()
  })
</script>

Ririnkiri

• Ile
• Profaili
• Awọn ifiranṣẹ
• Ètò

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

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 fa afikun ohun itanna boostrap-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ẹ!

Gba lati ayelujara

Lilo boostrap-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'	abuda tabi ọna fun gbigba ọrọ akoonu pada
okunfa	okun	'rababa'	bi o ti wa ni jeki irinṣẹ - rababa | idojukọ | Afowoyi

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