Yɛn Modal plugin yɛ super slim fa wɔ atetesɛm modal js plugin no so, hwɛ yiye titiriw sɛ ɛde bare functionality a yɛhwehwɛ wɔ ha wɔ twitter nkutoo bɛka ho.

Twe

Wɔde bootstrap-modal di dwuma

$ ( '#me-modal' ). modal ( nneɛma a wobetumi apaw ) .

Nneɛma a wubetumi apaw

Din	korɔ	mfiaseɛ	nkyerɛmu
akyi mfonini	boolean, ahama	ɛnyɛ ampa	Nea ɛka ho ne modal-backdrop element bi. Set backdrop to "static"sɛ wompɛ sɛ wɔto modal no mu bere a woabɔ backdrop no so a.
keyboard so nsɛm	boolean ho asɛm	ɛnyɛ ampa	Ɛto modal no mu bere a wɔabɔ escape key no
da no adi	boolean ho asɛm	ɛnyɛ ampa	Bue modal wɔ adesua no mfiase

Markup a wɔde hyɛ agyirae

Wubetumi ayɛ modals adwuma wɔ wo krataafa no so mmerɛw a enhia sɛ wokyerɛw javascript line biako. Ma element bi data-controls-modalattribute a ɛne modal element id hyia kɛkɛ, na sɛ wo klik so a, ɛbɛhyɛ wo modal no ase. Sɛ wode modal options bɛka ho a, fa ka ho kɛkɛ sɛ data attributes nso.

<a class = "btn" data-controls-modal = "me-modal" data-akyi = "gyinabea" > Fi ase Modal </a>    

Hyɛ no nsow Sɛ wopɛ sɛ wo modal no yɛ animate kɔ mu ne akyi a, fa .fadeclass bi ka wo .modalelement no ho kɛkɛ (hwɛ demo no na wubehu eyi wɔ adeyɛ mu).

Akwan a wɔfa so yɛ

.modal(nneɛma a wobetumi apaw) .

Ɛma wo nsɛm no yɛ adwuma sɛ modal. Gye akwan a wubetumi apaw bi tom object.

$ ( '#me-modal' ). ɔkwan a wɔfa so yɛ ade ({
  keyboard : ɛyɛ nokware 
}) na .

.modal('dannan') .

Nsaano toggles a modal.

$ ( '#me-modal' ). modal ( 'nsakrae' ) .

.modal('kyerɛ') .

Nsaano bue modal bi.

$ ( '#me-modal' ). modal ( 'kyerɛ' ) .

.modal('de sie') .

Nsaano de sie modal bi.

$ ( '#me-modal' ). modal ( 'de sie' ) .

.modal(nokware) .

Sane de elements modal class nhwɛso bi ba.

$ ( '#me-modal' ). modal ( nokware ) .

Hyɛ no nsow Sɛnea ɛbɛyɛ a, wubetumi de $().data('modal').

Nsɛm a esisi

Bootstrap no modal adesuakuw no da nsɛm kakraa bi a esisi adi ma hooking kɔ modal dwumadi mu.

Dwumadie	Nkyerɛmu
da no adi	Saa adeyɛ yi tow ntɛm ara bere a showwɔfrɛ instance kwan no.
a wɔakyerɛ	Wɔtow saa adeyɛ yi bere a wɔayɛ modal no ahu nea ɔde di dwuma no (bɛtwɛn ma css nsakrae ahorow no awie).
tɛ	Wɔtow saa adeyɛ yi ntɛm ara bere a hidewɔafrɛ instance kwan no.
asuma	Wɔtow saa adeyɛ yi bere a modal no awie sɛ wɔde asie afi ɔdefo no hɔ (bɛtwɛn ma css nsakrae ahorow no awie).

$ ( '#me-modal' ). bind ( 'wɔde ahintaw' , adwuma () { .   
  // yɛ biribi ...
}) na .

Demo a wɔde kyerɛ

Fi ase Modal

Saa plugin yi yɛ sɛ wode dropdown nkitahodi bɛka bootstrap topbar anaa tabbed navigations no ho.

Twe

Sɛ wode bootstrap-dropdown.js di dwuma a

$ ( '#atifi bar' ). a ɛwɔ ase hɔ () .

Markup a wɔde hyɛ agyirae

Sɛ wopɛ sɛ wode dropdown dwumadie ka nav element biara ho ntɛmntɛm a, fa data-dropdownattribute no di dwuma. Bootstrap dropdown biara a ɛfata no bɛyɛ adwuma ankasa.

<ul adesuakuw = "tabs" > 
  <li adesuakuw = "adwumayɛ" ><a href = "#" > Ofie </a></li>  
  <li class = "a ɛkɔ fam" data-a ɛba fam = "a ɛba fam" >   
    <a href = "#" class = "asɛm a ɛwɔ ase-toggle" > Nneɛma a ɛwɔ ase </a>  
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      <li><a href = "#" > Nkitahodi a ɛto so abien </a></li> 
      <li><a href = "#" > Biribi foforo wɔ ha </a></li> 
      <li adesuakuw = "nkyekyɛmu" ></li> 
      <li><a href = "#" > Nkitahodi foforo </a></li> 
    </ul>
  </li>
</ul>

Hyɛ no nsow Sɛ wo ui no wɔ dropdowns pii a, susuw ho sɛ wode data-dropdownattribute no bɛka container element a ɛho hia kɛse te sɛ .tabsanaa .topbar.

Akwan a wɔfa so yɛ

$().a ɛwɔ ase hɔ() .

Programatic api a ɛma menus yɛ adwuma ma topbar anaa tabbed navigation a wɔde ama.

Demo a wɔde kyerɛ

Saa plugin yi yɛ sɛ wode scrollspy (auto updating nav) nkitahodi no bɛka bootstrap topbar no ho.

Twe

Sɛ wode bootstrap-scrollspy.js di dwuma a

$ ( '#atifi bar' ). nhoma mmobɔweeSpy () .

Markup a wɔde hyɛ agyirae

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode scrollspy suban bɛka wo nav no ho no, fa data-scrollspyattribute no ka .topbar.

<div class = "topbar" data-nkyerɛwee = "nkyerɛwee" > ... </div>   

Akwan a wɔfa so yɛ

$ ().nsɛm a wɔde kyerɛw nsɛm () .

Auto ma navigation buttons no yɛ adwuma denam wɔn a wɔde di dwuma no scroll gyinabea so.

$ ( 'nipadua > .topbar' ). nhoma mmobɔweeSpy () .

Hyɛ no nsow Ɛsɛ sɛ Topbar anchor tags no nya id botae ahorow a wotumi siesie. Sɛ nhwɛso no, <a href="#home">home</a>ɛsɛ sɛ a ne biribi a ɛwɔ dom no mu te sɛ <div id="home"></div>.

.scrollSpy ('yɛ foforo') .

Scrollspy no caches nav buttons ne ɔfã coordinates ma adwumayɛ. Sɛ ɛhia sɛ wo update saa cache yi (ɛbɛyɛ sɛ wowɔ dynamic content a) frɛ saa refresh kwan yi kɛkɛ. Sɛ wode data attribute no kyerɛkyerɛɛ wo scrollspy no mu a, frɛ refresh wɔ nipadua no so kɛkɛ.

$ ( 'nipadua' ). scrollSpy ( 'yɛ foforo' ) .

Demo a wɔde kyerɛ

Hwɛ the topbar navigation no wɔ krataafa yi so.

Saa plugin yi de dwumadie foforɔ ma ma ɛhwɛ button tebea so.

Twe

Sɛ wode bootstrap-buttons.js di dwuma a

$ ( '.tabs' ). bɔtɔn () .

Akwan a wɔfa so yɛ

$ ().button ('dannan') .

Toggles push tebea no. Ma btn hwɛ sɛ ɛyɛ activated.

Hyɛ no nsow Wubetumi ama auto toggling a ɛwɔ button bi mu no ayɛ adwuma denam data-toggleattribute no a wode bedi dwuma no so.

<bɔtn adesua = "btn" data-toggle = "toggle" > ... </button>   

$().button('asɛm a wɔde gu mu') .

Set button tebea to loading - disables button na sesa nsɛm kɔ loading text. Ɛsɛ sɛ wɔkyerɛkyerɛ nsɛm a wɔde rehyɛ mu no mu wɔ bɔtn element no so denam data su data-loading-textno so .

<button class = "btn" data-loading-text = "nneɛma a wɔde rehyɛ mu..." > ... </button>   

$ ().button ('san de si hɔ') .

Sesa button tebea - sesa nsɛm kɔ mfitiase nkyerɛwee so.

$().bɔtn(ahama) .

Resets button state - sesa nsɛm kɔ data biara a wɔakyerɛkyerɛ text tebea mu.

<button class = "btn" data-awie-nsɛm = "wɔawie!" > ... </bɔtn> no   
<nkyerɛwee>
  $('.btn').button ('awie') .
</scrip> no ho asɛm

Demo a wɔde kyerɛ

Wɔde Demo no rehyɛ mu Toggle Demo no yɛ adwuma

Saa plugin yi de tab ne pill dwumadie a ɛyɛ ntɛm, ɛyɛ nnam ka ho.

Twe

Sɛ wode bootstrap-tabs.js di dwuma a

$ ( '.tabs' ). tab ahorow () .

Markup a wɔde hyɛ agyirae

Wubetumi ayɛ tab anaa pill navigation adwuma a worenkyerɛw javascript biara denam a data-tabsanaa data-pillsattribute a wode bɛma wɔn kɛkɛ no so.

 <ul adesuakuw = "tabs" data-tabs = "tabs" > ... </ul>   

Akwan a wɔfa so yɛ

$().tabs anaa $().pills

Ɛma tab ne pill dwumadie yɛ adwuma ma ade a wɔde ama. Ɛsɛ sɛ tab links no kyerɛ id's a ɛwɔ krataa no mu.

<ul adesuakuw = "tabs" > 
  <li adesuakuw = "yɛ adwuma" ><a href = "#fie" > Fie </a></li>  
  <li><a href = "#profile" > Nsɛm a ɛfa ho </a></li> 
  <li><a href = "#nkrasɛm" > Nkrasɛm </a></li> 
  <li><a href = "#nhyehyɛe" > Nsiesiei </a></li> 
</ul>
 
<div class = "pill-asɛm" > 
  <div adesuakuw = "adwumayɛ" id = "fie" > ... </div>  
  <div id = "nsɛm a ɛfa ho" > ... </div> 
  <div id = "nkrasɛm" > ... </div> 
  <div id = "nhyehyɛe" > ... </div> 
</div> no
 
<nkyerɛwee>
  $ ( dwumadie () { .  
    $ ( '.tabs' ). tab ahorow () .
  }) na .
</script>

Nsɛm a esisi

Dwumadie	Nkyerɛmu
sesa	Saa adeyɛ yi tow wɔ tab nsakrae so. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so sɛnea ɛte biara.

$ ( '#.tabs' ). bind ( 'sesa' , adwuma ( e ) { .   
  e . target // tab a wɔayɛ no adwuma
  e . relatedTarget // tab a atwam no
}) na .

Demo a wɔde kyerɛ

• Fie
• Ho asɛm
• Nkrasɛm ahorow
• Nsiesiei ahorow
• Dropdown a ɛwɔ hɔ
  • @kɛseɛ
  • @mdo na ɔkyerɛwee

Egyina jQuery.tipsy plugin a eye kyɛn so a Jason Frame kyerɛwee no so; twipsy yɛ nkyerɛaseɛ a wɔayɛ no foforɔ, a ɛnyɛ mfonini so, ɛde css3 di dwuma ma animations, ne data-attributes ma title storage!

Twe

Sɛ wode bootstrap-twipsy.js di dwuma a

$ ( '#nhwɛso' ). twipsy ( akwan horow a wobetumi apaw ) .

Nneɛma a wubetumi apaw

Din	korɔ	mfiaseɛ	nkyerɛmu
animate	boolean ho asɛm	nokorɛ	fa css fade nsakrae bi di dwuma wɔ adwinnade no ho
delayIn	nɔma	0 na ɛwɔ hɔ	delay ansa na wɔakyerɛ adwinnade ho nsɛm (ms) .
delayOut a wɔde bɛkyɛ	nɔma	0 na ɛwɔ hɔ	delay ansa na wode tooltip (ms) asie .
fallback a ɛwɔ akyi	ahoma	'' .	nsɛm a wode bedi dwuma bere a adwinnade ho asɛmti biara nni hɔ
a wɔde bɛto hɔ	ahoma	'boro so'	sɛnea wɔde adwinnade no gyina hɔ - atifi | ase hɔ | benkum so | nifa
html na ɛwɔ hɔ	boolean ho asɛm	ɛnyɛ ampa	ma kwan ma html nsɛm a ɛwɔ tooltip mu
te ase	boolean ho asɛm	ɛnyɛ ampa	fa event delegation di dwuma sen sɛ wode ankorankoro event handlers bedi dwuma
offset a wɔde hyɛ mu	nɔma	0 na ɛwɔ hɔ	pixel offset a ɛwɔ adwinnade a ɛwɔ botae element mu
atiti asɛm	ahama, dwumadie	'atiti asɛm'	attribute anaa ɔkwan a wɔfa so gye asɛmti nsɛm
nkanyan	ahoma	'hover'.	sɛnea wɔde adwinnade tip no hyɛ ase - hover | adwene a wɔde si biribi so | akwankyerɛ
nsusuwso	ahoma	[default agyiraehyɛde].	html template a wɔde di dwuma de kyerɛ twipsy ase.

Hyɛ no nsow Ankorankoro twipsy instance options betumi ɔkwan foforo so akyerɛ denam data su ahorow a wɔde di dwuma so.

<a href = "#" data-placement = "ase" rel = 'twipsy' asɛmti = 'Asɛmti nsɛm bi' > nsɛm </a>    

Akwan a wɔfa so yɛ

$().twipsy(nneɛma a wobetumi apaw) .

Fa twipsy handler bata element ahorow a wɔaboaboa ano ho.

.twipsy('kyerɛ') .

Ɛda elements bi adi twipsy.

$ ( '#adeɛ' ). twipsy ( 'kyerɛ' ) .

.twipsy('de sie') .

Ɔde elements bi a ɛyɛ twipsy sie.

$ ( '#adeɛ' ). twipsy ( 'de sie' ) .

.twipsy(nokware) .

Sane de elements twipsy adesua nhwɛsode bi ba.

$ ( '#adeɛ' ). twipsy ( nokware ) .

Hyɛ no nsow Sɛnea ɛbɛyɛ a, wubetumi de $().data('twipsy').

Demo a wɔde kyerɛ

Popover plugin no ma interface a ɛnyɛ den a wode popovers bɛka wo application no ho. Ɛtrɛw bootstrap-twipsy.js plugin no mu, enti hwɛ hu sɛ wobɛfa saa fael no nso bere a wode popovers ka wo project no ho no!

Hyɛ no nsow Ɛsɛ sɛ wode bootstrap-twipsy.js fael no ka ho ansa na bootstrap-popover.js.

Twe

Sɛ wode bootstrap-popover.js di dwuma a

$ ( '#nhwɛso' ). popover ( nneɛma a wobetumi apaw ) .

Nneɛma a wubetumi apaw

Din	korɔ	mfiaseɛ	nkyerɛmu
animate	boolean ho asɛm	nokorɛ	fa css fade nsakrae bi di dwuma wɔ adwinnade no ho
delayIn	nɔma	0 na ɛwɔ hɔ	delay ansa na wɔakyerɛ adwinnade ho nsɛm (ms) .
delayOut a wɔde bɛkyɛ	nɔma	0 na ɛwɔ hɔ	delay ansa na wode tooltip (ms) asie .
fallback a ɛwɔ akyi	ahoma	'' .	nsɛm a wode bedi dwuma bere a adwinnade ho asɛmti biara nni hɔ
a wɔde bɛto hɔ	ahoma	'nifa'	sɛnea wɔde adwinnade no gyina hɔ - atifi | ase hɔ | benkum so | nifa
html na ɛwɔ hɔ	boolean ho asɛm	ɛnyɛ ampa	ma kwan ma html nsɛm a ɛwɔ tooltip mu
te ase	boolean ho asɛm	ɛnyɛ ampa	fa event delegation di dwuma sen sɛ wode ankorankoro event handlers bedi dwuma
offset a wɔde hyɛ mu	nɔma	0 na ɛwɔ hɔ	pixel offset a ɛwɔ adwinnade a ɛwɔ botae element mu
atiti asɛm	ahama, dwumadie	'atiti asɛm'	attribute anaa ɔkwan a wɔfa so gye asɛmti nsɛm
emu nsɛm	ahama, dwumadie	'data-asɛm a ɛwɔ mu'.	ahama anaa ɔkwan a wɔfa so gye nsɛm a ɛwɔ mu no. sɛ wɔamfa biara amma a, wɔbɛfa nsɛm a ɛwɔ mu no afiri data-nsɛm a ɛwɔ mu su bi mu.
nkanyan	ahoma	'hover'.	sɛnea wɔde adwinnade tip no hyɛ ase - hover | adwene a wɔde si biribi so | akwankyerɛ
nsusuwso	ahoma	[default agyiraehyɛde].	html template a wɔde di dwuma de kyerɛ popover ase.

Hyɛ no nsow Ankorankoro popover nhwɛso akwan horow betumi akyerɛ ɔkwan foforo so denam data su ahorow a wɔde bedi dwuma so.

<a data-beae = "ase" href = "#" adesuakuw = "btn asiane" rel = "popover" > nsɛm </a>    

Akwan a wɔfa so yɛ

$().popover(nneɛma a wobetumi apaw) .

Fi ase popovers ma element ahorow a wɔaboaboa ano.

.popover('kyerɛ') .

Ɛda elements popover bi adi.

$ ( '#adeɛ' ). popover ( 'kyerɛ' ) .

.popover('de sie') .

Ɔde elements popover bi siei.

$ ( '#adeɛ' ). popover ( 'de sie' ) .

Demo a wɔde kyerɛ

hover ma popover

Kɔkɔbɔ plugin no yɛ super tiny class a wɔde bɛka adwumayɛ a ɛbɛn alerts ho.

Twe

Sɛ wode bootstrap-alerts.js di dwuma a

$ ( ".kɔbɔ-nkrasɛm" ). kɔkɔbɔ () .

Markup a wɔde hyɛ agyirae

Fa data-alertattribute bi ka wo kɔkɔbɔ nkrasɛm ahorow no ho kɛkɛ na ama wɔatumi ayɛ adwuma a ɛbɛn.

Nneɛma a wubetumi apaw

Din	korɔ	mfiaseɛ	nkyerɛmu
nea ɔpaw ade	ahoma	'.to mu'	Nneɛma bɛn na ɛsɛ sɛ wode w’ani si so de to kɔkɔbɔ bi mu.

Akwan a wɔfa so yɛ

$().ahyɛnsode() .

Wraps kɔkɔbɔ nyinaa ne adwumayɛ a ɛbɛn. Sɛ wopɛ sɛ wo kɔkɔbɔ ahorow no animate bere a wɔato mu a, hwɛ hu sɛ wɔwɔ .fadene .inadesuakuw no a wɔde adi dwuma dedaw wɔ wɔn ho.

.alert('to mu') .

Ɛto kɔkɔbɔ bi mu.

$ ( ".kɔbɔ-nkrasɛm" ). kɔkɔbɔ ( 'to mu' ) .

Demo a wɔde kyerɛ