Mūsų „Modal“ įskiepis yra itin plonas tradicinio „Modal js“ įskiepio variantas, ypač stengiantis įtraukti tik tas funkcijas, kurių mums reikia „Twitter“.

parsisiųsti

Naudojant bootstrap-modal

$ ( '#mano modalas' ). modalinis ( parinktys )

Galimybės

vardas	tipo	numatytas	apibūdinimas
fonas	loginis	klaidinga	Apima modalinio fono elementą
klaviatūra	loginis	klaidinga	Uždaromas modalas, kai paspaudžiamas pabėgimo klavišas
Rodyti	loginis	klaidinga	Klasės inicijavimo metu atidaromas modalas

Žymėjimas

Galite lengvai suaktyvinti modalus savo puslapyje, neparašydami nė vienos JavaScript eilutės. Tiesiog suteikite elementui data-controls-modalatributą, atitinkantį modalinio elemento ID, ir spustelėjus jis paleis jūsų modalą. Norėdami pridėti modalinių parinkčių, tiesiog įtraukite jas kaip duomenų atributus.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Paleisti Modal </a>    

Pastaba Jei norite, kad jūsų modalas būtų animuotas, tiesiog pridėkite .fadeklasę prie .modalelemento (žr. demonstracinę versiją, kad pamatytumėte, kaip tai veikia).

Metodai

.modal(parinktys)

Suaktyvina jūsų turinį kaip modalą. Priima pasirenkamas parinktis object.

$ ( '#mano modalas' ). modalinis ({
  closeOnEscape : tiesa 
})

.modal('toggle')

Rankiniu būdu perjungia modalą.

$ ( '#mano modalas' ). modalinis ( 'perjungti' )

.modal('show')

Modalą atidaro rankiniu būdu.

$ ( '#mano modalas' ). modalinis ( „šou“ )

.modal('hide')

Rankiniu būdu paslepia modalą.

$ ( '#mano modalas' ). modalinis ( „paslėpti“ )

.modal(true)

Grąžina elementų modalinės klasės egzempliorių.

$ ( '#mano modalas' ). modalinis ( tiesa )

Pastaba Arba tai galima gauti naudojant $().data('modal').

Renginiai

„Bootstrap“ modalinė klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie modalinės funkcijos.

Renginys	apibūdinimas
Rodyti	Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta	Šis įvykis suaktyvinamas, kai modalas tampa matomas vartotojui (lauks, kol bus baigti css perėjimai).
paslėpti	Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas egzemplioriaus metodas.
paslėptas	Šis įvykis suaktyvinamas, kai modalas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti css perėjimai).

$ ( '#mano modalas' ). bind ( 'slėptas' , function () {   
  // daryk ką nors...
})

Demo

Paleiskite „Modal“.

Šis įskiepis skirtas išskleidžiamojo meniu sąveikai pridėti prie įkrovos viršutinės juostos arba skirtukų naršymo.

parsisiųsti

Naudojant boostrap-dropdown.js

$ ( '#topbar' ). išskleidžiamasis meniu ()

Žymėjimas

Norėdami greitai pridėti išskleidžiamojo meniu funkciją prie bet kurio naršymo elemento, naudokite data-dropdownatributą. Bet koks galiojantis įkrovos išskleidžiamasis meniu bus automatiškai suaktyvintas.

<ul class = "skirtukai" > 
  <li class = "aktyvus" ><a href = "#" > Pagrindinis puslapis </a></li>  
  <li class = "dropdown" data-dropdown = "išskleidžiamasis sąrašas" >   
    <a href = "#" class = "dropdown-toggle" > Išskleidžiamasis meniu </a>  
    <ul class = "išskleidžiamasis meniu" > 
      <li><a href = "#" > Antrinė nuoroda </a></li> 
      <li><a href = "#" > Čia dar kažkas </a></li> 
      <li class = "daliklis" ></li> 
      <li><a href = "#" > Kita nuoroda </a></li> 
    </ul>
  </li>
</ul>

Pastaba Jei jūsų vartotojo sąsajoje yra keli išskleidžiamieji meniu, apsvarstykite galimybę pridėti data-dropdownatributą prie svarbesnio sudėtinio rodinio elemento, pvz ., .tabsarba .topbar.

Metodai

$().dropdown()

Programinė API, skirta suaktyvinti tam tikros viršutinės juostos arba naršymo skirtukais meniu.

Demo

Šis papildinys skirtas pridėti scrollspy (automatinio atnaujinimo navigacijos) sąveiką įkrovos viršutinėje juostoje.

parsisiųsti

Naudojant boostrap-scrollspy.js

$ ( '#topbar' ). išskleidžiamasis meniu ()

Žymėjimas

Norėdami lengvai prie savo navigacijos pridėti scrollspy elgseną, tiesiog pridėkite data-scrollspyatributą prie .topbar.

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

Metodai

$().scrollspy()

Automatiškai suaktyvina naršymo mygtukus pagal naudotojo slinkimo padėtį.

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

Atkreipkite dėmesį , kad „Topbar“ inkaro žymos turi turėti išsprendžiamus ID tikslus. Pavyzdžiui, <a href="#home">home</a>turi atitikti kažką dom, pavyzdžiui, <div id="home"></div>.

.scrollspy('refresh')

Scrollspy talpyklos naršymo mygtukai ir sekcijų koordinatės našumui užtikrinti. Jei jums reikia atnaujinti šią talpyklą (tikėtina, jei turite dinaminio turinio), tiesiog iškvieskite šį atnaujinimo metodą. Jei naudojote duomenų atributą savo scrollspy apibrėžti, tiesiog iškvieskite atnaujinimą.

$ ( „kūnas“ ). scrollspy ( 'atnaujinti' )

Demo

Patikrinkite viršutinės juostos naršymą šiame puslapyje.

Šis papildinys prideda greitą, dinamišką skirtuką ir tablečių funkciją.

parsisiųsti

Naudojant boostrap-tabs.js

$ ( '.tabs' ). skirtukai ()

Žymėjimas

Galite suaktyvinti skirtuką arba piliulės naršymą neįrašydami jokio javascript, tiesiog suteikdami jiems atributą data-tabsarba data-pillsatributą.

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

Metodai

$().tabs arba $().pills

Suaktyvina tam tikro konteinerio skirtuko ir piliulės funkciją. Skirtukų nuorodos turi nurodyti ID dokumente.

<ul class = "skirtukai" > 
  <li class = "aktyvus" ><a href = "#home" > Pagrindinis puslapis </a></li>  
  <li><a href = "#profile" > Profilis </a></li> 
  <li><a href = "#messages" > Žinutės </a></li> 
  <li><a href = "#settings" > Nustatymai </a></li> 
</ul>
 
<div class = "tabletės turinys" > 
  <div class = "aktyvus" id = "namai" > ... </div>  
  <div id = "profilis" > ... </div> 
  <div id = "pranešimai" > ... </div> 
  <div id = "nustatymai" > ... </div> 
</ul>
 
<script>
  $ ( funkcija () {  
    $ ( '.tabs' ). skirtukai ()
  })
</script>

Demo

• Namai
• Profilis
• Žinutės
• Nustatymai

Remiantis puikiu jQuery.tipsy papildiniu, kurį parašė Jason Frame; twipsy yra atnaujinta versija, kuri nesiremia vaizdais, animacijai naudoja css3, o pavadinimo saugojimui naudoja duomenų atributus!

parsisiųsti

Naudojant bootstrap-twipsy.js

$ ( '#pavyzdys' ). twipsy ( parinktys )

Galimybės

vardas	tipo	numatytas	apibūdinimas
pagyvinti	loginis	tiesa	patarimui pritaikykite css fade perėjimą
delsimas	numerį	0	delsa prieš parodant patarimą (ms)
delayOut	numerį	0	delsa prieš slepiant patarimą (ms)
atsitraukti	styga	''	tekstas, naudojamas, kai nėra patarimo pavadinimo
išdėstymas	styga	'aukščiau'	kaip išdėstyti patarimą – aukščiau | žemiau | paliko | teisingai
html	loginis	klaidinga	leidžia HTML turinį patarime
gyventi	loginis	klaidinga	vietoj atskirų įvykių tvarkyklių naudokite įvykių delegavimą
kompensuoti	numerį	0	patarimo pikselių poslinkis nuo tikslinio elemento
titulą	styga | funkcija	"pavadinimas"	atributas arba metodas pavadinimo tekstui gauti
paleidiklis	styga	'svyruok'	kaip suaktyvinamas patarimas – užveskite pelės žymeklį | fokusuoti | vadovas

Metodai

$().twipsy(parinktys)

Prie elementų kolekcijos pritvirtina twipsy tvarkyklę.

.twipsy('show')

Atskleidžia elementų twipsy.

$ ( „#elementas“ ). tviska ( "šou" )

.twipsy('slėpti')

Slepia elementus twipsy.

$ ( „#elementas“ ). twipsy ( 'slėpti' )

.twipsy(tiesa)

Pateikia elementų twipsy klasės egzempliorių.

$ ( „#elementas“ ). tviska ( tiesa )

Pastaba Arba tai galima gauti naudojant $().data('twipsy').

Demo

Iššokančių langų papildinys suteikia paprastą sąsają, leidžiančią pridėti iššokančiųjų langų prie programos. Tai išplečia įskiepį boostrap-twipsy.js , todėl būtinai paimkite ir tą failą, kai įtraukite iššokančius elementus į savo projektą!

parsisiųsti

Naudojant boostrap-popover.js

$ ( '#pavyzdys' ). popover ( parinktys )

Galimybės

vardas	tipo	numatytas	apibūdinimas
pagyvinti	loginis	tiesa	patarimui pritaikykite css fade perėjimą
delsimas	numerį	0	delsa prieš parodant patarimą (ms)
delayOut	numerį	0	delsa prieš slepiant patarimą (ms)
atsitraukti	styga	''	tekstas, naudojamas, kai nėra patarimo pavadinimo
išdėstymas	styga	'teisingai'	kaip išdėstyti patarimą – aukščiau | žemiau | paliko | teisingai
html	loginis	klaidinga	leidžia HTML turinį patarime
gyventi	loginis	klaidinga	vietoj atskirų įvykių tvarkyklių naudokite įvykių delegavimą
kompensuoti	numerį	0	patarimo pikselių poslinkis nuo tikslinio elemento
titulą	styga | funkcija	"pavadinimas"	atributas arba metodas pavadinimo tekstui gauti
turinys	styga | funkcija	'duomenų turinys'	atributas arba metodas turinio tekstui gauti
paleidiklis	styga	'svyruok'	kaip suaktyvinamas patarimas – užveskite pelės žymeklį | fokusuoti | vadovas

Metodai

$().popover(parinktys)

Inicijuoja elementų rinkinio iššokančius langus.

.popover('show')

Atskleidžia elementų iššokimą.

$ ( „#elementas“ ). popover ( "show" )

.popover('hide')

Slepia elementų iššokimą.

$ ( „#elementas“ ). popover ( „paslėpti“ )

Demo

užveskite pelės žymeklį, kad iššoktumėte

Įspėjimų papildinys yra labai maža klasė, skirta perspėjimams papildyti artimą funkcionalumą.

parsisiųsti

Naudojant bootstrap-alerts.js

$ ( ".alert-message" ). įspėjimas ()

Žymėjimas

Tiesiog pridėkite data-alertatributą prie įspėjimo pranešimų, kad automatiškai suteiktumėte jiems artimas funkcijas.

Metodai

$().alert()

Apima visus įspėjimus glaudžiais funkcionalumu. Jei norite, kad įspėjimai būtų aktyvūs uždarius, įsitikinkite, kad jiems jau pritaikyta .fadeir .inklasė.

.alert('close')

Uždaro įspėjimą.

$ ( ".alert-message" ). įspėjimas ( 'uždaryti' )

Demo