Waa'ee moodaalee

Sirriitti, garuu jijjiiramaa, fudhadhu aadaa javascript moodaalii plugin dalagaa xiqqaa barbaachisu qofa qofaan fi durtii ismaartii.

Fakkeenya istaatiksii

Armaan gaditti moodaalii statically rendered ta'ee jira.

Deemoo kallattiin

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

Bootstrap-modal fayyadamuun

Modal karaa javascript bilbilaa:

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

Filannoowwan

Markup gochuu

Fuula keessan irratti moodaalota sarara javascript tokko osoo hin barreessiin salphaatti activate gochuu dandeessu. data-toggle="modal"Qabeentaa too'ataa a data-target="#foo"ykn kan id elementii moodaalii wajjin walsimu irratti qofa saagi href="#foo", yeroo cuqaafamu, moodaalii kee ni jalqaba.

Akkasumas, filannoowwan fakkeenya moodaalii kee irratti dabaluuf, akka amaloota deetaa dabalataatti qaama too'annoo ykn mallattoo moodaalii mataa isaa irratti qofa hammachiisi.

<a class = "btn" data-toggle = "moodaalii" href = "#Moodaalii koo" > Moodaala Eegaluu </a>    

<div class = "moodaalii" id = "Moodaalii koo" >  
  <div class = "mataduree-moodaalii" > 
    <button class = "cufi" data-dismiss = "moodaalii" > × </button>  
    <h3> Mata duree moodaalii </h3>
  </div> jechuun ni danda’ama
  <div class = "qaama-moodaalii" > 
    <p> Qaama gaarii tokko... </p>
  </div> jechuun ni danda’ama
  <div class = "moodaalii-miila" > 
    <a href = "#" gita = "btn" > Cufi </a>  
    <a href = "#" class = "btn btn-primary" > Jijjiiramoota saagi </a>  
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Malawwan

.modal(filannoowwan) .

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

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

.modal('jijjiirraa') .

Harkaan moodaalii tokko jijjiira.

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

.modal('agarsiisi') .

Harkaan moodaalii tokko bana.

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

.modal('dhoksuu') .

Harkaan moodaalii tokko dhoksa.

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

Taateewwan

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

$ ( '#Moodaalii koo' ). on ( 'dhokataa' , faankishinii () { .   
  // waan tokko hojjedhu...
}) .

Waa'ee gadi bu'aa

Bootstrap keessatti waan kamiyyuu jechuun ni danda'ama, plugin salphaa kanaan menuwwan gadi bu'an dabali. Bootstrap deeggarsa menu gadi bu'aa guutuu on navbar, tabs, fi kiniinii keessatti qaba.

Fakkeenyaaf

Navbar fi kiniinii armaan gadii keessaa dropdown nav links kan jedhu cuqaasuun dropdowns qorachuuf.

• Link yeroo hunda
• Gadi bu'aa
  • Action
  • Another action
  • Something else here
  • Separated link
• Gadi bu'aa 2.
  • Action
  • Another action
  • Something else here
  • Separated link
• Gadi bu'aa 3.
  • Action
  • Another action
  • Something else here
  • Separated link

Bootstrap-dropdown.js fayyadamuudhaan

Karaa javascript kanneen gadi bu'an bilbilaa:

$ ( '.gadi-bu'aa-jijjiirraa' ). gadi bu'aa () .

Markup gochuu

Dalagaa gadi bu'aa elementii kamiyyuu irratti saffisaan dabaluudhaaf qofa dabaluu data-toggle="dropdown"fi tarreen bootstrap sirrii ta'e kamiyyuu ofumaan ni hojjeta.

<ul class = "nav nav-kiniinii" > 
  <li class = "socho'aa" ><a href = "#" > Hidhaa idilee </a></li>  
  <li gita = "gadi bu'aa" id = "menu1" >  
    <a class = "gadi-bu'aa-jijjiirraa" deetaa-jijjiirraa = "gadi-bu'aa" href = "#menu1" >   
      Gadi bu'aa
      <b gita = "kaartaa" ></b> 
    </a> jechuun ni danda’ama
    <ul class = "tarree-gadi-bu'aa" > 
      <li><a href = "#" > Tarkaanfii </a></li> 
      <li><a href = "#" > Tarkaanfii biraa </a></li> 
      <li><a href = "#" > Waan biraa asitti </a></li> 
      <li gita = "qoqqoodduu" </li> 
      <li><a href = "#" > Hidhaa adda baafame </a></li> 
    </ul> jechuun ni danda’ama
  </li> jechuun ni danda’ama
  ...
</ul> jechuun ni danda’ama

URL'n akka hin mancaane gochuuf, data-targetbakka href="#".

<ul class = "nav nav-kiniinii" > 
  <li class = "gadi bu'aa" > 
    <a class = "gadi-bu'aa-jijjiirraa" deetaa-jijjiirraa = "gadi-bu'aa" deetaa-galma = "#" href = "karaa/gara/fuula.html" >    
      Gadi bu'aa
      <b gita = "kaartaa" ></b> 
    </a> jechuun ni danda’ama
    <ul class = "tarree-gadi-bu'aa" > 
      ...
    </ul> jechuun ni danda’ama
  </li> jechuun ni danda’ama
</ul> jechuun ni danda’ama

Malawwan

$().gadi bu'aa() .

Api sagantaa kan navbar kennameef ykn navigeeshinii caancalaaf menu'wwan hojiitti hiikuuf.

Ijaarsi ScrollSpy bakka tarree irratti hundaa'uun galmoota nav ofumaan fooyyessuuf.

Fakkeenya navbar kan scrollspy qabu

Naannoo armaan gadii kana garagalchiiti fooyya'iinsa navigeeshinii ilaalaa. Wantoonni xiqqaan gadi bu'an akkasumas ni calaqqisu. Yaali!

Bootstrap-scrollspy.js fayyadamuudhaan

Karaa javascript scrollspy bilbilaa:

$ ( '#navbar' ). barruulee () .

Markup gochuu

Amala scrollspy salphaatti gara navigeeshinii barruu gubbaa keetti dabaluuf, data-spy="scroll"elementii basaasuu barbaaddu qofatti dabali (baay'inaan kun qaama ta'a).

<body data-spy = "tarree" > ... </body>  

Malawwan

.scrollspy('haaraa') .

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

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

Filannoowwan

Taateewwan

Ijaarsi kun qabiyyee naannoo keessaa ce'uuf dalagaa caancala fi kiniinii saffisaa, daayinamikii dabalata.

Fakkeenya caancalaa

Qaaqa dhokataa gidduutti jijjiiruuf caancalaa armaan gadii cuqaasi, karaa sajoo tarree illee.

• Mana
• Ibsama
• Gadi bu'aa
  • @fat
  • @mdo

Bootstrap-tab.js fayyadamuudhaan

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

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

Caancaloota dhuunfaa karaa hedduudhaan hojii irra oolchuu dandeessa:

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

Markup gochuu

Salphaatti ifteessuudhaan data-toggle="tab"ykn data-toggle="pill"elementii tokko irratti osoo javascript tokkollee hin barreessiin tab ykn pill navigation activate gochuu dandeessa. Gitoota navfi gara caancalaatti dabaluudhaan akkaataa caancala bootstrap hojii irra oolcha.nav-tabsul

<ul gita = "nav nav-tabs" > 
  <li><a href = "#mana" deetaa-jijjiirraa = "caancala" > Mana </a></li>  
  <li><a href = "#profaayilii" deetaa-jijjiirraa = "caancala" > Profaayilii </a></li>  
  <li><a href = "#ergaawwan" data-toggle = "caancala" > Ergaawwan </a></li>  
  <li><a href = "#sajoo" data-toggle = "caancala" > Sajoo </a></li>  
</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

<ul class = "nav nav-tabs" id = "Tab koo" >  
  <li class = "socho'aa" ><a href = "#mana" > Mana </a></li>  
  <li><a href = "#profaayilii" > Profaayilii </a></li> 
  <li><a href = "#ergaawwan" > Ergaawwan </a></li> 
  <li><a href = "#sajoo" > Sajoo </a></li> 
</ul> jechuun ni danda’ama
 
<div class = "qabiyyee-caancala" > 
  <div class = "caancala-qaree socho'aa" id = "mana" > ... </div>  
  <div class = "caancala-qaaqa" id = "profaayilii" > ... </div>  
  <div class = "caancala-qaaqa" id = "ergaawwan" > ... </div>  
  <div class = "caancala-qaaqa" id = "qindaa'inoota" > ... </div>  
</div> jechuun ni danda’ama
 
<iskiriiptii>
  $ ( faankishinii () { .  
    $ ( '#Tab koo a:dhuma' ). tab ( 'agarsiisi' );
  }) .
</script> jedhu

Taateewwan

$ ( 'a[deetaa-jijjiirraa="caancala"]' ). on ( 'agarsiifame' , faankishinii ( e ) { .   
  e . target // caancala hojiirra oole
  e . relatedTarget // caancala duraanii
}) .

Waa'ee Gorsa Meeshaalee

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.

Fakkeenya fayyadama Tooltips

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

Bootstrap-tooltip.js fayyadamuudhaan

Gorsa meeshaa karaa javascript kakaasi:

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

Filannoowwan

Markup gochuu

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

<a href = "#" rel = "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.

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

.tooltip('dhoksi') .

Gorsa meeshaa elementii dhoksa.

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

.tooltip('jijjiirraa') .

Gorsa meeshaa qaama tokkoo jijjiira.

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

Waa'ee popovers

Qabiyyee xixiqqoo, akkuma kanneen iPad irratti argaman, odeeffannoo lammaffaa mana jireenyaaf elementii kamiyyuu irratti dabali.

* Tooltip akka hammatamu barbaada

Fakkeenya hover popover

Poopover kakaasuuf button irratti harka kaa'i.

Bootstrap-popover.js fayyadamuudhaan

Popovers karaa javascript dandeessisi:

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

Filannoowwan

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.

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

.popover('dhoksuu') .

Elementii popover tokko dhoksa.

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

.popover('jijjiirraa') .

Toggles an elementoota popover.

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

Waa'ee akeekkachiisaa

Ijaarsi akeekkachiisaa gita xiqqaa dalagaa dhiyoo akeekkachiisa irratti dabaluudha.

Fakkeenya akeekkachiisa

Ijaarsi akeekkachiisaa ergaawwan akeekkachiisaa idilee irratti hojjeta, fi ergaawwan ugguru.

Bootstrap-alert.js fayyadamuun

Akeekkachiisa karaa javascript kuffisuu dandeessisi:

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

Markup gochuu

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

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

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

Taateewwan

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

$ ( '#akeekkachiisa-koo' ). bind ( 'cufame' , faankishinii () { .   
  // waan tokko hojjedhu...
}) .

Waa'ee

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

Fakkeenya fayyadama

Haalawwanii fi jijjiirraadhaaf ifteessituuwwan qaree fayyadami.

Bootstrap-button.js fayyadamuun

Qabduu karaa javascript dandeessisi:

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

Markup gochuu

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

<!-- Qabduu tokko irratti jijjiirraa kakaasuuf data-toggle="button" dabali -->
<button class = "btn" data-toggle = "button" > Jijjiirraa Tokko </button>  
 
<!-- Jijjiirraa akkaataa sanduuqa filannoo btn-group irratti --> irratti data-toggle="buttons-checkbox" dabali
<div class = "btn-garee" deetaa-jijjiirraa = "buttooni-sanduuqa filannoo" >  
  <button class = "btn" > Bitaa </button> 
  <button class = "btn" > Giddugaleessa </button> 
  <button class = "btn" > Mirgaa </button> 
</div> jechuun ni danda’ama
 
<!-- Jijjiirraa akkaataa raadiyoo btn-group irratti data-toggle="buttons-radio" dabali -->
<div class = "btn-garee" deetaa-jijjiirraa = "buttons-radio" >  
  <button class = "btn" > Bitaa </button> 
  <button class = "btn" > Giddugaleessa </button> 
  <button class = "btn" > Mirgaa </button> 
</div> jechuun ni danda’ama

Malawwan

$().button('jijjiirraa') .

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

<button class = "btn" deetaa-jijjiirraa = "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.

<button class = "btn" data-loading-text = "wantoota fe'uu..." > ... </button>   

$().button('deebisaa') .

Haalata qaree deebisa - barruu gara barruu jalqabaatti jijjiira.

$().button(tarree) .

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

<button class = "btn" deetaa-guutuu-barruu = "xumurame!" > ... </button> jedhu   
<iskiriiptii>
  $ ( '.btn' jedhamuun kan beekamu ). button ( 'guutuu' ) .
</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:

Bootstrap-collapse.js fayyadamuudhaan

Karaa javascript dandeessisi:

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

Filannoowwan

Markup gochuu

To'annoo elementii kuffamuu 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.

<button class = "btn btn-balaa" deetaa-jijjiirraa = "kufaatii" deetaa-galma = "#demo" >   
  salphaa kan cufamuu danda’u
</button> jedhu
 
<div id = "demo" class = "kufaatii keessa" > ... </div>  

Malawwan

.collapse(filannoowwan) .

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

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

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

$ ( '#koocufamuu danda'a' ). on ( 'dhokataa' , faankishinii () { .   
  // waan tokko hojjedhu...
}) .

Waa'ee

Ijaarsa waliigalaa elementoota keessa marsaa. Naanna'aa gammachuu.

Fakkeenyaaf karooseelii

Agarsiisa islaayidii armaan gadii ilaalaa.

Asxaa Suuraa Xiqqaa Jalqabaa

Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

Asxaa Suuraa Xiqqaa Lammaffaa

Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

Sadaffaa Asxaa Suuraa Xiqqaa

Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

‹ . › .

Bootstrap-carousel.js fayyadamuudhaan

Karaa javascript bilbilaa:

$ ( '.kaarooseelii' ). kaarooseelii () .

Filannoowwan

Markup gochuu

Amaloonni deetaa konroolii duraa fi itti aanuuf fayyadamu. Fakkeenya mallattoo armaan gadii ilaalaa.

<div id = "Kaarooseelii koo" gita = "kaarooseelii" >  
  <!-- Meeshaalee kaarooseelii -->
  <div class = "kaarooseelii-keessaa" > 
    <div class = "wanta socho'aa" > ... </div> 
    <div gita = "wanta" > ... </div> 
    <div gita = "wanta" > ... </div> 
  </div> jechuun ni danda’ama
  <!-- Kaarooseelii nav -->
  <a class = "to'annoo-kaarooseelii bitaa" href = "#Kaarooseelii koo" data-slide = "duraa" > ‹ </a> jechuun ni danda’ama   
  <a class = "mirga to'annoo-karooseelii" href = "#Kaarooseelii koo" data-slide = "itti aanu" > › </a> jechuun ni danda’ama   
</div> jechuun ni danda’ama

Malawwan

.karooseelii(filannoo) .

Filannoo filannoo ta'een kaarooseelii jalqabsiisee objectmeeshaalee keessaa biskileetii jalqaba.

$ ( '.kaarooseelii' ). kaarooseelii ({
  gidduugaleessa : 2000 
}) .

.karooseelii('marsaa') .

Meeshaalee karooseelii keessaa bitaa gara mirgaatti marsaa.

.carousel('dhaabbachuu') .

Kaarooseeliin meeshaalee keessa akka hin biskileetii hin deemne ni dhaaba.

.karooseelii(lakkoofsa) .

Kaarooseelii gara furtuu murtaa'etti marsaa (0 irratti hundaa'e, tarree wajjin wal fakkaata).

.karooseelii('duraa') .

Gara wanta duraatti marsaa.

.karooseelii('itti aanu')

Gara wanta itti aanutti marsaa.

Taateewwan

Bootstrap's carousel class taateewwan lama hooking gara dalagaa carousel saaxila.

Waa'ee

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

Fakkeenya

Bu'aa barreessuu agarsiisuuf dirree armaan gadii keessatti barreessuu jalqabi.

Bootstrap-typeahead.js fayyadamuudhaan

Karaa javascript typeahead bilbili:

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

Filannoowwan

Markup gochuu

Qabeentaa dalagaa typeahead waliin galmeessisuuf amaloota deetaa dabali.

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

Malawwan

.typeahead(filannoowwan) .

Galtee dursaa barruu waliin jalqaba.