Nia Modala kromaĵo estas tre svelta aldono de la tradicia modala js-kromaĵo, aparte zorgante inkluzivi nur la nudan funkcion, kiun ni postulas ĉi tie ĉe tvitero.
Elŝutu
- $ ( '#mia-modala' ). modalo ( opcioj )
Nomo | tajpu | defaŭlte | Priskribo |
---|---|---|---|
fono | bulea | malvera | Inkluzivas modalan fonan elementon |
klavaro | bulea | malvera | Fermas la modalon kiam eskapa klavo estas premata |
montri | bulea | malvera | Malfermas modalon sur klasinicialigo |
Vi povas facile aktivigi modalojn en via paĝo sen devi skribi unu linion de Javaskripto. Nur donu al elemento data-controls-modal
atributon, kiu respondas al modala elemento-id, kaj kiam oni klakas, ĝi lanĉos vian modalon. Por aldoni modalajn opciojn, simple inkluzivu ilin ankaŭ kiel datumajn atributojn.
- <a class = "btn" data-controls-modal = "mia-modala" data-backdrop = "vera" > Lanĉi Modalon </a>
Rimarko Se vi volas, ke via modalo animu en kaj eksteren, simple aldonu .fade
klason al via .modal
elemento (referu al la demo por vidi ĉi tion en ago).
Aktivigas vian enhavon kiel modalon. Akceptas laŭvolajn opciojn object
.
- $ ( '#mia-modala' ). modalo ({
- closeOnEscape : vera
- })
Mane ŝanĝas modalon.
- $ ( '#mia-modala' ). modala ( 'ŝalti' )
Mane malfermas modalon.
- $ ( '#mia-modala' ). modalo ( 'montri' )
Mane kaŝas modalon.
- $ ( '#mia-modala' ). modalo ( 'kaŝi' )
Liveras elementon de modala klaso.
- $ ( '#mia-modala' ). modala ( vera )
Rimarko Alternative, ĉi tio povas esti prenita per $().data('modal')
.
La modala klaso de Bootstrap elmontras kelkajn eventojn por hoki al modala funkcieco.
Evento | Priskribo |
---|---|
montri | Ĉi tiu evento tuj ekfunkciigas kiam la show ekzempla metodo estas vokita. |
montrata | Ĉi tiu evento estas lanĉita kiam la modalo fariĝis videbla por la uzanto (atendos ke css-transiroj finiĝos). |
kaŝi | Ĉi tiu evento estas lanĉita tuj kiam la hide ekzempla metodo estas vokita. |
kaŝita | Ĉi tiu evento estas pafita kiam la modalo finiĝis kaŝita de la uzanto (atendos ke css-transiroj finiĝos). |
- $ ( '#mia-modala' ). bind ( 'kaŝita' , funkcio () {
- // fari ion ...
- })
Ĉi tiu kromaĵo estas por aldoni falmeninteragon al la botostrap supra baro aŭ klapetaj navigacioj.
Elŝutu
- $ ( '#supra baro' ). falmenuo ()
Por rapide aldoni falmenuan funkcion al iu ajn nav-elemento, uzu la data-dropdown
atributon. Ajna valida bootstrap falmenuo aŭtomate aktiviĝos.
- <ul class = "langetoj" >
- <li class = "active" ><a href = "#" > Hejmo </a></li>
- <li class = "dropdown" data-dropdown = "menumenumo" >
- <a href = "#" class = "dropdown-toggle" > Dropdown </a>
- <ul class = "falmenuo" >
- <li><a href = "#" > Malĉefa ligilo </a></li>
- <li><a href = "#" > Io alia ĉi tie </a></li>
- <li class = "dividanto" ></li>
- <li><a href = "#" > Alia ligilo </a></li>
- </ul>
- </li>
- </ul>
Rimarku Se via ui havas plurajn falmenuojn, konsideru aldoni la data-dropdown
atributon al pli signifa ujo-elemento kiel .tabs
aŭ .topbar
.
Programa API por aktivigi menuojn por donita supra baro aŭ klapeta navigado.
Ĉi tiu kromaĵo estas por aldoni la scrollspy (aŭtomata ĝisdatigo de nav) interago al la bootstrap supra baro.
Elŝutu
- $ ( '#supra baro' ). falmenuo ()
Por facile aldoni scrollspy konduton al via nav, simple aldonu la data-scrollspy
atributon al la .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Aŭtomate aktivigas navigajn butonojn de la rulpozicio de uzantoj.
- $ ( 'korpo > .topbar' ). scrollSpy ()
Rimarku Topbar-ankro-etikedoj devas havi solveblajn id-celojn. Ekzemple, <a href="#home">home</a>
devas respondi al io en la dom kiel <div id="home"></div>
.
La scrollspy konservas navbutonojn kaj sekciajn koordinatojn por agado. Se vi bezonas ĝisdatigi ĉi tiun kaŝmemoron (verŝajne se vi havas dinamikan enhavon) simple voku ĉi tiun refreŝigan metodon. Se vi uzis la datuman atributon por difini vian scrollspy, simple voku refresh sur la korpo.
- $ ( 'korpo' ). scrollspy ( 'refreŝigi' )
Kontrolu la supran baran navigadon en ĉi tiu paĝo.
Ĉi tiu kromaĵo aldonas rapidan, dinamikan langeton kaj pilolfunkciecon.
Elŝutu
- $ ( '.tabs' ). langetoj ()
Vi povas aktivigi langeton aŭ pilolan navigadon sen verki javaskripton simple donante al ili atributon data-tabs
aŭ .data-pills
- <ul class = "langetoj" data-tabs = "langetoj" > ... </ul>
Aktivigas langeton kaj pilolfunkcion por donita ujo. Tab-ligiloj devus referenci id-ojn en la dokumento.
- <ul class = "langetoj" >
- <li class = "aktiva" ><a href = "#home" > Hejmo </a></li>
- <li><a href = "#profile" > Profilo </a></li>
- <li><a href = "#messages" > Mesaĝoj </a></li>
- <li><a href = "#settings" > Agordoj </a></li>
- </ul>
- <div class = "pilol-enhavo" >
- <div class = "aktiva" id = "hejmo" > ... </div>
- <div id = "profilo" > ... </div>
- <div id = "mesaĝoj" > ... </div>
- <div id = "agordoj" > ... </div>
- </ul>
- <skripto>
- $ ( funkcio () {
- $ ( '.tabs' ). langetoj ()
- })
- </script>
Kruda denim vi verŝajne ne aŭdis pri ili jean shorts Austin. Nesciunt tofu stumptown aliqua, retro sintezila majstro purigi. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby svetero eu banh mi, qui irure terry richardson eks kalmaro. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerika vesto, butcher 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.
Bazita sur la bonega jQuery.tipsy kromaĵo skribita de Jason Frame; twipsy estas ĝisdatigita versio, kiu ne dependas de bildoj, uzas css3 por kuraĝigoj kaj datumoj-atributoj por titola konservado!
Elŝutu
- $ ( '#ekzemplo' ). twipsy ( opcioj )
Nomo | tajpu | defaŭlte | Priskribo |
---|---|---|---|
animi | bulea | vera | apliki css fade transiro al la konsileto |
delayIn | nombro | 0 | prokrasto antaŭ montri konsileton (ms) |
delayOut | nombro | 0 | prokrasto antaŭ kaŝi konsileton (ms) |
falo | ŝnuro | '' | teksto por uzi kiam neniu konsila titolo ĉeestas |
lokigo | ŝnuro | 'supre' | kiel poziciigi la konsileton - supre | malsupre | maldekstra | ĝuste |
html | bulea | malvera | permesas HTML-enhavon ene de konsileto |
vivi | bulea | malvera | uzu eventan delegacion anstatau individuaj eventaj pritraktiloj |
ofseto | nombro | 0 | piksela ofseto de konsileto de cela elemento |
titolo | ŝnuro | funkcio | 'titolo' | atributo aŭ metodo por retrovi titoltekston |
ellasilon | ŝnuro | 'ŝvebi' | kiel la konsileto estas ekigita - ŝvebi | fokuso | manlibro |
Alligas twipsy-traktilon al elementkolekto.
Rivelas elementojn twipsy.
- $ ( '#elemento' ). twipsy ( 'montri' )
Kaŝas elementojn twipsy.
- $ ( '#elemento' ). twipsy ( 'kaŝi' )
Liveras ekzemplon de la klaso twipsy de elementoj.
- $ ( '#elemento' ). twipsy ( vera )
Rimarko Alternative, ĉi tio povas esti prenita per $().data('twipsy')
.
Streĉaj pantalonoj sekva nivelo keffiyeh vi verŝajne ne aŭdis pri ili. Fotobudo barbo kruda denim tipografio vegana mesaĝisto sako stumptown. Farm-al-table seitan, mcsweeney's fixie daŭrigebla kvinoa 8-bita amerika vestaĵo havas terry richardson vinilĉambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, kvar loko mcsweeney's pure vegan chambray. Vere ironia metiisto whatever keytar, scenester farm-to-table banksy Austin twitter tenilo freegan cred kruda denim unu-devena kafo viral.
La popover kromaĵo provizas simplan interfacon por aldoni popovers al via aplikaĵo. Ĝi etendas la kromaĵon boostrap-twipsy.js , do nepre prenu ankaŭ tiun dosieron kiam vi inkluzivas popovers en via projekto!
Elŝutu
- $ ( '#ekzemplo' ). popover ( opcioj )
Nomo | tajpu | defaŭlte | Priskribo |
---|---|---|---|
animi | bulea | vera | apliki css fade transiro al la konsileto |
delayIn | nombro | 0 | prokrasto antaŭ montri konsileton (ms) |
delayOut | nombro | 0 | prokrasto antaŭ kaŝi konsileton (ms) |
falo | ŝnuro | '' | teksto por uzi kiam neniu konsila titolo ĉeestas |
lokigo | ŝnuro | 'ĝuste' | kiel poziciigi la konsileton - supre | malsupre | maldekstra | ĝuste |
html | bulea | malvera | permesas HTML-enhavon ene de konsileto |
vivi | bulea | malvera | uzu eventan delegacion anstatau individuaj eventaj pritraktiloj |
ofseto | nombro | 0 | piksela ofseto de konsileto de cela elemento |
titolo | ŝnuro | funkcio | 'titolo' | atributo aŭ metodo por retrovi titoltekston |
enhavo | ŝnuro | funkcio | 'datumenhavo' | atributo aŭ metodo por retrovi enhavan tekston |
ellasilon | ŝnuro | 'ŝvebi' | kiel la konsileto estas ekigita - ŝvebi | fokuso | manlibro |
Inicializas popovers por elemento kolekto.
Rivelas elementojn popover.
- $ ( '#elemento' ). popover ( 'montri' )
Kaŝas elementojn popover.
- $ ( '#elemento' ). popover ( 'kaŝi' )
La atentiga kromaĵo estas tre eta klaso por aldoni proksimajn funkciojn al atentigoj.
Elŝutu
- $ ( ".alerto-mesaĝo" ). atentiga ()
Nur aldonu data-alert
atributon al viaj atentaj mesaĝoj por aŭtomate doni al ili proksiman funkcion.
Envolvas ĉiujn atentigojn kun proksima funkcio. Por ke viaj atentigoj animiĝu kiam fermite, certigu, ke ili havas la klason .fade
kaj .in
jam aplikita al ili.
Fermas alarmon.
- $ ( ".alerto-mesaĝo" ). atentigo ( 'fermi' )