JaavaScript

Qaamolee Bootstrap jireenyatti fidi-amma 13 amala jQuery plugins waliin.

Dhuunfaa ykn qindaa’ee

Ijaarsi dhuunfaan hammatamuu danda'u (tokko tokko hirkattummaa barbaadan ta'us), ykn hunda yeroo tokkotti. Bootstrap.js fi bootstrap.min.js lamaan isaanii faayilii tokko keessatti ifteessitoota hunda of keessaa qabu.

Amaloota deetaa

Sarara JaavaScript tokko osoo hin barreessiin pilaaginoota Bootstrap hunda karaa API mallattoo qulqulluu ta'een fayyadamuu dandeessa. Kun API sadarkaa jalqabaa Bootstrap yoo ta'u yeroo plugin fayyadamtu yaada kee isa jalqabaa ta'uu qaba.

Kana jechuun, haala tokko tokko keessatti dalagaa kana dhaamsuun barbaachisaa ta'uu danda'a. Kanaafuu, taateewwan hunda maqaa qaama irratti `'data-api'` waliin addaan baafaman irratti hiikuudhaan API amaloota deetaa hanqisuuf dandeettii ni kennina. Kunis akkana fakkaata:

  1. $ ( 'qaama' ). off ( '.daataa-api' ) .

Akka filannootti, ifteessaa murtaa'e irratti xiyyeeffachuuf, maqaa ifteessaa akka iddoo maqaatti iddoo maqaa deetaa-api waliin akkasitti qofa hammachuu:

  1. $ ( 'qaama' ). off ( '.akeekkachiisa.daataa-api' ) .

API sagantaa

Akkasumas, Bootstrap plugins hunda karaa JavaScript API qulqulluu ta'een fayyadamuu danda'uu qabdu jennee amanna. APIwwan uummataa hundi malawwan tokko, sansalata qaban, fi walitti qabama irratti tarkaanfii fudhatame deebisu.

  1. $ ( ".btn.balaa" ). button ( "jijjiirraa" ). addClass ( "cophaa" ) .

Malleen hundi wanta filannoowwan filannoo, tarree mala murtaa'e irratti xiyyeeffatu, ykn homaa hin qabne (kan amala durtii waliin ifteessituu jalqabu) fudhachuu qabu:

  1. $ ( "#Moodaalii koo" ). modal () // durtii waliin jalqabame
  2. $ ( "#Moodaalii koo" ). modal ({ keyboard : soba }) // furtuu tokko malee jalqabame
  3. $ ( "#Moodaalii koo" ). modal ( 'show' ) // agarsiisa battalumatti jalqaba fi waama

Tokkoon tokkoon ifteessaa akkasumas ijaarsa isaa raw qabeentaa `Ijaarsa` irratti saaxilaa: $.fn.popover.Constructor. Yoo fakkeenya ifteessaa murtaa'e argachuu barbaadde, kallattiin elementii irraa fudhadhu: $('[rel=popover]').data('popover').

Waldhabdee Hin Qabu

Yeroo tokko tokko Bootstrap plugins UI frameworks biroo wajjin fayyadamuun barbaachisaadha. Haalota kanneen keessatti, walitti bu'iinsi iddoo maqaa darbee darbee uumamuu danda'a. Yoo kun ta'e, .noConflictpilaaginii gatii isaa deebisuu barbaaddu bilbiluu dandeessa.

  1. var Qabduu bootstrap = $ . fn jechuun . button . noConflict () // $.fn.button gara gatii duraan ramadameetti deebisa
  2. $ . fn jechuun . bootstrapBtn = bootstrapButton // $().bootstrapBtn dalagaa bootstrap kennuu

Taateewwan

Bootstrap taateewwan amala gochoota addaa plugin irra caalaan isaaniif kenna. Walumaagalatti, kunniin bifa xumura hin qabnee fi gocha darbeen dhufu - bakka dhuma hin qabne (fkn show) jalqaba taatee tokkoo irratti kaka’u, fi bifa gocha isaa isa darbe (fkn shown) xumura gocha tokkoo irratti kaka’u.

Taateewwan dhuma hin qabne hundi dalagaa preventDefault ni kennu. Kunis dandeettii raawwii gocha tokkoo osoo hin jalqabin dhaabuu kenna.

  1. $ ( '#Moodaalii koo' ). on ( 'agarsiisi' , faankishinii ( e ) { .
  2. yoo ( ! deetaa ) e . preventDefault () // moodaalii akka hin agarsiifamne dhaaba
  3. }) .

Waa'ee ce'umsaa

Bu'aa ce'umsaa salphaadhaaf, bootstrap-transition.js al tokko faayilii JS kanneen biroo cinatti dabali. Yoo qindaa'e (ykn xiqqaate) bootstrap.js fayyadamaa jirta ta'e , kana hammachuun hin barbaachisu—dursee jira.

Fayyadama keesii

Fakkeenyota muraasni pilaaginii ce'umsaa:

  • Moodaalota keessatti islaayidii ykn fading
  • Caancalawwan fading out ta'an
  • Fading out akeekkachiisa
  • Qaaqa kaarooseelii kan lilmoo'u

Fakkeenyaaf

Moodaalonni qajeeloo, garuu jijjiiramaa, qaaqa gaaffiiwwan dalagaa xiqqaa barbaadamu fi durtii ismaartii qaban.

Fakkeenya istaatiksii

Moodaalii agarsiifame mataduree, qaama, fi tuuta gochoota jalaqaba keessatti.

  1. <div class = "moodaalii dhoksaa fade" >
  2. <div class = "mataduree-moodaalii" >
  3. < gosa qaree = "qaree" gita = "cufi" data-dismiss = "moodaalii" aria-dhoksaa = "dhugaa" > &yeroo; </button> jedhu
  4. <h3> Mata duree moodaalii </h3>
  5. </div> jechuun ni danda’ama
  6. <div class = "qaama-moodaalii" >
  7. <p> Qaama gaarii tokko... </p>
  8. </div> jechuun ni danda’ama
  9. <div class = "moodaalii-miila" >
  10. <a href = "#" gita = "btn" > Cufi </a>
  11. <a href = "#" class = "btn btn-primary" > Jijjiiramoota saagi </a>
  12. </div> jechuun ni danda’ama
  13. </div> jechuun ni danda’ama

Deemoo kallattiin

Qabduu armaan gadii cuqaasuun moodaalii karaa JaavaScript jijjiiri. Innis gadi siqee gubbaa fuula irraa ni fade in ta'a.

  1. <!-- Qabduu moodaalii kakaasuuf -->
  2. <a href = "#myModal" gahee = "button" class = "btn" data-toggle = "moodaalii" > Moodaala demoo jalqabi </a>
  3.  
  4. <!-- Moodaalii -->
  5. <div id = "myModal" class = "moodaalii dhoksuu fade" tabindex = "-1" gahee = "qaaqa" aria-labelledby = "myModalLabel" aria-dhokfame = "dhugaa" >
  6. <div class = "mataduree-moodaalii" >
  7. < gosa qaree = "qaree" gita = "cufi" data-dismiss = "moodaalii" aria-dhoksaa = "dhugaa" > × </button>
  8. <h3 id = "myModalLabel" > Mata duree moodaalii </h3>
  9. </div> jechuun ni danda’ama
  10. <div class = "qaama-moodaalii" >
  11. <p> Qaama gaarii tokko... </p>
  12. </div> jechuun ni danda’ama
  13. <div class = "moodaalii-miila" >
  14. <button class = "btn" data-dismiss = "moodaalii" aria-dhoksaa = "dhugaa" > Cufi </button>
  15. <button class = "btn btn-primary" > Jijjiiramoota saagi </button>
  16. </div> jechuun ni danda’ama
  17. </div> jechuun ni danda’ama

Fayyadama

Karaa amaloota deetaa

JaavaScript osoo hin barreessiin moodaalii tokko hojii irra oolchi. Qaama too'ataa irratti saagi data-toggle="modal", akka qaree, waliin data-target="#foo"ykn href="#foo"moodaalii murtaa'e jijjiiruuf irratti xiyyeeffachuuf.

  1. <button type = "button" data-toggle = "moodaalii" deetaa-galma = "#myModal" > Moodaalii </button> jalqabi

Karaa JaavaScript

Moodaalii id myModalqabu sarara JaavaScript tokkoon waami:

  1. $ ( '#Moodaalii koo' ). moodaalii ( filannoowwan ) .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-backdrop="".

Maqaa akaakuu durtii ibsa
duubbee boolee dhugaa Qaama moodaalii-duubbee of keessaa qaba. staticAkka filannootti, duubbee kan moodaalii cuqaasuu irratti hin cufneef ifteessi .
kiiboordii boolee dhugaa Yeroo furtuun miliquu dhiibamu moodaalii cufa
agarsiisuu boolee dhugaa Moodaalii yeroo jalqabamu agarsiisa.
fagoo karaa soba

Yoo url fagoo kenname, qabiyyeen karaa loadmala jQuery'n fe'amee gara .modal-body. Yoo api deetaa fayyadamaa jirta ta'e, filannoodhaan hrefmadda fagoo ifteessuuf mallattoo fayyadamuu dandeessa. Fakkeenyi kanaa akka armaan gadiitti agarsiifameera:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Malawwan

.modal(filannoowwan) .

Qabiyyee kee akka moodaaliitti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

  1. $ ( '#Moodaalii koo' ). moodaalii ({
  2. keyboard : soba
  3. }) .

.modal('jijjiirraa') .

Harkaan moodaalii tokko jijjiira.

  1. $ ( '#Moodaalii koo' ). modal ( 'jijjiirraa' ) .

.modal('agarsiisi') .

Harkaan moodaalii tokko bana.

  1. $ ( '#Moodaalii koo' ). modal ( 'agarsiisi' ) .

.modal('dhoksuu') .

Harkaan moodaalii tokko dhoksa.

  1. $ ( '#Moodaalii koo' ). modal ( 'dhoksuu' ) .

Taateewwan

Gitni moodaalii Bootstrap taateewwan muraasa gara dalagaa moodaaliitti hooking gochuuf saaxila.

Taatee Ibsa
agarsiisuu Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiifameera Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaaf akka mul'atu godhame (ce'umsa css xumuramuu eega).
dhoksuu Taatee kun yeroo hidemala fakkeenyaa waamame battalumatti dhukaafama.
dhokataa Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaa irraa dhokfamuu xumuredha (ce'umsa css xumuramuu eega).
  1. $ ( '#Moodaalii koo' ). on ( 'dhokataa' , faankishinii () { .
  2. // waan tokko hojjedhu...
  3. }) .

Fakkeenya navbar keessatti

Ijaarsi ScrollSpy bakka tarree irratti hundaa'uun galmoota nav ofumaan fooyyessuuf. Naannoo navbar jala jiru garagalchiiti jijjiirama gita socho'aa ilaali. Wantoonni xiqqaan gadi bu'an akkasumas ni calaqqisu.

@furdaa

Beeksisa leggings keytar, brunch id dhaaba aartii dolor labore. Pitchfork yr enim lo-fi osoo isaan hin gurguratin qui. Tumblr qonnaa irraa gara minjaalaatti mirga biskileetii waanuma fedhe. Anim keffiyeh kaarlees kaardii. Velit seitan mcsweeney's suuraa booth 3 lukkuu ji'a irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui tarii waa'ee isaanii hin dhageenye et cardigan fandii imaanaa culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony baayoodiizeelii keffiyeh artiisan ullamco bu'aa.

@mdo jedhaa

Veniam marfa mustache iskeetiiboordii, adipisicing fugiat velit qeensa pitchfork. Freegan qeensa aliqua cupidat mcsweeney's vero jedhamuun beekama. Kuupidaat afur loko nisi, ea helvetica nulla carles. Tattooed cosby sweater konkolaataa nyaataa fe'umsaa, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial jedhamuun beekama. Carles sochii qaamaa miidhaginaa hin taane quis gentrify. Biruukiliin adipisicing hojii harkaa biiraa itti aanaa keytar deserunt.

tokko

Occaecat commodo aliqua delectus jedhamuun beekama. Fap hojii harkaa biiraa deserunt skateboard ea. Lomo mirga biskileetii adipisicing banh mi, velit ea sunt sadarkaa itti aanu locavore buna ka'umsa tokkoo magna veniam keessatti. Jireenya ol'aanaa id vaayinaayilii, echo paarkii consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing jedhamuun beekama. Consectetur nisi DIY boorsaa ergamaa xiqqaa. Cred ex in, itti fufiinsa kan qabu delectus consectetur fanny pack iphone.

lama

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa ergamaa boorsaa marfa waanuma fedhe delectus nyaata fe'umsaa. Sapiente synth id akka tilmaamaatti. Locavore sed helvetica cliche irony, thundercats tarii waa'ee isaanii hin dhageenye consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat osoo isaan hin gurguramin dura, terry richardson proident brunch nesciunt quis cosby iswiiterii pariatur keffiyeh ut helvetica artisan. Cardigan biiraa hojii harkaa seitan qophaa'aa velit. VHS chambray laboris yeroodhaaf veniam. Anim mollit minim commodo ullamco qilleensaa.


Fayyadama

Karaa amaloota deetaa

Amala scrollspy salphaatti gara navigeeshinii barruu gubbaa keetti dabaluuf, data-spy="scroll"elementii irratti basaasuu barbaaddutti dabaluu qofa (baay'inaan kun qaama ta'a) fi data-target=".navbar"nav kam akka fayyadamtu filachuuf. Qaama waliin scrollspy fayyadamuu barbaadda .nav.

  1. <qaama deetaa-basaasaa = " tarree" deetaa-galma = ".navbar" > ... </body>

Karaa JaavaScript

Karaa JaavaScript gara scrollspy bilbili:

  1. $ ( '#navbar' ). barruulee () .
Mataa ol qaba! Hidhamtoonni Navbar galmoota id furmaata argachuu danda'an qabaachuu qabu. Fakkeenyaaf, a <a href="#home">home</a>waan dom keessa jiru akka <div id="home"></div>.

Malawwan

.scrollspy('haaraa') .

Yeroo scrollspy fayyadamtu elementoota DOM irraa dabaluu ykn haquu wajjin walqabatee, mala haaromsaa akkasitti waamuun si barbaachisa:

  1. $ ( '[daataa-basaasaa="tarree"]' ). tokkoon tokkoon ( faankishinii () { .
  2. var $ basaasaa = $ ( kana ). scrollspy ( 'haaromsaa' ) .
  3. });

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-offset="".

Maqaa akaakuu durtii ibsa
ofseeti jechuun ni danda’ama lakkoofsa 10. Piikseelota yeroo iddoo tarree shallagdu gubbaa irraa ofseeti.

Taateewwan

Taatee Ibsa
activate gochuu Taatee kun yeroo wanti haaraan scrollspy'n hojiirra oolu hundatti dhukaasa.

Fakkeenya caancalaa

Dalagaa caancala saffisaa, daayinamikii gara foddaa qabiyyee naannootti ce'uuf dabali, karaa qaaqa tarree illee.

Raw denim tarii waa'ee isaanii hin dhageenye jean shorts Austin. Nesciunt tofu stumptown aliqua, qulqulleessuu gooftaa retro synth. Mustache cliche yeroodhaaf, wiiliyamsbarg kaarles veegaan helvetica. Reprehenderit foon qalaa retro keffiyeh abjuu qabatu synth. Koosbii iswiiterii eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum afaan oromoo afaan oromoo. Seitan aliquip quis cardigan uffata ameerikaa, foon qalaa voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Fayyadama

Caancalawwan caancala qaban karaa JaavaScript dandeessisi (tokkoon tokkoon caancalaa dhuunfaan hojii irra oolchuu qaba):

  1. $ ( '#Tab koo a' ). cuqaasaa ( faankishinii ( e ) { .
  2. e . ittisuuDurtii ();
  3. $ ( kana ). tab ( 'agarsiisi' );
  4. }) .

Caancaloota dhuunfaa karaa hedduudhaan hojii irra oolchuu dandeessa:

  1. $ ( '#Tab koo a[href="#profaayilii"]' ). tab ( 'agarsiisi' ); // Caancala maqaadhaan filadhu
  2. $ ( '#Tab koo a:jalqaba' ). tab ( 'agarsiisi' ); // Caancala jalqabaa filadhu
  3. $ ( '#Tab koo a:dhuma' ). tab ( 'agarsiisi' ); // Caancala dhumaa filadhu
  4. $ ( '#Tab koo li:eq(2) a' ). tab ( 'agarsiisi' ); // Caancala sadaffaa filadhu (0-indexed) .

Markup gochuu

data-toggle="tab"JaavaScript kamiyyuu osoo hin barreessiin salphaatti ifteessuudhaan ykn data-toggle="pill"elementii tokko irratti navigeeshinii caancala ykn kiniinii hojii irra oolchuu dandeessa . Gitoota navfi gara caancalaatti dabaluudhaan akkaataa caancala Bootstrap hojii irra oolcha.nav-tabsul

  1. <ul gita = "nav nav-tabs" >
  2. <li><a href = "#mana" deetaa-jijjiirraa = "caancala" > Mana </a></li>
  3. <li><a href = "#profaayilii" deetaa-jijjiirraa = "caancala" > Profaayilii </a></li>
  4. <li><a href = "#ergaawwan" data-toggle = "caancala" > Ergaawwan </a></li>
  5. <li><a href = "#sajoo" data-toggle = "caancala" > Sajoo </a></li>
  6. </ul> jechuun ni danda’ama

Malawwan

$().caancala

Qabduu caancalaa fi qabduu qabiyyee hojii irra oolcha. Caancalli DOM keessatti noodiin qabduu a data-targetykn kan xiyyeeffatu qabaachuu qaba.href

  1. <ul class = "nav nav-tabs" id = "Tab koo" >
  2. <li class = "socho'aa" ><a href = "#mana" > Mana </a></li>
  3. <li><a href = "#profaayilii" > Profaayilii </a></li>
  4. <li><a href = "#ergaawwan" > Ergaawwan </a></li>
  5. <li><a href = "#sajoo" > Sajoo </a></li>
  6. </ul> jechuun ni danda’ama
  7.  
  8. <div class = "qabiyyee-caancala" >
  9. <div class = "caancala-qaree socho'aa" id = "mana" > ... </div>
  10. <div class = "caancala-qaaqa" id = "profaayilii" > ... </div>
  11. <div class = "caancala-qaaqa" id = "ergaawwan" > ... </div>
  12. <div class = "caancala-qaaqa" id = "qindaa'inoota" > ... </div>
  13. </div> jechuun ni danda’ama
  14.  
  15. <iskiriiptii>
  16. $ ( faankishinii () { .
  17. $ ( '#Tab koo a:dhuma' ). tab ( 'agarsiisi' );
  18. }) .
  19. </script> jedhu

Taateewwan

Taatee Ibsa
agarsiisuu Taatee kun agarsiisa caancalaa irratti dhukaasa, garuu osoo caancala haaraan hin agarsiifamiin dura. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf event.targetfi fayyadami .event.relatedTarget
agarsiifameera Taatee kun agarsiisa caancala irratti erga caancala agarsiifamee booda dhukaasa. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf event.targetfi fayyadami .event.relatedTarget
  1. $ ( 'a[deetaa-jijjiirraa="caancala"]' ). on ( 'agarsiifame' , faankishinii ( e ) { .
  2. e . target // caancala hojiirra oole
  3. e . relatedTarget // caancala duraanii
  4. }) .

Fakkeenyaaf

JQuery.tipsy plugin gaarii Jason Frame barreesse irraa kaka'umsa argate; Gorsi meeshaa gosa fooyya'eedha, kan fakkiiwwan irratti hin hirkanne, sochiiwwaniif CSS3 fayyadamu, fi kuusaa mata duree naannootiif deetaa-amaloota.

Sababa raawwii hojiif, tooltip fi popover data-apis opt in ta'u, jechuunis ofii keetii jalqabuu qabda .

Gorsa meeshaalee ilaaluuf hidhannoowwan armaan gadii irratti harka kaa'i:

Paantii cimaa sadarkaa itti aanu keffiyeh tarii waa'ee isaanii hin dhageenye. Booth suuraa qeensa raw denim letterpress vegan ergamaa boorsaa stumptown. Qonnaa irraa gara minjaalaatti seitan, mcsweeney's fixie itti fufiinsa qabu quinoa 8-bit uffata ameerikaa terry richardson vinyl chambray qabu . Qeensa stumptown, kaardii banh mi lomo qilleensaa. Tofu biodiesel williamsburg marfa, afur loko mcsweeney's qulqulleessuu vegan chambray. A really ironic artisan whatever keytar , scenester qonnaa irraa gara minjaala banksy Austin twitter qabachuu freegan cred raw denim buna ka'umsa tokkoo vaayirasii.

Kallattii afur

Gorsa meeshaalee gareewwan galtee keessatti

Yeroo gorsa meeshaalee fi popovers gareewwan galtee Bootstrap waliin fayyadamtu, containermiidhaa hin barbaachifne irraa of eeguuf filannoo (armaan gaditti galmaa'e) saaguu qabda.


Fayyadama

Gorsa meeshaa karaa JaavaScript kakaasi:

  1. $ ( '#fakkeenya' ). gorsa meeshaa ( filannoowwan ) .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-animation="".

Maqaa akaakuu durtii ibsa
sochii qaamaa (animation). boolee dhugaa ce'umsa css fade gara tooltip irratti hojii irra oolchi
html boolee soba html gara tooltip keessa galchi. Yoo soba ta'e, textmala jquery qabiyyee gara dom galchuuf fayyadama. Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami.
ramaddii tarree | faayidaa 'gubbaa' akkaataa itti tooltip itti dhaabdan - gubbaa | jalaa | bitaa | sirrii
filannoodha hidhaa soba Yoo filataan kenname, wantoonni gorsa meeshaa galmoota ifteessamaniif ni kennamu.
mata-duree tarree | faayidaa '' . gatii mata duree durtii yoo mallattoon `mata duree` hin jirre
dammaqsuu hidhaa 'xiyyeeffannoo hover' jedhu. akkaataa tooltip itti kakaafamu - | cuqaasi hover | xiyyeeffannoo | kan harkaanii. Hubadhu ati case pass trigger mutliple, iddoon adda baafame, gosoota trigger.
boodatti hafuu lakkoofsa | meeshaa 0.

harkifannaa gorsa meeshaa agarsiisuu fi dhoksuu (ms) - gosa kaka'umsa harkaa irratti hin hojjetu

Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola

Caasaan wantaa: 1.1.delay: { show: 500, hide: 100 }

qabduu tarree | soba soba

Gorsa meeshaa gara qaama murtaa'etti dabalatacontainer: 'body'

Mataa ol qaba! Filannoowwan gorsa meeshaalee dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama.

Markup gochuu

  1. <a href = "#" data-toggle = "gorsa meeshaa" title = "gorsa meeshaa jalqabaa" > narra kaa'i </a>

Malawwan

$().gorsa meeshaa(filannoo) .

Qabduu gorsa meeshaa walitti qabama elementii irratti maxxansi.

.tooltip('agarsiisi') .

Gorsa meeshaa elementii tokkoo mul'isa.

  1. $ ( '#elementii' ). tooltip ( 'agarsiisi' ) .

.tooltip('dhoksi') .

Gorsa meeshaa elementii dhoksa.

  1. $ ( '#elementii' ). tooltip ( 'dhoksuu' ) .

.tooltip('jijjiirraa') .

Gorsa meeshaa qaama tokkoo jijjiira.

  1. $ ( '#elementii' ). gorsa meeshaa ( 'toggle' ) .

.tooltip('balleessuu') .

Gorsa meeshaa elementii tokkoo dhoksuu fi balleessa.

  1. $ ( '#elementii' ). tooltip ( 'balleessuu' ) .

Fakkeenyaaf

Qabiyyee xixiqqoo, akkuma kanneen iPad irratti argaman, odeeffannoo lammaffaa mana jireenyaaf elementii kamiyyuu irratti dabali. Poopover kakaasuuf button irratti harka kaa'i. Tooltip akka hammatamu barbaada .

Poopover kan hin jijjiiramne

Filannoon afur ni jiru: gubbaa, mirgaa, jalaa, fi bitaa qindaa'e.

Popover gubbaa

Sed posuere consectetur est kan jedhamu kan lobortis irratti argamu. Eeniyaan eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha.

Popover sirriidha

Sed posuere consectetur est kan jedhamu kan lobortis irratti argamu. Eeniyaan eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha.

Popover jalatti

Sed posuere consectetur est kan jedhamu kan lobortis irratti argamu. Eeniyaan eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha.

Popover ni deeme

Sed posuere consectetur est kan jedhamu kan lobortis irratti argamu. Eeniyaan eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha.

Mallattoon akka popovers agarsiifamu hin jiru JaavaScript fi qabiyyee dataamaloota keessaa irraa hin uumamu.

Deemoo kallattiin

Kallattii afur


Fayyadama

Popovers karaa JavaScript dandeessisi:

  1. $ ( '#fakkeenya' ). popover ( filannoowwan ) .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-animation="".

Maqaa akaakuu durtii ibsa
sochii qaamaa (animation). boolee dhugaa ce'umsa css fade gara tooltip irratti hojii irra oolchi
html boolee soba html popover keessa galchi. Yoo soba ta'e, textmala jquery qabiyyee gara dom galchuuf fayyadama. Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami.
ramaddii tarree | faayidaa 'sirrii' akkaataa popover itti dhaabdan - gubbaa | jalaa | bitaa | sirrii
filannoodha hidhaa soba yoo filataan kenname, wantoonni gorsa meeshaa galmoota ifteessamaniif ni kennamu
dammaqsuu hidhaa 'cuqaasaa'. akkaataa popover itti kaka'u - | cuqaasaa hover | xiyyeeffannoo | kan harkaanii
mata-duree tarree | faayidaa '' . gatii mata duree durtii yoo amalli `mata duree` hin jirre
qabiyyee tarree | faayidaa '' . gatii qabiyyee durtii yoo amalli `data-content` hin jirre
boodatti hafuu lakkoofsa | meeshaa 0.

popover agarsiisuu fi dhoksuu harkifachuu (ms) - gosa kaka'umsa harkaa irratti hin hojjetu

Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola

Caasaan wantaa: 1.1.delay: { show: 500, hide: 100 }

qabduu tarree | soba soba

Poopover elementii murtaa'e tokkotti dabalatacontainer: 'body'

Mataa ol qaba! Filannoon popovers dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama.

Markup gochuu

Sababa raawwii hojiif, Tooltip fi Popover data-apis opt in. Yoo isaan fayyadamuu barbaadde filannoo filannoo qofa ifteessi.

Malawwan

$().popover(filannoowwan) .

Kuusaa elementii tokkoof popovers jalqaba.

.popover('agarsiisi') .

Elementiiwwan popover tokko mul'isa.

  1. $ ( '#elementii' ). popover ( 'agarsiisi' ) .

.popover('dhoksuu') .

Elementii popover tokko dhoksa.

  1. $ ( '#elementii' ). popover ( 'dhoksuu' ) .

.popover('jijjiirraa') .

Toggles an elementoota popover.

  1. $ ( '#elementii' ). popover ( 'jijjiirraa' ) .

.popover('balleessuu') .

Poopover elementii tokkoo dhoksee balleessa.

  1. $ ( '#elementii' ). popover ( 'balleessuu' ) .

Fakkeenya akeekkachiisa

Ergaawwan akeekkachiisaa hunda irratti dalagaa ari'uu ifteessaa kanaan dabali.

Qulqulluu guacamole! Best check yo self, ati baayyee gaarii hin fakkaattu.

Yaa snap! Dogoggora argatte!

Kanaa fi sana jijjiirii irra deebi'ii yaali. Duis mollis, est non commodo luctus, nisi erat ligulaa porttitor, eget lacinia odio sem nec elit. Cras mattis consectetur purus taa'uu amet fermentum jedhamuun beekama.

Tarkaanfii kana fudhadhaa Yookiin kana godhi


Fayyadama

Karaa JaavaScript akeekkachiisa kuffisuu dandeessisi:

  1. $ ( ".akeekkachiisa" ). akeekkachiisa () .

Markup gochuu

data-dismiss="alert"Ofumaan dalagaa cufiinsa akeekkachiisaa kennuudhaaf button cufuu kee irratti dabaluu qofa .

  1. <a class = "cufi" data-dismiss = "akeekkachiisa" href = "#" > &yeroo; </a> jechuun ni danda’ama

Malawwan

$().akeekkachiisa() .

Akeekkachiisa hunda dalagaa dhiyeenyaatiin marsa. Akeekkachiisni kee yeroo cufamu akka socho'u gochuuf, isaan duraan gita .fadefi isaan irratti hojiirra oole qabaachuu isaanii mirkaneessi..in

.alert('cufi') .

Akeekkachiisa tokko cufa.

  1. $ ( ".akeekkachiisa" ). akeekkachiisa ( 'cufi' ) .

Taateewwan

Gitni akeekkachiisaa Bootstrap taateewwan muraasa gara dalagaa akeekkachiisaatti hooking gochuuf saaxila.

Taatee Ibsa
cufuu Taatee kun yeroo closemala fakkeenyaa waamamu battalumatti dhukaasa.
cufamee jira Taatee kun yeroo akeekkachiisni cufame ni dhukaafama (ce'umsa css xumuramuu eega).
  1. $ ( '#akeekkachiisa-koo' ). bind ( 'cufame' , faankishinii () { .
  2. // waan tokko hojjedhu...
  3. }) .

Fakkeenya fayyadama

Buttons waliin caalaatti hojjedhu. Qabduu too'annoo haalata ykn gareewwan qaree qaamolee dabalataa akka barruulee uumi.

Stateful

data-loading-text="Loading..."Haalata fe'iinsaa qaree irratti fayyadamuuf dabali .

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Fa'aa jira..." > Haala fe'amaa jira </button>

Tokkicha toggle

data-toggle="button"Qabduu tokko irratti toggling activate gochuuf dabali .

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Jijjiirraa Tokko </button>

Sanduuqa filannoo

data-toggle="buttons-checkbox"Jijjiirraa akkaataa sanduuqa filannoo btn-group irratti dabali .

  1. <div class = "btn-garee" deetaa-jijjiirraa = "buttooni-sanduuqa filannoo" >
  2. < gosa qaree = "qaree" gita = "btn btn-primary" > Bitaa </button>
  3. < gosa qaree = "qaree" gita = "btn btn-primary" > Giddugaleessa </button>
  4. < gosa qaree = "qaree" gita = "btn btn-primary" > Mirgaa </button>
  5. </div> jechuun ni danda’ama

Raadiyoo

data-toggle="buttons-radio"Jijjiirraa akkaataa raadiyoo btn-group irratti dabali .

  1. <div class = "btn-garee" deetaa-jijjiirraa = "buttons-radio" >
  2. < gosa qaree = "qaree" gita = "btn btn-primary" > Bitaa </button>
  3. < gosa qaree = "qaree" gita = "btn btn-primary" > Giddugaleessa </button>
  4. < gosa qaree = "qaree" gita = "btn btn-primary" > Mirgaa </button>
  5. </div> jechuun ni danda’ama

Fayyadama

Qabduu karaa JaavaScript dandeessisi:

  1. $ ( '.nav-tabs' ). buttooni () .

Markup gochuu

Amaloonni deetaa ifteessaa qareedhaaf murteessaadha. Gosoota mallattoo adda addaatiif koodii fakkeenyaa armaan gadii ilaali.

Filannoowwan

Homaa

Malawwan

$().button('jijjiirraa') .

Haala dhiibaa jijjiira. Qabduu bifa akka inni hojiirra oole kenna.

Mataa ol qaba! data-toggleAmala fayyadamuun ofumaan jijjiiruu qaree dandeessisuun dandeessa .
  1. < gosa qaree = "button" class = "btn" data-toggle = "button" > ... </button>

$().button('fe'amaa jira') .

Haalata qaree gara fe'amuutti saaga - qaree hanqisa fi barruu gara barruu fe'uutti jijjiira. Barruu fe'uun qaama qaree irratti amaloota deetaa fayyadamuun ibsamuu qaba data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "wantoota fe'uu..." > ... </button>
Mataa ol qaba! Firefox haala hanqifame fe'iinsa fuula hunda keessatti itti fufa . Kanaaf furmaanni autocomplete="off".

$().button('deebisaa') .

Haalata qaree deebisa - barruu gara barruu jalqabaatti jijjiira.

$().button(tarree) .

Haalata qaree deebisa - barruu gara haalata barruu deetaa ibsame kamiyyuutti jijjiira.

  1. < gosa qaree = "qaree" gita = "btn" deetaa-guutuu-barruu = "xumurame!" > ... </button> jedhu
  2. <iskiriiptii>
  3. $ ( '.btn' jedhamuun kan beekamu ). button ( 'guutuu' ) .
  4. </script> jedhu

Waa'ee

Akkaataa bu'uuraa fi deeggarsa jijjiiramaa qaamolee kuffamuu danda'an kan akka akkoordiyoonii fi navigeeshinii argadhu.

* Pluginiin Ce'umsaa akka hammatamu barbaada.

Fakkeenyaaf akkoordiyoon

Ijaarsa kuffisuu fayyadamuun, wiijetii akkaataa akkoordiyoon salphaa ijaarre:

Anim pariatur cliche reprehenderit, enim eiusmod jireenya olaanaa accusamus terry richardson ad squid. 3 lukkuu ji'a officia aute, non cupidat iskeetiiboordii dolor brunch. Konkolaataa nyaataa quinoa nesciunt laborum eiusmod. Brunch 3 lukkuu ji'a tempor, sunt aliqua simbirroo irra kaa'uu squid buna ka'umsa tokkoo nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hojii biiraa hojii harkaa wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur foon qalaa itti aanaa lomo. Leggings occaecat hojii harkaa biiraa qonnaa-gara-minjaala, raw denim aesthetic synth nesciunt tarii waa'ee isaanii hin dhageenye accusamus labore itti fufiinsa VHS.
Anim pariatur cliche reprehenderit, enim eiusmod jireenya olaanaa accusamus terry richardson ad squid. 3 lukkuu ji'a officia aute, non cupidat iskeetiiboordii dolor brunch. Konkolaataa nyaataa quinoa nesciunt laborum eiusmod. Brunch 3 lukkuu ji'a tempor, sunt aliqua simbirroo irra kaa'uu squid buna ka'umsa tokkoo nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hojii biiraa hojii harkaa wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur foon qalaa itti aanaa lomo. Leggings occaecat hojii harkaa biiraa qonnaa-gara-minjaala, raw denim aesthetic synth nesciunt tarii waa'ee isaanii hin dhageenye accusamus labore itti fufiinsa VHS.
Anim pariatur cliche reprehenderit, enim eiusmod jireenya olaanaa accusamus terry richardson ad squid. 3 lukkuu ji'a officia aute, non cupidat iskeetiiboordii dolor brunch. Konkolaataa nyaataa quinoa nesciunt laborum eiusmod. Brunch 3 lukkuu ji'a tempor, sunt aliqua simbirroo irra kaa'uu squid buna ka'umsa tokkoo nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hojii biiraa hojii harkaa wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur foon qalaa itti aanaa lomo. Leggings occaecat hojii harkaa biiraa qonnaa-gara-minjaala, raw denim aesthetic synth nesciunt tarii waa'ee isaanii hin dhageenye accusamus labore itti fufiinsa VHS.
  1. <div class = "akkoordiyoonii" id = "akkoordiyoonii2" >
  2. <div class = "garee-akkoordiyoonii" >
  3. <div class = "mata duree-akkoordiyoonii" >
  4. <a class = "accordion-toggle" data-toggle = "kufaatii" deetaa-warra = "#akkoordiyoonii2" href = "#collapseTokko" >
  5. Qabxii Garee Cufamuu Danda'u #1
  6. </a> jechuun ni danda’ama
  7. </div> jechuun ni danda’ama
  8. <div id = "collapseOne" class = "kufaatii-qaama-akkoordiyoonii keessa" >
  9. <div class = "akkoordiyoonii-keessaa" >
  10. Anim pariatur jechuun kan beekamu...
  11. </div> jechuun ni danda’ama
  12. </div> jechuun ni danda’ama
  13. </div> jechuun ni danda’ama
  14. <div class = "garee-akkoordiyoonii" >
  15. <div class = "mata duree-akkoordiyoonii" >
  16. <a class = "accordion-toggle" data-toggle = "kufaatii" deetaa-warra = "#akkoordiyoonii2" href = "#collapseLama" >
  17. Qabxii Garee Cufamuu Danda'u #2
  18. </a> jechuun ni danda’ama
  19. </div> jechuun ni danda’ama
  20. <div id = "collapseTwo" class = "kufaatii-qaama-akkoordiyoonii" >
  21. <div class = "akkoordiyoonii-keessaa" >
  22. Anim pariatur jechuun kan beekamu...
  23. </div> jechuun ni danda’ama
  24. </div> jechuun ni danda’ama
  25. </div> jechuun ni danda’ama
  26. </div> jechuun ni danda’ama
  27. ...

Akkasumas mallattoo accordion malee plugin fayyadamuu dandeessa. Qabduu babal'isuu fi kuffisuu elementii biraa akka jijjiiru godhi.

  1. < gosa qaree = "qaree" gita = "btn btn-balaa" deetaa-jijjiirraa = "kufaatii" deetaa-galma = "#demo" >
  2. salphaa kan cufamuu danda’u
  3. </button> jedhu
  4.  
  5. <div id = "demo" class = "kufaatii keessa" > ... </div>

Fayyadama

Karaa amaloota deetaa

To'annoo elementii cufamuu danda'u ofumaan ramaduuf elementii data-toggle="collapse"fi a qofa dabaluu qofa . data-targetAmalli data-targetfilannoo css kufaatii itti hojii irra oolchuuf fudhata. collapseGitaa gara qaama cufamuu danda'utti dabaluu kee mirkaneessi . Yoo durtii akka banamu barbaadde, gita dabalataa dabali in.

Bulchiinsa garee akkoordiyoon fakkaatu gara too'annoo kuffamuu danda'utti dabaluuf, amalli deetaa dabali data-parent="#selector". Kana hojiidhaan ilaaluuf demoo ilaalaa.

Karaa JaavaScript

Harkaan dandeessisi:

  1. $ ( ".kufaatii" ). kufaatii () .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-parent="".

Maqaa akaakuu durtii ibsa
warra filannoodha soba Yoo filannoo ta'e sana booda qaamolee cufamu hunduu warra ifteessame jalatti yeroo wanti cufamu kun agarsiifamu ni cufamu. (amala aadaa akkoordiyoonii wajjin wal fakkaata)
toggle jechuun ni danda'ama boolee dhugaa Waamicha irratti qaama kuffamuu danda'u jijjiira

Malawwan

.collapse(filannoowwan) .

Qabiyyee kee akka qaama cufamuu danda'utti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

  1. $ ( '#koocufamuu danda'a' ). kufaatii ({
  2. toggle : soba
  3. }) .

.collapse('jijjiirraa') .

Qaama kuffamuu danda'u gara agarsiifame ykn dhokfameetti jijjiira.

.collapse('agarsiisi') .

Qabeentaa kuffamuu danda'u agarsiisa.

.collapse('dhoksuu') .

Qabeentaa kuffamuu danda'u dhoksa.

Taateewwan

Gitni kufaatii Bootstrap taateewwan muraasa gara dalagaa kufaatiitti hooking gochuuf saaxila.

Taatee Ibsa
agarsiisuu Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiifameera Taatee kun kan dhukaafamu yeroo qaamni kufaatii fayyadamaaf akka mul'atu godhame (ce'umsa css xumuramuu eega).
dhoksuu Taatee kun yeroo hidemala waamame battalumatti dhukaafama.
dhokataa Taatee kun yeroo qaamni kufaatii fayyadamaa irraa dhokate ni dhukaafama (ce'umsa css xumuramuu eega).
  1. $ ( '#koocufamuu danda'a' ). on ( 'dhokataa' , faankishinii () { .
  2. // waan tokko hojjedhu...
  3. }) .

Fakkeenya

Galtee barruu unkaa kamiinuu saffisaan typeaheads bareedaa uumuuf plugin bu'uuraa, salphaatti dheerate.

  1. < gosa galtee = "barruu" data-provide = "barruu dursaa" >

autocomplete="off"Sajoo biraawzari durtii akka hin mul'anne tarree Bootstrap typeahead irratti saaguu barbaadda .


Fayyadama

Karaa amaloota deetaa

Qabeentaa dalagaa typeahead qabu galmeessisuuf amaloota deetaa dabali akka fakkeenya armaan olii irratti mul'atutti.

Karaa JaavaScript

Typeahead harkaan waami:

  1. $ ( '.dursa barreessaa' ). dursaa barreessi () .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-source="".

Maqaa akaakuu durtii ibsa
madda tarree, faankishinii [ ] . Madda deetaa irratti gaafatamuu qabu. Tarree dhangiiwwanii ykn faankishinii ta'uu danda'a. Faankishiniin murfii lama darba, querygatii dirree galtee keessaa fi processwaamicha deebi'uu. Faankishinichi madda deetaa kallattiin ykn wal hin simneen karaa processmurfii tokkicha waamicha deebi'uu deebisuudhaan walsimsiisaa fayyadamuu danda'a.
wantoota lakkoofsa 8. Lakkoofsa wantaalee tarree keessaa agarsiisuuf ol'aanaa.
minDheerinni isaa lakkoofsa 1. 1. Dheerinni arfii xiqqaa yaada ofumaan xumuruu kakaasuu dura barbaachisu
walsimsiisaa faayidaa qubee guddaa irratti miira hin qabne Mala gaaffiin wanta tokko waliin walsimuu isaa murteessuuf fayyadamu. Falmii tokko fudhata, itemkan gaaffii irratti qoramu. Gaaffii ammaa this.query. trueYoo gaaffiin walsimsiisa ta'e boolii deebisi .
sassaabuu faayidaa sirriitti walsimsiisuun,
qubee guddaa fi qubee irratti kan xiyyeeffatu,
qubee guddaa kan hin ilaalle
Mala bu'aa ofumaan xumuruuf itti fayyadamnu. Murtii tokko fudhata itemsfi bal'ina fakkeenya typeahead qaba. Gaaffii ammaa this.query.
updater kan jedhu faayidaa wanta filatame deebisa Mala wanta filatame deebisuuf fayyadamu. Falmii tokko fudhata, itemfi bal'ina fakkeenya typeahead qaba.
calaqqisiisaa faayidaa walsimsiisa durtii hunda calaqqisiisa Mala bu'aa ofumaan xumuruu calaqqisiisuuf itti fayyadamnu. Murtii tokko fudhata itemfi bal'ina fakkeenya typeahead qaba. html deebisuu qaba.

Malawwan

.typeahead(filannoowwan) .

Galtee dursaa barruu waliin jalqaba.

Fakkeenya

Subnavigation bitaa irratti argamu live demo kan affix plugin ti.


Fayyadama

Karaa amaloota deetaa

Amala affix salphaatti elementii kamiyyuu irratti dabaluuf, data-spy="affix"elementii basaasuu barbaaddu qofatti dabaluu qofa. Sana booda yoom akka pinning elementii tokkoo ibsuu fi cufuu ibsuuf ofseetota fayyadami.

  1. <div data-spy = "maxxansi" deetaa-ofseeti-gubbaa = "200" > ... </div>
Mataa ol qaba! Bakka elementii pinned fi amala warra isaa dhiyoo bulchuu qabda. Ejjennoo kan to'atamu affix, affix-top, fi affix-bottom. Qabiyyee dhangala'aa idilee fuula irraa waan balleessuuf yeroo maxxansichi seenu warra kufuu danda'an ilaaluu hin dagatin.

Karaa JaavaScript

Karaa JavaScript tiin affix plugin waami:

  1. $ ( '#navbar' ). maxxansi () .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-offset-top="200".

Maqaa akaakuu durtii ibsa
ofseeti jechuun ni danda’ama lakkoofsa | faankishinii | meeshaa 10. Piikseelota yeroo iddoo tarree shallagdu iskiriinii irraa ofseeti. Yoo lakkoofsi tokko kenname, ofseeti kallattii gubbaa fi bitaa lamaan isaaniitiin hojiirra oola. Kallattii tokkoof, ykn ofseetota addaa hedduu dhaggeeffachuuf, wanta tokko qofa kenni offset: { x: 10 }. Yeroo ofseeti daayinamiikiin kennuu barbaaddu faankishinii fayyadami (dizaayinoota deebii kennanii tokko tokkoof faayidaa qaba).