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, zaren	karya	Ya ƙunshi nau'in modal-backdrop. Saita bayanan baya zuwa "static"idan ba ku son tsarin a rufe lokacin da aka danna bayanan baya.
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 = "static" > Ƙ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 ({
  keyboard : gaskiya 
})

.modal('toggle')

Da hannu yana jujjuya modal.

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

.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 kora 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

Yin amfani da bootstrap-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 = "sauke-toggle" > Saukewa </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

$() saukarwa()

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

Demo

Wannan plugin ɗin don ƙara ma'amalar scrollspy (nav mai haɓakawa ta atomatik) zuwa saman sandar bootstrap.

Zazzagewa

Amfani da bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

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 ku kira wartsakewa a jiki.

$ ( 'jiki' ). scrollSpy ( 'refresh' )

Demo

Duba babban mashigin kewayawa akan wannan shafin.

Wannan plugin ɗin yana ba da ƙarin ayyuka don sarrafa yanayin maɓallin.

Zazzagewa

Amfani da bootstrap-buttons.js

$ ( '.tabs' ). button ()

Hanyoyin

$().button('toggle')

Canza yanayin turawa. Yana ba btn kallon cewa an kunna shi.

Sanarwa Kuna iya kunna maɓalli ta atomatik ta amfani da data-togglesifa.

<button class = "btn" data-toggle = "juyawa" > ... </button>   

$().button('loading')

Yana saita yanayin maɓalli zuwa lodawa - yana kashe maɓallin kuma yana musanya rubutu zuwa loda rubutu. Ya kamata a ayyana rubutun lodawa akan maɓalli ta amfani da sifa ta bayanai data-loading-text.

<button class = "btn" data-loading-text = "loading kaya..." > ... </button>   

$().button('sake saita')

Yana sake saita yanayin maɓallin - musanya rubutu zuwa rubutu na asali.

$().button(string)

Sake saita yanayin maɓallin - musanya rubutu zuwa kowane yanayin rubutu da aka ayyana.

<button class = "btn" data-complete-text = "gama!" > ... </button>   
<rubutu>
  $('.btn').button ('complete')
</script>

Demo

Ana Loda Demo Juya Demo

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

Zazzagewa

Amfani da bootstrap-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> 
</div>
 
<rubutu>
  $ ( aiki () {  
    $ ( '.tabs' ). tabs ()
  })
</script>

Abubuwan da suka faru

Lamarin	Bayani
canji	Wannan taron yana gobara akan canjin tab. Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki da shafin mai aiki na baya bi da bi.

$ ( '#.shafukan' ). ɗaure ( 'canji' , aiki ( e ) {   
  e . manufa // kunna tab
  e . relatedTarget // shafi na baya
})

Demo

• Gida
• Bayanan martaba
• Saƙonni
• Saituna
• Zazzagewa
  • @mai
  • @mdo

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	kirtani, aiki	'take'	sifa ko hanya don dawo da rubutun take
jawo	kirtani	'tsayawa'	yadda ake kunna kayan aiki - hover | mayar da hankali | manual
samfuri	kirtani	[default markup]	Samfurin html da aka yi amfani da shi don yin juzu'i.

Sanarwa Zaɓuɓɓukan misalan twipsy ɗaya ɗaya za a iya kayyade su ta hanyar amfani da halayen bayanai.

<a href = "#" data-placement = "a kasa" rel = 'twipsy' take = 'Wasu rubutun take' > rubutu </a>    

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 abubuwan da ke juya su.

$ ( '# 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 bootstrap-twipsy.js , don haka tabbatar da ɗaukar wannan fayil ɗin kuma lokacin haɗawa da fa'ida a cikin aikin ku!

Sanarwa Dole ne ku haɗa fayil ɗin bootstrap-twipsy.js kafin bootstrap-popover.js.

Zazzagewa

Amfani da bootstrap-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	kirtani, aiki	'take'	sifa ko hanya don dawo da rubutun take
abun ciki	kirtani, aiki	'data-content'	kirtani ko hanya don dawo da rubutun abun ciki. idan ba a samar da ɗaya ba, za a samo abun ciki daga sifa-abun ciki.
jawo	kirtani	'tsayawa'	yadda ake kunna kayan aiki - hover | mayar da hankali | manual
samfuri	kirtani	[default markup]	Samfurin html da aka yi amfani da shi don yin popover.

Sanarwa Zaɓuɓɓukan misalan fa'ida ɗaya ɗaya za a iya kayyade su ta hanyar amfani da halayen bayanai.

<a data-placement = "kasa" href = "#" class = "btn danger" rel = "popover" > rubutu </a>    

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.

Zabuka

Suna	nau'in	tsoho	bayanin
mai zaɓe	kirtani	'.kusa'	Menene zaɓaɓɓen da za a yi niyya don rufe faɗakarwa.

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