Shtojca jonë Modal është një pamje shumë e hollë e shtojcës tradicionale modal js, duke pasur kujdes të veçantë për të përfshirë vetëm funksionalitetin e zhveshur që ne kërkojmë këtu në Twitter.

Shkarko

Duke përdorur bootstrap-modal

$ ( '#my-modal' ). modale ( opsione )

Opsione

Emri	lloji	default	përshkrim
sfond	boolean, varg	i rremë	Përfshin një element të sfondit modal. Cakto sfondin në "static"nëse nuk dëshiron që modali të mbyllet kur klikohet sfondi.
tastierë	logjike	i rremë	Mbyll modalin kur shtypet tasti i arratisjes
shfaqje	logjike	i rremë	Hap modalin në inicializimin e klasës

Markup

Ju mund të aktivizoni modalet në faqen tuaj lehtësisht pa pasur nevojë të shkruani një rresht të vetëm Javascript. Thjesht jepni një elementi një data-controls-modalatribut që korrespondon me një id të elementit modal dhe kur të klikohet, ai do të nisë modalin tuaj. Për të shtuar opsione modale, thjesht përfshini ato si atribute të të dhënave gjithashtu.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Nis modalin </a>    

Njoftim Nëse dëshironi që modali juaj të animohet brenda dhe jashtë, thjesht shtoni një .fadeklasë në .modalelementin tuaj (referojuni demonstrimit për ta parë këtë në veprim).

Metodat

.modal(opsione)

Aktivizon përmbajtjen tuaj si modale. Pranon një opsion opsional object.

$ ( '#my-modal' ). modale ({
  tastierë : e vërtetë 
})

.modal ('ndërrim')

Ndryshon manualisht një modal.

$ ( '#my-modal' ). modale ( 'ndërrim' )

.modal('shfaq')

Hap me dorë një modal.

$ ( '#my-modal' ). modale ( 'shfaqje' )

.modal ('fsheh')

Fsheh manualisht një modal.

$ ( '#my-modal' ). modale ( 'fsheh' )

.modal (e vërtetë)

Kthen një shembull të klasës modale të elementeve.

$ ( '#my-modal' ). modale ( e vërtetë )

Shënim Përndryshe, kjo mund të merret me $().data('modal').

Ngjarjet

Klasa modale e Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin modal.

Ngjarja	Përshkrim
shfaqje	Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit.
treguar	Kjo ngjarje aktivizohet kur modali është bërë i dukshëm për përdoruesin (do të presë që tranzicionet css të përfundojnë).
fshehin	Kjo ngjarje aktivizohet menjëherë kur hidethirret metoda e shembullit.
i fshehur	Kjo ngjarje aktivizohet kur modali ka përfunduar duke u fshehur nga përdoruesi (do të presë që tranzicioni i css të përfundojë).

$ ( '#my-modal' ). bind ( 'i fshehur' , funksioni () {   
  // bej dicka ...
})

Demo

Launch Modal

Kjo shtojcë është për shtimin e ndërveprimit me zbritje në shiritin e sipërm të bootstrap ose navigimet me skeda.

Shkarko

Duke përdorur bootstrap-dropdown.js

$ ( '#topbar' ). me zbritje ()

Markup

Për të shtuar shpejt funksionalitetin me zbritje në çdo element navi, përdorni data-dropdownatributin. Çdo listë e vlefshme bootstrap do të aktivizohet automatikisht.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Faqja kryesore </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "meny-dropdown" > 
      <li><a href = "#" > Lidhje dytësore </a></li> 
      <li><a href = "#" > Diçka tjetër këtu </a></li> 
      <li class = "ndarës" ></li> 
      <li><a href = "#" > Një lidhje tjetër </a></li> 
    </ul>
  </li>
</ul>

Njoftim Nëse ndërfaqja juaj e ndërfaqes ka disa zbritje, merrni parasysh shtimin e data-dropdownatributit në një element më domethënës të kontejnerit si .tabsose .topbar.

Metodat

$().dropdown()

Një api programatike për aktivizimin e menyve për një shirit të sipërm të caktuar ose navigim me skeda.

Demo

Kjo shtojcë është për të shtuar ndërveprimin scrollspy (përditësimi automatik i navit) në shiritin e sipërm të bootstrap.

Shkarko

Duke përdorur bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Markup

Për të shtuar me lehtësi sjelljen e scrollspy në navin tuaj, thjesht shtoni data-scrollspyatributin në .topbar.

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

Metodat

$().scrollSpy()

Aktivizon automatikisht butonat e navigimit nga pozicioni i lëvizjes së përdoruesve.

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

Vini re , etiketat e ankorimit në Topbar duhet të kenë objektiva të zgjidhshme id. Për shembull, një <a href="#home">home</a>duhet të korrespondojë me diçka në dom si <div id="home"></div>.

.scrollSpy ('refresh')

Scrollspy ruan butonat e navigimit dhe koordinatat e seksioneve për performancën. Nëse keni nevojë të përditësoni këtë memorie (me gjasë nëse keni përmbajtje dinamike), thjesht telefononi këtë metodë rifreskimi. Nëse keni përdorur atributin e të dhënave për të përcaktuar scrollspy tuaj, thjesht thirrni refresh në trup.

$ ( 'trup' ). scrollSpy ( 'refresh' )

Demo

Shikoni navigimin e shiritit të sipërm në këtë faqe.

Kjo shtojcë ofron funksionalitet shtesë për menaxhimin e gjendjes së butonit.

Shkarko

Duke përdorur bootstrap-buttons.js

$ ( '.tabs' ). butoni ()

Metodat

$().button('toggle')

Aktivizon gjendjen e shtytjes. I jep btn pamjen se është aktivizuar.

Shënim Mund të aktivizoni ndërrimin automatik të një butoni duke përdorur data-toggleatributin.

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

$().button('po ngarkohet')

Vendos gjendjen e butonit në ngarkim - çaktivizon butonin dhe ndërron tekstin me tekstin e ngarkimit. Teksti i ngarkimit duhet të përcaktohet në elementin e butonit duke përdorur atributin e të dhënave data-loading-text.

<button class = "btn" data-loading-text = "duke ngarkuar gjëra..." > ... </button>   

$().button('rivendosje')

Rivendos gjendjen e butonit - ndërron tekstin në tekstin origjinal.

$().button(string)

Rivendos gjendjen e butonit - ndërron tekstin në çdo gjendje teksti të përcaktuar nga të dhënat.

<button class = "btn" data-complete-text = "mbaruar!" > ... </button>   
<skript>
  $('.btn').button('plotë')
</scrip>

Demo

Demonstrimi po ngarkohet Ndrysho Demon

Kjo shtojcë shton funksionalitet të shpejtë, dinamik të skedave dhe pilulave.

Shkarko

Duke përdorur bootstrap-tabs.js

$ ( '.tabs' ). skedat ()

Markup

Ju mund të aktivizoni navigimin e një skede ose pilule pa shkruar ndonjë javascript thjesht duke u dhënë atyre një data-tabsose data-pillsatribut.

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

Metodat

$().tabs ose $().pilula

Aktivizon funksionalitetin e skedës dhe pilulës për një enë të caktuar. Lidhjet e skedave duhet t'i referohen ID-së në dokument.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Faqja kryesore </a></li>  
  <li><a href = "#profile" > Profili </a></li> 
  <li><a href = "#messages" > Mesazhet </a></li> 
  <li><a href = "#settings" > Cilësimet </a></li> 
</ul>
 
<div class = "pilula-përmbajtje" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "mesazhe" > ... </div> 
  <div id = "settings" > ... </div> 
</div>
 
<skript>
  $ ( funksioni () {  
    $ ( '.tabs' ). skedat ()
  })
</script>

Ngjarjet

Ngjarja	Përshkrim
ndryshim	Kjo ngjarje aktivizohet me ndryshimin e skedës. Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive.

$ ( '#.tabs' ). bind ( 'ndryshim' , funksioni ( e ) {   
  e . objektivi // skeda e aktivizuar
  e . relatedTarget // skeda e mëparshme
})

Demo

• Shtëpi
• Profili
• Mesazhet
• Cilësimet
• Dropdown
  • @yndyrë
  • @mdo

Bazuar në shtojcën e shkëlqyer jQuery.tipsy të shkruar nga Jason Frame; twipsy është një version i përditësuar, i cili nuk mbështetet në imazhe, përdor css3 për animacione dhe atribute të dhënash për ruajtjen e titullit!

Shkarko

Duke përdorur bootstrap-twipsy.js

$ ( '#shembull' ). twipsy ( opsione )

Opsione

Emri	lloji	default	përshkrim
gjallëroj	logjike	e vërtetë	aplikoni një tranzicion css fade në këshillën e veglave
vonesëNë	numri	0	vonesë përpara shfaqjes së këshillës së veglave (ms)
vonesa	numri	0	vonesë përpara fshehjes së këshillës së veglës (ms)
tërhiqem	varg	''	tekst për t'u përdorur kur nuk është i pranishëm titulli i këshillës së veglave
vendosja	varg	'siper'	si të pozicionohet këshilla e veglave - sipër | më poshtë | majtas | drejtë
html	logjike	i rremë	lejon përmbajtjen html brenda këshillës së veglave
jetojnë	logjike	i rremë	përdorni delegimin e ngjarjeve në vend të mbajtësve individualë të ngjarjeve
kompensuar	numri	0	zhvendosja e pikselit e këshillës së veglave nga elementi i synuar
titullin	varg, funksion	'titull'	atribut ose metodë për marrjen e tekstit të titullit
shkas	varg	'rri rri pezull'	si aktivizohet këshilla e veglave - rri pezull | fokus | manual
shabllon	varg	[shënjimi i parazgjedhur]	Shablloni html i përdorur për paraqitjen e një twipsy.

Shënim Opsionet individuale të shembullit twipsy mund të specifikohen në mënyrë alternative nëpërmjet përdorimit të atributeve të të dhënave.

<a href = "#" data-placement = "polow" rel = 'twipsy' title = 'Disa tekst titulli' > tekst </a>    

Metodat

$().twipsy(opsione)

Bashkangjit një mbajtës twipsy në një koleksion elementesh.

.twipsy ('shfaq')

Zbulon një element twipsy.

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

.twipsy ('fsheh')

Fsheh një element twipsy.

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

.twipsy (e vërtetë)

Kthen një shembull të klasës twipsy të elementeve.

$ ( '#element' ). twipsy ( e vërtetë )

Shënim Përndryshe, kjo mund të merret me $().data('twipsy').

Demo

Shtojca popover ofron një ndërfaqe të thjeshtë për të shtuar popover në aplikacionin tuaj. Ai zgjeron shtojcën bootstrap-twipsy.js , prandaj sigurohuni që ta kapni atë skedar gjithashtu kur përfshini popover-et në projektin tuaj!

Njoftim Duhet të përfshini skedarin bootstrap-twipsy.js përpara bootstrap-popover.js.

Shkarko

Duke përdorur bootstrap-popover.js

$ ( '#shembull' ). popover ( opsione )

Opsione

Emri	lloji	default	përshkrim
gjallëroj	logjike	e vërtetë	aplikoni një tranzicion css fade në këshillën e veglave
vonesëNë	numri	0	vonesë përpara shfaqjes së këshillës së veglave (ms)
vonesa	numri	0	vonesë përpara fshehjes së këshillës së veglës (ms)
tërhiqem	varg	''	tekst për t'u përdorur kur nuk është i pranishëm titulli i këshillës së veglave
vendosja	varg	'e drejt'	si të pozicionohet këshilla e veglave - sipër | më poshtë | majtas | drejtë
html	logjike	i rremë	lejon përmbajtjen html brenda këshillës së veglave
jetojnë	logjike	i rremë	përdorni delegimin e ngjarjeve në vend të mbajtësve individualë të ngjarjeve
kompensuar	numri	0	zhvendosja e pikselit e këshillës së veglave nga elementi i synuar
titullin	varg, funksion	'titull'	atribut ose metodë për marrjen e tekstit të titullit
përmbajtjen	varg, funksion	'përmbajtja e të dhënave'	një varg ose metodë për marrjen e tekstit të përmbajtjes. nëse nuk ofrohet asnjë, përmbajtja do të merret nga një atribut i përmbajtjes së të dhënave.
shkas	varg	'rri rri pezull'	si aktivizohet këshilla e veglave - rri pezull | fokus | manual
shabllon	varg	[shënjimi i parazgjedhur]	Shablloni html i përdorur për të dhënë një popover.

Shënim Opsionet individuale të instancës popover mund të specifikohen në mënyrë alternative nëpërmjet përdorimit të atributeve të të dhënave.

<a data-placement = "polow" href = "#" class = "btn rrezik" rel = "popover" > tekst </a>    

Metodat

$().popover(opsione)

Inicializon popover-et për një koleksion elementesh.

.popover ('shfaqje')

Zbulon një popover elementesh.

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

.popover ('fsheh')

Fsheh një popover elementesh.

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

Demo

rri pezull për popover

Shtojca e alarmit është një klasë super e vogël për shtimin e funksionalitetit të afërt të sinjalizimeve.

Shkarko

Duke përdorur bootstrap-alerts.js

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

Markup

Thjesht shtoni një data-alertatribut në mesazhet tuaja alarmuese për t'u dhënë automatikisht funksionalitetin e afërt.

Opsione

Emri	lloji	default	përshkrim
përzgjedhës	varg	'.mbyll'	Cilin përzgjedhës të synoni për mbylljen e një sinjalizimi.

Metodat

$().alert()

Mbështjell të gjitha sinjalizimet me funksionalitet të ngushtë. Për t'i animuar sinjalizimet tuaja kur mbyllen, sigurohuni që të kenë aplikuar tashmë klasën .fadedhe .inpër to.

.alert ('mbyll')

Mbyll një alarm.

$ ( ".alert-message" ). alarmi ( 'mbyll' )

Demo