Tha am plugan Modal againn na shealladh air leth caol air a’ plugan modal js traidiseanta, a’ gabhail cùram sònraichte nach cuir thu a-steach ach na feartan lom a tha a dhìth oirnn an seo air twitter.

Luchdaich sìos

A 'cleachdadh bootstrap-modal

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

Roghainnean

Ainm	seòrsa	bunaiteach	tuairisgeul
cùl-raon	boolean	breugach	A’ toirt a-steach eileamaid cùl-raon modal
meur-chlàr	boolean	breugach	Dùin am modal nuair a thèid an iuchair teiche a bhrùthadh
seall	boolean	breugach	Fosglaidh modal air toiseach tòiseachaidh clas

Marcaich

Faodaidh tu modalan a chuir an gnìomh air do dhuilleag gu furasta gun a bhith agad ri aon loidhne de javascript a sgrìobhadh. Dìreach thoir feart dha eileamaid data-controls-modala fhreagras ri modal eileamaid id, agus nuair a bhriogas tu air, cuiridh e air bhog am modal agad. Gus roghainnean modal a chur ris, dìreach cuir a-steach iad mar fheartan dàta cuideachd.

<a class="btn" data-controls-modal="my-modal" data-backdrop="true"> A ' cur air bhog modal </a> _ _    

Sanas Ma tha thu airson gum bi am modal agad beò a-staigh agus a-muigh, dìreach cuir .fadeclas ris an .modaleileamaid agad (thoir sùil air an demo gus seo fhaicinn ann an gnìomh).

Dòighean-obrach

.modal (roghainnean)

Cuir do shusbaint an gnìomh mar mhodal. A 'gabhail ri roghainnean roghnach object.

$ ( '#my-modal' ). modal ({
  closeOnEscape : fìor 
})

.modal ('toggle')

Tog modal le làimh.

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

.modal ('taisbeanadh')

Le làimh a 'fosgladh modal.

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

.modal ('falach')

Le làimh a 'falach modal.

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

.modal (fìor)

A’ tilleadh eisimpleir clas modal eileamaidean.

$ ( '#my-modal' ). modal ( fìor )

Sanas Air neo, faodar seo fhaighinn air ais le $().data('modal').

Tachartasan

Bidh clas modal Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd modal.

Tachartas	Tuairisgeul
seall	Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir.
air a thaisbeanadh	Thèid an tachartas seo a chuir às nuair a bhios am modal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasad css a chrìochnachadh).
seiche	Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
falaichte	Thèid an tachartas seo a losgadh nuair a tha am modal deiseil air fhalach bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan css a chrìochnachadh).

$ ( '#my-modal' ). ceangail ( 'falaichte' , gnìomh () {   
  // dèan rudeigin...
})

Demo

Cur air bhog modal

Tha am plugan seo airson eadar-obrachadh tuiteam-sìos a chur ris a’ bhàr-taoibh bootstrap no seòlaidhean tabaichte.

Luchdaich sìos

A’ cleachdadh boostrap-dropdown.js

$ ( '# bàr-mullaich' ). tuiteam -sìos ()

Marcaich

Gus gnìomhachd tuiteam-sìos a chuir gu luath ri eileamaid nav sam bith, cleachd am data-dropdownfeart. Thèid tuiteam sìos bootstrap dligheach sam bith a chuir an gnìomh gu fèin-ghluasadach.

<ul class = "tabs" > 
  <li class = "active" ><a href="#"> Dachaigh </a> < /li >  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href="#" class="dropdown-toggle"> Dropdown </a> _ _ _ _ _  
    <ul class = "dropdown-menu" > 
      <li><a href="#"> Ceangal dàrnach </a> </li > 
      <li><a href="#"> Rudeigin eile an seo </a></li > 
      <li class = "divider" ></li> 
      <li><a href="#"> Ceangal eile </a> </li > 
    </ul>
  </li>
</ul>

Sanas Ma tha grunn dropdowns aig an ui agad, smaoinich air a’ bhuadh a data-dropdownchur ri eileamaid soithich nas cudromaiche mar .tabsno .topbar.

Dòighean-obrach

$(). dropdown()

Api prògramaichte airson clàran-bìdh a chuir an gnìomh airson bàr-mullaich no seòladh tabaichte.

Demo

Tha am plugan seo airson an eadar-obrachadh scrollspy (fèin-ùrachadh nav) a chur ris a’ bhàr-taoibh bootstrap.

Luchdaich sìos

A 'cleachdadh boostrap-scrollspy.js

$ ( '# bàr-mullaich' ). tuiteam -sìos ()

Marcaich

Gus giùlan scrollaidh a chuir ris an inneal-seòlaidh agad gu furasta, dìreach cuir a’ bhuadh ris an data-scrollspyfhaidhle .topbar.

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

Dòighean-obrach

$().scrollspy()

Cuir an gnìomh putanan seòlaidh gu fèin-ghluasadach a rèir suidheachadh scroll luchd-cleachdaidh.

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

Mothaich Feumaidh targaidean id a ghabhas fuasgladh a bhith aig tagaichean acair Topbar. Mar eisimpleir, <a href="#home">home</a>feumaidh rud a bhith co-fhreagairt ri rudeigin san dachaigh mar <div id="home"></div>.

.scrollspy ('ùrnaigh')

Na putanan seòlaidh scrollspy caches agus co-chomharran earrannan airson coileanadh. Ma dh’ fheumas tu an tasgadan seo ùrachadh (is dòcha ma tha susbaint fiùghantach agad) dìreach cuir fios chun dòigh ùrachaidh seo. Ma chleachd thu am feart dàta gus an scrollspy agad a mhìneachadh, dìreach cuir fios gu ùrachadh air a’ bhodhaig.

$ ( 'corp' ). scrollspy ( 'ùrnaigh' )

Demo

Thoir sùil air seòladh a’ bhàr-mullaich air an duilleag seo.

Bidh am plugan seo a’ cur ri comas taba is pill luath, fiùghantach.

Luchdaich sìos

A’ cleachdadh boostrap-tabs.js

$ ( '.tabs' ). tabaichean ()

Marcaich

Faodaidh tu seòladh taba no pill a chuir an gnìomh gun a bhith a’ sgrìobhadh javascript sam bith le bhith dìreach a’ toirt feart data-tabsno data-pillsfeart dhaibh.

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

Dòighean-obrach

$().tabs no $().pills

Cuir an gnìomh gnìomhachd tab is pill airson inneal sònraichte. Bu chòir do cheanglaichean tab a bhith a’ toirt iomradh air IDan san sgrìobhainn.

<ul class = "tabs" > 
  <li class = "active" > <a href = "#home"> Dachaigh </a></li>  
  <li><a href = "#profile"> Pròifil </a> </li> 
  <li><a href = "#messages"> Teachdaireachdan </a> </li> 
  <li><a href = "#settings"> Roghainnean </a> </li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "dachaigh" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "settings" > ... </div> 
</ul>
 
<script>
  $ ( gnìomh () {  
    $ ( '.tabs' ). tabaichean ()
  })
</script>

Demo

• Dhachaigh
• Pròifil
• Teachdaireachdan
• Suidhichidhean

Stèidhichte air an sàr plugan jQuery.tipsy sgrìobhte le Jason Frame; Is e dreach ùraichte a th’ ann an twipsy, nach eil an urra ri ìomhaighean, a’ cleachdadh css3 airson beòthachaidhean, agus feartan dàta airson stòradh tiotal!

Luchdaich sìos

A 'cleachdadh bootstrap-twipsy.js

$ ( '# eisimpleir' ). twipsy ( roghainnean )

Roghainnean

Ainm	seòrsa	bunaiteach	tuairisgeul
beothachadh	boolean	fìor	cuir a-steach eadar-ghluasad css fade chun an t-inneal-taice
dàil Anns	àireamh	0	dàil mus seall thu tooltip (ms)
dàil a-mach	àireamh	0	dàil mus cuir thu am falach tooltip (ms)
tuiteam air ais	sreang	''	teacsa ri chleachdadh nuair nach eil tiotal tooltip an làthair
suidheachadh	sreang	'gu h-àrd'	mar a shuidhicheas tu an t-inneal - gu h-àrd | gu h-ìosal | clì | deas
html	boolean	breugach	a’ ceadachadh susbaint html taobh a-staigh Tooltip
beò	boolean	breugach	cleachd tiomnadh tachartais an àite luchd-làimhseachaidh tachartais fa leth
dheth	àireamh	0	cuir dheth piogsail de phìos inneal bhon eileamaid targaid
tiotal	sreang | gnìomh	'tiotal'	feart no dòigh airson teacsa tiotal fhaighinn air ais
spreidh	sreang	'hover'	mar a tha tooltip air a phiobrachadh - hover | fòcas | làimhe

Dòighean-obrach

$().twipsy(roghainnean)

A’ ceangal inneal-làimhseachaidh twipsy ri cruinneachadh eileamaidean.

.twipsy ('show')

A 'nochdadh twipsy eileamaidean.

$ ( '# eileamaid' ). twipsy ( 'show' )

.twipsy ('falach')

A 'falach twipsy eileamaidean.

$ ( '# eileamaid' ). twipsy ( 'falach' )

.twipsy (fìor)

A’ tilleadh eisimpleir clas twipsy eileamaidean.

$ ( '# eileamaid' ). twipsy ( fìor )

Sanas Air neo, faodar seo fhaighinn air ais le $().data('twipsy').

Demo

Tha am plugan popover a’ toirt seachad eadar-aghaidh sìmplidh airson popovers a chuir ris an tagradh agad. Bidh e a’ leudachadh am plugan boostrap-twipsy.js , mar sin bi cinnteach gum faigh thu grèim air an fhaidhle sin cuideachd nuair a bhios tu a’ toirt a-steach popovers sa phròiseact agad!

Luchdaich sìos

A’ cleachdadh boostrap-popover.js

$ ( '# eisimpleir' ). popover ( roghainnean )

Roghainnean

Ainm	seòrsa	bunaiteach	tuairisgeul
beothachadh	boolean	fìor	cuir a-steach eadar-ghluasad css fade chun an t-inneal-taice
dàil Anns	àireamh	0	dàil mus seall thu tooltip (ms)
dàil a-mach	àireamh	0	dàil mus cuir thu am falach tooltip (ms)
tuiteam air ais	sreang	''	teacsa ri chleachdadh nuair nach eil tiotal tooltip an làthair
suidheachadh	sreang	'deas'	mar a shuidhicheas tu an t-inneal - gu h-àrd | gu h-ìosal | clì | deas
html	boolean	breugach	a’ ceadachadh susbaint html taobh a-staigh Tooltip
beò	boolean	breugach	cleachd tiomnadh tachartais an àite luchd-làimhseachaidh tachartais fa leth
dheth	àireamh	0	cuir dheth piogsail de phìos inneal bhon eileamaid targaid
tiotal	sreang | gnìomh	'tiotal'	feart no dòigh airson teacsa tiotal fhaighinn air ais
susbaint	sreang | gnìomh	'susbaint-dàta'	feart no dòigh airson teacsa susbaint fhaighinn air ais
spreidh	sreang	'hover'	mar a tha tooltip air a phiobrachadh - hover | fòcas | làimhe

Dòighean-obrach

$().popover(roghainnean)

A’ tòiseachadh popovers airson cruinneachadh eileamaidean.

.popover ('show')

A’ nochdadh popover eileamaidean.

$ ( '# eileamaid' ). popover ( 'taisbeanadh' )

.popover ('falach')

A 'falach popover eileamaidean.

$ ( '# eileamaid' ). popover ( 'falaich' )

Demo

hover airson popover

Tha am plugan rabhaidh na chlas air leth beag airson gnìomhachd dlùth a chuir ri rabhaidhean.

Luchdaich sìos

A’ cleachdadh bootstrap-alerts.js

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

Marcaich

Dìreach cuir data-alertfeart ris na teachdaireachdan rabhaidh agad gus comas-gnìomh dlùth a thoirt dhaibh gu fèin-ghluasadach.

Dòighean-obrach

$().alert()

A ’cuairteachadh a h-uile rabhadh le comas-gnìomh dlùth. Gus am bi na rabhaidhean agad beò nuair a tha iad dùinte, dèan cinnteach gu bheil an clas .fadeagus an .inclas air an cur a-steach mu thràth.

.alert('dùin')

A’ dùnadh rabhadh.

$ ( ".alert-message" ). rabhadh ( 'dlùth' )

Demo