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 ho asɛm	ɛnyɛ ampa	Nea ɛka ho ne modal-backdrop element bi
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 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 = "nokware" > 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 ({
  closeOnEscape : ɛ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 esisii 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 boostrap-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 boostrap-scrollspy.js di dwuma a

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

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ɔakyerɛw () .

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ɛ 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 tab ne pill dwumadie a ɛyɛ ntɛm, ɛyɛ nnam ka ho.

Twe

Sɛ wode boostrap-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> 
</ul>
 
<nkyerɛwee>
  $ ( dwumadie () { .  
    $ ( '.tabs' ). tab ahorow () .
  }) na .
</script>

Demo a wɔde kyerɛ

• Fie
• Ho asɛm
• Nkrasɛm ahorow
• Nsiesiei ahorow

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ɛ

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 boostrap-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!

Twe

Sɛ wode boostrap-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'.	attribute anaa ɔkwan a wɔfa so gye nsɛm a ɛwɔ mu no
nkanyan	ahoma	'hover'.	sɛnea wɔde adwinnade tip no hyɛ ase - hover | adwene a wɔde si biribi so | akwankyerɛ

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.

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 no 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ɛ