Kan Modal plugin hi traditional modal js plugin atanga super slim take a ni a, hetah twitter-a kan mamawh bare functionality chauh dah tel turin a bik takin kan fimkhur hle.

Internet atanga thil lachhawng

Bootstrap-modal hmanga siam a ni

$ ( '#ka-modal' ). modal ( duhthlan tur ) .

Thil thlan theih a ni

Hming	lampang	hlawhchhamna	hrilhfiahna
backdrop a ni	boolean a ni	diklo	Modal-backdrop element a awm bawk
keyboard hmangin a ziak a	boolean a ni	diklo	Escape key i hmet chuan modal a khar thin
lantir	boolean a ni	diklo	Class initialization ah modal a hawng thin

Markup a ni

I page-ah hian awlsam takin javascript line khat pawh ziak ngai lovin i activate thei a ni. data-controls-modalElement pakhat chu modal element id nena inmil attribute pe mai la , i click chuan i modal chu a rawn launch ang. Modal options dah belh tur chuan data attribute atan pawh telh mai tur a ni.

<a class = "btn" data-controls-modal = "ka-modal" data-backdrop = "dik tak" > Modal chu tlangzarh rawh </a>    

Notice I modal chu animate in leh out i duh chuan .fadei element-ah class dah mai rawh .modal(hei hi action-a hmuh theih nan demo en rawh).

Thiltih dan tur

.modal(thil thlan theih) .

I content chu modal angin a activate thin. A pawm a, optional options a awm objectbawk .

$ ( '#ka-modal' ). modal ({ ) a ni.
  closeOnEscape : a dik a ni 
}) tih a ni.

.modal(‘toggle’) tih a ni.

Modal pakhat chu manual in a toggle thin.

$ ( '#ka-modal' ). modal ( 'toggle' tih a ni.

.modal(' entir') tih a ni.

Manual takin modal a hawng thin.

$ ( '#ka-modal' ). modal ( 'tihlan rawh' ) .

.modal(‘thup’) tih a ni.

Manual takin modal a thup thin.

$ ( '#ka-modal' ). modal ( ‘thup’ ) tih a ni.

.modal(dik tak) .

Elements modal class instance a rawn pe leh thin.

$ ( '#ka-modal' ). modal ( dik tak ) .

Notice A nih loh leh, hei hi $().data('modal').

Thil thlengte

Bootstrap-a modal class hian modal functionality-a hooking-na tur event tlemte a pholang a ni.

Hunbik	Hrilhfiahna
lantir	showHe event hi instance method kan koh chuan a fire nghal vek a ni.
tih a ni	He event hi modal chu user hmuh theiha siam a nih hunah fire a ni (css transitions zawh hun a nghak ang).
biru	hideHe event hi instance method koh a nih chuan a fire nghal a ni.
thuhruk	He event hi modal chu user hnen atanga thup a nih zawh chuan a fire thin (css transitions zawh hun a nghak ang).

$ ( '#ka-modal' ). bind ( 'thup' , hnathawh () { .   
  // thil ti rawh ...
}) tih a ni.

Demo a ni

Modal a tlangzarh

He plugin hi bootstrap topbar emaw tabbed navigations emaw a dropdown interaction dah belh nan a ni.

Internet atanga thil lachhawng

Boostrap-dropdown.js hmangin a rawn lang ang

$ ( '#topbar' tih chu a ni). dropdown () a ni.

Markup a ni

Nav element eng pawha dropdown functionality rang taka dah tur chuan data-dropdownattribute hmang la. Bootstrap dropdown dik tak awm apiang chu a in activate nghal vek ang.

< ul class = "tabs" te hi a ni 
  <li class = "active" ><a href = "#" > In leh lo </a></li>  
  <li class = "a tla thla" data-a tla thla = "a tla thla" >   
    <a href = "#" class = "a hnuai lam-toggle" > A chhuahna tur </a>  
    <ul class = "a hnuaia mi ang hian" > 
      <li><a href = "#" > A pahnihna link </a></li> 
      <li><a href = "#" > Hetah hian thil dang </a></li> 
      <li class = "insem darhtu" </li> tih a ni 
      <li><a href = "#" > Link dang </a></li> 
    </ul> tih a ni
  </li> tih a ni
</ul> tih a ni

Notice I ui hian dropdown engemaw zat a neih chuan data-dropdown, .tabsor .topbar.

Thiltih dan tur

$().a tlak thlak() .

Topbar emaw tabbed navigation pek tawh pakhat tana menu activate na tur programatic api.

Demo a ni

He plugin hi bootstrap topbar-a scrollspy (auto updating nav) interaction dahna tur a ni.

Internet atanga thil lachhawng

Boostrap-scrollspy.js hmangin

$ ( '#topbar' tih chu a ni). dropdown () a ni.

Markup a ni

I nav-a awlsam taka scrollspy behavior dah tur chuan data-scrollspyattribute chu .topbar.

<div class = "topbar" data-scrollspy = "a chhuahna tur hmun" > ... </div>   

Thiltih dan tur

$().scrollspy() a ni.

Auto hian navigation button te chu a hmangtute scroll position hmangin a activate thin.

$ ( 'taksa > .topbar' ). scrollSpy () a ni.

Hriat tur Topbar anchor tag te hian resolvable id target an nei tur a ni. Entirnan, a <a href="#home">home</a>chu dom-a thil awm ang chi nen a inmil tur a <div id="home"></div>ni.

.scrollspy(‘refresh’) tih a ni.

Scrollspy hian nav button leh section coordinate te chu performance atan a cache thin. He cache hi update i mamawh chuan (dynamic content i neih a nih a rinawm) he refresh method hi call mai rawh. I scrollspy define nan data attribute i hman chuan body-ah refresh ko mai rawh.

$ ( 'taksa' ). scrollspy ( ‘thar thar’ ) tih a ni.

Demo a ni

He page-a the topbar navigation hi en la.

He plugin hian tab leh pill functionality rang tak, chak tak a belhchhah a ni.

Internet atanga thil lachhawng

Boostrap-tabs.js hmangin

$ ( '.tabs' tih chu a ni). tabs te chu () .

Markup a ni

data-tabsJavascript engmah ziak lovin tab emaw pill navigation emaw chu a emaw data-pillsattribute emaw pe mai maiin i activate thei ang .

 <ul class = "tabs" data-tabs = "tabs" > ... </ul> tih hi a awmzia a awm lo   

Thiltih dan tur

$().tabs emaw $().pills emaw a ni thei

Container pek tawh tan tab leh pill functionality a activate thin. Tab link te hian document chhunga id te chu a reference tur a ni.

< ul class = "tabs" te hi a ni 
  <li class = "active" ><a href = "#in" > In leh lo </a></li>  
  <li><a href = "#profile" > A chhuahna tur hmun leh a hmanna tur hmun </a></li> 
  <li><a href = "#thuchah" > Thuchah </a></li> 
  <li><a href = "#settings" > A chhuahna tur hmun leh a hmanna tur hmun </a></li> 
</ul> tih a ni
 
<div class = "pill-a awm" > 
  <div class = "active" id = "in" > ... </div> tih a ni  
  <div id = "profile" > ... </div> tih hi a ni 
  <div id = "thuchah" > ... </div> tih a ni 
  <div id = "settings" > ... </div> tih a ni 
</ul> tih a ni
 
<script> tih a ni
  $ ( hnathawh () { .  
    $ ( '.tabs' tih chu a ni). tabs te chu () .
  }) tih a ni.
</script> tih a ni

Demo a ni

• In
• Ruangam
• Thuchah te
• Settings a awm bawk

Jason Frame ziah jQuery.tipsy plugin tha tak atanga siam; twipsy hi updated version a ni a, image-ah a innghat lo va, animation atan css3 a hmang a, title storage atan data-attribute a hmang bawk!

Internet atanga thil lachhawng

Bootstrap-twipsy.js hmangin

$ ( '#entirna' ). twipsy ( duhthlan tur ) .

Thil thlan theih a ni

Hming	lampang	hlawhchhamna	hrilhfiahna
animate tih hi a ni	boolean a ni	dik	tooltip ah css fade transition hmangin apply rawh
delayIn tih a ni	a zat	0 a ni	tooltip (ms) a lantir hmain delay rawh.
delayOut a ni	a zat	0 a ni	tooltip thup hmaa delay (ms) .
fallback a ni	hrui	'' tih a ni.	tooltip title awm loh huna hman tur text
dahna tur hmun a ni	hrui	'chungah'	tooltip dah dan - a chungah | a hnuaiah | veilam | dik
html tih a ni	boolean a ni	diklo	tooltip chhunga html content a phalsak
nung	boolean a ni	diklo	event handler pakhat zel hmang lovin event delegation hmang zawk ang che
offset a ni	a zat	0 a ni	target element atanga tooltip atanga pixel offset a ni
nihna	string | thiltih	'nihna'	title text lakchhuahna tur attribute emaw method emaw a ni
ti per	hrui	'hover' a ti a.	tooltip a trigger dan - hover | focus | kuta thawh

Thiltih dan tur

$().twipsy(thil thlan theih) .

Element collection pakhatah twipsy handler a dah tel bawk.

.twipsy('tihlan rawh')

A elements twipsy a pholang.

$ ( '#element' tih chu a ni). twipsy ( 'tihlan rawh' ) .

.twipsy(‘thup’) tih a ni.

A elements twipsy a thup thin.

$ ( '#element' tih chu a ni). twipsy ( ‘thup’ ) tih a ni.

.twipsy(dik tak) .

Elements twipsy class instance a rawn pe leh thin.

$ ( '#element' tih chu a ni). twipsy ( dik tak ) .

Notice A nih loh leh, hei hi $().data('twipsy').

Demo a ni

Popover plugin hian i application-a popover dah belh theihna tur interface awlsam tak a pe a. Boostrap-twipsy.js plugin a tizau a , chuvangin i project-a popovers i dah tel hunah chu file pawh chu la ve ngei ang che!

Internet atanga thil lachhawng

Boostrap-popover.js hmangin

$ ( '#entirna' ). popover ( duhthlan tur ) .

Thil thlan theih a ni

Hming	lampang	hlawhchhamna	hrilhfiahna
animate tih hi a ni	boolean a ni	dik	tooltip ah css fade transition hmangin apply rawh
delayIn tih a ni	a zat	0 a ni	tooltip (ms) a lantir hmain delay rawh.
delayOut a ni	a zat	0 a ni	tooltip thup hmaa delay (ms) .
fallback a ni	hrui	'' tih a ni.	tooltip title awm loh huna hman tur text
dahna tur hmun a ni	hrui	'dik'	tooltip dah dan - a chungah | a hnuaiah | veilam | dik
html tih a ni	boolean a ni	diklo	tooltip chhunga html content a phalsak
nung	boolean a ni	diklo	event handler pakhat zel hmang lovin event delegation hmang zawk ang che
offset a ni	a zat	0 a ni	target element atanga tooltip atanga pixel offset a ni
nihna	string | thiltih	'nihna'	title text lakchhuahna tur attribute emaw method emaw a ni
lungawi	string | thiltih	‘data-thu awm’ tih a ni.	content text lakchhuah dan tur attribute emaw method emaw a ni
ti per	hrui	'hover' a ti a.	tooltip a trigger dan - hover | focus | kuta thawh

Thiltih dan tur

$().popover(thil thlan theih) .

Element collection pakhat atan popovers a initialize thin.

.popover('tihlan rawh') tih a ni.

A elements popover a rawn pholang.

$ ( '#element' tih chu a ni). popover ( 'tihlan rawh' ) .

.popover(‘thup’) tih a ni.

A elements popover a thup a.

$ ( '#element' tih chu a ni). popover ( ‘thup’ ) tih a ni.

Demo a ni

hover chu popover atan a ni

Alert plugin hi alert-a close functionality dahna tur super tiny class a ni.

Internet atanga thil lachhawng

Bootstrap-alerts.js hmangin

$ ( ".alert-thuchah" ). hriattirna () .

Markup a ni

data-alertI alert message- ah hian attribute add mai la, automatic-in close functionality a pe ang.

Thiltih dan tur

$().alert() a ni.

Alert zawng zawng chu close functionality nen a wrap vek. I alerts te kha khar a nih hunah animate out theih nan, an chungah the .fadeand .inclass apply tawh an neih ngei ngei tur a ni.

.alert('khar') tih a ni.

Alert a khar thin.

$ ( ".alert-thuchah" ). alert ( 'khar' ) .

Demo a ni