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, kamba	uongo	Inajumuisha kipengele cha mandharinyuma ya modal. Weka mandhari kuwa "static"kama hutaki modali ifungwe wakati mandharinyuma yamebofya.
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 = "static" > 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 ({
  kibodi : 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 bootstrap-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 bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

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

$().scrollSpy()

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

.scrollSpy('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 ( 'onyesha upya' )

Onyesho

Angalia urambazaji wa upau wa juu kwenye ukurasa huu.

Programu-jalizi hii inatoa utendaji wa ziada wa kudhibiti hali ya kitufe.

Pakua

Kwa kutumia bootstrap-buttons.js

$ ( '.tabo' ). kitufe ()

Mbinu

$().kifungo('geuza')

Hugeuza hali ya kusukuma. Inatoa btn mwonekano kwamba imewashwa.

Notisi Unaweza kuwezesha kugeuza kiotomatiki kwa kitufe kwa kutumia data-togglesifa.

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

$().kifungo('inapakia')

Huweka hali ya vitufe kupakia - huzima kitufe na kubadilisha maandishi hadi kupakia maandishi. Upakiaji wa maandishi unapaswa kufafanuliwa kwenye kipengee cha kitufe kwa kutumia sifa ya data data-loading-text.

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

$().kifungo('weka upya')

Huweka upya hali ya kitufe - hubadilisha maandishi hadi maandishi asili.

$().kifungo(kamba)

Huweka upya hali ya kitufe - hubadilisha maandishi kwa hali yoyote ya maandishi iliyobainishwa na data.

<button class = "btn" data-complete-text = "finished!" > ... </ button>   
<script>
  $('.btn').kifungo('kamili')
</script>

Onyesho

Inapakia Onyesho Geuza Onyesho

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

Pakua

Kwa kutumia bootstrap-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

$().vichupo 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> 
</ div>
 
<script>
  $ ( kazi () {  
    $ ( '.tabo' ). vichupo ()
  })
</script>

Matukio

Tukio	Maelezo
mabadiliko	Tukio hili linawaka kwenye mabadiliko ya kichupo. Tumia event.targetna event.relatedTargetkulenga kichupo amilifu na kichupo amilifu cha awali mtawalia.

$ ( '#.tabo' ). funga ( 'badilisha' , kazi ( e ) {   
  e . lengo // kichupo kilichoamilishwa
  e . kuhusianaTarget // tabo iliyopita
})

Onyesho

• Nyumbani
• Wasifu
• Ujumbe
• Mipangilio
• Kunjuzi
  • @mafuta
  • @mdo

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 ncha ya 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
kiolezo	kamba	[chaguo-msingi]	Kiolezo cha html kinachotumika kutoa twipsy.

Ilani chaguo za mfano wa mtu binafsi wa twipsy zinaweza kubainishwa kwa njia nyingine kupitia matumizi ya sifa za data.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Maandishi fulani ya kichwa' > maandishi </a>    

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 bootstrap-twipsy.js , kwa hivyo hakikisha kuwa umenyakua faili hiyo pia unapojumuisha popover kwenye mradi wako!

Notisi Ni lazima ujumuishe faili ya bootstrap-twipsy.js kabla ya bootstrap-popover.js.

Pakua

Kwa kutumia bootstrap-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 ncha ya 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'	mfuatano au mbinu ya kurejesha maandishi yaliyomo. ikiwa hakuna iliyotolewa, maudhui yatatolewa kutoka kwa sifa ya maudhui ya data.
kichochezi	kamba	'kurupuka'	jinsi ncha ya zana inavyoanzishwa - elea | kuzingatia | mwongozo
kiolezo	kamba	[chaguo-msingi]	Kiolezo cha html kinachotumika kutoa popover.

Notisi Chaguzi za matukio ya mtu mmoja mmoja zinaweza kubainishwa kwa kutumia sifa za data.

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

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.

Chaguo

Jina	aina	chaguo-msingi	maelezo
kiteuzi	kamba	'.funga'	Kiteuzi kipi cha kulenga ili kufunga arifa.

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