Mūsu Modal spraudnis ir īpaši plāns tradicionālajam modālajam js spraudnim, īpašu uzmanību pievēršot tam, lai iekļautu tikai to funkcionalitāti, kas mums šeit ir nepieciešama vietnē Twitter.

Lejupielādēt

Izmantojot bootstrap-modal

$ ( '#my-modal' ). modāls ( opcijas )

Iespējas

Vārds	veids	noklusējuma	apraksts
fons	Būla, virkne	viltus	Ietver modāla fona elementu. Iestatiet fona kolāžu, "static"ja nevēlaties, lai modāls tiktu aizvērts, kad tiek noklikšķināts uz fona kolāžas.
tastatūra	Būla	viltus	Aizver modālu, kad tiek nospiests evakuācijas taustiņš
parādīt	Būla	viltus	Atver modālu klases inicializācijā

Atzīmes

Jūs varat viegli aktivizēt modāļus savā lapā, nerakstot nevienu JavaScript rindiņu. Vienkārši piešķiriet elementam data-controls-modalatribūtu, kas atbilst modālā elementa ID, un, noklikšķinot, tas palaiž modālu. Lai pievienotu modālās opcijas, vienkārši iekļaujiet tās arī kā datu atribūtus.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Palaist Modal </a>    

Piezīme Ja vēlaties, lai modāls tiktu animēts iekšā un ārā, vienkārši pievienojiet .fadesavam .modalelementam klasi (skatiet demonstrāciju, lai redzētu to darbībā).

Metodes

.modal(options)

Aktivizē jūsu saturu kā modālu. Pieņem izvēles opcijas object.

$ ( '#my-modal' ). modāls ({
  tastatūra : taisnība 
})

.modal('toggle')

Manuāli pārslēdz modālu.

$ ( '#my-modal' ). modāls ( 'pārslēgt' )

.modal('show')

Manuāli atver modālu.

$ ( '#my-modal' ). modāls ( 'show' )

.modal('hide')

Manuāli slēpj modālu.

$ ( '#my-modal' ). modāls ( 'slēpt' )

.modal(true)

Atgriež elementu modālās klases gadījumu.

$ ( '#my-modal' ). modāls ( patiess )

Piezīme Alternatīvi, to var izgūt, izmantojot $().data('modal').

Pasākumi

Bootstrap modālā klase atklāj dažus notikumus, lai piesaistītu modālo funkcionalitāti.

Pasākums	Apraksts
parādīt	Šis notikums tiek aktivizēts nekavējoties, kad showtiek izsaukta instances metode.
parādīts	Šis notikums tiek aktivizēts, kad modāls ir padarīts redzams lietotājam (gaidīs, līdz tiks pabeigtas css pārejas).
paslēpties	Šis notikums tiek aktivizēts nekavējoties, kad hideir izsaukta instances metode.
paslēptas	Šis notikums tiek aktivizēts, kad modāls ir beidzis slēpt no lietotāja (tiks gaidīts, līdz tiks pabeigtas css pārejas).

$ ( '#my-modal' ). bind ( 'slēpts' , funkcija () {   
  // dari kaut ko ...
})

Demonstrācija

Palaidiet Modal

Šis spraudnis ir paredzēts nolaižamās mijiedarbības pievienošanai sāknēšanas augšējai joslai vai navigācijām ar cilnēm.

Lejupielādēt

Izmantojot bootstrap-dropdown.js

$ ( '#topbar' ). nolaižamā izvēlne ()

Atzīmes

Lai jebkuram navigācijas elementam ātri pievienotu nolaižamās izvēlnes funkcionalitāti, izmantojiet data-dropdownatribūtu. Jebkura derīga sāknēšanas nolaižamā izvēlne tiks automātiski aktivizēta.

<ul class = "cilnes" > 
  <li class = "active" ><a href = "#" > Sākums </a></li>  
  <li class = "dropdown" data-dropdown = "nolaižamā izvēlne" >   
    <a href = "#" class = "dropdown-toggle" > Nolaižamā izvēlne </a>  
    <ul class = "nolaižamā izvēlne" > 
      <li><a href = "#" > Sekundārā saite </a></li> 
      <li><a href = "#" > Šeit ir vēl kaut kas </a></li> 
      <li class = "dalītājs" ></li> 
      <li><a href = "#" > Vēl viena saite </a></li> 
    </ul>
  </li>
</ul>

Piezīme Ja jūsu lietotāja saskarnē ir vairākas nolaižamās izvēlnes, apsveriet iespēju pievienot data-dropdownatribūtu nozīmīgākam konteinera elementam, piemēram, .tabsvai .topbar.

Metodes

$().dropdown()

Programmatūras api izvēlņu aktivizēšanai noteiktai augšjoslai vai navigācijai ar cilnēm.

Demonstrācija

Šis spraudnis ir paredzēts scrollspy (automātiskās atjaunināšanas navigācijas) mijiedarbības pievienošanai sāknēšanas augšjoslai.

Lejupielādēt

Izmantojot bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Atzīmes

Lai navigācijai viegli pievienotu scrollspy darbību, vienkārši pievienojiet data-scrollspyatribūtu .topbar.

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

Metodes

$().scrollSpy()

Automātiski aktivizē navigācijas pogas pēc lietotāja ritināšanas pozīcijas.

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

Piezīme Topbar enkura tagiem ir jābūt atrisināmiem ID mērķiem. Piemēram, <a href="#home">home</a>ir jāatbilst kaut kam domēnā, piemēram, <div id="home"></div>.

.scrollSpy('refresh')

Scrollspy kešatmiņas navigācijas pogas un sadaļu koordinātas veiktspējai. Ja jums ir jāatjaunina šī kešatmiņa (iespējams, ja jums ir dinamisks saturs), vienkārši izsauciet šo atsvaidzināšanas metodi. Ja izmantojāt datu atribūtu, lai definētu savu scrollspy, vienkārši izsauciet atsvaidzināšanu pamattekstā.

$ ( 'ķermenis' ). scrollSpy ( 'atsvaidzināt' )

Demonstrācija

Pārbaudiet šīs lapas augšējās joslas navigāciju.

Šis spraudnis piedāvā papildu funkcionalitāti pogas stāvokļa pārvaldīšanai.

Lejupielādēt

Izmantojot bootstrap-buttons.js

$ ( '.tabs' ). poga ()

Metodes

$().button('toggle')

Pārslēdz push stāvokli. Piešķir btn izskatu, ka tas ir aktivizēts.

Piezīme Varat iespējot pogas automātisku pārslēgšanu, izmantojot data-toggleatribūtu.

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

$().button('ielādē')

Iestata pogas stāvokli uz ielādi — atspējo pogu un apmaina tekstu ar teksta ielādi. Ielādes teksts ir jādefinē pogas elementā, izmantojot datu atribūtu data-loading-text.

<button class = "btn" data-loading-text = "ielādē lietas..." > ... </button>   

$().button('atiestatīt')

Atiestata pogas stāvokli — apmaina tekstu ar sākotnējo tekstu.

$().poga(virkne)

Atiestata pogas stāvokli — maina tekstu uz jebkuru datu definēto teksta stāvokli.

<button class = "btn" data-complete-text = "pabeigts!" > ... </button>   
<skripts>
  $('.btn').button('complete')
</scrip>

Demonstrācija

Notiek demonstrācijas ielāde Pārslēgt demonstrāciju

Šis spraudnis pievieno ātru, dinamisku cilnes un tablešu funkcionalitāti.

Lejupielādēt

Izmantojot bootstrap-tabs.js

$ ( '.tabs' ). cilnes ()

Atzīmes

Varat aktivizēt cilni vai tabletes navigāciju, nerakstot JavaScript, vienkārši piešķirot tiem atribūtu data-tabsvai data-pillsatribūtu.

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

Metodes

$().tabs vai $().pills

Aktivizē cilnes un tabletes funkcionalitāti konkrētajam konteineram. Cilņu saitēm ir jāatsaucas uz ID dokumentā.

<ul class = "cilnes" > 
  <li class = "active" ><a href = "#home" > Sākums </a></li>  
  <li><a href = "#profile" > Profils </a></li> 
  <li><a href = "#messages" > Ziņojumi </a></li> 
  <li><a href = "#settings" > Iestatījumi </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "mājas" > ... </div>  
  <div id = "profils" > ... </div> 
  <div id = "ziņojumi" > ... </div> 
  <div id = "iestatījumi" > ... </div> 
</div>
 
<skripts>
  $ ( funkcija () {  
    $ ( '.tabs' ). cilnes ()
  })
</script>

Pasākumi

Pasākums	Apraksts
mainīt	Šis notikums tiek aktivizēts, mainot cilni. Izmantojiet event.targetun event.relatedTarget, lai atlasītu attiecīgi aktīvo cilni un iepriekšējo aktīvo cilni.

$ ( '#.tabs' ). bind ( 'mainīt' , funkcija ( e ) {   
  e . mērķis // aktivizēta cilne
  e . relatedTarget // iepriekšējā cilne
})

Demonstrācija

• Mājas
• Profils
• Ziņojumi
• Iestatījumi
• Nomest lejā
  • @resns
  • @mdo

Balstīts uz izcilo spraudni jQuery.tipsy, ko uzrakstījis Džeisons Frame; twipsy ir atjaunināta versija, kas nebalstās uz attēliem, izmanto css3 animācijām un datu atribūtus virsrakstu glabāšanai!

Lejupielādēt

Izmantojot bootstrap-twipsy.js

$ ( '#piemērs' ). twipsy ( opcijas )

Iespējas

Vārds	veids	noklusējuma	apraksts
animēt	Būla	taisnība	lietot css izbalēšanas pāreju uz rīka padomu
kavēšanās	numuru	0	aizkave pirms rīka padoma parādīšanas (ms)
delayOut	numuru	0	aizkave pirms rīka padoma paslēpšanas (ms)
atkāpties	virkne	''	teksts, ko izmantot, ja nav rīka padoma nosaukuma
izvietojumu	virkne	'virs'	kā novietot rīka padomu — augšpusē | zemāk | pa kreisi | pa labi
html	Būla	viltus	atļauj HTML saturu rīka padomos
tiešraide	Būla	viltus	izmantot notikumu deleģēšanu, nevis atsevišķu notikumu apstrādātājus
kompensēt	numuru	0	rīka padoma pikseļu nobīde no mērķa elementa
virsraksts	virkne, funkcija	'nosaukums'	atribūts vai metode virsraksta teksta izgūšanai
sprūda	virkne	'lidināt'	kā tiek aktivizēts rīka padoms — virziet kursoru | fokuss | rokasgrāmata
veidne	virkne	[noklusējuma marķējums]	HTML veidne, ko izmanto twipsy renderēšanai.

Piezīme Atsevišķas twipsy instances opcijas var norādīt, izmantojot datu atribūtus.

<a href = "#" data-placement = "below" rel = 'twipsy' title = "Daži virsraksta teksts" > teksts </a>    

Metodes

$().twipsy(opcijas)

Elementu kolekcijai pievieno twipsy apstrādātāju.

.twipsy('show')

Atklāj elementu twipsy.

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

.twipsy('slēpt')

Slēpj elementus twipsy.

$ ( '#element' ). twipsy ( 'slēpt' )

.twipsy(true)

Atgriež elementu twipsy klases gadījumu.

$ ( '#element' ). twipsy ( patiesība )

Piezīme Alternatīvi, to var izgūt, izmantojot $().data('twipsy').

Demonstrācija

Uznirstošo logu spraudnis nodrošina vienkāršu interfeisu, lai lietojumprogrammai pievienotu uznirstošo logu. Tas paplašina spraudni bootstrap-twipsy.js , tāpēc noteikti paņemiet arī šo failu, iekļaujot projektā uznirstošos logus!

Piezīme Pirms bootstrap-popover.js ir jāiekļauj fails bootstrap-twipsy.js.

Lejupielādēt

Izmantojot bootstrap-popover.js

$ ( '#piemērs' ). popover ( opcijas )

Iespējas

Vārds	veids	noklusējuma	apraksts
animēt	Būla	taisnība	lietot css izbalēšanas pāreju uz rīka padomu
kavēšanās	numuru	0	aizkave pirms rīka padoma parādīšanas (ms)
delayOut	numuru	0	aizkave pirms rīka padoma paslēpšanas (ms)
atkāpties	virkne	''	teksts, ko izmantot, ja nav rīka padoma nosaukuma
izvietojumu	virkne	'pa labi'	kā novietot rīka padomu — augšpusē | zemāk | pa kreisi | pa labi
html	Būla	viltus	atļauj HTML saturu rīka padomos
tiešraide	Būla	viltus	izmantot notikumu deleģēšanu, nevis atsevišķu notikumu apstrādātājus
kompensēt	numuru	0	rīka padoma pikseļu nobīde no mērķa elementa
virsraksts	virkne, funkcija	'nosaukums'	atribūts vai metode virsraksta teksta izgūšanai
saturu	virkne, funkcija	'datu saturs'	virkne vai metode satura teksta izgūšanai. ja tādi nav, saturs tiks iegūts no datu satura atribūta.
sprūda	virkne	'lidināt'	kā tiek aktivizēts rīka padoms — virziet kursoru | fokuss | rokasgrāmata
veidne	virkne	[noklusējuma marķējums]	HTML veidne, ko izmanto uznirstošā loga renderēšanai.

Piezīme Atsevišķas uznirstošās instances opcijas var norādīt, izmantojot datu atribūtus.

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

Metodes

$().popover(options)

Inicializē elementu kolekcijas uznirstošos logus.

.popover('show')

Atklāj elementu popover.

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

.popover('hide')

Slēp elementu uznirstošo logu.

$ ( '#element' ). popover ( 'slēpt' )

Demonstrācija

virziet kursoru uz popover

Brīdinājumu spraudnis ir ļoti maza klase, lai brīdinājumiem pievienotu ciešu funkcionalitāti.

Lejupielādēt

Izmantojot bootstrap-alerts.js

$ ( ".alert-message" ). brīdinājums ()

Atzīmes

Vienkārši pievienojiet data-alertbrīdinājuma ziņojumiem atribūtu, lai automātiski nodrošinātu tiem tuvu funkcionalitāti.

Iespējas

Vārds	veids	noklusējuma	apraksts
atlasītājs	virkne	".aizvērt"	Kuru atlasītāju atlasīt brīdinājuma aizvēršanai.

Metodes

$().alert()

Apkopo visus brīdinājumus ar ciešu funkcionalitāti. Lai brīdinājumi tiktu aktivizēti, kad tie ir aizvērti, pārliecinieties, vai tiem jau ir piemērotas kategorijas un .fade..in

.alert('close')

Aizver brīdinājumu.

$ ( ".alert-message" ). brīdinājums ( 'aizvērt' )

Demonstrācija