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').modal(options)

Iespējas

Vārds	veids	noklusējuma	apraksts
fons	Būla	viltus	Ietver modāla fona elementu
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="true" >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').modal({
  closeOnEscape: taisnība
})

.modal('toggle')

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

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

.modal('show')

Manuāli atver modālu.

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

.modal('hide')

Manuāli slēpj modālu.

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

.modal(true)

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

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

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 (tiks gaidīts, 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('hidden', function () {
  // 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 boostrap-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="tabs">
  <li class="active"><a href="#">Sākums</a></li>
  <li class="dropdown" data-dropdown="dropdown" >
    <a href="#" class="dropdown-toggle">Nolaižamā izvēlne</a>
    <ul class="dropdown-menu">
      <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šējai joslai.

Lejupielādēt

Izmantojot boostrap-scrollspy.js

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

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

$('body').scrollspy('refresh')

Demonstrācija

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

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

Lejupielādēt

Izmantojot boostrap-tabs.js

$('.tabs').tabs()

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="tabs" data-tabs="tabs" >...</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="tabs">
  <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="home">...</div>
  <div id="profile">...</div>
  <div id="ziņas">...</div>
  <div id="settings">...</div>
</ul>

<skripts>
  $(funkcija () {
    $('.tabs').tabs()
  })
</script>

Demonstrācija

• Mājas
• Profils
• Ziņojumi
• Iestatījumi

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

$('#example').twipsy(options)

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	stīga	''	teksts, ko izmantot, ja nav rīka padoma nosaukuma
izvietojumu	stīga	'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	stīga | funkciju	'nosaukums'	atribūts vai metode virsraksta teksta izgūšanai
sprūda	stīga	'lidināt'	kā tiek aktivizēts rīka padoms — virziet kursoru | fokuss | rokasgrāmata

Metodes

$().twipsy(opcijas)

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

.twipsy('show')

Atklāj elementus twipsy.

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

.twipsy('slēpt')

Slēpj elementu twipsy.

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

.twipsy(true)

Atgriež elementu twipsy klases gadījumu.

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

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 boostrap-twipsy.js , tāpēc noteikti paņemiet arī šo failu, iekļaujot projektā uznirstošos logus!

Lejupielādēt

Izmantojot boostrap-popover.js

$('#example').popover(options)

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	stīga	''	teksts, ko izmantot, ja nav rīka padoma nosaukuma
izvietojumu	stīga	'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	stīga | funkciju	'nosaukums'	atribūts vai metode virsraksta teksta izgūšanai
saturu	stīga | funkciju	'datu saturs'	atribūts vai metode satura teksta izgūšanai
sprūda	stīga	'lidināt'	kā tiek aktivizēts rīka padoms — virziet kursoru | fokuss | rokasgrāmata

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").alert()

Atzīmes

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

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").alert('close')

Demonstrācija