Programu-jalizi yetu ya Modal ni programu-jalizi nyembamba sana ya modal js, ikichukua uangalifu maalum ili kujumuisha utendakazi mtupu ambao tunahitaji hapa twitter.

Pakua

Kutumia bootstrap-modal

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

Chaguo

Jina	aina	chaguo-msingi	maelezo
mandhari	boolean	uongo	Inajumuisha kipengele cha mandharinyuma ya modal
kibodi	boolean	uongo	Hufunga modali wakati kitufe cha Escape kinapobozwa
onyesha	boolean	uongo	Hufungua modal juu ya uanzishaji wa darasa

Alama

Unaweza kuamilisha moduli kwenye ukurasa wako kwa urahisi bila kulazimika kuandika safu moja ya javascript. Toa tu kipengele data-controls-modalsifa ambayo inalingana na kitambulisho cha kipengele cha modal, na ikibofya, itazindua modali yako. Ili kuongeza chaguzi za modal, zijumuishe tu kama sifa za data pia.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Njia ya Uzinduzi </a>    

Notisi Ikiwa ungependa modali yako ihuishwe ndani na nje, ongeza tu .fadedarasa kwenye .modalkipengele chako (rejelea onyesho ili kuona hili likiendelea).

Mbinu

.modal(chaguo)

Huwasha maudhui yako kama modali. Inakubali chaguo za hiari object.

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

.modal('geuza')

Hugeuza modali mwenyewe.

$ ( '#my-modal' ). modali ( 'geuza' )

.modal('show')

Hufungua moduli mwenyewe.

$ ( '#my-modal' ). modali ( 'onyesha' )

.modal('ficha')

Huficha modali mwenyewe.

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

.modal(kweli)

Hurejesha mfano wa darasa la vipengele.

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

Notisi Vinginevyo, hii inaweza kupatikana tena na $().data('modal').

Matukio

Darasa la modali la Bootstrap linafichua matukio machache ya kuunganisha kwenye utendakazi wa modal.

Tukio	Maelezo
onyesha	Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
iliyoonyeshwa	Tukio hili linafutwa wakati modali imefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya css kukamilika).
kujificha	Tukio hili linafutwa mara moja wakati hidenjia ya mfano imeitwa.
siri	Tukio hili linafutwa wakati modali imekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya css kukamilika).

$ ( '#my-modal' ). funga ( 'hidden' , kazi () {   
  // fanya kitu ...
})

Onyesho

Uzinduzi Modal

Programu-jalizi hii ni ya kuongeza mwingiliano wa kushuka kwenye upau wa juu wa bootstrap au urambazaji wa vichupo.

Pakua

Kwa kutumia boostrap-dropdown.js

$ ( '#topbar' ). kunjuzi ()

Alama

Ili kuongeza utendakazi wa kunjuzi kwa haraka kipengele chochote cha nav, tumia data-dropdownsifa. menyu kunjuzi yoyote halali ya bootstrap itawashwa kiotomatiki.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Nyumbani </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Kunjuzi </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Kiungo cha pili </a></li> 
      <li><a href = "#" > Kitu kingine hapa </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Kiungo kingine </a></li> 
    </ul>
  </li>
</ul>

Ilani Ikiwa ui yako ina menyu kunjuzi kadhaa, zingatia kuongeza data-dropdownsifa kwenye chombo muhimu zaidi kama .tabsau .topbar.

Mbinu

$().kunjuzi()

Api ya programu ya kuwezesha menyu kwa upau wa juu au urambazaji wa kichupo.

Onyesho

Programu-jalizi hii ni ya kuongeza mwingiliano wa kusogeza (kusasisha otomatiki nav) kwenye upau wa juu wa bootstrap.

Pakua

Kwa kutumia boostrap-scrollspy.js

$ ( '#topbar' ). kunjuzi ()

Alama

Ili kuongeza tabia ya kusogeza kwa urahisi kwenye nav yako, ongeza tu data-scrollspysifa kwenye .topbar.

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

Mbinu

$().scrollpy()

Huwasha vibonye vya kusogeza kiotomatiki kwa nafasi ya kusogeza ya watumiaji.

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

Ilani lebo za Upau wa Juu lazima ziwe na shabaha za kitambulisho zinazoweza kutatuliwa. Kwa mfano, <a href="#home">home</a>lazima ilingane na kitu kwenye dom kama <div id="home"></div>.

.scrollpy('onyesha upya')

Scrollspy huhifadhi vitufe vya nav na viwianishi vya sehemu kwa utendakazi. Ikiwa unahitaji kusasisha akiba hii (labda ikiwa una maudhui yanayobadilika) piga tu njia hii ya kuonyesha upya. Ikiwa ulitumia sifa ya data kufafanua scrollspy yako, piga simu upya upya kwenye mwili.

$ ( 'mwili' ). scrollspy ( 'refresh' )

Onyesho

Angalia urambazaji wa upau wa juu kwenye ukurasa huu.

Programu-jalizi hii inaongeza kichupo cha haraka, chenye nguvu na utendaji wa kidonge.

Pakua

Kwa kutumia boostrap-tabs.js

$ ( '.tabo' ). vichupo ()

Alama

Unaweza kuwezesha urambazaji wa kichupo au kidonge bila kuandika javascript yoyote kwa kuwapa tu data-tabsau data-pillssifa.

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

Mbinu

$().tabo au $().vidonge

Huwasha utendaji wa kichupo na kidonge kwa chombo fulani. Viungo vya kichupo vinapaswa kurejelea vitambulisho kwenye hati.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#nyumbani" > Nyumbani </a></li>  
  <li><a href = "#wasifu" > Wasifu </a></li> 
  <li><a href = "#ujumbe" > Ujumbe </a></li> 
  <li><a href = "#mipangilio" > Mipangilio </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "nyumbani" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "ujumbe" > ... </div> 
  <div id = "mipangilio" > ... </div> 
</ul>
 
<script>
  $ ( kazi () {  
    $ ( '.tabo' ). vichupo ()
  })
</script>

Onyesho

• Nyumbani
• Wasifu
• Ujumbe
• Mipangilio

Kulingana na programu-jalizi bora ya jQuery.tipsy iliyoandikwa na Jason Frame; twipsy ni toleo lililosasishwa, ambalo halitegemei picha, hutumia CSS3 kwa uhuishaji, na sifa za data kwa uhifadhi wa mada!

Pakua

Kwa kutumia bootstrap-twipsy.js

$ ( '#mfano' ). twipsy ( chaguzi )

Chaguo

Jina	aina	chaguo-msingi	maelezo
hai	boolean	kweli	tumia mpito wa css fade kwenye kidokezo cha zana
kuchelewaKatika	nambari	0	kuchelewa kabla ya kuonyesha kidokezo cha zana (ms)
delayout	nambari	0	kuchelewa kabla ya kuficha kidokezo cha zana (ms)
kuanguka nyuma	kamba	''	maandishi ya kutumia wakati hakuna kichwa cha kidokezo kilichopo
uwekaji	kamba	'juu'	jinsi ya kuweka kidokezo cha zana - juu | chini | kushoto | haki
html	boolean	uongo	inaruhusu maudhui ya html ndani ya kidokezo cha zana
kuishi	boolean	uongo	tumia uwakilishi wa tukio badala ya vidhibiti vya hafla binafsi
kukabiliana	nambari	0	saizi ya pikseli ya ncha ya zana kutoka kipengele lengwa
kichwa	kamba | kazi	'kichwa'	sifa au mbinu ya kurejesha maandishi ya kichwa
kichochezi	kamba	'kurupuka'	jinsi ncha ya zana inavyoanzishwa - elea | kuzingatia | mwongozo

Mbinu

$().twipsy(chaguo)

Huambatanisha kidhibiti cha twipsy kwenye mkusanyiko wa vipengele.

.twipsy('onyesha')

Hufichua kipengele cha twipsy.

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

.twipsy('ficha')

Huficha kipengele cha twipsy.

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

.twipsy(kweli)

Hurejesha mfano wa darasa la vipengele vya twipsy.

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

Notisi Vinginevyo, hii inaweza kupatikana tena na $().data('twipsy').

Onyesho

Programu-jalizi ya popover hutoa kiolesura rahisi cha kuongeza popover kwenye programu yako. Inapanua programu-jalizi ya boostrap-twipsy.js , kwa hivyo hakikisha kuwa umenyakua faili hiyo pia unapojumuisha popover kwenye mradi wako!

Pakua

Kwa kutumia boostrap-popover.js

$ ( '#mfano' ). popover ( chaguzi )

Chaguo

Jina	aina	chaguo-msingi	maelezo
hai	boolean	kweli	tumia mpito wa css fade kwenye kidokezo cha zana
kuchelewaKatika	nambari	0	kuchelewa kabla ya kuonyesha kidokezo cha zana (ms)
delayout	nambari	0	kuchelewa kabla ya kuficha kidokezo cha zana (ms)
kuanguka nyuma	kamba	''	maandishi ya kutumia wakati hakuna kichwa cha kidokezo kilichopo
uwekaji	kamba	'haki'	jinsi ya kuweka kidokezo cha zana - juu | chini | kushoto | haki
html	boolean	uongo	inaruhusu maudhui ya html ndani ya kidokezo cha zana
kuishi	boolean	uongo	tumia uwakilishi wa tukio badala ya vidhibiti vya hafla binafsi
kukabiliana	nambari	0	saizi ya pikseli ya ncha ya zana kutoka kipengele lengwa
kichwa	kamba | kazi	'kichwa'	sifa au mbinu ya kurejesha maandishi ya kichwa
maudhui	kamba | kazi	'maudhui ya data'	sifa au mbinu ya kurejesha maandishi ya maudhui
kichochezi	kamba	'kurupuka'	jinsi ncha ya zana inavyoanzishwa - elea | kuzingatia | mwongozo

Mbinu

$(). popover(chaguo)

Huanzisha popover kwa mkusanyiko wa vipengele.

.popover('onyesha')

Hufichua pover ya vipengele.

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

.popover('ficha')

Huficha popover ya vipengele.

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

Onyesho

elea kwa popover

Programu-jalizi ya tahadhari ni darasa dogo sana la kuongeza utendakazi wa karibu kwa arifa.

Pakua

Kwa kutumia bootstrap-alerts.js

$ ( ".alert-message" ). tahadhari ()

Alama

Ongeza tu data-alertsifa kwa jumbe zako za tahadhari ili kuzipa kiotomati utendakazi wa karibu.

Mbinu

$().tahadhari()

Hufunga arifa zote kwa utendakazi wa karibu. Ili arifa zako zihuishwe zinapofungwa, hakikisha kuwa .fadena .indarasa tayari zimetumika kwao.

.tahadhari('funga')

Hufunga arifa.

$ ( ".alert-message" ). tahadhari ( 'funga' )

Onyesho