Qaamolee Bootstrap gara jireenyaatti fidi, pilaaginii haaraa, amala jQuery fi Ender wajjin hojjetaniin .
Modal plugin keenya super slim take on the traditional modal js plugin, of eeggannoo addaa gochuun hojii qullaa qofa kan nuti as twitter irratti barbaannu hammachuudhaan.
Buusuu
- $ ( '#moodaalii-koo' ). moodaalii ( filannoowwan ) .
Maqaa | akaakuu | durtii | ibsa |
---|---|---|---|
duubbee | boolean, tarree | soba | Qaama moodaalii-duubbee of keessaa qaba. "static" Yoo moodaaliin yeroo duubbee cuqaafamu akka cufamu hin barbaanne duubbee gara saagi . |
kiiboordii | boolee | soba | Yeroo furtuun miliquu dhiibamu moodaalii cufa |
agarsiisuu | boolee | soba | Jalqaba gitaa irratti moodaalii bana |
Fuula kee irratti moodaalota sarara javascript tokko osoo hin barreessiin salphaatti activate gochuu dandeessa. Qabeentaa tokkoof amaloota id elementii moodaalii wajjin walsimu qofa kenni data-controls-modal
, yeroo cuqaafamu, moodaalii kee ni jalqaba. Filannoowwan moodaalii dabaluudhaaf, akka amaloota deetaa akkasumas hammachuu qofa.
- <a class = "btn" deetaa-to'annoo-moodaalii = "moodaalii-koo" deetaa-duubbee = "istaatiksii" > Moodaalii Eebbi </a>
Hubachiisa Yoo moodaaliin kee akka keessaa fi ala socho'u barbaadde, elementii .fade
kee irratti gita tokko qofa dabali .modal
(kana gochaan ilaaluuf demoo ilaali).
Qabiyyee kee akka moodaaliitti hojii irra oolcha. Filannoo filannoo tokko fudhata object
.
- $ ( '#moodaalii-koo' ). moodaalii ({
- keyboard : dhugaadha
- }) .
Harkaan moodaalii tokko jijjiira.
- $ ( '#moodaalii-koo' ). modal ( 'jijjiirraa' ) .
Harkaan moodaalii tokko bana.
- $ ( '#moodaalii-koo' ). modal ( 'agarsiisi' ) .
Harkaan moodaalii tokko dhoksa.
- $ ( '#moodaalii-koo' ). modal ( 'dhoksuu' ) .
Fakkeenya gita moodaalii elementoota deebisa.
- $ ( '#moodaalii-koo' ). moodaalii ( dhugaa ) .
Hubachiisa Yookiin immoo, kun $().data('modal')
.
Gitni moodaalii Bootstrap taateewwan muraasa gara dalagaa moodaaliitti hooking gochuuf saaxila.
Taatee | Ibsa |
---|---|
agarsiisuu | Taatee kun yeroo show mala 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 hide mala fakkeenyaa waamame battalumatti dhukaafama. |
dhokataa | Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaa irraa dhokfamuu xumuredha (ce'umsa css xumuramuu eega). |
- $ ( '#moodaalii-koo' ). bind ( 'dhokfame' , faankishinii () { .
- // waan tokko hojjedhu ...
- }) .
Ijaarsi kun walqunnamtii gadi bu'aa gara barruu gubbaa bootstrap ykn qajeelchawwan caancalaatti dabaluudhaaf.
Buusuu
- $ ( '#barruu gubbaa' ). gadi bu'aa () .
Dalagaa gadi bu'aa saffisaan qaama nav kamiyyuutti dabaluuf, data-dropdown
amaloota fayyadami. Bootstrap sirrii ta'e kamiyyuu ofumaan ni hojjeta.
- <ul gita = "caancalawwan" >
- <li class = "socho'aa" ><a href = "#" > Mana </a></li>
- <li class = "gadi bu'aa" deetaa-gadi bu'aa = "gara bu'aa" >
- <a href = "#" class = "gadi-bu'aa-jijjiirraa" > Gadi -bu'aa </a>
- <ul class = "tarree-gadi-bu'aa" >
- <li><a href = "#" > Hidhaa lammaffaa </a></li>
- <li><a href = "#" > Waan biraa asitti </a></li>
- <li gita = "qoqqoodduu" </li>
- <li><a href = "#" > Hidhaa biraa </a></li>
- </ul> jechuun ni danda’ama
- </li> jechuun ni danda’ama
- </ul> jechuun ni danda’ama
Hubachiisa Yoo ui kee gadi bu'iinsa hedduu qabaate, data-dropdown
amalli gara qaama qabduu caalaatti barbaachisaa ta'etti dabaluu yaadaa akka .tabs
ykn .topbar
.
Api sagantaa kan menu'wwan barruu gubbaa ykn navigeeshinii caancala kennameef hojiitti hiikuuf.
Ijaarsi kun walqunnamtii scrollspy (auto updating nav) gara barruu gubbaa bootstrap tti dabaluudhaaf.
Buusuu
- $ ( '#barruu gubbaa' ). scrollBasaasaa () .
Amala scrollspy salphaatti nav kee irratti dabaluuf, data-scrollspy
amalli gara .topbar
.
- <div class = "barruu gubbaa" data-scrollspy = "scrollspy" > ... </div>
Ofiin qaree navigeeshinii fayyadamtoonni bakka garagalchaatiin ni kakaasa.
- $ ( 'qaama > .barruu gubbaa' ). scrollBasaasaa () .
Hubachiisa Mallattoolee anchor Topbar galmoota id furmaata argachuu danda'an qabaachuu qabu. Fakkeenyaaf, a <a href="#home">home</a>
waan dom keessa jiru akka <div id="home"></div>
.
Scrollspy'n qaree nav fi qindeessoota kutaa raawwiif kaa'a. Yoo kaachota kana haaromsuu barbaadde (yoo qabiyyee daayinamikii qabaatte ta'uu hin oolu) mala haaromsaa kana qofa waami. Yoo amaloota deetaa fayyadamtee scrollspy kee ibsuuf, qaama irratti haaromsuu qofa waami.
- $ ( 'qaama' ). scrollSpy ( 'haaromsaa' ) .
Fuula kana irratti navigeeshinii barruu gubbaa ilaali.
Ijaarsi kun saffisaa, daayinamikii tab fi dalagaa kiniinii dabalata.
Buusuu
- $ ( '.caancalawwan' ). caancalaa () .
Tab ykn pill navigation tokko osoo javascript tokkollee hin barreessiin salphaatti a data-tabs
ykn data-pills
attribute isaaniif kennuudhaan activate gochuu dandeessu.
- <ul class = "caancalaa" deetaa-caancalaa = "caancala" > ... </ul>
Qabduu kennameef dalagaa caancalaa fi kiniinii hojii irra oolcha. Hidhamtoonni caancalaa id'wwan galmee keessatti wabii ta'uu qabu.
- <ul gita = "caancalawwan" >
- <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-kiniinii" >
- <div gita = "socho'aa" id = "mana" > ... </div>
- <div id = "paayilii" > ... </div>
- <div id = "ergaawwan" > ... </div>
- <div id = "qindaa'inoota" > ... </div>
- </div> jechuun ni danda’ama
- <iskiriiptii>
- $ ( faankishinii () { .
- $ ( '.caancalawwan' ). caancalaa () .
- }) .
- </script> jedhu
Taatee | Ibsa |
---|---|
jijjiiruu | Taatee kun jijjiirama caancala irratti dhukaasa. Caancala socho'aa fi caancala socho'aa duraanii akkaataa walduraa duubaan xiyyeeffachuuf event.target fi fayyadami .event.relatedTarget |
- $ ( '#.caancalawwan' ). bind ( 'jijjiirama' , faankishinii ( e ) { .
- e . target // caancala hojiirra oole
- e . relatedTarget // caancala duraanii
- }) .
Raw denim tarii waa'ee isaanii hin dhageenye jean shorts Austin. Nesciunt tofu stumptown aliqua, qulqullina gooftaa retro synth. Mustache cliche yeroodhaaf, williamsburg carles vegan helvetica jedhamuun beekama. 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.
Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.
Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Plugin jQuery.tipsy isa gaarii Jason Frame barreesse irratti hundaa'uun; twipsy version fooyya'eedha, kan fakkiiwwan irratti hin hirkanne, sochiiwwaniif css3, fi kuusaa mata dureedhaaf data-attributes fayyadama!
Buusuu
- $ ( '#fakkeenya' ). twipsy ( filannoowwan ) .
Maqaa | akaakuu | durtii | ibsa |
---|---|---|---|
animate | boolean | true | apply a css fade transition to the tooltip |
delayIn | number | 0 | delay before showing tooltip (ms) |
delayOut | number | 0 | delay before hiding tooltip (ms) |
fallback | string | '' | text to use when no tooltip title is present |
placement | string | 'above' | how to position the tooltip - above | below | left | right |
html | boolean | false | allows html content within tooltip |
live | boolean | false | use event delegation instead of individual event handlers |
offset | number | 0 | pixel offset of tooltip from target element |
title | string, function | 'title' | attribute or method for retrieving title text |
trigger | string | 'hover' | how tooltip is triggered - hover | focus | manual |
template | string | [default markup] | The html template used for rendering a twipsy. |
Notice Individual twipsy instance options can alternatively be specified through the use of data attributes.
- <a href="#" data-placement="below" rel='twipsy' title='Some title text'>text</a>
Attaches a twipsy handler to an element collection.
Reveals an elements twipsy.
- $('#element').twipsy('show')
Hides an elements twipsy.
- $('#element').twipsy('hide')
Returns an elements twipsy class instance.
- $('#element').twipsy(true)
Notice Alternatively, this can be retrieved with $().data('twipsy')
.
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
The popover plugin provides a simple interface for adding popovers to your application. It extends the bootstrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project!
Notice You must include the bootstrap-twipsy.js file before bootstrap-popover.js.
Download
- $('#example').popover(options)
Name | type | default | description |
---|---|---|---|
animate | boolean | true | apply a css fade transition to the tooltip |
delayIn | number | 0 | delay before showing tooltip (ms) |
delayOut | number | 0 | delay before hiding tooltip (ms) |
fallback | string | '' | text to use when no tooltip title is present |
placement | string | 'right' | how to position the tooltip - above | below | left | right |
html | boolean | false | allows html content within tooltip |
live | boolean | false | use event delegation instead of individual event handlers |
offset | number | 0 | pixel offset of tooltip from target element |
title | string, function | 'title' | attribute or method for retrieving title text |
content | string, function | 'data-content' | a string or method for retrieving content text. if none are provided, content will be sourced from a data-content attribute. |
trigger | string | 'hover' | how tooltip is triggered - hover | focus | manual |
template | string | [default markup] | The html template used for rendering a popover. |
Notice Individual popover instance options can alternatively be specified through the use of data attributes.
- <a data-placement="below" href="#" class="btn danger" rel="popover">text</a>
Initializes popovers for an element collection.
Reveals an elements popover.
- $('#element').popover('show')
Hides an elements popover.
- $('#element').popover('hide')
The alert plugin is a super tiny class for adding close functionality to alerts.
Download
- $(".alert-message").alert()
Just add a data-alert
attribute to your alert messages to automatically give them close functionality.
Name | type | default | description |
---|---|---|---|
selector | string | '.close' | What selector to target for closing an alert. |
Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade
and .in
class already applied to them.
Closes an alert.
- $(".alert-message").alert('close')