Modal plugin ɗin mu shine babban slim ɗauka akan kayan aikin modal js na gargajiya, yana ɗaukar kulawa ta musamman don haɗa kawai ayyukan da muke buƙata anan a twitter.

Zazzagewa

Yin amfani da bootstrap-modal

$ ( '#my-modal' ). modal ( zaɓi )

Zabuka

Suna	nau'in	tsoho	bayanin
baya	boolean	karya	Ya ƙunshi nau'in modal-backdrop
keyboard	boolean	karya	Yana rufe tsarin lokacin da aka danna maɓallin guduwa
nuna	boolean	karya	Yana buɗe tsari akan ƙaddamar da aji

Alamar alama

Kuna iya kunna modals akan shafinku cikin sauƙi ba tare da rubuta layi ɗaya na javascript ba. Kawai ba wani kashi data-controls-modalsifa wanda yayi daidai da modal element id, kuma idan an danna, zai ƙaddamar da tsarin ku. Don ƙara zaɓuɓɓukan modal, kawai haɗa su azaman halayen bayanai kuma.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "gaskiya" > Ƙaddamar da Modal </a>    

Sanarwa Idan kuna son tsarin ku ya raye a ciki da waje, kawai ƙara .fadeaji zuwa .modalkashinku (duba demo don ganin wannan yana aiki).

Hanyoyin

.modal(zaɓi)

Yana kunna abun cikin ku azaman tsari. Yana yarda da zaɓin zaɓi object.

$ ( '#my-modal' ). modal ({
  closeOnEscape : gaskiya 
})

.modal('toggle')

Da hannu yana jujjuya modal.

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

.modal('show')

Da hannu yana buɗe modal.

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

.modal('boye')

Da hannu yana ɓoye modal.

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

.modal(gaskiya)

Yana dawo da misalin nau'ikan abubuwa.

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

Sanarwa A madadin, ana iya dawo da wannan tare da $().data('modal').

Abubuwan da suka faru

Ajin modal na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan modal.

Lamarin	Bayani
nuna	Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
nunawa	Ana korar wannan taron lokacin da aka bayyana yanayin ga mai amfani (zai jira canjin css don kammala).
boye	Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
boye	Ana korar wannan taron lokacin da tsarin ya gama ɓoyewa daga mai amfani (zai jira canjin css don kammala).

$ ( '#my-modal' ). ɗaure ( 'boye' , aiki () {   
  // yi wani abu...
})

Demo

Kaddamar da Modal

Wannan plugin ɗin shine don ƙara hulɗar zazzagewa zuwa mashaya na bootstrap ko kewayawa da aka buga.

Zazzagewa

Amfani da boostrap-dropdown.js

$ ( '#topbar' ). zazzagewa ()

Alamar alama

Don ƙara aikin zazzage da sauri zuwa kowane ɓangaren kewayawa, yi amfani da data-dropdownsifa. Duk wani ingantaccen zazzagewar bootstrap za a kunna ta atomatik.

<ul class = "shafukan" > 
  <li class = "active" ><a href = "#" > Gida </a></li>  
  <li class = "saukarwa" data-dropdown = "saukarwa" >   
    <a href = "#" class = "dropdown-toggle" > Sauke </a>  
    <ul class = "zazzage-menu" > 
      <li><a href = "#" > Hanya ta biyu </a></li> 
      <li><a href = "#" > Wani abu kuma anan </a></li> 
      <li class = "mai rarrabawa" </li> 
      <li><a href = "#" > Wani hanyar haɗi </a></li> 
    </ul>
  </li>
</ul>

Sanarwa Idan ui ɗinku yana da abubuwan saukarwa da yawa, yi la'akari da ƙara data-dropdownsifa zuwa mafi mahimmancin ɓangaren akwati kamar .tabsko .topbar.

Hanyoyin

$() zazzage()

API ɗin shirye-shirye don kunna menus don babban mashaya da aka bayar ko kewayawa tabbed.

Demo

Wannan plugin ɗin don ƙara hulɗar scrollspy (nav mai haɓakawa ta atomatik) zuwa mashigin bootstrap.

Zazzagewa

Amfani da boostrap-scrollspy.js

$ ( '#topbar' ). zazzagewa ()

Alamar alama

Don ƙara halayyar scrollspy cikin sauƙi zuwa nav ɗinku, kawai ƙara data-scrollspysifa zuwa .topbar.

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

Hanyoyin

$().scrollspy()

Ta atomatik kunna maɓallin kewayawa ta masu amfani gungurawa matsayi.

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

Sanarwa Topbar tags dole ne su kasance da maƙasudin id mai warwarewa. Misali, <a href="#home">home</a>dole ne ya dace da wani abu a cikin gidan kamar <div id="home"></div>.

.scrollspy('refresh')

The scrollspy caches nav maɓallan da sashe daidaitawa don aiki. Idan kana buƙatar sabunta wannan cache (wataƙila idan kana da abun ciki mai ƙarfi) kawai kira wannan hanyar wartsakewa. Idan kun yi amfani da sifa na bayanan don ayyana scrollspy naku, kawai kira wartsakewa a jiki.

$ ( 'jiki' ). scrollspy ( 'refresh' )

Demo

Duba babban mashigin kewayawa akan wannan shafin.

Wannan plugin ɗin yana ƙara sauri, shafi mai ƙarfi da aikin kwaya.

Zazzagewa

Amfani da boostrap-tabs.js

$ ( '.tabs' ). tabs ()

Alamar alama

Kuna iya kunna kewayawa tab ko kwaya ba tare da rubuta kowane javascript ba ta hanyar ba su kawai data-tabssifa data-pills.

 <ul class = "shafukan" data-tabs = "shafukan" > ... </ul>   

Hanyoyin

$().shafukan ko $().kwayoyin

Yana kunna shafin da aikin kwaya don akwati da aka bayar. Ya kamata hanyoyin haɗin yanar gizo su yi la'akari da id's a cikin takaddar.

<ul class = "shafukan" > 
  <li class = "active" ><a href = "#gida" > Gida </a></li>  
  <li><a href = "#profile" > Bayanan martaba </a></li> 
  <li><a href = "#messages" > Saƙonni </a></li> 
  <li><a href = "#Settings" > Saituna </a></li> 
</ul>
 
<div class = "abun ciki na kwaya" > 
  <div class = "active" id = "gida" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "saƙonni" > ... </div> 
  <div id = "Settings" > ... </div> 
</ul>
 
<rubutu>
  $ ( aiki () {  
    $ ( '.tabs' ). tabs ()
  })
</script>

Demo

• Gida
• Bayanan martaba
• Saƙonni
• Saituna

Dangane da kyakkyawan jQuery.tipsy plugin wanda Jason Frame ya rubuta; twipsy wani sigar da aka sabunta ne, wanda baya dogara ga hotuna, yana amfani da css3 don rayarwa, da sifofin bayanai don ajiyar take!

Zazzagewa

Amfani da bootstrap-twipsy.js

$ ( '#misali' ). twipsy ( zaɓi )

Zabuka

Suna	nau'in	tsoho	bayanin
mai rai	boolean	gaskiya	Yi amfani da canjin css fade zuwa tip ɗin kayan aiki
jinkiriIn	lamba	0	jinkiri kafin nuna kayan aiki (ms)
jinkirta fita	lamba	0	jinkiri kafin ɓoye bayanan kayan aiki (ms)
koma baya	kirtani	''	rubutu don amfani lokacin da babu taken tip ɗin kayan aiki
jeri	kirtani	'sama'	yadda za a sanya kayan aiki - a sama | kasa | hagu | dama
html	boolean	karya	yana ba da damar abun ciki na html a cikin kayan aiki
rayuwa	boolean	karya	yi amfani da wakilan taron maimakon ɗaiɗaikun masu gudanar da taron
biya diyya	lamba	0	pixel diyya na Tooltip daga manufa kashi
take	zaren | aiki	'take'	sifa ko hanya don dawo da rubutun take
jawo	kirtani	'tsayawa'	yadda ake kunna kayan aiki - hover | mayar da hankali | manual

Hanyoyin

$().twipsy(zabuka)

Haɗa mai sarrafa twipsy zuwa tarin abubuwa.

.twipsy('show')

Yana bayyanar da abubuwa masu juyayi.

$ ( '# element' ). Twipsy ( 'show' )

.twipsy('boye')

Yana ɓoye ɓarna abubuwa.

$ ( '# element' ). twipsy ( 'boye' )

.twipsy(gaskiya)

Yana dawo da misalin abubuwa masu juyayi.

$ ( '# element' ). Twipsy ( gaskiya )

Sanarwa A madadin, ana iya dawo da wannan tare da $().data('twipsy').

Demo

Plugin ɗin popover yana ba da sauƙi mai sauƙi don ƙara popovers zuwa aikace-aikacen ku. Yana haɓaka plugin ɗin boostrap-twipsy.js , don haka tabbatar da ɗaukar wannan fayil ɗin kuma lokacin haɗawa da fa'ida a cikin aikin ku!

Zazzagewa

Amfani da boostrap-popover.js

$ ( '#misali' ). popover ( zaɓi )

Zabuka

Suna	nau'in	tsoho	bayanin
mai rai	boolean	gaskiya	Yi amfani da canjin css fade zuwa tip ɗin kayan aiki
jinkiriIn	lamba	0	jinkiri kafin nuna kayan aiki (ms)
jinkirta fita	lamba	0	jinkiri kafin ɓoye bayanan kayan aiki (ms)
koma baya	kirtani	''	rubutu don amfani lokacin da babu taken tip ɗin kayan aiki
jeri	kirtani	'dama'	yadda za a sanya kayan aiki - a sama | kasa | hagu | dama
html	boolean	karya	yana ba da damar abun ciki na html a cikin kayan aiki
rayuwa	boolean	karya	yi amfani da wakilan taron maimakon ɗaiɗaikun masu gudanar da taron
biya diyya	lamba	0	pixel diyya na Tooltip daga manufa kashi
take	zaren | aiki	'take'	sifa ko hanya don dawo da rubutun take
abun ciki	zaren | aiki	'data-content'	sifa ko hanya don dawo da rubutun abun ciki
jawo	kirtani	'tsayawa'	yadda ake kunna kayan aiki - hover | mayar da hankali | manual

Hanyoyin

$().popover(zabuka)

Yana farawa popovers don tarin abubuwa.

.popover('show')

Yana bayyanar da abubuwa masu tasowa.

$ ( '# element' ). popover ( 'show' )

.popover('boye')

Yana ɓoye abubuwan haɓakawa.

$ ( '# element' ). popover ( 'boye' )

Demo

hover don popover

Plugin faɗakarwa babban ƙaramin aji ne don ƙara ayyuka na kusa zuwa faɗakarwa.

Zazzagewa

Amfani da bootstrap-alerts.js

$ ( ".saƙon faɗakarwa" ). faɗakarwa ()

Alamar alama

Kawai ƙara data-alertsifa zuwa saƙonnin faɗakarwa don ba su ayyuka na kusa ta atomatik.

Hanyoyin

$() faɗakarwa()

Yana tattara duk faɗakarwa tare da ayyuka na kusa. Don faɗakarwar ku ta raye lokacin rufewa, tabbatar cewa an riga an yi amfani .fadeda .inajin da ajin.

faɗakarwa('kusa')

Yana rufe faɗakarwa.

$ ( ".saƙon faɗakarwa" ). faɗakarwa ( 'kusa' )

Demo